/* =============================================================
   Catalão Alimentos — Controle de Campo
   style.css | mobile-first
   Paleta: verde cerrado + amarelo milho sobre papel de expediente
   ============================================================= */

:root{
  --brand:#1B5E3A;
  --brand-700:#134329;
  --brand-900:#0C2A1B;
  --accent:#E4A11B;
  --accent-dark:#A87209;
  --paper:#E8EBE4;
  --card:#FFFFFF;
  --ink:#141A15;
  --muted:#657165;
  --line:#D5DACF;
  --danger:#A32C22;
  --info:#2E5E8C;

  --raio:10px;
  --sombra:0 1px 2px rgba(20,26,21,.06), 0 8px 24px -18px rgba(20,26,21,.5);
  --fonte-titulo:'Archivo', 'Segoe UI', system-ui, sans-serif;
  --fonte-texto:'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --fonte-dado:'IBM Plex Mono', ui-monospace, monospace;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ margin:0; padding:0; }

body{
  background:var(--paper);
  color:var(--ink);
  font-family:var(--fonte-texto);
  font-size:15px;
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3,h4,legend{ font-family:var(--fonte-titulo); letter-spacing:-.02em; margin:0; }

a{ color:var(--brand); }

code{ font-family:var(--fonte-dado); font-size:.86em; background:rgba(20,26,21,.07); padding:1px 5px; border-radius:4px; }

::selection{ background:var(--accent); color:var(--brand-900); }

/* --------------------------------------------------- utilidades */
.eyebrow{
  font-family:var(--fonte-dado);
  font-size:11px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--muted); margin:0 0 2px;
}
.screen{ display:none; }
.screen.is-active{ display:block; }
[hidden]{ display:none !important; }

/* --------------------------------------------------- marca */
.brand{ display:flex; align-items:center; gap:12px; }
.brand__mark{
  display:grid; place-items:center;
  width:46px; height:46px; flex:0 0 46px;
  background:var(--accent); color:var(--brand-900);
  font-family:var(--fonte-titulo); font-weight:800; font-size:18px;
  border-radius:12px;
}
.brand__mark--sm{ width:34px; height:34px; flex-basis:34px; font-size:14px; border-radius:9px; }
.brand__name{ font-family:var(--fonte-titulo); font-weight:600; line-height:1.05; font-size:20px; }
.brand__name strong{ font-weight:800; }

/* =============================================================
   LOGIN
   ============================================================= */
.login{ min-height:100dvh; display:flex; flex-direction:column; }

.login__brand{
  background:var(--brand-900);
  color:#EAF1EA;
  padding:32px 22px 36px;
  background-image:
    radial-gradient(circle at 90% 0%, rgba(228,161,27,.22), transparent 55%),
    repeating-linear-gradient(135deg, rgba(255,255,255,.035) 0 2px, transparent 2px 9px);
}
.login__pitch{ margin:22px 0 0; max-width:34ch; font-size:16px; color:#C6D4C6; }
.login__meta{ list-style:none; margin:24px 0 0; padding:0; display:grid; gap:10px; }
.login__meta li{
  display:flex; gap:12px; align-items:baseline;
  font-size:14px; color:#B9C9B9;
  border-top:1px solid rgba(255,255,255,.13); padding-top:10px;
}
.login__meta span{ font-family:var(--fonte-dado); color:var(--accent); font-size:12px; }

.login__panel{ flex:1; display:flex; align-items:center; justify-content:center; padding:24px 18px 40px; }
.login__form{ width:100%; max-width:400px; }
.login__title{ font-size:30px; font-weight:800; margin:0 0 20px; }
.login__hint{
  margin-top:20px; padding-top:14px; border-top:1px dashed var(--line);
  font-size:13px; color:var(--muted);
}
.login__hint p{ margin:2px 0; }
.hint-title{ font-family:var(--fonte-dado); font-size:11px; letter-spacing:.14em; text-transform:uppercase; }

@media (min-width:900px){
  .login{ flex-direction:row; }
  .login__brand{ width:44%; padding:56px 48px; display:flex; flex-direction:column; justify-content:center; }
  .login__pitch{ font-size:19px; }
  .login__panel{ width:56%; }
}

/* =============================================================
   ESTRUTURA DO APP
   ============================================================= */
#tela-app.is-active{ display:grid; grid-template-rows:auto 1fr; min-height:100dvh; }

.topbar{
  position:sticky; top:0; z-index:30;
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 16px;
  background:var(--brand-900); color:#fff;
  padding-top:calc(10px + env(safe-area-inset-top));
}
.topbar__brand{ display:flex; align-items:center; gap:10px; }
.topbar__title{ font-family:var(--fonte-titulo); font-weight:700; font-size:15px; letter-spacing:-.01em; }
.topbar__user{ display:flex; align-items:center; gap:10px; }
.user{ text-align:right; line-height:1.15; }
.user__nome{ margin:0; font-size:13px; font-weight:600; }
.user__perfil{ margin:0; font-family:var(--fonte-dado); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--accent); }

.sidenav{ display:none; }

.main{ padding:20px 16px calc(86px + env(safe-area-inset-bottom)); }

.view{ display:none; max-width:1040px; margin:0 auto; }
.view.is-active{ display:block; animation:sobe .22s ease-out both; }
@keyframes sobe{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }

.view__head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-bottom:16px;
}
.view__title{ font-size:26px; font-weight:800; }

