/* =====================================================================
   FAZENDA APP — estilos. Mobile-first; desktop ≥ 900px ganha barra lateral.
   ===================================================================== */
@font-face { font-family: "Bricolage Grotesque"; src: url("../fonts/bricolage.woff2") format("woff2"); font-weight: 200 800; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Hanken Grotesk"; src: url("../fonts/hanken-italic.woff2") format("woff2"); font-weight: 100 900; font-style: italic; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/spacemono.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Space Mono"; src: url("../fonts/spacemono-bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --fundo: #F4EFE4; --papel: #FFFFFF; --papel-2: #FAF6EE; --tinta: #15120E; --tinta-2: #3C3630; --cinza: #6E675F; --linha: #E6DFD1; --linha-2: #D6CDBC;
  --verde-900: #14301F; --verde-700: #1F5A34; --verde: #2E8B57; --verde-200: #D5EBDC; --verde-100: #EAF5EE;
  --terra-700: #7A4E22; --terra: #A86B32; --terra-200: #EBD8C3;
  --ambar: #FFA800; --ambar-700: #C27F00; --ambar-200: #FFE6B3; --ambar-100: #FFF4DD;
  --vermelho: #C8382E; --vermelho-200: #F6D3CF; --azul: #2F6FB0; --azul-200: #D4E3F4; --amarelo: #E3B23C;
  --txt-verde: #1F5A34; --txt-ambar: #7A5000; --txt-terra: #7A4E22; --txt-vermelho: #A82E25; --txt-azul: #2A5F99;
  --sombra: 0 1px 2px rgba(21,18,14,.05), 0 8px 24px -12px rgba(21,18,14,.18);
  --sombra-2: 0 12px 40px -12px rgba(21,18,14,.35);
  --r: 16px; --r-s: 10px; --r-l: 22px;
  --topo-h: 60px; --rod-h: 64px; --lat-w: 248px;
  --f-tit: "Bricolage Grotesque", system-ui, sans-serif; --f-txt: "Hanken Grotesk", system-ui, sans-serif; --f-mono: "Space Mono", ui-monospace, monospace;
  color-scheme: light;
}
:root[data-theme="dark"] { color-scheme: dark; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"], :root:not([data-theme="light"]):where(.auto-dark) { }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fundo: #0F1512; --papel: #19211B; --papel-2: #1F2922; --tinta: #F1ECE2; --tinta-2: #D8D1C4; --cinza: #9D968B; --linha: #2B352E; --linha-2: #3A463D;
    --verde-200: #214A31; --verde-100: #1A3826; --terra-200: #4A3521; --ambar-200: #5A4210; --ambar-100: #3E2F0E; --vermelho-200: #5A2521; --azul-200: #1E3A58;
    --verde: #3FA86A; --vermelho: #E5574C; --azul: #4F8FD6; --ambar-700: #E89A1A; --terra: #C98A4E; --terra-700: #D9A878; --amarelo: #F2C75C;
    --txt-verde: #9FDDB4; --txt-ambar: #FFD07A; --txt-terra: #E6BE93; --txt-vermelho: #FFA59C; --txt-azul: #A9CDF5;
    --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5); --sombra-2: 0 12px 40px -12px rgba(0,0,0,.7);
  }
}
:root[data-theme="dark"] {
  --fundo: #0F1512; --papel: #19211B; --papel-2: #1F2922; --tinta: #F1ECE2; --tinta-2: #D8D1C4; --cinza: #9D968B; --linha: #2B352E; --linha-2: #3A463D;
  --verde-200: #214A31; --verde-100: #1A3826; --terra-200: #4A3521; --ambar-200: #5A4210; --ambar-100: #3E2F0E; --vermelho-200: #5A2521; --azul-200: #1E3A58;
  --verde: #3FA86A; --vermelho: #E5574C; --azul: #4F8FD6; --ambar-700: #E89A1A; --terra: #C98A4E; --terra-700: #D9A878; --amarelo: #F2C75C;
  --txt-verde: #9FDDB4; --txt-ambar: #FFD07A; --txt-terra: #E6BE93; --txt-vermelho: #FFA59C; --txt-azul: #A9CDF5;
  --sombra: 0 1px 2px rgba(0,0,0,.3), 0 8px 24px -12px rgba(0,0,0,.5); --sombra-2: 0 12px 40px -12px rgba(0,0,0,.7);
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--fundo); color: var(--tinta); font-family: var(--f-txt); font-size: 16px; line-height: 1.45; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; overscroll-behavior-y: none; }
h1, h2, h3, h4 { font-family: var(--f-tit); margin: 0; letter-spacing: -.01em; }
p { margin: 0 0 .6em; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
small { color: var(--cinza); }
.ico { width: 22px; height: 22px; flex: none; }
.ico-fraco { color: var(--cinza); }
.mono { font-family: var(--f-mono); font-size: .86em; }
.num { font-family: var(--f-tit); font-variant-numeric: tabular-nums; }
.fraco { color: var(--cinza); }
.tit-serif { font-family: var(--f-tit); }
.escondido { display: none !important; }

/* ---------- casco ---------- */
#app { min-height: 100%; display: grid; grid-template-rows: var(--topo-h) 1fr; grid-template-columns: minmax(0, 1fr); width: 100%; max-width: 100vw; overflow-x: clip; }
#app > * { min-width: 0; }
#splash { position: fixed; inset: 0; background: #FBF6ED; display: grid; place-items: center; z-index: 999; }
#splash img { display: block; }
#splash .s-logo { width: 130px; height: auto; margin: 0 auto 18px; }
#splash .s-nome { width: 190px; height: auto; margin: 0 auto; }
.topo { position: sticky; top: 0; z-index: 50; height: var(--topo-h); background: var(--papel); border-bottom: 1px solid var(--linha); display: flex; align-items: center; justify-content: space-between; padding: 0 10px 0 12px; padding-top: env(safe-area-inset-top); }
.topo-faz { display: flex; align-items: center; gap: 10px; min-width: 0; text-align: left; padding: 6px 8px 6px 4px; border-radius: 12px; }
.topo-faz:active { background: var(--papel-2); }
.topo-logo .logo { width: 34px; height: 39px; display: block; }
.logo img { width: 100%; height: 100%; display: block; object-fit: contain; }
.topo-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.topo-txt b { font-family: var(--f-tit); font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-txt small { font-size: 12px; }
.topo-acoes { display: flex; align-items: center; gap: 2px; }
.btn-icone { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; position: relative; color: var(--tinta-2); }
.btn-icone:active { background: var(--papel-2); }
.ponto { position: absolute; top: 6px; right: 6px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: var(--vermelho); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; line-height: 1; }
.status-rede { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--vermelho); background: var(--vermelho-200); padding: 3px 8px; border-radius: 20px; }
.status-rede.on { display: none; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--verde-700); color: #fff; display: grid; place-items: center; font-family: var(--f-tit); font-weight: 700; font-size: 15px; flex: none; }
.avatar.mini { width: 32px; height: 32px; font-size: 13px; background: var(--ambar); color: var(--tinta); }
.vista { padding: 0 0 calc(var(--rod-h) + 150px + env(safe-area-inset-bottom)); min-height: calc(100vh - var(--topo-h)); }
.lateral { display: none; }
.rodape { position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--rod-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--papel); border-top: 1px solid var(--linha); display: grid; grid-template-columns: repeat(5, 1fr); z-index: 50; }
.rod-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--cinza); }
.rod-item .ico { width: 24px; height: 24px; }
.rod-item.ativo { color: var(--txt-verde); }
.rod-item.ativo .ico { color: var(--verde); }
.fab { position: fixed; right: 16px; bottom: calc(var(--rod-h) + 18px + env(safe-area-inset-bottom)); width: 58px; height: 58px; border-radius: 20px; background: var(--ambar); color: var(--tinta); box-shadow: 0 10px 28px -8px rgba(255,168,0,.7); display: grid; place-items: center; z-index: 49; transition: transform .15s; }
.fab:active { transform: scale(.94); }
.fab .ico { width: 28px; height: 28px; stroke-width: 2.6; }
/* Falar = botão principal; o "+" fica menor, logo acima */
.fab-voz { width: auto; min-width: 58px; padding: 0 20px 0 16px; border-radius: 29px; display: flex; align-items: center; gap: 8px; font-family: var(--f-tit); font-weight: 700; font-size: 17px; }
.fab-voz .ico { width: 26px; height: 26px; }
.fab-mais { width: 46px; height: 46px; border-radius: 16px; right: 22px; bottom: calc(var(--rod-h) + 18px + 58px + 12px + env(safe-area-inset-bottom)); background: var(--papel); color: var(--tinta); border: 1px solid var(--linha-2); box-shadow: 0 8px 20px -10px rgba(0,0,0,.45); }
.fab-mais .ico { width: 22px; height: 22px; stroke-width: 2.4; }