/* barra inferior (mobile) */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:flex; overflow-x:auto;
  background:var(--card); border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.tab{
  flex:1 0 auto; min-width:74px;
  display:flex; flex-direction:column; align-items:center; gap:2px;
  padding:9px 6px 8px; border:0; background:none; cursor:pointer;
  font-family:var(--fonte-texto); font-size:11px; color:var(--muted);
  border-top:2px solid transparent;
}
.tab span{ font-size:16px; line-height:1; }
.tab.is-active{ color:var(--brand); border-top-color:var(--brand); font-weight:600; }

@media (min-width:900px){
  #tela-app.is-active{ grid-template-columns:236px 1fr; grid-template-rows:auto 1fr; }
  .topbar{ grid-column:1 / -1; padding:12px 24px; }
  .sidenav{
    display:block; padding:20px 14px;
    background:var(--card); border-right:1px solid var(--line);
  }
  .sidenav__group{
    font-family:var(--fonte-dado); font-size:10px; letter-spacing:.16em; text-transform:uppercase;
    color:var(--muted); margin:18px 0 8px 10px;
  }
  .sidenav__group:first-child{ margin-top:0; }
  .nav__item{
    display:flex; align-items:center; gap:10px; width:100%;
    padding:9px 10px; margin-bottom:2px;
    border:0; border-radius:8px; background:none; cursor:pointer;
    font-family:var(--fonte-texto); font-size:14px; color:var(--ink); text-align:left;
  }
  .nav__item:hover{ background:rgba(27,94,58,.08); }
  .nav__item.is-active{ background:var(--brand); color:#fff; font-weight:600; }
  .nav__ico{ font-size:13px; opacity:.8; width:16px; }
  .main{ padding:28px 32px 60px; }
  .tabbar{ display:none; }
}

/* =============================================================
   COMPONENTES
   ============================================================= */
.card{
  background:var(--card);
  border:1px solid var(--line);
  border-radius:var(--raio);
  padding:18px;
  box-shadow:var(--sombra);
}
.card + .card, .card + #lista-locais, .card + #lista-produtos, .card + #lista-usuarios{ margin-top:16px; }
.card__titulo{ font-size:15px; font-weight:700; margin-bottom:14px; }

/* campos */
.field{ display:block; margin-bottom:14px; }
.field__label{
  display:block; margin-bottom:5px;
  font-family:var(--fonte-dado); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted);
}
.field--inline{ margin-bottom:0; }
.input{
  width:100%; padding:11px 12px;
  font-family:var(--fonte-texto); font-size:15px; color:var(--ink);
  background:#FCFDFB; border:1px solid var(--line); border-radius:8px;
  transition:border-color .15s, box-shadow .15s;
}
.input:focus{ outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(27,94,58,.16); }
.input--travado{ background:#EFF1EC; color:var(--muted); }
select.input{ appearance:none; background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%); background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%; background-size:5px 5px,5px 5px; background-repeat:no-repeat; padding-right:36px; }
textarea.input{ resize:vertical; }

.form__linha{ display:grid; gap:0; }
@media (min-width:720px){
  .form__linha{ grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:0 16px; }
}
.form__acoes{ display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px; }

/* botões */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  padding:11px 18px; border:1px solid transparent; border-radius:8px;
  font-family:var(--fonte-texto); font-size:14px; font-weight:600; cursor:pointer;
  transition:transform .1s, background .15s, box-shadow .15s;
}
.btn:active{ transform:translateY(1px); }
.btn:focus-visible{ outline:3px solid var(--accent); outline-offset:2px; }
.btn--primary{ background:var(--brand); color:#fff; }
.btn--primary:hover{ background:var(--brand-700); }
.btn--accent{ background:var(--accent); color:var(--brand-900); }
.btn--accent:hover{ background:var(--accent-dark); color:#fff; }
.btn--ghost{ background:transparent; border-color:var(--line); color:var(--ink); }
.btn--ghost:hover{ background:rgba(20,26,21,.05); }
.topbar .btn--ghost{ border-color:rgba(255,255,255,.35); color:#fff; }
.topbar .btn--ghost:hover{ background:rgba(255,255,255,.12); }
.btn--sm{ padding:7px 12px; font-size:13px; }
.btn--block{ width:100%; }
.btn--perigo{ background:transparent; border-color:rgba(163,44,34,.4); color:var(--danger); }
.btn--perigo:hover{ background:rgba(163,44,34,.08); }

/* alertas */
.alert{ padding:10px 12px; border-radius:8px; font-size:14px; margin:0 0 14px; }
.alert--erro{ background:rgba(163,44,34,.1); color:var(--danger); border:1px solid rgba(163,44,34,.25); }

/* blocos condicionais do formulário */
.bloco{
  border:1px dashed var(--line); border-left:3px solid var(--accent);
  border-radius:8px; padding:16px; margin:4px 0 18px;
  background:#FBFCFA;
  animation:sobe .2s ease-out both;
}
.bloco__titulo{ font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.08em; padding:0 6px; }
.bloco__ajuda{ margin:2px 0 14px; font-size:13px; color:var(--muted); }

/* upload */
.uploader{ margin-bottom:14px; }
.uploader__area{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px;
  min-height:104px; padding:14px; cursor:pointer; text-align:center;
  border:1px dashed var(--line); border-radius:8px; background:var(--card);
  font-size:13px; color:var(--muted);
}
.uploader__area:hover{ border-color:var(--brand); color:var(--brand); }
.uploader__ico{ font-size:22px; }
.preview{ margin-top:8px; }
.preview img{ width:100%; max-height:220px; object-fit:cover; border-radius:8px; display:block; }
.preview__barra{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:6px; font-size:12px; color:var(--muted); font-family:var(--fonte-dado); }
.preview__arquivo{ display:flex; align-items:center; gap:10px; padding:10px 12px; background:#F2F4EF; border-radius:8px; font-size:13px; }

/* produtos do tabloide */
.produtos__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; }
.produto-linha{ display:flex; gap:8px; align-items:center; margin-bottom:8px; }
.produto-linha .input{ flex:1; }
.produto-linha__num{ font-family:var(--fonte-dado); font-size:12px; color:var(--muted); width:22px; }
.btn-remover{
  flex:0 0 40px; height:42px; border:1px solid var(--line); border-radius:8px;
  background:var(--card); color:var(--danger); font-size:16px; cursor:pointer;
}
.btn-remover:hover{ background:rgba(163,44,34,.08); }

/* =============================================================
   KPIs E GRÁFICOS
   ============================================================= */
.kpis{ display:grid; gap:12px; margin-bottom:16px; }
@media (min-width:720px){ .kpis{ grid-template-columns:repeat(3,1fr); } }

.kpi{
  background:var(--card); border:1px solid var(--line); border-radius:var(--raio);
  padding:18px; box-shadow:var(--sombra);
}
.kpi--destaque{ background:var(--brand-900); border-color:var(--brand-900); color:#EAF1EA; }
.kpi__label{ margin:0; font-family:var(--fonte-dado); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.kpi--destaque .kpi__label{ color:var(--accent); }
.kpi__valor{ margin:6px 0 2px; font-family:var(--fonte-titulo); font-weight:800; font-size:46px; line-height:1; letter-spacing:-.04em; }
.kpi__nota{ margin:0; font-size:12.5px; color:var(--muted); }
.kpi--destaque .kpi__nota{ color:#A9BCA9; }

.grid-2{ display:grid; gap:16px; }
@media (min-width:900px){ .grid-2{ grid-template-columns:1fr 1fr; } }

.barras{ display:grid; gap:12px; }
.barra__topo{ display:flex; justify-content:space-between; font-size:13px; margin-bottom:5px; }
.barra__valor{ font-family:var(--fonte-dado); font-weight:600; }
.barra__trilho{ height:9px; background:#EDEFE9; border-radius:99px; overflow:hidden; }
.barra__preenchida{ height:100%; border-radius:99px; background:var(--brand); transition:width .4s ease; }
.barra--acao .barra__preenchida{ background:var(--brand); }
.barra--tabloide .barra__preenchida{ background:var(--accent); }
.barra--reposicao .barra__preenchida{ background:var(--info); }

.rank{ display:grid; gap:1px; background:var(--line); border-radius:8px; overflow:hidden; }
.rank__item{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:10px 12px; background:var(--card); font-size:14px;
}
.rank__nome{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.rank__valor{ font-family:var(--fonte-dado); font-weight:600; color:var(--brand); flex:0 0 auto; }

/* =============================================================
   LISTAS E FICHAS
   ============================================================= */
.filtros{ display:grid; gap:0 14px; }
@media (min-width:720px){ .filtros{ grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); align-items:end; } }
.filtros__acoes{ margin-bottom:14px; }
.contagem{ font-family:var(--fonte-dado); font-size:12px; color:var(--muted); margin:14px 0 10px; }

/* ficha: cada lançamento é um "canhoto" de campo */
.ficha{
  position:relative;
  background:var(--card); border:1px solid var(--line); border-radius:var(--raio);
  padding:14px 16px 14px 22px; margin-bottom:10px; cursor:pointer;
  box-shadow:var(--sombra);
  transition:border-color .15s, transform .1s;
}
.ficha::before{
  content:""; position:absolute; left:9px; top:12px; bottom:12px; width:3px;
  background:repeating-linear-gradient(to bottom, var(--line) 0 4px, transparent 4px 8px);
}
.ficha:hover{ border-color:var(--brand); }
.ficha:active{ transform:scale(.995); }
.ficha__topo{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:6px; }
.ficha__local{ font-family:var(--fonte-titulo); font-weight:700; font-size:15.5px; }
.ficha__linha{ font-family:var(--fonte-dado); font-size:12px; color:var(--muted); }
.ficha__rodape{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-top:8px; font-size:12.5px; color:var(--muted); }
.ficha__tag{ display:inline-flex; align-items:center; gap:5px; }

.selo{
  font-family:var(--fonte-dado); font-size:10.5px; font-weight:600;
  letter-spacing:.1em; text-transform:uppercase;
  padding:4px 8px; border-radius:5px; white-space:nowrap;
}
.selo--acao{ background:rgba(27,94,58,.12); color:var(--brand); }
.selo--tabloide{ background:rgba(228,161,27,.2); color:var(--accent-dark); }
.selo--reposicao{ background:rgba(46,94,140,.12); color:var(--info); }
.selo--admin{ background:rgba(20,26,21,.08); color:var(--ink); }
.selo--inativo{ background:rgba(163,44,34,.1); color:var(--danger); }

/* linhas de cadastro */
.linha{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--card); border:1px solid var(--line); border-radius:var(--raio);
  padding:12px 14px; margin-bottom:8px;
}
.linha__info{ min-width:0; }
.linha__nome{ font-weight:600; font-size:15px; }
.linha__sub{ font-family:var(--fonte-dado); font-size:12px; color:var(--muted); }
.linha__acoes{ display:flex; gap:6px; flex:0 0 auto; }

.vazio{
  text-align:center; padding:34px 18px; border:1px dashed var(--line); border-radius:var(--raio);
  color:var(--muted); font-size:14px; background:rgba(255,255,255,.5);
}
.vazio strong{ display:block; font-family:var(--fonte-titulo); color:var(--ink); font-size:16px; margin-bottom:4px; }

/* =============================================================
   MODAL E TOAST
   ============================================================= */
.modal{
  position:fixed; inset:0; z-index:60;
  display:flex; align-items:flex-end; justify-content:center;
  background:rgba(12,42,27,.6); padding:0;
}
.modal__caixa{
  position:relative; width:100%; max-width:620px; max-height:88dvh; overflow-y:auto;
  background:var(--card); border-radius:14px 14px 0 0; padding:22px 18px 30px;
  animation:sobeModal .22s ease-out both;
}
@keyframes sobeModal{ from{ transform:translateY(18px); opacity:0;} to{ transform:none; opacity:1;} }
.modal__fechar{
  position:absolute; top:12px; right:12px; width:34px; height:34px;
  border:1px solid var(--line); border-radius:50%; background:var(--card); cursor:pointer; font-size:14px;
}
.modal h3{ font-size:20px; margin-bottom:4px; padding-right:40px; }
.detalhe__grid{ display:grid; gap:0 14px; margin:14px 0; }
@media (min-width:560px){ .detalhe__grid{ grid-template-columns:1fr 1fr; } }
.detalhe__item{ padding:8px 0; border-bottom:1px solid var(--line); }
.detalhe__rotulo{ font-family:var(--fonte-dado); font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); }
.detalhe__valor{ font-size:14.5px; }
.detalhe__fotos{ display:grid; gap:10px; margin-top:8px; }
@media (min-width:560px){ .detalhe__fotos{ grid-template-columns:1fr 1fr; } }
.detalhe__fotos figure{ margin:0; }
.detalhe__fotos figcaption{ font-family:var(--fonte-dado); font-size:11px; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); margin-bottom:5px; }
.detalhe__fotos img{ width:100%; border-radius:8px; display:block; }
.lista-simples{ margin:6px 0 0; padding-left:18px; font-size:14.5px; }
.lista-simples li{ margin-bottom:3px; }

@media (min-width:720px){
  .modal{ align-items:center; padding:20px; }
  .modal__caixa{ border-radius:14px; padding:26px; }
}

.toast{
  position:fixed; left:50%; bottom:calc(84px + env(safe-area-inset-bottom)); transform:translateX(-50%);
  z-index:80; max-width:88vw;
  background:var(--brand-900); color:#fff; padding:12px 18px; border-radius:99px;
  font-size:14px; box-shadow:0 12px 30px -12px rgba(12,42,27,.7);
  animation:sobe .2s ease-out both;
}
.toast--erro{ background:var(--danger); }
@media (min-width:900px){ .toast{ bottom:26px; } }

/* acessibilidade / movimento reduzido */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{ animation:none !important; transition:none !important; }
}