/* ---------- página ---------- */
.pagina { padding: 14px 16px 24px; max-width: 1180px; margin: 0 auto; }
.pag-cab { display: flex; align-items: flex-start; gap: 8px; margin-bottom: 14px; }
.pag-cab .btn-icone { margin-left: -10px; margin-top: -4px; }
.pag-tit { flex: 1; min-width: 0; }
.pag-tit h1 { font-size: 26px; font-weight: 700; line-height: 1.1; }
.pag-tit .sub { color: var(--cinza); margin: 4px 0 0; font-size: 14px; }
.pag-acoes { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: flex-end; }
.pag-corpo { display: flex; flex-direction: column; gap: 14px; }
.pagina.sem-pad { padding: 0; }

/* ---------- cartões / kpis ---------- */
.card { background: var(--papel); border-radius: var(--r); padding: 16px; box-shadow: var(--sombra); border: 1px solid var(--linha); }
.card.zero { padding: 0; overflow: hidden; }
.card-tit { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-family: var(--f-tit); font-weight: 700; font-size: 15px; margin-bottom: 10px; color: var(--tinta-2); }
.grade { display: grid; gap: 10px; }
.grade.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grade.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grade.cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kpi { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r); padding: 14px 14px 12px; box-shadow: var(--sombra); position: relative; min-width: 0; }
.kpi-rot { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--cinza); line-height: 1.2; }
.kpi-val { font-family: var(--f-tit); font-size: 34px; font-weight: 700; line-height: 1.05; margin-top: 6px; letter-spacing: -.02em; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-suf { font-size: 15px; font-weight: 600; color: var(--cinza); letter-spacing: 0; }
.kpi-det { font-size: 13px; color: var(--cinza); margin-top: 6px; }
.kpi-ico { position: absolute; right: 12px; top: 12px; color: var(--cinza); opacity: .7; }
.kpi.verde .kpi-val, .kpi.ok .kpi-val { color: var(--verde); }
.kpi.ambar .kpi-val, .kpi.alerta .kpi-val { color: var(--ambar-700); }
.kpi.vermelho .kpi-val, .kpi.perigo .kpi-val { color: var(--vermelho); }
.kpi.azul .kpi-val { color: var(--azul); }
.kpi.destaque { background: var(--verde-900); color: #fff; border-color: var(--verde-900); }
.kpi.destaque .kpi-rot, .kpi.destaque .kpi-det, .kpi.destaque .kpi-suf { color: rgba(255,255,255,.72); }
.kpi.destaque .kpi-val { color: #fff; }

/* ---------- listas ---------- */
.lista { background: var(--papel); border: 1px solid var(--linha); border-radius: var(--r); overflow: hidden; box-shadow: var(--sombra); }
.lista.solta { background: none; border: 0; box-shadow: none; display: flex; flex-direction: column; gap: 10px; }
.item { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-bottom: 1px solid var(--linha); min-height: 56px; }
.item:last-child { border-bottom: 0; }
.item.clicavel { cursor: pointer; }
.item.clicavel:active { background: var(--papel-2); }
.item-ico { width: 40px; height: 40px; border-radius: 12px; background: var(--papel-2); display: grid; place-items: center; color: var(--txt-verde); flex: none; }
.item-txt { flex: 1; min-width: 0; }
.item-tit { font-weight: 600; font-size: 15.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.item-desc { font-size: 13.5px; color: var(--cinza); margin-top: 2px; }
.item-dir { flex: none; text-align: right; font-family: var(--f-tit); font-weight: 700; font-size: 17px; font-variant-numeric: tabular-nums; display: flex; align-items: center; gap: 6px; }
.item-dir small { display: block; font-family: var(--f-txt); font-weight: 500; font-size: 12px; }
.vazio { padding: 34px 20px; text-align: center; color: var(--cinza); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vazio-ico { width: 40px; height: 40px; color: var(--ambar); }
.vazio p { margin: 0; max-width: 320px; }

/* ---------- selos e chips ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; padding: 2px 9px; border-radius: 20px; background: var(--papel-2); color: var(--tinta-2); border: 1px solid var(--linha); line-height: 1.5; white-space: nowrap; text-transform: uppercase; letter-spacing: .04em; }
.badge.verde, .badge.ok { background: var(--verde-200); color: var(--txt-verde); border-color: transparent; }
.badge.ambar, .badge.alerta { background: var(--ambar-200); color: var(--txt-ambar); border-color: transparent; }
.badge.vermelho, .badge.perigo { background: var(--vermelho-200); color: var(--txt-vermelho); border-color: transparent; }
.badge.azul { background: var(--azul-200); color: var(--txt-azul); border-color: transparent; }
.badge.terra { background: var(--terra-200); color: var(--txt-terra); border-color: transparent; }
.badge.escuro { background: var(--verde-900); color: #fff; border-color: transparent; }
.chips { display: flex; gap: 8px; overflow-x: auto; padding: 2px 0 6px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 22px; background: var(--papel); border: 1px solid var(--linha-2); font-weight: 600; font-size: 14px; white-space: nowrap; color: var(--tinta-2); flex: none; }
.chip .ico { width: 16px; height: 16px; }
.chip.ativo { background: var(--verde-900); color: #fff; border-color: var(--verde-900); }
.chip.ambar.ativo { background: var(--ambar); color: var(--tinta); border-color: var(--ambar); }

/* ---------- botões ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 18px; border-radius: 14px; font-weight: 700; font-size: 15px; line-height: 1.2; border: 1px solid transparent; transition: transform .12s, background .15s; white-space: nowrap; }
.btn:active { transform: scale(.97); }
.btn:disabled { opacity: .5; pointer-events: none; }
.btn .ico { width: 18px; height: 18px; }
.btn.primario { background: var(--ambar); color: #15120E; }
.btn.primario:hover { background: #FFB526; }
.btn.verde { background: var(--verde-700); color: #fff; }
.btn.escuro { background: var(--verde-900); color: #fff; }
.btn.fantasma { background: var(--papel); border-color: var(--linha-2); color: var(--tinta-2); }
.btn.perigo { background: var(--vermelho); color: #fff; }
.btn.whats { background: #25D366; color: #073b1a; }
.btn.pequeno { padding: 7px 12px; font-size: 13px; border-radius: 10px; }
.btn.largo { width: 100%; }
.btn.link { background: none; color: var(--txt-verde); padding: 6px 4px; }
.acoes-linha { display: flex; gap: 8px; flex-wrap: wrap; }

/* ---------- abas / seções ---------- */
.tabs { display: flex; gap: 4px; background: var(--papel-2); border: 1px solid var(--linha); padding: 4px; border-radius: 14px; overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tab { flex: 1; min-width: max-content; padding: 9px 12px; border-radius: 10px; font-weight: 600; font-size: 14px; color: var(--cinza); }
.tab.ativa { background: var(--papel); color: var(--tinta); box-shadow: var(--sombra); }
.tab-corpo { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.secao { display: flex; flex-direction: column; gap: 10px; }
.secao-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.secao-cab h2 { font-size: 17px; font-weight: 700; }
.barra { height: 8px; border-radius: 6px; background: var(--linha); overflow: hidden; }
.barra-fill { height: 100%; background: var(--verde); border-radius: 6px; transition: width .4s; }
.barra.ambar .barra-fill { background: var(--ambar); }
.barra.vermelho .barra-fill { background: var(--vermelho); }
.barra.azul .barra-fill { background: var(--azul); }

/* ---------- formulários ---------- */
.form { display: flex; flex-wrap: wrap; gap: 12px 10px; }
.campo { display: flex; flex-direction: column; gap: 5px; width: 100%; }
.campo.meia { width: calc(50% - 5px); }
.campo label { font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza); }
.campo.erro .inp { border-color: var(--vermelho); box-shadow: 0 0 0 3px var(--vermelho-200); }
.obrig { color: var(--vermelho); }
.inp { width: 100%; padding: 12px 13px; border-radius: 12px; border: 1px solid var(--linha-2); background: var(--papel); font-size: 16px; outline: none; min-height: 48px; }
.inp:focus { border-color: var(--verde); box-shadow: 0 0 0 3px var(--verde-200); }
textarea.inp { min-height: 80px; resize: vertical; }
select.inp { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236E675F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 18px; padding-right: 38px; }
.inp-sufixo { position: relative; }
.inp-sufixo span { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); color: var(--cinza); font-weight: 600; font-size: 14px; pointer-events: none; }
.inp-sufixo .inp { padding-right: 56px; }
.ajuda { font-size: 12px; color: var(--cinza); }
.campo-toggle { flex-direction: row; align-items: center; justify-content: space-between; padding: 6px 0; }
.toggle-rot { font-weight: 600; }
.toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; }
.toggle input { display: none; }
.toggle-ui { width: 46px; height: 28px; border-radius: 20px; background: var(--linha-2); position: relative; transition: background .2s; flex: none; }
.toggle-ui::after { content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3); transition: left .2s; }
.toggle input:checked + .toggle-ui { background: var(--verde); }
.toggle input:checked + .toggle-ui::after { left: 21px; }
.campo-foto { display: flex; flex-direction: column; gap: 8px; }
.foto-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px; border: 2px dashed var(--linha-2); border-radius: 14px; color: var(--txt-verde); font-weight: 700; background: var(--papel-2); }
.foto-prev { width: 100%; max-height: 260px; object-fit: cover; border-radius: 14px; border: 1px solid var(--linha); }
.foto-acoes, .geo-acoes { display: flex; gap: 8px; }
.campo-geo { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--linha-2); border-radius: 12px; background: var(--papel-2); }
.geo-txt { font-family: var(--f-mono); font-size: 13px; }

/* ---------- sobreposições ---------- */
.overlay { position: fixed; inset: 0; background: rgba(15,21,18,0); z-index: 100; display: flex; align-items: flex-end; justify-content: center; transition: background .22s; padding: 0; }
.overlay.on { background: rgba(15,21,18,.55); }
.modal { width: 100%; max-width: 560px; max-height: 92vh; background: var(--papel); border-radius: var(--r-l) var(--r-l) 0 0; display: flex; flex-direction: column; transform: translateY(40px); opacity: 0; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s; box-shadow: var(--sombra-2); }
.overlay.on .modal { transform: none; opacity: 1; }
.modal-cab { display: flex; align-items: center; justify-content: space-between; padding: 14px 10px 10px 20px; border-bottom: 1px solid var(--linha); }
.modal-cab h2 { font-size: 19px; }
.modal-corpo { padding: 16px 20px; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; }
.modal-pe { display: flex; gap: 8px; justify-content: flex-end; padding: 12px 20px calc(16px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linha); flex-wrap: wrap; }
.modal-pe .btn { flex: 1; }
.sheet { width: 100%; max-width: 560px; background: var(--papel); border-radius: var(--r-l) var(--r-l) 0 0; padding: 8px 12px calc(14px + env(safe-area-inset-bottom)); transform: translateY(60px); opacity: 0; transition: transform .25s cubic-bezier(.2,.8,.2,1), opacity .2s; max-height: 85vh; overflow-y: auto; box-shadow: var(--sombra-2); }
.overlay.on .sheet { transform: none; opacity: 1; }
.sheet-alca { width: 44px; height: 5px; border-radius: 3px; background: var(--linha-2); margin: 6px auto 12px; }
.sheet h3 { font-size: 16px; color: var(--cinza); padding: 0 8px 10px; font-weight: 600; }
.sheet-ops { display: flex; flex-direction: column; }
.sheet-op { display: grid; grid-template-columns: 24px 1fr; column-gap: 14px; align-items: center; text-align: left; padding: 13px 10px; border-radius: 12px; font-weight: 600; font-size: 16px; }
.sheet-op small { grid-column: 2; font-weight: 400; color: var(--cinza); font-size: 13px; }
.sheet-op:active { background: var(--papel-2); }
.sheet-op .ico { color: var(--txt-verde); }
.sheet-op.perigo { color: var(--vermelho); } .sheet-op.perigo .ico { color: var(--vermelho); }
#toasts { position: fixed; left: 50%; bottom: calc(var(--rod-h) + 90px); transform: translateX(-50%); z-index: 200; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; width: min(92vw, 420px); }
.toast { background: var(--verde-900); color: #fff; padding: 12px 18px; border-radius: 14px; font-weight: 600; font-size: 14.5px; opacity: 0; transform: translateY(10px); transition: all .25s; box-shadow: var(--sombra-2); text-align: center; }
.toast.on { opacity: 1; transform: none; }
.toast.ok { background: var(--verde-700); } .toast.alerta { background: var(--ambar-700); } .toast.erro { background: var(--vermelho); }

/* ---------- tabelas ---------- */
.tabela-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.tabela { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabela th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--cinza); padding: 8px 10px; border-bottom: 1px solid var(--linha); white-space: nowrap; }
.tabela td { padding: 10px; border-bottom: 1px solid var(--linha); vertical-align: middle; }
.tabela tr:last-child td { border-bottom: 0; }
.tabela td.num, .tabela th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tabela td.num { font-family: var(--f-tit); font-weight: 600; }

/* ---------- mapa ---------- */
.mapa { width: 100%; height: 100%; background: #CFD8C7; border-radius: inherit; }
.leaflet-container { font-family: var(--f-txt); background: #6b7a4e; }
.leaflet-container .leaflet-tile-pane { image-rendering: auto; }
.leaflet-popup-content-wrapper { border-radius: 14px; box-shadow: var(--sombra-2); font-family: var(--f-txt); }
.leaflet-popup-content { margin: 12px 14px; font-size: 14px; }
.leaflet-tooltip.rotulo-talhao { background: rgba(21,18,14,.78); color: #fff; border: 0; border-radius: 8px; font-weight: 700; font-size: 12px; padding: 3px 8px; box-shadow: none; }
.leaflet-tooltip.rotulo-talhao::before { display: none; }
.mapa-cheio { position: relative; height: calc(100vh - var(--topo-h) - var(--rod-h) - env(safe-area-inset-bottom)); }
.mapa-sobre { position: absolute; z-index: 400; pointer-events: none; }
.mapa-sobre > * { pointer-events: auto; }
.mapa-topo { top: 12px; left: 12px; right: 12px; display: flex; gap: 8px; align-items: center; }
.mapa-pe { left: 12px; right: 12px; bottom: 14px; }
.mapa-busca { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--papel); border-radius: 14px; padding: 10px 12px; box-shadow: var(--sombra-2); border: 1px solid var(--linha); }
.mapa-busca input { border: 0; outline: 0; background: none; flex: 1; font-size: 15px; min-width: 0; }
.mapa-btn { width: 44px; height: 44px; border-radius: 14px; background: var(--papel); box-shadow: var(--sombra-2); display: grid; place-items: center; border: 1px solid var(--linha); color: var(--tinta-2); }
.mapa-btn.ativo { background: var(--ambar); color: var(--tinta); }
.cartao-flutuante { background: var(--papel); border-radius: var(--r); box-shadow: var(--sombra-2); padding: 14px; border: 1px solid var(--linha); }
.legenda-mapa { display: flex; gap: 8px; flex-wrap: wrap; }
.legenda-mapa span { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--tinta-2); }
.legenda-mapa i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

/* ---------- escala (grade de dias) ---------- */
.grade-escala { display: grid; gap: 4px; align-items: center; }
.celula-dia { height: 36px; border-radius: 8px; display: grid; place-items: center; font-size: 12px; font-weight: 700; cursor: pointer; user-select: none; border: 1px solid transparent; }
.celula-dia.T { background: var(--verde); color: #fff; }
.celula-dia.F { background: var(--vermelho); color: #fff; }
.celula-dia.FE { background: var(--azul); color: #fff; }
.celula-dia.AT { background: var(--amarelo); color: #15120E; }
.celula-dia.vazia { background: var(--papel-2); color: var(--cinza); border-color: var(--linha); }
.celula-dia.hoje { outline: 2px solid var(--tinta); outline-offset: 1px; }
.cab-dia { font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--cinza); text-align: center; }
.cab-dia.hoje { color: var(--tinta); }

/* ---------- diversos ---------- */
.pill-info { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--azul-200); color: var(--tinta); font-size: 14px; }
.pill-info.alerta { background: var(--ambar-200); } .pill-info.perigo { background: var(--vermelho-200); } .pill-info.ok { background: var(--verde-200); }
.pill-info .ico { flex: none; margin-top: 1px; }
.timeline { display: flex; flex-direction: column; gap: 0; position: relative; padding-left: 22px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--linha-2); }
.tl-item { position: relative; padding: 0 0 16px; }
.tl-item::before { content: ""; position: absolute; left: -19px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: var(--verde); border: 2px solid var(--papel); box-shadow: 0 0 0 2px var(--verde); }
.tl-item.ambar::before { background: var(--ambar); box-shadow: 0 0 0 2px var(--ambar); }
.tl-item.terra::before { background: var(--terra); box-shadow: 0 0 0 2px var(--terra); }
.tl-item.cinza::before { background: var(--cinza); box-shadow: 0 0 0 2px var(--cinza); }
.tl-data { font-size: 12px; font-weight: 700; text-transform: uppercase; color: var(--cinza); letter-spacing: .04em; }
.tl-tit { font-weight: 700; margin-top: 2px; }
.tl-desc { font-size: 13.5px; color: var(--cinza); }
.grafico { position: relative; height: 220px; }
.grafico.baixo { height: 160px; }
.foto-mini { width: 56px; height: 56px; border-radius: 12px; object-fit: cover; flex: none; background: var(--papel-2); }
.foto-grande { width: 100%; border-radius: 14px; max-height: 360px; object-fit: cover; }
.linha-dados { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--linha); font-size: 14.5px; }
.linha-dados:last-child { border-bottom: 0; }
.linha-dados b { font-family: var(--f-tit); text-align: right; }
.linha-dados span { color: var(--cinza); }
.camadas { display: flex; flex-direction: column-reverse; gap: 6px; }
.camada { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; }
.camada b { font-family: var(--f-tit); font-size: 16px; }
.camada small { display: block; }
.selo-cultura { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.selo-cultura i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.busca { display: flex; align-items: center; gap: 8px; background: var(--papel); border: 1px solid var(--linha-2); border-radius: 12px; padding: 0 12px; height: 46px; }
.busca input { flex: 1; border: 0; outline: 0; background: none; font-size: 16px; min-width: 0; }
.rodape-nota { font-size: 12px; color: var(--cinza); text-align: center; padding: 8px 0 0; }
.dois { display: grid; grid-template-columns: 1fr; gap: 14px; }
.tag-sync { font-family: var(--f-mono); font-size: 11px; }
.destaque-num { font-family: var(--f-tit); font-size: 44px; font-weight: 800; letter-spacing: -.03em; line-height: 1; }
.modal-usuario .item { min-height: 62px; }
.painel-hero { background: linear-gradient(135deg, var(--verde-900), var(--verde-700)); color: #fff; border-radius: var(--r-l); padding: 18px; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; }
.painel-hero::after { content: ""; position: absolute; right: -30px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: rgba(255,168,0,.18); }
.painel-hero h2 { font-size: 22px; font-weight: 700; }
.painel-hero p { color: rgba(255,255,255,.8); margin: 0; font-size: 14px; }
.painel-hero .linha-chips { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.painel-hero .mini-chip { background: rgba(255,255,255,.14); border-radius: 20px; padding: 4px 10px; font-size: 12.5px; font-weight: 600; }

/* ---------- desktop ---------- */
@media (min-width: 900px) {
  #app { grid-template-columns: var(--lat-w) minmax(0, 1fr); grid-template-rows: var(--topo-h) 1fr; }
  .topo { grid-column: 1 / -1; padding-left: 20px; }
  .lateral { display: flex; flex-direction: column; position: sticky; top: var(--topo-h); height: calc(100vh - var(--topo-h)); background: var(--papel); border-right: 1px solid var(--linha); padding: 18px 14px; gap: 14px; }
  .lat-marca { display: flex; align-items: center; gap: 10px; padding: 4px 8px 10px; border-bottom: 1px solid var(--linha); }
  .lat-marca .logo { width: 40px; height: 46px; }
  .lat-marca b { font-family: var(--f-tit); font-size: 18px; display: block; }
  .lat-marca small { font-size: 12px; }
  .lat-nav { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
  .lat-item { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 12px; font-weight: 600; color: var(--tinta-2); font-size: 15px; }
  .lat-item:hover { background: var(--papel-2); }
  .lat-item.ativo { background: var(--verde-900); color: #fff; }
  .lat-pe { margin-top: auto; padding: 8px; }
  .vista { padding-bottom: 40px; }
  .rodape { display: none; }
  .fab { bottom: 28px; right: 28px; }
  .fab-mais { bottom: 98px; right: 34px; }
  .pagina { padding: 24px 28px 40px; }
  .pag-tit h1 { font-size: 30px; }
  .grade.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grade.cols-2.desk-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .kpi-val { font-size: 38px; }
  .mapa-cheio { height: calc(100vh - var(--topo-h)); }
  .overlay { align-items: center; padding: 20px; }
  .modal { border-radius: var(--r-l); max-height: 88vh; }
  .sheet { border-radius: var(--r-l); max-width: 440px; }
  .sheet-alca { display: none; }
  .modal-pe .btn { flex: initial; min-width: 120px; }
  #toasts { bottom: 32px; }
  .dois { grid-template-columns: 1fr 1fr; }
  .campo.terco { width: calc(33.33% - 7px); }
}
@media print { .topo, .rodape, .fab, .lateral { display: none !important; } .vista { padding: 0; } }
@media (prefers-reduced-motion: reduce) { * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

/* ---------- painel ---------- */
.check-btn { width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--linha-2); display: grid; place-items: center; color: transparent; flex: none; transition: all .15s; }
.check-btn.on { background: var(--verde); border-color: var(--verde); color: #fff; }
.check-btn .ico { width: 18px; height: 18px; stroke-width: 3; }
.equipe-hoje { display: flex; gap: 14px; overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; }
.equipe-hoje::-webkit-scrollbar { display: none; }
.eq-pessoa { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 84px; cursor: pointer; }
.eq-pessoa b { font-size: 13px; font-weight: 600; }
.eq-pessoa .avatar { width: 48px; height: 48px; font-size: 17px; }

/* ---- entrada da versão do cliente (login, bloqueio) ---- */
.overlay:has(.modal-login) { background: var(--fundo); align-items: center; padding: 16px; }
.modal-login { border-radius: var(--r-l); max-width: 420px; }
.modal-login .modal-cab { border-bottom: 0; padding-bottom: 0; }
.login-corpo { display: flex; flex-direction: column; gap: 14px; }
.login-marca { display: flex; align-items: center; gap: 12px; }
.login-marca b { display: block; font-family: var(--f-tit); font-size: 22px; line-height: 1.1; }
.login-marca small { color: var(--cinza); font-size: 13px; }
.login-marca .logo { width: 52px; flex: none; }
.login-marca .logo img { width: 52px; height: auto; display: block; }