* { box-sizing: border-box; }
html, body { margin: 0; padding: 0;
   font-size: 16px; }

button, input, select, textarea { font: inherit; }
.loading { padding: 40px; text-align: center;  }

/* ---------- layout ---------- */
.topo {  color: #fff; padding: 10px 16px; display: flex; align-items: center; gap: 12px;
  position: sticky; top: 0; z-index: 20;  }
.topo h1 {   flex: 1;  white-space: nowrap;  text-overflow: ellipsis; }
.topo select {    padding: 6px 8px; max-width: 46vw; }
.topo .usuario { font-size: 12px; opacity: .9; }
.topo button { background: transparent;  border: 1px solid rgba(255,255,255,.5);  padding: 5px 9px; }
.conteudo { padding: 14px 16px 90px; max-width: 1100px; margin: 0 auto; }
.nav { position: fixed; bottom: 0; left: 0; right: 0;  border-top: 1px solid var(--borda);
  display: flex; justify-content: space-around; z-index: 20; padding-bottom: env(safe-area-inset-bottom); }
.nav a { flex: 1; text-align: center; padding: 8px 2px 6px; font-size: 11px;  text-decoration: none; }
.nav a .ic { display: block; font-size: 20px; line-height: 1.1; }
.nav a.ativo {  font-weight: 600; }
@media (min-width: 900px) {
  .nav { position: sticky; top: 52px; bottom: auto; border-top: 0; border-bottom: 1px solid var(--borda); justify-content: center; gap: 8px; }
  .nav a { flex: 0 0 auto; padding: 8px 14px; font-size: 14px; }
  .nav a .ic { display: inline; font-size: 16px; margin-right: 6px; }
  .conteudo { padding-bottom: 30px; }
}

/* ---------- componentes ---------- */
h2 {  margin: 6px 0 12px; color: var(--verde-escuro); }
h3 {  margin: 18px 0 8px;  }
.cartao { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra);  margin-bottom: 12px; }
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-bottom: 12px; }
@media (min-width: 700px) { .kpis { grid-template-columns: repeat(4, 1fr); } }
.kpi { background: #fff; border-radius: var(--raio); box-shadow: var(--sombra);  }
.kpi .rotulo {   text-transform: uppercase;  }
.kpi .valor {  font-weight: 700;  margin-top: 2px; }
.kpi .sub { font-size: 12px;  }
.kpi.destaque {  color: #fff; }
.kpi.destaque .rotulo, .kpi.destaque .sub, .kpi.destaque .valor { color: #fff; }

.tabela-wrap {  -webkit-overflow-scrolling: touch; }
table { width: 100%; border-collapse: collapse; font-size: 14px;  }
th, td { padding: 8px 8px; border-bottom: 1px solid var(--borda); text-align: left; white-space: nowrap; }
th {   font-weight: 600;  text-transform: uppercase; position: sticky; top: 0; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.total td { font-weight: 700;  }

.btn { display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 16px; font-weight: 600; cursor: pointer; text-decoration: none; }

.btn.pequeno { padding: 6px 10px; font-size: 13px; }
.btn:disabled { opacity: .5; cursor: default; }
.acoes { display: flex; gap: 8px; flex-wrap: wrap; margin: 10px 0; align-items: center; }
.fab { position: fixed; right: 16px;  width: 56px; height: 56px; border-radius: 50%;  color: #fff;
  font-size: 30px;   z-index: 15; display: flex; align-items: center; justify-content: center; }

.form { display: grid; gap: 10px; }
.form label { display: block;   margin-bottom: 3px; }
.form input, .form select, .form textarea { width: 100%; padding: 10px; border: 1px solid var(--borda); border-radius: 8px; background: #fff; }
.form input:focus, .form select:focus { outline: 2px solid var(--verde); border-color: transparent; }
.linha { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.linha-3 { display: grid; grid-template-columns: 2fr 1fr 1fr auto; gap: 8px; align-items: end; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {   border-radius: 20px; padding: 6px 12px; font-size: 13px; cursor: pointer; }

.tag { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 10px;   }

.msg { padding: 10px 12px; border-radius: 8px; margin: 8px 0; font-size: 14px; }

.vazio { color: var(--cinza); text-align: center; padding: 20px; }
.ajuda { font-size: 12px; color: var(--cinza); }
.barra {    overflow: hidden; }
.barra > div { height: 100%;  }

/* tabela editável (Admin › Piquetes) */

#admFz { padding: 7px 8px; border: 1px solid var(--borda); border-radius: 6px; background: #fff; }

/* login */
.login { max-width: 380px; margin: 60px auto; }
.login .logo { text-align: center; margin-bottom: 20px; }
.login .logo .ic { font-size: 54px; }
.login h1 { font-size: 22px; margin: 6px 0 0; color: var(--verde-escuro); }

/* modal */
.modal-fundo { position: fixed; inset: 0;  z-index: 40; display: flex; align-items: flex-end; justify-content: center; }
.modal {  width: 100%; max-width: 640px; max-height: 92vh; overflow: auto; border-radius: 16px 16px 0 0; padding: 16px; }
@media (min-width: 700px) { .modal-fundo { align-items: center; } .modal { border-radius: 16px; } }
.modal h3 { margin-top: 0; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: 80px;   padding: 10px 16px; border-radius: 8px; z-index: 60; font-size: 14px; }
@media print { .topo, .nav, .fab, .acoes { display: none !important; } .conteudo { padding: 0; } }

/* =====================================================================
   TELA DE LOGIN – estilo rústico (couro, madeira e brasa)
   ===================================================================== */
body.modo-login { background: #1c120b; }
.lg-fundo {
  min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center;
  padding: 28px 16px;  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(214,140,60,.28), transparent 60%),
    radial-gradient(ellipse at 50% 110%, rgba(0,0,0,.65), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.018) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 1px, transparent 1px 38px),
    linear-gradient(160deg, #3b2416 0%, #241509 55%, #160c05 100%);
}
.lg-fundo::before { /* grão de madeira/ruído */
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .22; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.012 .9' numOctaves='3' seed='7'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .3  0 0 0 0 .15  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

@keyframes lgSobe { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }

@keyframes lgSacode { 20%,60% { transform: translateX(-7px); } 40%,80% { transform: translateX(7px); } }

.lg-oculto { display: none; }

@keyframes lgGira { to { transform: rotate(360deg); } }

.lg-msg { padding: 10px 12px; border-radius: 10px; font: 500 13.5px "Zilla Slab", Georgia, serif; text-align: center; }
.lg-msg.erro { background: rgba(120,20,10,.55); color: #ffd9cc; border: 1px solid rgba(255,140,110,.35); }
.lg-msg.ok { background: rgba(40,80,30,.55); color: #e3f5d4; border: 1px solid rgba(160,220,120,.35); }
.lg-rodape { font: 500 11.5px "Zilla Slab", Georgia, serif; letter-spacing: .08em; color: rgba(243,227,195,.45); text-transform: uppercase; }

/* logo no topo do app */
.topo h1 { display: flex; align-items: center; gap: 10px; }
.topo-logo {    object-fit: cover;   }

/* topo do app no tom madeira/couro */
.topo {
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #5c3519 0%, #3d2210 70%, #2f190b 100%);
  border-bottom: 1px solid #1a0f07;
  box-shadow: inset 0 1px 0 rgba(255,220,170,.22), inset 0 -6px 0 -5px rgba(240,205,150,.35), 0 2px 8px rgba(0,0,0,.35);
}
.topo h1 { font-family: "Zilla Slab", Georgia, serif; font-weight: 700; font-size: 19px; letter-spacing: .03em; color: #f6e7c8; text-shadow: 0 1px 0 #1a0f07; }

.topo select { background: linear-gradient(180deg, #fbf3e3, #f1e2c6); color: #2a1a10; border: 1px solid #2a170a;  font-weight: 600; }
.topo button { color: #f6e7c8; border-color: rgba(240,205,150,.5); border-radius: 8px; }
.topo button:hover { background: rgba(240,205,150,.12); }
@media (max-width: 560px) { .topo-nome { display: none; } .topo h1 { flex: 0 0 auto; } .topo select { flex: 1; max-width: none; } }
/* logo do topo inteira dentro do selo (sem recorte) */
.topo-logo {
     overflow: hidden; display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  background: radial-gradient(circle at 50% 45%, #e39a4c 0%, #c97a32 60%, #9b5419 100%);
  box-shadow: 0 0 0 2px #1a0f07, 0 0 0 3.5px rgba(201,138,75,.75), inset 0 0 8px rgba(40,18,4,.8);
}
.topo-logo img {
    display: block;
  -webkit-mask-image: radial-gradient(ellipse at center, #000 70%, transparent 78%);
}
.topo h1 { padding: 5px 4px; margin: -5px 0 -5px -4px; overflow: visible; } .topo-nome { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

/* v1.2.1 – logo como placa de madeira com cantos arredondados (imagem inteira, sem corte circular) */

.topo-logo { width: 42px; height: 40px; border-radius: 11px; }
.topo-logo img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: none; mask-image: none; }

/* =====================================================================
   v1.3.0 – TEMA RÚSTICO EM TODAS AS TELAS (madeira, couro, brasa)
   ===================================================================== */
:root {
  --verde: #b9601f; --verde-escuro: #f6e7c8; --verde-claro: rgba(201,138,75,.18);
  --terra: #b9601f; --areia: #1c120b; --branco: #fbf3e3;
  --texto: #f3e3c3; --cinza: rgba(243,227,195,.62); --borda: rgba(240,205,150,.16);
  --ok: #8fcf6a; --alerta: #f0b04a; --erro: #ff8a70;
  --couro: linear-gradient(160deg, #4f2d15, #3a200e 70%, #2c180a);
  --brasa: linear-gradient(180deg, #e2913f 0%, #b9601f 52%, #8f4313 100%);
  --cobre: #d7a86e; --creme: #fbf3e3;
  --raio: 16px; --sombra: inset 0 1px 0 rgba(255,220,170,.18), inset 0 0 30px rgba(0,0,0,.35), 0 10px 26px rgba(0,0,0,.4);
}
html, body { background: #1c120b; color: var(--texto); font-family: "Zilla Slab", Georgia, "Times New Roman", serif; }
body:not(.modo-login) {
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(214,140,60,.22), transparent 55%),
    repeating-linear-gradient(90deg, rgba(255,255,255,.016) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(0deg, rgba(0,0,0,.09) 0 1px, transparent 1px 38px),
    linear-gradient(160deg, #3b2416 0%, #241509 55%, #160c05 100%);
  background-attachment: fixed;
}
a { color: #f2b46c; }
.loading { color: var(--cinza); }

/* navegação: faixa de couro escuro */
.nav { background: linear-gradient(180deg, #2c180a, #22130a); border-color: #120a04; box-shadow: inset 0 1px 0 rgba(255,220,170,.08), 0 4px 10px rgba(0,0,0,.35); }
.nav a { color: rgba(243,227,195,.6); position: relative; }
.nav a:hover { color: #f6e7c8; }
.nav a.ativo { color: #ffd29a; }
.nav a.ativo::after { content: ""; position: absolute; left: 18%; right: 18%; bottom: 0; height: 3px; border-radius: 3px; background: var(--brasa); box-shadow: 0 0 10px rgba(226,145,63,.6); }
@media (max-width: 899px) { .nav a.ativo::after { top: 0; bottom: auto; } }

/* títulos */
h2, h3 { font-family: "Zilla Slab", Georgia, serif; color: #f6e7c8; letter-spacing: .02em; text-shadow: 0 1px 0 #120a04; }
h2 { font-size: 24px; } h3 { font-size: 18px; color: #e9c48f; }
h2 small, h2 .ajuda { font-family: "Zilla Slab", Georgia, serif; text-shadow: none; }

/* painéis de couro com costura */
.cartao, .kpi { position: relative; background: var(--couro); color: var(--texto); border: 1px solid #140b05; box-shadow: var(--sombra); }
.cartao::before, .kpi::before { content: ""; position: absolute; inset: 6px; border-radius: 11px; border: 1.3px dashed rgba(240,205,150,.28); pointer-events: none; }
.cartao { padding: 18px; }
.kpi { padding: 16px; }
.kpi .rotulo { color: var(--cobre); font-weight: 600; letter-spacing: .12em; font-size: 11px; }
.kpi .valor { font-family: "Zilla Slab", Georgia, serif; color: #fbecd0; font-size: 28px; }
.kpi .sub { color: var(--cinza); }
.kpi.destaque { background: var(--brasa); border-color: #2a1206; box-shadow: inset 0 1px 0 rgba(255,225,180,.55), inset 0 -3px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.45), 0 0 28px rgba(226,145,63,.28); }
.kpi.destaque::before { border-color: rgba(255,240,215,.45); }
.kpi.destaque .rotulo, .kpi.destaque .sub { color: #fff1dc; } .kpi.destaque .valor { color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); }

/* tabelas */
.tabela-wrap { border-radius: 14px; border: 1px solid #140b05; box-shadow: var(--sombra); background: var(--couro); }
.cartao .tabela-wrap { box-shadow: none; border-color: rgba(240,205,150,.14); }
table { background: transparent; color: var(--texto); }
th { background: #24140a; color: var(--cobre); letter-spacing: .1em; font-size: 11px; border-bottom: 1px solid rgba(240,205,150,.25); }
td { border-bottom: 1px solid rgba(240,205,150,.10); }
tr:nth-child(even) td { background: rgba(255,230,190,.025); }
tr.total td { background: rgba(201,138,75,.16); color: #fbecd0; border-top: 1px solid rgba(240,205,150,.3); }

/* botões (mesmo da tela de login) */
.btn { background: var(--brasa); color: #fff4e0; border: 1px solid #2a1206; border-radius: 11px; text-shadow: 0 1px 0 rgba(0,0,0,.35);
  box-shadow: inset 0 1px 0 rgba(255,225,180,.55), inset 0 -2px 0 rgba(0,0,0,.25), 0 4px 10px rgba(0,0,0,.35); transition: filter .2s, transform .1s; }
.btn:hover { filter: brightness(1.08); } .btn:active { transform: translateY(1px); }
.btn.secundario { background: rgba(36,20,10,.6); color: #f2c58c; border: 1px solid rgba(215,168,110,.55); text-shadow: none; box-shadow: inset 0 1px 0 rgba(255,220,170,.1); }
.btn.secundario:hover { background: rgba(201,138,75,.18); color: #ffe0b0; }
.btn.perigo { background: linear-gradient(180deg, #c8513d, #9a2d1d); }
.btn:focus-visible, .chip:focus-visible { outline: 3px solid rgba(255,210,150,.7); outline-offset: 2px; }
.fab { background: var(--brasa); border: 1px solid #2a1206; box-shadow: inset 0 1px 0 rgba(255,225,180,.55), 0 6px 16px rgba(0,0,0,.5), 0 0 22px rgba(226,145,63,.35); }

/* formulários: campos em couro claro, como no login */
.form label { color: var(--cobre); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.form input, .form select, .form textarea, #admFz {
  color: #2a1a10; background: linear-gradient(180deg, #fbf3e3, #f1e2c6); border: 1px solid #2a170a; box-shadow: inset 0 2px 3px rgba(80,45,15,.22);
}
.form input:focus, .form select:focus, .form textarea:focus { outline: none; border-color: #e09a4f; box-shadow: inset 0 2px 3px rgba(80,45,15,.2), 0 0 0 3px rgba(224,154,79,.45); }

input[type=checkbox] { accent-color: #b9601f; }

/* chips, tags, mensagens */
.chip { background: rgba(251,243,227,.08); color: #f0dcb8; border: 1px solid rgba(215,168,110,.35); }
.chip:hover { background: rgba(201,138,75,.18); }
.chip.sel { background: var(--brasa); color: #fff4e0; border-color: #2a1206; }
.tag { background: rgba(201,138,75,.2); color: #f2c58c; }
.tag.ok { background: rgba(110,170,80,.2); color: #b9e59a; }
.tag.alerta { background: rgba(240,176,74,.2); color: #ffd28a; }
.tag.erro { background: rgba(220,80,60,.22); color: #ffb3a0; }

.msg.erro { background: rgba(120,20,10,.55); color: #ffd9cc; border: 1px solid rgba(255,140,110,.35); }
.msg.ok { background: rgba(40,80,30,.55); color: #e3f5d4; border: 1px solid rgba(160,220,120,.35); }
.msg.info { background: rgba(201,138,75,.16); color: #f6e0bb; border: 1px solid rgba(215,168,110,.35); }
.barra { background: #1a0f07; box-shadow: inset 0 1px 3px rgba(0,0,0,.6); height: 10px; border-radius: 6px; }
.barra > div { background: linear-gradient(90deg, #8f4313, #e2913f); box-shadow: 0 0 8px rgba(226,145,63,.5); }
.barra.alerta > div { background: linear-gradient(90deg, #b07a10, #f0b04a); }
.barra.erro > div { background: linear-gradient(90deg, #8a2414, #e0573f); }

/* janelas (modal) e avisos */
.modal-fundo { background: rgba(10,5,2,.7); }
.modal { background: var(--couro); color: var(--texto); border: 1px solid #140b05; box-shadow: 0 22px 50px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,220,170,.2); }
.toast { background: #2c180a; color: #fbecd0; border: 1px solid rgba(215,168,110,.45); box-shadow: 0 8px 20px rgba(0,0,0,.5); }
@media print { html, body, body:not(.modo-login) { background: #fff !important; color: #000; } .cartao, .kpi, .tabela-wrap { background: #fff !important; color: #000; box-shadow: none; } th { background: #eee; color: #000; } }

/* v1.3.1 – uma única fonte (Zilla Slab) em todo o app */
html, body, button, input, select, textarea, table, .nav a, .btn, .chip, .tag, .toast, .modal { font-family: "Zilla Slab", Georgia, "Times New Roman", serif; }
html, body { font-variant-numeric: lining-nums; }
td.num, th.num, .kpi .valor { font-variant-numeric: lining-nums tabular-nums; }

/* v1.4.0 – meta de lotação editável no painel */
.cab-meta { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }

/* v1.5.0 – Troca de Pasto (lançamentos) e tabela por piquete */
.linha-lanc { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.grade-cat { display: grid; grid-template-columns: 2fr 1fr 1fr 40px; gap: 8px; margin-bottom: 8px;  }
.grade-cat.cab { margin-bottom: 4px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cinza); }
.grade-cat select, .grade-cat input { width: 100%; padding: 9px; border-radius: 8px; color: #2a1a10; background: linear-gradient(180deg, #fbf3e3, #f1e2c6); border: 1px solid #2a170a; box-shadow: inset 0 2px 3px rgba(80,45,15,.22); font: inherit; }
.grade-cat select:focus, .grade-cat input:focus { outline: none; border-color: #e09a4f; box-shadow: 0 0 0 3px rgba(224,154,79,.45); }

.resumo-lanc { margin: 6px 0 0; }
.resumo-lanc .kpi .valor { font-size: 24px; }
.tag.grande { font-size: 20px; padding: 3px 12px; border-radius: 12px; font-weight: 700; }
.tb-lanc tbody.grupo { border-top: 2px solid rgba(240,205,150,.28); }
.tb-lanc tr.novo-lote td { border-top: 1px dashed rgba(240,205,150,.22); }
.tb-lanc tr.sub td { background: rgba(201,138,75,.12); color: #f2c58c; font-weight: 700; }
.tb-lanc td .ajuda { font-size: 11px; margin-top: 2px; }
.tb-lanc td:first-child { white-space: normal; min-width: 120px; }
.acoes-lin { white-space: nowrap; } .acoes-lin .btn { padding: 4px 7px; margin-left: 4px; }
@media (max-width: 700px) { .linha-lanc { grid-template-columns: 1fr; }  }
#busca { padding: 10px 12px; border-radius: 10px; color: #2a1a10; background: linear-gradient(180deg, #fbf3e3, #f1e2c6); border: 1px solid #2a170a; box-shadow: inset 0 2px 3px rgba(80,45,15,.22); font: inherit; }
#busca:focus { outline: none; border-color: #e09a4f; box-shadow: 0 0 0 3px rgba(224,154,79,.45); }

/* v1.5.3 – Admin › Pastos: colunas alinhadas e separadas */
.tb-pastos { table-layout: fixed; min-width: 760px; }

.tb-pastos th, .tb-pastos td { padding: 10px 12px; vertical-align: middle; border-right: 1px solid rgba(240,205,150,.14); }
.tb-pastos th:last-child, .tb-pastos td:last-child { border-right: 0; }
.tb-pastos th { text-align: center; white-space: normal; line-height: 1.25; }

.tb-pastos td input:not([type=checkbox]), .tb-pastos td select { width: 100%; min-width: 0; }
.tb-pastos td input[type=number] {  text-align: center; }
.tb-pastos td:nth-child(5), .tb-pastos td:nth-child(6) { text-align: center; }
.tb-pastos .acoes-lin .btn { margin: 0 2px; }

.tb-pastos col.c-ativo { width: 11%; }
/* campos compactos e centralizados em cada coluna */
.tb-pastos td { text-align: center; }
.tb-pastos th:first-child { text-align: center; }
.tb-pastos td input.i-nome { width: 100%; max-width: 150px; }
.tb-pastos td input[type=number] { width: 100%; max-width: 120px; }

.tb-pastos td input.i-nome, .tb-pastos td input[type=number] { text-align: center; }
.tb-pastos td input[type=number] { -moz-appearance: textfield; appearance: textfield; padding-left: 6px; padding-right: 6px; }
.tb-pastos td input[type=number]::-webkit-inner-spin-button, .tb-pastos td input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }

/* v1.6.1 – Admin › Usuários no mesmo formato de Pastos/Produtos */
.tb-usuarios td { text-align: center; white-space: normal; word-break: break-word; }
.tb-usuarios td.num, .tb-usuarios th.num { text-align: center; }

/* =====================================================================
   v1.7.0 – CELULAR: tabelas viram cartões (sem arrastar para o lado)
   ===================================================================== */
@media (max-width: 700px) {
  .conteudo { padding-left: 12px; padding-right: 12px; }
  h2 { font-size: 21px; } h3 { font-size: 17px; }
  .tabela-wrap { overflow-x: visible; background: transparent; border: 0; box-shadow: none; border-radius: 0; }
  table.tb-cartao, .tb-pastos.tb-cartao { display: block; min-width: 0 !important; width: 100%; table-layout: auto; background: transparent; }
  table.tb-cartao colgroup, table.tb-cartao thead { display: none; }
  table.tb-cartao tbody { display: block; }
  table.tb-cartao tr { display: block; margin: 0 0 10px; padding: 8px 12px; border-radius: 14px; border: 1px solid #140b05;
    background: var(--couro); box-shadow: var(--sombra); }
  table.tb-cartao td, .tb-pastos.tb-cartao td { display: flex; justify-content: space-between; align-items: center; gap: 12px;
    padding: 7px 0; border: 0; border-bottom: 1px dashed rgba(240,205,150,.14); text-align: right !important; white-space: normal; background: transparent !important; min-width: 0; word-break: break-word; }
  table.tb-cartao td:last-child { border-bottom: 0; }
  table.tb-cartao td::before { content: attr(data-label); flex: 0 0 auto; max-width: 48%; text-align: left; font-size: 11px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase; color: var(--cobre); }
  table.tb-cartao td[data-label=""]::before, table.tb-cartao td.td-span::before { content: none; }
  table.tb-cartao td.td-span { justify-content: flex-start; text-align: left !important; }

  table.tb-cartao td input:not([type=checkbox]), table.tb-cartao td select {   text-align: center; }
  table.tb-cartao td.acoes-lin { justify-content: flex-end; }
  table.tb-cartao td.acoes-lin::before { content: none; }
  table.tb-cartao tr.total, table.tb-cartao tr.sub { background: rgba(201,138,75,.18); }
  table.tb-cartao tr.total td, table.tb-cartao tr.sub td { color: #fbecd0; font-weight: 700; }
  /* lançamentos: cada piquete vira um bloco; linhas de carimbo como itens */
  .tb-lanc.tb-cartao tbody.grupo { display: block; margin-bottom: 14px; padding: 6px; border-radius: 16px; border: 1px solid rgba(240,205,150,.22); }
  .tb-lanc.tb-cartao tr { margin-bottom: 6px; }
  .tb-lanc.tb-cartao tr.novo-lote td { border-top: 0; }
  /* formulários e botões */
   .acoes > * { flex: 1 1 auto; }
  .acoes input#busca { flex: 1 1 100%; }
  .linha, .linha-lanc { grid-template-columns: 1fr; }
  .grade-cat { grid-template-columns: 1.5fr 0.9fr 0.9fr 34px; gap: 6px; }
  .grade-cat select, .grade-cat input { padding: 8px 6px;  }
  .kpis { gap: 8px; } .kpi { padding: 12px; } .kpi .valor { font-size: 22px; }
  .cab-meta { flex-direction: column; align-items: stretch; }
  .chips { gap: 6px; } .chip { font-size: 13px; padding: 6px 10px; }
  .modal { padding: 14px; } .msg { font-size: 13px; }
  .topo select { min-width: 0; }
}
@media (max-width: 380px) {

  .grade-cat.cab { display: none; }
}
@media (max-width: 700px) {
  /* lançamentos compactos: cada linha de carimbo em 4 colunas */
  .tb-lanc.tb-cartao tr { display: grid; grid-template-columns: 1.35fr .8fr 1fr 1fr; gap: 2px 6px; padding: 8px 10px; }
  .tb-lanc.tb-cartao td { display: block; text-align: center !important; padding: 3px 0; border: 0; font-size: 14px; }
  .tb-lanc.tb-cartao td::before { display: block; max-width: none; text-align: center; font-size: 9.5px; margin-bottom: 1px; }
  .tb-lanc.tb-cartao td:nth-child(1) { grid-column: 1 / -1; order: -2; text-align: left !important; padding-bottom: 4px; border-bottom: 1px dashed rgba(240,205,150,.18); }
  .tb-lanc.tb-cartao td:nth-child(1)::before { display: none; }
  .tb-lanc.tb-cartao td:nth-child(3) { grid-column: 1 / -1; order: -1; text-align: left !important; display: flex; gap: 6px; align-items: baseline; }
  .tb-lanc.tb-cartao td:nth-child(3)::before { display: inline; }
  .tb-lanc.tb-cartao td:nth-child(2) { text-align: left !important; }
  .tb-lanc.tb-cartao td:nth-child(2)::before { text-align: left; }
  .tb-lanc.tb-cartao td.acoes-lin { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; }
  .tb-lanc.tb-cartao tr.sub, .tb-lanc.tb-cartao tr.total { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .tb-lanc.tb-cartao tr.sub td.td-span, .tb-lanc.tb-cartao tr.total td.td-span { grid-column: 1 / -1; order: -2; text-align: left !important; border-bottom: 0; }
  .tb-lanc.tb-cartao tr.sub td:nth-child(3), .tb-lanc.tb-cartao tr.total td:nth-child(3) { grid-column: auto; order: 0; display: block; }
  .tb-lanc.tb-cartao tr.sub td:nth-child(3)::before, .tb-lanc.tb-cartao tr.total td:nth-child(3)::before { display: block; }
  .tb-lanc.tb-cartao .pq-nome { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .tb-lanc.tb-cartao .pq-nome .ajuda { margin: 0; }
}
@media (max-width: 700px) {
  table.tb-cartao td input:not([type=checkbox]), table.tb-cartao td select { flex: 0 0 56%; width: 56% !important; max-width: 56% !important; margin-left: auto; }
}

/* v1.7.1 – lançamentos: cada piquete em um bloco, total geral separado */
.lanc-lista { display: grid; gap: 16px; margin-bottom: 18px; }
.lanc-pq { border-radius: 16px; border: 1px solid #140b05; background: var(--couro); box-shadow: var(--sombra); overflow: hidden; }
.lanc-pq-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 16px;
  background: linear-gradient(180deg, rgba(36,20,10,.9), rgba(28,15,7,.9)); border-bottom: 2px solid rgba(201,138,75,.45); }
.lanc-pq-nome { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.lanc-pq-nome b { font-size: 20px; color: #fbecd0; }
.lanc-pq-rot { font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cobre); font-weight: 700; }
.lanc-pq-ua { display: flex; align-items: center; gap: 8px; }
.lanc-pq .tabela-wrap { border: 0; border-radius: 0; box-shadow: none; background: transparent; }
.tb-lanc2 th { background: rgba(20,11,5,.35); }
.tb-lanc2 tr.novo-lote td { border-top: 1px dashed rgba(240,205,150,.22); }
.tb-lanc2 tr.sub td { background: rgba(201,138,75,.10); color: #f2c58c; font-weight: 700; border-top: 1px solid rgba(240,205,150,.25); }
.lanc-geral { margin: 6px 0 12px; padding: 14px 18px; border-radius: 16px; border: 1px solid #2a1206;
  background: var(--brasa); box-shadow: inset 0 1px 0 rgba(255,225,180,.55), 0 10px 26px rgba(0,0,0,.45), 0 0 28px rgba(226,145,63,.25); color: #fff4e0; }

.lanc-geral .tag { background: rgba(255,255,255,.9); }
.lanc-geral .tag.ok { color: #2e6b1f; } .lanc-geral .tag.alerta { color: #8a5a00; } .lanc-geral .tag.erro { color: #9a2d1d; }
@media (max-width: 700px) {
  .lanc-pq-cab { padding: 10px 12px; } .lanc-pq-nome b { font-size: 17px; }
  .lanc-pq .tb-cartao tr { margin: 6px 8px; display: grid; grid-template-columns: 1.3fr .8fr 1fr 1fr; gap: 2px 6px; padding: 8px 10px; }
  .tb-lanc2.tb-cartao td { display: block; text-align: center !important; padding: 3px 0; border: 0; font-size: 14px; }
  .tb-lanc2.tb-cartao td::before { display: block; max-width: none; text-align: center; font-size: 9.5px; margin-bottom: 1px; }
  .tb-lanc2.tb-cartao td:nth-child(1) { text-align: left !important; } .tb-lanc2.tb-cartao td:nth-child(1)::before { text-align: left; }
  .tb-lanc2.tb-cartao tr:not(.sub) td:nth-child(2) {    gap: 6px; align-items: baseline;  }

  .tb-lanc2.tb-cartao td.acoes-lin { grid-column: 1 / -1; display: flex; justify-content: flex-end; gap: 6px; }
  .tb-lanc2.tb-cartao tr.sub { grid-template-columns: 1.3fr .8fr 1fr 1fr; }
  .tb-lanc2.tb-cartao tr.sub td.td-span { text-align: left !important; align-self: end; }

}
.tb-lanc2 { table-layout: fixed; }

@media (max-width: 700px) { table.tb-cartao td.td-vazia { display: none !important; } .tb-lanc2.tb-cartao tr.sub td { border-top: 0; } }

/* v1.7.1 – uma linha por lançamento (C8/C9) e produto no cabeçalho */
.lanc-pq-dir { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: flex-end; }
.lanc-pq-prod { display: flex; align-items: center; gap: 8px; }
.lanc-pq-prod b { padding: 3px 12px; border-radius: 10px; background: rgba(201,138,75,.18); border: 1px solid rgba(215,168,110,.4); color: #f6e0bb; font-size: 15px; letter-spacing: .03em; }
.lanc-multi { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 2px; line-height: 1.25; }
.lanc-multi small { color: var(--cobre); font-weight: 700; font-size: 11px; }
.tb-lanc2 td { vertical-align: middle; }
@media (max-width: 700px) {
  .lanc-pq-cab { flex-direction: column; align-items: stretch; gap: 8px; }
  .lanc-pq-dir { justify-content: space-between; }

  .tb-lanc2.tb-cartao tr:not(.sub) td:nth-child(2) { grid-column: auto; order: 0; display: block; text-align: center !important; }
  .tb-lanc2.tb-cartao tr:not(.sub) td:nth-child(2)::before { display: block; }
  .tb-lanc2.tb-cartao td:nth-child(1) { align-self: center; }
  .lanc-multi { align-items: center; }
}
@media (max-width: 700px) { .tb-lanc2.tb-cartao tr.sub td:first-child::before { content: none; } .tb-lanc2.tb-cartao tr.sub td:first-child { align-self: end; } }

/* v1.7.2 – Rebanho por categoria em cartões + total */

/* v1.8.0 – painel: cabeçalho da fazenda e seções emolduradas */
.fz-hero { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
  margin: 4px 0 16px; padding: 18px 22px; border-radius: 18px; border: 1px solid #140b05; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(226,145,63,.22), transparent 55%), var(--couro); box-shadow: var(--sombra); }
.fz-hero::before { content: ""; position: absolute; inset: 6px; border-radius: 13px; border: 1.3px dashed rgba(240,205,150,.28); pointer-events: none; }
.fz-hero::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: var(--brasa); }
.fz-hero-esq { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.fz-hero-rot { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--cobre); font-weight: 700; }
h2.fz-hero-nome { margin: 0; font-size: 30px; line-height: 1.1; color: #fbecd0; letter-spacing: .04em; }
.fz-hero-dono { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 5px 14px 5px 8px; border-radius: 12px;
  background: rgba(201,138,75,.16); border: 1px solid rgba(215,168,110,.4); }
.fz-hero-dono > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: var(--brasa); font-size: 14px; }
.fz-hero-dono small, .fz-hero-data small { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cobre); font-weight: 700; }
.fz-hero-dono > span:last-child { font-size: 16px; font-weight: 700; color: #f6e0bb; letter-spacing: .03em; line-height: 1.15; }
.fz-hero-data { text-align: right; padding: 8px 14px; border-radius: 12px; background: rgba(20,11,5,.4); border: 1px solid rgba(240,205,150,.16); }
.fz-hero-data b { font: 700 20px "Zilla Slab", Georgia, serif; color: #fbecd0; }

.secao { margin: 18px 0; border-radius: 20px; border: 1px solid rgba(215,168,110,.28);
  background: linear-gradient(180deg, rgba(60,34,16,.55), rgba(28,15,7,.55)); box-shadow: 0 10px 28px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,220,170,.08); overflow: hidden; }
.secao-cab { display: flex; align-items: center; gap: 10px; padding: 12px 18px; background: linear-gradient(180deg, rgba(20,11,5,.65), rgba(20,11,5,.35)); border-bottom: 2px solid rgba(201,138,75,.5); }
.secao-cab h3 { margin: 0; font-size: 19px; flex: 1; min-width: 0; }
.secao-ic { width: 32px; height: 32px; flex: 0 0 32px; display: grid; place-items: center; border-radius: 10px; background: var(--brasa); box-shadow: inset 0 1px 0 rgba(255,225,180,.5), 0 2px 6px rgba(0,0,0,.4); font-size: 16px; }
.secao-cont { font-size: 12.5px; font-weight: 700; color: #f2c58c; background: rgba(201,138,75,.18); border: 1px solid rgba(215,168,110,.35); padding: 2px 10px; border-radius: 10px; white-space: nowrap; }
.secao-corpo { padding: 16px; }
.secao-corpo > .lanc-lista { margin-bottom: 0; }
.secao-corpo > .lanc-geral { margin-bottom: 0; }
.secao-corpo > :last-child { margin-bottom: 0; }

.vz-pq { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: 12px; text-align: center;
  background: rgba(251,243,227,.06); border: 1px solid rgba(215,168,110,.3); border-top: 3px solid #6f9a4e; }
.vz-pq b { font-size: 16px; color: #fbecd0; letter-spacing: .02em; }
.vz-pq span { font-size: 12.5px; color: var(--cinza); }
.vz-pq em { font-style: normal; font-size: 10px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; color: #f0b04a; }
.vz-pq[data-sit="reforma"], .vz-pq[data-sit="vedado"] { border-top-color: #c77700; }

@media (max-width: 700px) {
  .fz-hero {  gap: 12px; }

  .fz-hero-data { text-align: left; }
  .secao { margin: 14px 0; border-radius: 16px; }
  .secao-cab { padding: 10px 12px; gap: 8px; } .secao-cab h3 { font-size: 16px; }
  .secao-ic { width: 28px; height: 28px; flex-basis: 28px; font-size: 14px; }
  .secao-corpo { padding: 10px; }

}
@media print { .secao { background: #fff; box-shadow: none; } }

/* v1.8.1 – piquetes vazios: só o resumo */

/* v1.9.0 – capacidade de suporte: resposta direta + atalhos */

/* v1.9.1 – lançamentos sem a coluna kg no pasto */
@media (max-width: 700px) {
  .lanc-pq .tb-cartao tr, .tb-lanc2.tb-cartao tr.sub { grid-template-columns: 1.4fr 1fr 1fr; }
}
@media (min-width: 701px) {
  /* colunas agrupadas no centro: categoria encostada à direita, cabeças no meio, peso médio à esquerda */
  .tb-lanc2 th, .tb-lanc2 td { text-align: center; }
  .tb-lanc2 tr > :nth-child(1) { text-align: right; padding-right: 36px; }
  .tb-lanc2 tr > :nth-child(3) { text-align: left; padding-left: 36px; }
  .tb-lanc2 .lanc-multi { align-items: center; }
  .tb-lanc2 td:nth-child(3) .lanc-multi { align-items: flex-start; }
  .tb-lanc2 td.acoes-lin { text-align: right; }
}

/* v1.10.0 – lançamentos por piquete em cartões (Painel) */

.lc-rot { display: block; font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cobre); font-weight: 700; }

/* v1.10.0 – lançamentos por piquete: mosaico + ficha do piquete */

.mz-tile { display: flex; flex-direction: column;  text-align: left; padding: 12px; border-radius: 14px; cursor: pointer; color: #fff; font: inherit;
  border: 1px solid rgba(0,0,0,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 14px rgba(0,0,0,.4); transition: transform .12s, box-shadow .12s;
  background: linear-gradient(160deg, #3e5a26, #24361a); }
.mz-tile.alerta { background: linear-gradient(160deg, #7a5413, #4a3209); }
.mz-tile.erro { background: linear-gradient(160deg, #7c2c1b, #4a170d); }
.mz-tile.cinza { background: linear-gradient(160deg, #4a3627, #2c1d12); }
.mz-tile:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.5); }
.mz-tile:focus-visible { outline: 3px solid rgba(255,210,150,.8); outline-offset: 2px; }

.mz-dica { margin: 8px 0 12px; }

   

@media (max-width: 700px) {

  .mz-tile { padding: 10px; }

  
}

/* v1.11.0 – capacidade de suporte no final, versão simples */

.cap2-acoes { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (max-width: 700px) {

  .cap2-acoes .btn { flex: 1 1 auto; justify-content: center; }
}

/* v1.12.0 – aba Lançamentos: ficha com ações */

 

.lanc-ativos > .acoes { margin-bottom: 12px; }
.lanc-ativos .lanc-geral { margin-bottom: 8px; }
.lanc-ativos > :last-child { margin-bottom: 0; }
.lanc-ativos .cartao.vazio { box-shadow: none; }

/* v1.13.0 – observações nos cards e na ficha */

 
.fp-lote-obs { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; border-top: 1px dashed rgba(240,205,150,.15); }
.fp-lote-obs label { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--cobre); font-weight: 700; }
.fp-lote-obs textarea { width: 100%; resize: vertical; }
.fp-lote-obs .btn { align-self: flex-end; }
@media (max-width: 700px) { .fp-lote-obs .btn { align-self: stretch; justify-content: center; } }

/* v1.14.0 – Admin: cada aba dentro de uma caixa igual a Novo lançamento */
.adm-caixa { padding: 18px; }
.adm-tit { margin: 0 0 12px; display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid rgba(240,205,150,.18); }
.adm-tit .secao-ic { width: 30px; height: 30px; flex-basis: 30px; font-size: 15px; }
.adm-caixa .tabela-wrap { background: rgba(20,11,5,.25); }
.adm-caixa #sub > .acoes:first-child { margin-top: 0; }
@media (max-width: 700px) { .adm-caixa { padding: 14px 12px; } }

/* v1.14.0 – tabelas editáveis no celular: rótulo e campo alinhados em grade */

/* login: subtítulo sempre em uma linha no celular */

/* v1.15.0 – Compra e venda */
.ng-tipo { display: inline-flex; gap: 0; border-radius: 12px; overflow: hidden; border: 1px solid rgba(215,168,110,.45); margin-bottom: 4px; align-self: flex-start; }
.ng-opt { position: relative; cursor: pointer; }
.ng-opt input { position: absolute; opacity: 0; pointer-events: none; }
.ng-opt span {   font-weight: 700;    }

.ng-opt input:focus-visible + span { outline: 3px solid rgba(255,210,150,.7); outline-offset: -3px; }
.ng-grade { display: grid;   }
.ng-grade .ng-larga { grid-column: span 2; }
.ng-total {  border-radius: 10px; background: rgba(20,11,5,.45); border: 1px solid rgba(240,205,150,.25); font: 700 18px "Zilla Slab", Georgia, serif; color: #fbecd0; text-align: center; }
.ng-cab {      margin-bottom: 14px; }
 .ng-filtro label { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cobre); font-weight: 700;  }
.ng-filtro select { width: auto; min-width: 90px; }

.ng-graf-box { margin-top: 14px; padding: 12px 14px 6px; border-radius: 14px; background: rgba(20,11,5,.35); border: 1px solid rgba(240,205,150,.15); }
.ng-graf-tit { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-weight: 700; color: #f3e3c3; font-size: 14px; margin-bottom: 4px; }
.ng-leg { font-weight: 500; font-size: 12.5px; color: var(--cinza); display: inline-flex; align-items: center; gap: 6px; }
.ng-leg i { display: inline-block; width: 11px; height: 11px; border-radius: 3px; }  .ng-leg i.v {  margin-left: 8px; }
.ng-graf { width: 100%; height: auto; display: block; }

.ng-graf .gb-m { fill: #d7a86e; font: 600 12px "Zilla Slab", Georgia, serif; text-anchor: middle; }

@media (max-width: 700px) {
   .ng-grade .ng-larga { grid-column: 1 / -1; }
  .ng-tipo { display: flex; width: 100%; } .ng-opt { flex: 1; } .ng-opt span { text-align: center;  }

  .ng-graf-box { padding: 10px 8px 4px; }

}
.ng-form .ng-tipo { justify-self: start;  }
.ng-opt span { font: 700 15px "Zilla Slab", Georgia, serif;   }
.ng-opt { margin: 0; text-transform: none; letter-spacing: 0; font-size: inherit; color: inherit; }
 .ng-graf .gb-m { font-size: 13px; }

.ng-graf-m { display: none; }
@media (max-width: 700px) { .ng-graf-d { display: none; } .ng-graf-m { display: block; } .ng-graf .gb-m { font-size: 11px; } }

/* v1.15.1 – botões Compra / Venda redesenhados */
.ng-form .ng-tipo { display: grid; grid-template-columns: repeat(2, minmax(170px, 220px)); gap: 10px; border: 0; border-radius: 0; overflow: visible; width: auto; margin-bottom: 6px; }
.ng-opt span {  align-items: center; gap: 10px; padding: 9px 14px; border-radius: 14px; border: 1.5px solid rgba(215,168,110,.45);
  background: rgba(36,20,10,.55); color: #f3e3c3; text-transform: none; letter-spacing: 0; transition: background .15s, border-color .15s, box-shadow .15s; }
.ng-opt + .ng-opt span { border-left: 1.5px solid rgba(215,168,110,.45); }
.ng-opt span:hover { border-color: rgba(240,190,130,.75); }
.ng-opt span b { font: 700 16px "Zilla Slab", Georgia, serif; display: block; line-height: 1.1; }
.ng-opt span small { display: block; font: 500 11.5px "Zilla Slab", Georgia, serif; color: var(--cinza); letter-spacing: .02em; }
.ng-opt span > b, .ng-opt span > small { grid-column: 2; }
.ng-opt span { display: grid; grid-template-columns: 34px 1fr; grid-template-rows: auto auto; column-gap: 10px; text-align: left; }
.ng-ic { grid-row: 1 / span 2; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(251,243,227,.08); border: 1px solid rgba(215,168,110,.35); color: #d7a86e; }
.ng-ic svg { width: 18px; height: 18px; }
.ng-opt.compra input:checked + span { background: linear-gradient(180deg, #e8ac45, #b0711a); border-color: #ffd28a; box-shadow: 0 4px 14px rgba(224,164,58,.35), inset 0 1px 0 rgba(255,240,210,.5); color: #fff8ea; }
.ng-opt.venda input:checked + span { background: linear-gradient(180deg, #7fae5a, #426f2c); border-color: #c4ec9f; box-shadow: 0 4px 14px rgba(143,207,106,.3), inset 0 1px 0 rgba(235,255,220,.45); color: #f4ffeb; }
.ng-opt input:checked + span small { color: rgba(255,255,255,.85); }
.ng-opt input:checked + span .ng-ic { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.55); color: #fff; }
@media (max-width: 700px) { .ng-form .ng-tipo { grid-template-columns: 1fr 1fr; width: 100%; } .ng-opt span { padding: 8px 10px; column-gap: 8px; grid-template-columns: 30px 1fr; } .ng-ic { width: 30px; height: 30px; } .ng-opt span small { font-size: 10.5px; } }

/* v1.16.0 – Histórico em caixas */
.hist-cont { margin-left: auto; font: 700 12.5px "Zilla Slab", Georgia, serif; color: #f2c58c; background: rgba(201,138,75,.18); border: 1px solid rgba(215,168,110,.35); padding: 2px 10px; border-radius: 10px; }

/* v1.16.2 – Histórico: tabelas alinhadas e divididas */

.cargos { display: grid; gap: 6px; margin-top: 12px; font-size: 13.5px; color: #f3e3c3; } .cargos > div { padding: 8px 12px; border-radius: 10px; background: rgba(20,11,5,.3); border: 1px solid rgba(240,205,150,.14); }

/* =====================================================================
   v1.19.0 – navegação "barra única": no computador o menu fica dentro do topo
   (aba ativa em brasa); no celular, barra inferior com pílula no ícone ativo
   ===================================================================== */
.nav a .ic svg { width: 100%; height: 100%; display: block; }
.nav a .nm { white-space: nowrap; }
@media (min-width: 900px) {
  .topo { padding: 8px 18px; gap: 18px; }
  .topo h1 { flex: 0 0 auto; }
  .topo .nav { position: static; flex: 1 1 auto; min-width: 0; max-width: 760px; margin: 0 auto; padding: 4px; gap: 2px; justify-content: center;
    background: rgba(20,10,4,.45); border: 1px solid rgba(240,205,150,.14); border-radius: 14px; box-shadow: inset 0 1px 3px rgba(0,0,0,.5); }
  .topo .nav a { flex: 0 0 auto; padding: 7px 12px; border-radius: 10px; font-size: 14.5px; display: inline-flex; align-items: center; gap: 7px; color: rgba(243,227,195,.72); }
  .topo .nav a .ic { width: 17px; height: 17px; margin: 0; display: inline-block; font-size: 0; }
  .topo .nav a:hover { background: rgba(240,205,150,.08); color: #f6e7c8; }
  .topo .nav a.ativo { background: var(--brasa); color: #fff7e8; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,230,190,.45), 0 2px 6px rgba(0,0,0,.4); text-shadow: 0 1px 0 rgba(80,30,5,.6); }
  .topo .nav a.ativo::after { display: none; }
  .topo select { flex: 0 0 auto; width: auto; max-width: 320px; }
}
@media (max-width: 899px) {
  .nav { padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); background: linear-gradient(180deg, #2a170a, #1d1007); border-top: 1px solid rgba(240,205,150,.14); box-shadow: 0 -6px 18px rgba(0,0,0,.45); }
  .nav a { padding: 4px 0 2px; font-size: 10px; letter-spacing: -.01em; display: flex; flex-direction: column; align-items: center; gap: 3px; color: rgba(243,227,195,.62); min-width: 0; }
  .nav a .ic { width: 52px; height: 30px; padding: 5px 0; border-radius: 15px; display: flex; justify-content: center; font-size: 0; transition: background .2s; }
  .nav a .ic svg { width: 21px; height: 21px; }
  .nav a.ativo { color: #ffd29a; font-weight: 700; }
  .nav a.ativo .ic { background: var(--brasa); color: #fff7e8; box-shadow: inset 0 1px 0 rgba(255,230,190,.45), 0 2px 8px rgba(226,145,63,.35); }
  .nav a.ativo::after { display: none; }
}

/* =====================================================================
   v1.20.0 – campos padronizados em todo o app (mesma altura, cor, borda e seta)
   e ajustes de responsividade
   ===================================================================== */
:root { --campo-h: 44px; --seta: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%237a4318' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.conteudo :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea),
.modal :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea) {
  box-sizing: border-box; width: 100%; max-width: 100%; min-width: 0; margin: 0;
  height: var(--campo-h); min-height: var(--campo-h); padding: 0 12px;
  font-family: "Zilla Slab", Georgia, serif; font-size: 16px; line-height: 1.2; color: #2a1a10;
  background-color: #f6ead3;
  border: 1px solid #2a170a; border-radius: 10px; box-shadow: inset 0 2px 3px rgba(80,45,15,.22);
  -webkit-appearance: none; appearance: none;
}
.conteudo :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), textarea),
.modal :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), textarea) { background-image: linear-gradient(180deg, #fbf3e3, #f1e2c6); }
.conteudo textarea, .modal textarea { height: auto; min-height: 72px; padding: 10px 12px; line-height: 1.35; resize: vertical; }
.conteudo select.x, .conteudo select, .modal select, .topo select, html body .conteudo select, html body .modal select {
  -webkit-appearance: none; appearance: none; padding-right: 34px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden;
  background-image: var(--seta), linear-gradient(180deg, #fbf3e3, #f1e2c6);
  background-repeat: no-repeat, no-repeat; background-position: right 12px center, 0 0; background-size: 12px 8px, 100% 100%;
}
.topo select { height: 40px; padding-left: 12px; font-size: 15px; border-radius: 10px; }
.conteudo input::placeholder, .modal input::placeholder, .conteudo textarea::placeholder, .modal textarea::placeholder { color: rgba(90,55,25,.55); opacity: 1; }
.conteudo :is(input, select, textarea):focus, .modal :is(input, select, textarea):focus { outline: none; border-color: #e09a4f; box-shadow: inset 0 2px 3px rgba(80,45,15,.2), 0 0 0 3px rgba(224,154,79,.45); }
/* data: mesmo alinhamento no iPhone e no Android */
.conteudo input[type=date], .modal input[type=date] { display: block; text-align: left; line-height: calc(var(--campo-h) - 2px); }
input[type=date]::-webkit-date-and-time-value { text-align: left; margin: 0; }
input[type=date]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
/* números sem setinhas (o teclado numérico já aparece no celular) */
.conteudo input[type=number], .modal input[type=number] { -moz-appearance: textfield; }
.conteudo input[type=number]::-webkit-inner-spin-button, .conteudo input[type=number]::-webkit-outer-spin-button,
.modal input[type=number]::-webkit-inner-spin-button, .modal input[type=number]::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
input[type=search]::-webkit-search-decoration, input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; }
/* rótulos sempre iguais e campos alinhados pela base, mesmo quando o rótulo quebra linha */
.form label, .ng-grade label { display: block; margin-bottom: 5px; color: var(--cobre); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; line-height: 1.25; }
.ng-grade, .form .linha, .linha-lanc { align-items: end; }
/* campos dentro de tabelas editáveis: um pouco menores */
.conteudo .edit-table :is(input:not([type=checkbox]), select) { height: 38px; min-height: 38px; font-size: 15px; padding: 0 8px; border-radius: 8px; }

/* lançamento: linhas de categoria */
.grade-cat { align-items: center; }
.grade-cat .rem { height: var(--campo-h); padding: 0; display: inline-flex; align-items: center; justify-content: center; }
/* busca */
.acoes input#busca { flex: 1 1 220px; }
/* Compra e Venda: grade e total */
.ng-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 14px; }
.ng-total { box-sizing: border-box; height: var(--campo-h); display: flex; align-items: center; justify-content: center; padding: 0 12px; font-size: 18px; }
.ng-filtro { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.ng-filtro label { margin: 0; }
html body .conteudo .ng-filtro select { width: auto; min-width: 130px; height: 40px; min-height: 40px; }
.ng-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
@media (max-width: 700px) {
  .ng-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; }
  .ng-grade .ng-larga, .ng-grade .ng-larga-m { grid-column: 1 / -1; }
  .ng-cab { flex-direction: column; align-items: stretch; }
  .ng-filtro { display: grid; grid-template-columns: auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; }
  html body .conteudo .ng-filtro select { width: 100%; min-width: 0; }
  .grade-cat select, .grade-cat input { font-size: 16px; }
  .acoes { gap: 8px; }
  .acoes .btn { flex: 1 1 auto; }
  .conteudo .form .acoes .btn, .modal .acoes .btn { min-height: 46px; }
}
@media (max-width: 380px) {
  .ng-grade, .form .linha { grid-template-columns: 1fr; }
  .ng-filtro { grid-template-columns: auto minmax(0, 1fr); }
}
/* nada estoura a largura da tela */
.conteudo, .modal { overflow-wrap: break-word; }
.tag, .hist-cont { white-space: nowrap; }
/* seletor de fazenda em Admin › Pastos igual aos demais */
html body .conteudo #admFz { background-image: var(--seta), linear-gradient(180deg, #fbf3e3, #f1e2c6); background-repeat: no-repeat, no-repeat; background-position: right 12px center, 0 0; background-size: 12px 8px, 100% 100%; padding-right: 34px; }
.acoes label.ajuda { color: var(--cobre); font-weight: 600; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; }
.conteudo img, .conteudo svg { max-width: 100%; }
@media (min-width: 701px) { html body .ng-cab .ng-filtro { display: flex; flex-wrap: nowrap; flex: 0 0 auto; } html body .ng-filtro label { display: inline-block; margin: 0 0 0 6px; } html body .conteudo .ng-cab .ng-filtro select { flex: 0 0 150px; width: 150px; min-width: 150px; } }
@media (max-width: 700px) { html body .ng-filtro label { margin: 0; } }

/* v1.21.0 – Histórico: botões de limpar no fim de cada caixa */

.conteudo th { overflow-wrap: normal; word-break: normal; }
/* no computador o botão de limpar fica no topo da caixa, ao lado da contagem; no celular, embaixo */
.hist-limpar-topo { margin-left: auto; font-family: "Zilla Slab", Georgia, serif; letter-spacing: 0; text-transform: none; }
.hist-limpar-topo + .hist-cont { margin-left: 10px; }

@media (max-width: 700px) { .hist-limpar-topo { display: none; } .hist-limpar-topo + .hist-cont { margin-left: auto; } }
/* v1.21.0 – botão de limpar no topo da caixa também no celular (igual ao computador) */
.hist-limpar-topo { flex: 0 0 auto; white-space: nowrap; }
@media (max-width: 700px) {
  /* no celular o botão desce para uma linha própria, logo abaixo do título, ocupando a largura */
  .adm-tit { flex-wrap: wrap; row-gap: 10px; }
  html body .hist-limpar-topo { display: inline-flex; order: 3; flex: 1 1 100%; justify-content: center; margin: 0; padding: 9px 12px; font-size: 14px; }
  html body .hist-limpar-topo + .hist-cont { margin-left: auto; }
}
.adm-tit-txt { flex: 1 1 0; min-width: 0; }
.adm-tit-txt + .hist-limpar-topo { margin-left: 0; }

/* =====================================================================
   v1.22.0 – Painel: "olhinho" para recolher e mostrar cada caixa (animação suave)
   ===================================================================== */
.secao-olho { flex: 0 0 auto; width: 38px; height: 38px; margin-left: 4px; padding: 0; display: inline-grid; place-items: center; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(215,168,110,.35); background: rgba(201,138,75,.14); color: #f2c58c;
  transition: background .2s, color .2s, transform .15s, border-color .2s; -webkit-tap-highlight-color: transparent; }
.secao-olho svg { width: 20px; height: 20px; }
.secao-olho:hover { background: rgba(226,145,63,.28); color: #ffe2b4; border-color: rgba(240,180,110,.6); }
.secao-olho:active { transform: scale(.92); }
.secao-olho:focus-visible { outline: 3px solid rgba(255,210,150,.6); outline-offset: 2px; }
.secao.fechada .secao-olho { background: var(--brasa); color: #fff7e8; border-color: #ffcf96; box-shadow: inset 0 1px 0 rgba(255,230,190,.45), 0 2px 8px rgba(226,145,63,.35); }
.secao-dobra { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .38s cubic-bezier(.4,0,.2,1); }
.secao-dobra-in { min-height: 0; overflow: hidden; transition: opacity .3s ease; }
.secao.fechada .secao-dobra { grid-template-rows: 0fr; }
.secao.fechada .secao-dobra-in { opacity: 0; }
.secao-cab { transition: border-color .3s; }
.secao.fechada .secao-cab { border-bottom-color: transparent; }
@media (prefers-reduced-motion: reduce) { .secao-dobra, .secao-dobra-in { transition: none; } }
@media (max-width: 700px) { .secao-olho { width: 36px; height: 36px; } }

/* =====================================================================
   v1.24.0 – Relatórios novos (abas, indicadores, gráficos)
   ===================================================================== */
.secao-cont[hidden] { display: none; }

.rel-imp { margin-left: 4px; }

.rk { position: relative; padding: 12px 14px 12px 16px; border-radius: 14px; background: rgba(20,11,5,.45); border: 1px solid rgba(240,205,150,.16); overflow: hidden; }
.rk::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgba(215,168,110,.5); }
.rk.ok::before { background: #8fcf6a; } .rk.alerta::before { background: #f0b04a; } .rk.erro::before { background: #ff8a70; }
.rk small { display: block; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--cobre); font-weight: 700; }
.rk b { display: block; font: 700 26px "Zilla Slab", Georgia, serif; color: #fbecd0; margin: 3px 0 1px; line-height: 1.1; }
.rk.ok b { color: #b6e894; } .rk.alerta b { color: #ffd08a; } .rk.erro b { color: #ffab98; }
.rk span { font-size: 13px; color: var(--cinza); }

.tag.cinza { background: rgba(240,205,150,.1); color: var(--cinza); }
.lot-barra { position: relative; display: inline-block; width: 90px; height: 8px; border-radius: 6px; background: rgba(0,0,0,.35); vertical-align: middle; margin-right: 6px; overflow: hidden; }
.lot-barra i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 6px; background: #8fcf6a; }
.lot-barra.alerta i { background: #f0b04a; } .lot-barra.erro i { background: #ff8a70; }
.lot-barra em { position: absolute; top: -2px; bottom: -2px; width: 2px; background: #fbecd0; opacity: .8; }
.rel-grafs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.rel-graf-box { padding: 10px 10px 4px; border-radius: 14px; background: rgba(20,11,5,.35); border: 1px solid rgba(240,205,150,.15); }
.rel-graf-tit { font-weight: 700; font-size: 14px; color: #f3e3c3; margin: 0 4px 2px; }
.rel-graf { width: 100%; height: auto; display: block; }
.rel-graf .gl-grade { stroke: rgba(240,205,150,.12); stroke-width: 1; }
.rel-graf .gl-y { fill: rgba(243,227,195,.55); font: 600 11px "Zilla Slab", Georgia, serif; text-anchor: end; }
.rel-graf .gl-x { fill: #d7a86e; font: 600 11px "Zilla Slab", Georgia, serif; text-anchor: middle; }

.rel-nota { margin: 12px 0 0; line-height: 1.45; }
.rel-vazio { padding: 18px; border-radius: 14px; border: 1px dashed rgba(240,205,150,.25); color: var(--cinza); text-align: center; line-height: 1.5; }

@media (max-width: 900px) { .rel-grafs { grid-template-columns: 1fr; } }
@media (max-width: 700px) {

  .rk b { font-size: 22px; }

}
@media print {
  .no-print, .secao-olho { display: none !important; }
  body, body:not(.modo-login) { background: #fff !important; color: #000 !important; }
  .secao, .cartao, .rk, .rel-graf-box { background: #fff !important; border-color: #999 !important; box-shadow: none !important; color: #000 !important; }
  .rk b, .rk small, .rk span, h2, h3, h4, td, th { color: #000 !important; text-shadow: none !important; }

  .secao-cab { background: none !important; }
}

/* relatórios no celular: cartões compactos (nome + destaque na 1ª linha, dados em colunas embaixo) */

/* Admin › Produtos com saco e preço: nome do produto mais largo */

/* v1.24.0 – botões entre relatórios: faixa única com ícones de traço */

/* v1.24.1 – Admin › Pastos sem a coluna Situação */
  .tb-pastos:not(.tb-produtos) col.c-ativo { width: 10%; }

/* =====================================================================
   v1.25.0 – carregamento com "esqueleto" da tela e botão "Salvando…"
   ===================================================================== */
.esqueleto { animation: skEntra .25s ease both; }
.sk { position: relative; overflow: hidden; background: rgba(240,205,150,.075); border-radius: 14px; border: 1px solid rgba(240,205,150,.06); }
.sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,215,160,.13), transparent); animation: skBrilho 1.3s ease-in-out infinite; }
@keyframes skBrilho { to { transform: translateX(100%); } }
@keyframes skEntra { from { opacity: 0; } to { opacity: 1; } }
.sk-hero { height: 96px; border-radius: 20px; margin-bottom: 16px; }
.sk-tit { height: 30px; width: min(520px, 80%); border-radius: 10px; margin: 6px 0 16px; }
.sk-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.sk-kpis .sk { height: 92px; }
.sk-sec { height: 54px; border-radius: 18px; margin-bottom: 12px; }
.sk-grade { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.sk-grade .sk { height: 118px; }
.sk-caixa { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; padding: 16px; margin-bottom: 16px; border-radius: 20px; border: 1px solid rgba(240,205,150,.1); background: rgba(20,11,5,.25); }
.sk-campo { height: 46px; } .sk-larga { grid-column: 1 / -1; height: 70px; } .sk-btn { height: 44px; width: 140px; }
.sk-linha { grid-column: 1 / -1; height: 38px; border-radius: 10px; } .sk-cab { height: 30px; opacity: .7; }
.sk-abas { height: 72px; border-radius: 16px; margin-bottom: 16px; }
.sk-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } .sk-chip { width: 92px; height: 34px; border-radius: 18px; }
@media (max-width: 700px) {
  .sk-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sk-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sk-hero { height: 150px; } .sk-abas { height: 140px; } .sk-caixa { grid-template-columns: 1fr; }
}
/* conteúdo entra suave quando termina de carregar */
.conteudo.entrou > * { animation: skEntra .3s ease both; }
/* botão salvando */
button.ocupado { cursor: progress; opacity: .9; display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.gira { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(255,247,232,.35); border-top-color: #fff7e8; animation: giraBt .7s linear infinite; flex: 0 0 auto; }
@keyframes giraBt { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .sk::after, .gira { animation-duration: 2.5s; } .conteudo.entrou > *, .esqueleto { animation: none; } }
button.ocupado:disabled { opacity: 1; color: #fff7e8; filter: saturate(.85); }

/* =====================================================================
   v1.25.1 – a tela nunca arrasta para o lado (celular e computador)
   "clip" corta qualquer sobra lateral sem quebrar o topo fixo (sticky)
   ===================================================================== */
html, body { max-width: 100%; overscroll-behavior-x: none; }
html, body, #app { overflow-x: clip; }
#app, .conteudo { min-width: 0; }
.conteudo { max-width: min(1100px, 100%); box-sizing: border-box; }
.conteudo img, .conteudo video, .conteudo canvas, .modal img { max-width: 100%; height: auto; }
.tabela-wrap { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; }
.toast { max-width: calc(100vw - 32px); box-sizing: border-box; overflow-wrap: break-word; }
.modal-fundo { overflow-x: clip; }
.modal { box-sizing: border-box; max-width: min(640px, 100%); overflow-x: hidden; }
.topo, .nav { max-width: 100%; box-sizing: border-box; }
/* barra de baixo em celulares estreitos (até 360 px): nomes menores para não encostarem */
@media (max-width: 360px) {
  .nav a { font-size: 8.8px !important; letter-spacing: -.02em; }
  .nav a .ic { width: 44px; height: 28px; }
}

/* =====================================================================
   v1.25.3 – correções da auditoria de layout
   ===================================================================== */
/* 1) topo entre 900 e 1279 px: menu não passa por cima do título nem da fazenda */
@media (min-width: 900px) and (max-width: 1339px) {
  .topo { gap: 10px; padding-left: 12px; padding-right: 12px; }
  .topo-nome { display: none; }
  .topo h1 { flex: 0 0 auto; }
  .topo .nav { max-width: none; margin: 0; flex: 1 1 auto; min-width: 0; }
  .topo .nav a { padding: 7px 9px; font-size: 13.5px; gap: 5px; }
  .topo select { flex: 0 1 230px; min-width: 150px; max-width: 230px; }
}
@media (min-width: 900px) and (max-width: 1099px) {
  .topo .nav a { padding: 7px 8px; font-size: 13px; }
  .topo .nav a .ic { display: none; }
  .topo .nav a.ativo .ic { display: inline-block; }
  .topo select { flex-basis: 190px; max-width: 190px; min-width: 130px; font-size: 13.5px; }
}
/* 3) iPhone: campos com 16 px não dão zoom ao tocar */
@media (max-width: 899px) {
  .topo select, html body .topo select { font-size: 16px; }
  
}
/* 6) botões pequenos fáceis de tocar no celular */
@media (max-width: 700px) {
  .conteudo .btn.pequeno { min-height: 36px; min-width: 36px; justify-content: center; }
  
}
/* 7) celular estreito: "×" ao lado de cabeças e peso, não sozinho numa linha */
@media (max-width: 380px) {
  .grade-cat { grid-template-columns: 1fr 1fr 38px; }
  .grade-cat .cat { grid-column: 1 / -1; }
  .grade-cat .rem { height: 100%; min-height: 40px; }
}
/* 5) gráfico de Compra e Venda: rótulos empilhados com a cor da barra */

/* 8) Resumo do mês: 3 cartões ocupam a linha toda */

/* 8) Backup no mesmo estilo das outras caixas do Admin */

/* 8) tela inicial enquanto o app carrega */
.carga-ini { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #1c120b; }
.carga-ini img { width: 84px; height: 80px; border-radius: 20px; object-fit: cover; box-shadow: 0 0 0 2px #1a0f07, 0 0 0 4px rgba(201,138,75,.6), 0 10px 28px rgba(0,0,0,.6); animation: cargaPulso 1.4s ease-in-out infinite; }
.carga-ini span { width: 120px; height: 4px; border-radius: 4px; background: linear-gradient(90deg, transparent, #e2913f, transparent) 0 0 / 50% 100% no-repeat, rgba(240,205,150,.12); animation: cargaBarra 1.1s linear infinite; }
@keyframes cargaPulso { 50% { transform: scale(.94); opacity: .8; } }
@keyframes cargaBarra { from { background-position: -60px 0, 0 0; } to { background-position: 180px 0, 0 0; } }
@media (prefers-reduced-motion: reduce) { .carga-ini img, .carga-ini span { animation: none; } }
/* 2) valores em R$ nunca quebram no meio; cartões com valor longo usam fonte menor */
.rk b { overflow-wrap: normal; word-break: normal; white-space: nowrap; }
@media (max-width: 700px) {
  .rk.rk-longo b { font-size: clamp(14px, 4.6vw, 22px); }

}

/* =====================================================================
   v1.26.0 – gráfico "Preço médio por cabeça" em Compra e Venda
   compras = laranja brasa, vendas = azul (par testado para daltonismo)
   ===================================================================== */

.ng-leg i.c { background: #c9772a; } .ng-leg i.v { background: #3d9cc4; }
.ng-graf.gp .gp-grade { stroke: rgba(240,205,150,.09); stroke-width: 1; }
.ng-graf.gp .gp-y { fill: rgba(243,227,195,.55); font: 500 11px system-ui, sans-serif; text-anchor: end; }
.ng-graf.gp .gp-linha { fill: none; stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.ng-graf.gp .gp-linha.gp-c { stroke: #c9772a; } .ng-graf.gp .gp-linha.gp-v { stroke: #3d9cc4; }
.ng-graf.gp .gp-med { stroke-width: 1.5; stroke-dasharray: 6 5; opacity: .9; }
.ng-graf.gp .gp-med.gp-c { stroke: #c9772a; } .ng-graf.gp .gp-med.gp-v { stroke: #3d9cc4; }
.ng-graf.gp .gp-p { stroke: #24140a; stroke-width: 2; transition: r .15s; }
.ng-graf.gp .gp-p.gp-c { fill: #c9772a; } .ng-graf.gp .gp-p.gp-v { fill: #3d9cc4; }
.ng-graf.gp .gp-alvo { fill: transparent; cursor: pointer; }
.ng-graf.gp .gp-pt:hover .gp-p { stroke: #f3e3c3; }
.gp-sub { font-weight: 400; font-size: 12px; color: var(--cinza); margin-left: 6px; }
.gp-resumo { display: flex; flex-wrap: wrap; gap: 8px 18px; padding: 8px 4px 6px; border-top: 1px dashed rgba(240,205,150,.15); margin-top: 4px; font-size: 14px; color: var(--cinza); }
.gp-resumo b { color: #fbecd0; }
.gp-resumo i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.gp-resumo i.c { background: #c9772a; } .gp-resumo i.v { background: #3d9cc4; }
.gp-resumo .gp-dif.pos b { color: #a8e083; } .gp-resumo .gp-dif.neg b { color: #ff9c85; }
.ng-graf-vazio { padding: 28px 10px; text-align: center; color: var(--cinza); font-size: 14px; }
@media (max-width: 700px) { .ng-graf-vazio.ng-graf-d { display: none; } .ng-graf-vazio.ng-graf-m { display: block; } .gp-resumo { font-size: 13px; gap: 6px 14px; } .gp-sub { display: block; margin: 2px 0 0; } }
@media (min-width: 701px) { .ng-graf-vazio.ng-graf-m { display: none; } }
.ng-graf.gp .gp-rot { font: 700 12px system-ui, sans-serif; text-anchor: middle; fill: #f3e3c3; }
/* v1.26.0 – tudo dentro do gráfico: médias tracejadas, rótulos e diferença à direita */
.ng-graf.gp .gp-faixa { fill: rgba(240,205,150,.07); stroke: rgba(240,205,150,.18); }
.ng-graf.gp .gp-msel { fill: #ffd29a; }
.ng-graf.gp .gp-apag { opacity: .28; }
.ng-graf.gp .gp-rt { font: 600 11px system-ui, sans-serif; letter-spacing: .02em; }
.ng-graf.gp .gp-ct { fill: #e2a066; } .ng-graf.gp .gp-vt { fill: #6fbede; }
.ng-graf.gp .gp-rv { font: 700 14px system-ui, sans-serif; fill: #fbecd0; }
.ng-graf.gp .gp-chave { fill: none; stroke: rgba(243,227,195,.55); stroke-width: 1.5; }
.ng-graf.gp .gp-dt { font: 600 11px system-ui, sans-serif; fill: rgba(243,227,195,.7); text-anchor: end; }
.ng-graf.gp .gp-dv { font: 800 15px system-ui, sans-serif; text-anchor: end; } .ng-graf.gp .gp-dv.pos { fill: #a8e083; } .ng-graf.gp .gp-dv.neg { fill: #ff9c85; }
.ng-graf.gp .gp-semmes { font: 500 14px "Zilla Slab", Georgia, serif; fill: rgba(243,227,195,.7); text-anchor: middle; }
.ng-graf.gp .gp-per { font: 700 11px system-ui, sans-serif; fill: #d9a46a; letter-spacing: .08em; text-transform: uppercase; }
@media (max-width: 700px) { .ng-graf.gp .gp-rv { font-size: 12.5px; } .ng-graf.gp .gp-dv { font-size: 13px; } .ng-graf.gp .gp-rt, .ng-graf.gp .gp-dt { font-size: 10px; } }

/* v1.26.1 – Observações: o texto (e o "opcional") começa alinhado como nos outros campos,
   com o mesmo recuo da esquerda e o mesmo espaço em cima (a regra geral de campos zerava o padding) */
.conteudo :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea):is(textarea),
.modal :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea):is(textarea) {
  height: 60px; min-height: 60px; padding: 11px 12px; line-height: 1.35; resize: vertical;
}
/* v1.26.2 – Observações: "opcional" em cima (não sobe mais ao clicar) e caixa um pouco mais baixa */
@media (max-width: 600px) { #fLanc textarea { height: 68px; } }
@media (max-width: 340px) { #fLanc textarea { height: 90px; } }
/* ficha do piquete: o texto de exemplo é comprido e quebra em 2 linhas no celular */
@media (max-width: 600px) { .modal :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea):is(textarea)[data-obs] { height: 68px; } }
@media (max-width: 340px) { .modal :is(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]), select, textarea):is(textarea)[data-obs] { height: 90px; } }

/* =====================================================================
   v1.27.0 – seletor de pastos mais claro + caixinha de confirmação no meio
   ===================================================================== */
.pqsel { border: 1px solid rgba(240,205,150,.16); border-radius: 14px; background: rgba(20,11,5,.35); padding: 10px; margin-top: 4px; }
.pqsel [hidden] { display: none !important; }
.pqsel-topo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 8px; }
.conteudo .pqsel-busca, .modal .pqsel-busca, html body .modal input.pqsel-busca { flex: 1 1 200px; max-width: 280px; height: 38px; min-height: 38px; font-size: 15px; }
.pqsel-resumo { font-size: 14px; color: #f3e3c3; } .pqsel-resumo b { color: #ffd29a; }
.pqsel-vazio { color: var(--cinza); font-size: 13.5px; }
.pqsel-grupo + .pqsel-grupo { margin-top: 10px; }
.pqsel-ret { font: 700 11.5px "Zilla Slab", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #d9a46a; margin: 2px 2px 6px; display: flex; align-items: center; gap: 8px; }
.pqsel-ret::after { content: ""; flex: 1; height: 1px; background: rgba(240,205,150,.16); }
.pqsel-grade { display: grid;    overflow-y: auto; padding: 2px; }
.pqsel .chip.pq { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  background: rgba(251,243,227,.07); border: 1px solid rgba(215,168,110,.3); color: #f6e7c8; cursor: pointer; font-family: inherit; transition: background .12s, border-color .12s; }
.pqsel .chip.pq b { font: 700 17px "Zilla Slab", Georgia, serif; line-height: 1.1; }
.pqsel .chip.pq small { font: 500 11.5px system-ui, sans-serif; color: rgba(243,227,195,.62); white-space: nowrap; }
.pqsel .chip.pq:hover { border-color: rgba(240,205,150,.6); background: rgba(251,243,227,.12); }
.pqsel .chip.pq.sel { background: linear-gradient(180deg, #e2913f, #b9661f); border-color: #ffcf94; color: #fff8ec; box-shadow: 0 2px 8px rgba(226,145,63,.35); }
.pqsel .chip.pq.sel small { color: rgba(255,248,236,.9); }
.pqsel .chip.pq.sel::after { content: "✓"; position: absolute;   font: 800 12px system-ui, sans-serif; color: #fff8ec; }

/* cabeçalho das colunas de animais no Editar lote */
.itens-cab { margin-bottom: 4px; align-items: center; } .itens-cab span { font: 700 11px "Zilla Slab", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cinza); }
.itens-cab span:last-child { width: 36px; }
@media (max-width: 700px) { .itens-cab span { font-size: 10px; letter-spacing: .05em; } }

/* caixinha de confirmação */
.cf-fundo { z-index: 1000; align-items: center !important; justify-content: center; padding: 16px; animation: cfFundo .15s ease-out; }
.modal.cf { max-width: 420px; width: 100%; text-align: center; padding: 26px 22px 20px; border-radius: 18px !important; animation: cfEntra .18s ease-out; }
.cf-ic { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 26px;
  background: rgba(240,205,150,.12); border: 1px solid rgba(240,205,150,.3); }
.cf-ic.perigo { background: rgba(255,120,90,.14); border-color: rgba(255,140,110,.45); }
.cf-tit { margin: 0 0 8px; font: 700 19px "Zilla Slab", Georgia, serif; color: #fbecd0; line-height: 1.3; }
.cf-txt { margin: 0 0 6px; font-size: 14.5px; line-height: 1.45; color: rgba(243,227,195,.78); }
.modal .cf-campo, html body .modal input.cf-campo { margin: 10px 0 2px; }
.cf-bts { display: flex; gap: 10px; margin-top: 18px; } .cf-bts .btn { flex: 1; justify-content: center; min-height: 44px; }
@keyframes cfFundo { from { opacity: 0; } } @keyframes cfEntra { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .cf-fundo, .modal.cf { animation: none; } }
/* v1.27.1 – todos os pastos aparecem dentro do quadro, sem barra de rolagem (blocos um pouco mais compactos) */
.pqsel-grade { max-height: none; overflow: visible; grid-template-columns: repeat(auto-fill, minmax(66px, 1fr)); gap: 5px; }
.pqsel .chip.pq { min-height: 44px; padding: 4px 3px; border-radius: 10px; }
.pqsel .chip.pq b { font-size: 15.5px; } .pqsel .chip.pq small { font-size: 11px; }
.pqsel .chip.pq.sel::after { top: 2px; right: 5px; font-size: 11px; }
@media (max-width: 700px) { .pqsel-grade { max-height: none; grid-template-columns: repeat(auto-fill, minmax(58px, 1fr)); } .pqsel .chip.pq { min-height: 44px; } .pqsel .chip.pq b { font-size: 15px; } .pqsel .chip.pq small { font-size: 10.5px; } }
.pqsel .chip.pq b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pqsel .chip.pq.longo b { font-size: 12.5px; letter-spacing: -.01em; }
@media (max-width: 700px) { .pqsel .chip.pq.longo b { font-size: 11px; letter-spacing: -.02em; } }

/* v1.28.0 – celular: a data vai na linha do rótulo ("PAINEL DA FAZENDA • 27/10/2026"); no computador fica o quadro "Hoje" à direita */
.fz-hero-rot-data { display: none; }
@media (max-width: 700px) {
  .fz-hero { padding: 14px 16px 14px 20px; }
  .fz-hero-data { display: none; }
  .fz-hero-rot-data { display: inline; color: #fbecd0; white-space: nowrap; }
  .fz-hero-rot-data i { font-style: normal; opacity: .55; margin: 0 7px; }
  h2.fz-hero-nome { font-size: 22px; }
}
@media (max-width: 360px) { .fz-hero-rot { font-size: 9.5px; letter-spacing: .1em; } }
/* v1.28.0 – sem a tira laranja na borda esquerda da faixa do topo (em todas as abas) */
.fz-hero::after { display: none; }
@media (max-width: 700px) { .fz-hero { padding-left: 16px; } }

/* v1.29.0 – Taxa de lotação muda de cor conforme a meta (mesmas cores dos piquetes):
   verde = até a meta · amarelo = até 25% acima · vermelho = mais de 25% acima */
.kpi.destaque.lot-ok { background: linear-gradient(160deg, #4f7a2c, #2c4a18); border-color: #142208; box-shadow: inset 0 1px 0 rgba(220,255,190,.35), inset 0 -3px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.45), 0 0 26px rgba(120,190,80,.22); }
.kpi.destaque.lot-alerta { background: linear-gradient(160deg, #a8741a, #6b4708); border-color: #2a1a04; box-shadow: inset 0 1px 0 rgba(255,230,170,.4), inset 0 -3px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.45), 0 0 26px rgba(230,170,50,.25); }
.kpi.destaque.lot-erro { background: linear-gradient(160deg, #a83a24, #6a1c0f); border-color: #2a0a04; box-shadow: inset 0 1px 0 rgba(255,200,180,.35), inset 0 -3px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.45), 0 0 26px rgba(230,90,60,.28); }
.kpi.destaque.lot-cinza { background: linear-gradient(160deg, #5a4331, #2c1d12); }
.kpi.destaque .rotulo { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.kpi.destaque .lot-st { font-size: 10px; letter-spacing: .06em; padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.25); color: #fff; white-space: nowrap; }

/* v1.30.0 – olhinho nas caixas de Lançamentos, Compra e Venda, Relatórios e Histórico (igual ao Painel) */
.cartao-cab { display: flex; align-items: center; gap: 10px; }
.cartao-cab h3 { flex: 1; min-width: 0; }
.cartao-recolhe > .cartao-cab, .cartao-recolhe > .ng-cab, .cartao-recolhe > h3.adm-tit { transition: margin .3s, padding .3s, border-color .3s; }
.cartao-recolhe > .cartao-cab + .secao-dobra > .secao-dobra-in { padding-top: 12px; }
.cartao-recolhe.fechada .secao-dobra { grid-template-rows: 0fr; }
.cartao-recolhe.fechada .secao-dobra-in { opacity: 0; }
.cartao-recolhe.fechada > .ng-cab, .cartao-recolhe.fechada > h3.adm-tit { margin-bottom: 0; padding-bottom: 0; border-bottom-color: transparent; }
.cartao-recolhe.fechada .cartao-olho { background: var(--brasa); color: #fff7e8; border-color: #ffcf96; box-shadow: inset 0 1px 0 rgba(255,230,190,.45), 0 2px 8px rgba(226,145,63,.35); }
.cartao-recolhe.fechada .hist-limpar-topo { display: none; }
.ng-cab .cartao-cab { flex: 1 1 auto; }
h3.adm-tit .cartao-olho { margin-left: 4px; }
@media print { .cartao-olho { display: none !important; } .cartao-recolhe.fechada .secao-dobra { grid-template-rows: 1fr; } .cartao-recolhe.fechada .secao-dobra-in { opacity: 1; } }
.ng-cab > .cartao-olho { order: 9; }
@media (max-width: 700px) { .cartao-recolhe > .ng-cab { position: relative; } .cartao-recolhe > .ng-cab > .cartao-olho { position: absolute; top: -4px; right: 0; } }
.cartao-recolhe .secao-dobra-in { transition: opacity .3s ease, padding .38s cubic-bezier(.4,0,.2,1); }
.cartao-recolhe.fechada .secao-dobra-in { padding-top: 0 !important; }
/* ícones nos títulos das caixas (Lançamentos, Compra e Venda, Exportar), iguais aos do Histórico */
h3.cartao-tit { display: flex; align-items: center; gap: 10px; }
h3.cartao-tit .secao-ic { width: 30px; height: 30px; flex: 0 0 30px; font-size: 15px; }

/* v1.30.1 – caixas escondidas pelo olhinho com o MESMO visual em todas as abas
   (fundo de couro, borda escura e o tracejado por dentro – igual a "Novo lançamento" fechado) */
.secao { position: relative; transition: background .3s, border-color .3s; }
.secao::before { content: ""; position: absolute; inset: 6px; border-radius: 15px; border: 1.3px dashed rgba(240,205,150,.28); pointer-events: none; opacity: 0; transition: opacity .3s; z-index: 1; }
.secao.fechada { background: var(--couro); border-color: #140b05; box-shadow: var(--sombra); }
.secao.fechada::before { opacity: 1; }
.secao.fechada .secao-cab { background: transparent; padding-top: 18px; padding-bottom: 18px; }
@media (max-width: 700px) { .secao.fechada .secao-cab { padding: 16px 14px; } }
/* Compra e Venda › Relatório: ao esconder, o filtro de Ano/Mês também some */
/* (v1.53.3) antes ele sumia de uma vez (display:none) e o cabeçalho "pulava"; agora fecha/abre junto com o card */
.cartao-recolhe > .ng-cab { transition: margin .3s, padding .3s, border-color .3s, row-gap .38s cubic-bezier(.4,0,.2,1); }
.cartao-recolhe > .ng-cab .ng-filtro { max-height: 240px; overflow: clip; overflow-clip-margin: 6px;
  transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .3s ease, visibility 0s linear 0s; }
.cartao-recolhe.fechada > .ng-cab { row-gap: 0; }
.cartao-recolhe.fechada > .ng-cab .ng-filtro { max-height: 0; opacity: 0; visibility: hidden; pointer-events: none;
  transition: max-height .38s cubic-bezier(.4,0,.2,1), opacity .2s ease, visibility 0s linear .38s; }
@media (prefers-reduced-motion: reduce) { .cartao-recolhe > .ng-cab, .cartao-recolhe > .ng-cab .ng-filtro { transition: none; } }

/* =====================================================================
   v1.31.0 – Mortes (lançamento com foto, lista e detalhe)
   ===================================================================== */
.mt-tit { display: flex; align-items: center; gap: 10px; margin-top: 0; }
.mt-tit .secao-ic { width: 32px; height: 32px; flex: 0 0 32px; font-size: 16px; }

.mt-obr { font-size: 10px; letter-spacing: .08em; text-transform: uppercase; color: #ffb39e; margin-left: 6px; }
.mt-foto { position: relative; display: flex; align-items: center; justify-content: center; min-height: 128px; border-radius: 14px; cursor: pointer; overflow: hidden;
  border: 2px dashed rgba(240,205,150,.4); background: rgba(20,11,5,.35); transition: border-color .15s, background .15s; }
.mt-foto:hover { border-color: #e2913f; background: rgba(226,145,63,.1); }
.mt-foto input[type=file] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }
.mt-foto-vazio { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #f3e3c3; font-size: 14.5px; pointer-events: none; text-align: center; padding: 12px; }
.mt-foto-vazio b { font-size: 30px; line-height: 1; }
.mt-foto.tem { border-style: solid; border-color: rgba(240,205,150,.35); min-height: 0; }
.mt-foto.tem .mt-foto-vazio { display: none; }
.mt-foto img { display: block; width: 100%; max-height: 300px; object-fit: contain; background: #120a05; pointer-events: none; }
.mt-topo { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.mt-topo .ajuda { margin: 0; flex: 1 1 240px; }

.mt-mini { flex: 0 0 56px; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: #120a05; display: grid; place-items: center; }
.mt-mini img { width: 100%; height: 100%; object-fit: cover; } .mt-mini img:not([src]), .mt-mini img.sem { opacity: 0; }

.mt-ver-foto { border-radius: 14px; overflow: hidden; background: #120a05; margin-bottom: 12px; min-height: 160px; display: grid; place-items: center; }
.mt-ver-foto img { display: block; max-width: 100%; max-height: 52vh; object-fit: contain; }
.mt-ver-dados { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 16px; margin-bottom: 6px; }
.mt-ver-dados > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mt-ver-dados small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cobre); font-weight: 700; }
.mt-ver-dados b { color: #fbecd0; font-size: 15.5px; } .mt-ver-dados span { color: #f3e3c3; font-size: 14px; }
.mt-ver-larga { grid-column: 1 / -1; }

@media (max-width: 700px) {
  
  .mt-topo .btn { width: 100%; justify-content: center; }
  .mt-ver-dados { grid-template-columns: 1fr; }
}
.mt-foto img[hidden] { display: none !important; }
.mt-foto-vazio, .mt-foto-vazio span { text-transform: none; letter-spacing: 0; font-weight: 600; }
/* v1.31.1 – Mortes: botão em cima, à esquerda, com a explicação ao lado; miniatura com ícone enquanto a foto carrega */
.mt-cartao .mt-topo { justify-content: flex-start; gap: 10px 14px; margin-bottom: 14px; }
.mt-cartao .mt-topo .btn { flex: 0 0 auto; }
.mt-cartao .mt-topo .ajuda { flex: 1 1 220px; }
.mt-mini { position: relative; }
.mt-mini::before { content: "📷"; position: absolute; font-size: 20px; opacity: .45; }
.mt-mini img { position: relative; z-index: 1; }
.mt-mini img:not([src]), .mt-mini img.sem, .mt-ver-foto img.sem { visibility: hidden; }

/* v1.32.1 – botão ✕ das categorias: quadrado, mesma altura dos campos, nunca cortado (Novo lançamento e Editar lote) */
.rem-x { box-sizing: border-box; width: 44px; height: var(--campo-h, 44px); min-width: 0; padding: 0; margin: 0; display: inline-grid; place-items: center; cursor: pointer;
  border-radius: 10px; border: 1px solid rgba(240,205,150,.4); background: rgba(20,11,5,.5); color: #f2c58c; transition: background .15s, color .15s, border-color .15s; }
.rem-x:hover { background: rgba(200,81,61,.25); border-color: rgba(255,140,110,.6); color: #ffd0c0; }
.rem-x:active { transform: scale(.94); }
.rem-x svg { display: block; }
.grade-cat, html body .grade-cat { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 44px; align-items: center; }
.grade-cat .rem-x, html body .grade-cat .rem-x { height: var(--campo-h, 44px); min-height: 0; }
#itens .linha-3, .itens-cab.linha-3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr) minmax(0, 1fr) 44px; align-items: center; gap: 8px; }
#itens .linha-3 { margin-bottom: 8px; }
.itens-cab.linha-3 span:last-child { width: 44px; }
@media (max-width: 700px) {
  .grade-cat, html body .grade-cat, #itens .linha-3, .itens-cab.linha-3 { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) 42px; gap: 6px; }
  .rem-x { width: 42px; }
  .itens-cab.linha-3 span:last-child { width: 42px; }
}
@media (max-width: 380px) {
  .grade-cat, html body .grade-cat, #itens .linha-3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 42px; }
  .grade-cat .cat, #itens .linha-3 > div:first-child { grid-column: 1 / -1; }
  .itens-cab.linha-3 { display: none; }
}

/* v1.33.0 – impressão / PDF: folha branca, texto escuro e legível (mesmas regras na impressão do computador e no PDF do celular) */

@media print {
  html body, html body:not(.modo-login), html .conteudo { background: #fff !important; color: #111 !important; }
  html .conteudo { padding: 0 !important; max-width: none !important; }
  html .topo, html .nav, html .fab, html .no-print, html .secao-olho, html .cartao-olho, html .toast, html .modal-fundo { display: none !important; }
  html .fz-hero { background: #fff !important; border: 1.5px solid #333 !important; box-shadow: none !important; margin: 0 0 12px !important; padding: 12px 16px !important; }
  html .fz-hero::before, html .fz-hero::after { display: none !important; }
  html .fz-hero *, html .fz-hero-nome { color: #111 !important; text-shadow: none !important; background: none !important; -webkit-text-fill-color: #111 !important; }
  html .fz-hero-data { border: 1px solid #999 !important; box-shadow: none !important; }
  html .secao, html .cartao, html .rk, html .rel-graf-box, html .kpi, html .tabela-wrap, html .rel-vazio { background: #fff !important; border-color: #999 !important; box-shadow: none !important; color: #111 !important; }
  html .secao::before, html .secao::after, html .cartao::before, html .cartao::after { display: none !important; }
  html .secao-cab { background: none !important; border-color: #999 !important; }

  html .rel-sec :is(h2, h3, h4, b, strong, td, th, p, span, small, div, label, li) { color: #111 !important; }
  html .rel-sec :is(.ajuda, .rel-nota, .rel-vazio, .rk span) { color: #444 !important; }

  html .cartao-recolhe.fechada .secao-dobra { grid-template-rows: 1fr !important; } html .cartao-recolhe.fechada .secao-dobra-in { opacity: 1 !important; }
}
/* janela "PDF pronto" */

/* v1.33.1 – PDF/impressão com cores suaves (ícones, faixas e barras em tons claros) */

@media print {
  html *, html *::before, html *::after { box-shadow: none !important; text-shadow: none !important; }

}

/* v1.35.0 – revisão de responsividade: letras pequenas mais legíveis e menu de baixo em telas muito estreitas */
html body .fz-hero-rot { font-size: 10.5px; } html body .fz-hero-rot-data { font-size: inherit; }
html body .fz-hero-data small { font-size: 10.5px; }
html body .kpi.destaque .lot-st { font-size: 10.5px; }
html body .lc-rot { font-size: 10.5px; }
html body .fp-lote-obs label { font-size: 11px; }
html body .itens-cab span { font-size: 11px; }
html body .ng-graf text { font-size: 11px; }
@media (max-width: 899px) {
  html body .nav a { font-size: 10.5px; }
  html body .nav a .nm { max-width: 100%; }
}
@media (max-width: 360px) { html body .nav a { font-size: 10px; letter-spacing: -.02em; } }
/* Galaxy Fold e telas abaixo de 300px: o nome pode quebrar em 2 linhas (ex.: Compra/ Venda) */
@media (max-width: 300px) {
  html body .nav a .nm {  line-height: 1.05; text-align: center; overflow-wrap: anywhere; }
  html body .nav a .ic { width: 40px; }
}

/* v1.36.0 – Salga dos cochos */
.sg-cartao .mt-topo { justify-content: flex-start; gap: 10px 14px; margin-bottom: 14px; }
.sg-cartao .mt-topo .btn { flex: 0 0 auto; }
.sg-cartao .mt-topo .ajuda { flex: 1 1 220px; margin: 0; }
.sg-estoque { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.sg-est { position: relative; padding: 10px 12px 10px 16px; border-radius: 12px; background: rgba(20,11,5,.45); border: 1px solid rgba(240,205,150,.16); overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.sg-est::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: rgba(215,168,110,.5); }
.sg-est.ok::before { background: #8fcf6a; } .sg-est.alerta::before { background: #f0b04a; } .sg-est.erro::before { background: #ff8a70; } .sg-est.cinza::before { background: rgba(255,255,255,.18); }
.sg-est small { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cobre); font-weight: 700; }
.sg-est b { font: 700 22px "Zilla Slab", Georgia, serif; color: #fbecd0; line-height: 1.1; } .sg-est b span { font-size: 13px; font-weight: 400; color: var(--cinza); }
.sg-est.erro b { color: #ffab98; } .sg-est.alerta b { color: #ffd08a; }
.sg-est-sub { font-size: 12px; color: var(--cinza); }

.sg-sobra { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 4px 0 6px; }
.sg-sobra label { display: block; cursor: pointer; }
.sg-sobra input { position: absolute; opacity: 0; width: 0; height: 0; }
.sg-sobra span { display: grid; place-items: center; gap: 2px; min-height: 44px; padding: 8px 4px; border-radius: 12px; border: 1px solid rgba(240,205,150,.25); background: rgba(20,11,5,.35); font-size: 13.5px; text-align: center; transition: background .15s, border-color .15s; }
.sg-sobra input:checked + span { background: var(--brasa); color: #fff7e8; border-color: #f0b06a; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,230,190,.45); }
.sg-sobra input:focus-visible + span { outline: 2px solid #ffd29a; outline-offset: 2px; }
.sg-form .ajuda { display: block; margin-top: 4px; }
@media (max-width: 700px) {
  .sg-cartao .mt-topo .btn { width: 100%; justify-content: center; }
  .sg-estoque { grid-template-columns: repeat(2, minmax(0, 1fr)); }

}
@media (max-width: 380px) { .sg-estoque { grid-template-columns: 1fr; } }
.sg-chips { display: inline-flex; flex-wrap: wrap; gap: 5px; }
.sg-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 6px; border-radius: 8px; background: rgba(226,145,63,.14); border: 1px solid rgba(240,205,150,.25); font-size: 12.5px; color: #f3e3c3; white-space: nowrap; }
.sg-chip b { font-size: 10.5px; letter-spacing: .06em; color: #ffd29a; }
.sg-form-car { margin-top: 6px; }
/* salga: quadradinhos iguais aos do Painel – a cor do fundo é a situação do consumo */
.sg-grade { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 1100px) and (min-width: 701px) { .sg-grade { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.sg-tile { display: flex; flex-direction: column; gap: 7px; padding: 12px; border-radius: 14px; color: #fff; text-align: left;
  border: 1px solid rgba(0,0,0,.5); box-shadow: inset 0 1px 0 rgba(255,255,255,.15), 0 6px 14px rgba(0,0,0,.4); background: linear-gradient(160deg, #3e5a26, #24361a); }
.sg-tile.alerta { background: linear-gradient(160deg, #7a5413, #4a3209); }
.sg-tile.erro { background: linear-gradient(160deg, #7c2c1b, #4a170d); }
.sg-tile.cinza { background: linear-gradient(160deg, #4a3627, #2c1d12); }

.sg-tile .sg-chips .sg-chip { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.22); color: #fff; }
.sg-tile .sg-chip b { color: #ffd29a; }

@media (max-width: 700px) {
  .sg-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .sg-tile { padding: 10px; gap: 6px; }

}
@media (max-width: 360px) { .sg-grade { grid-template-columns: 1fr; }  }
/* v1.37.0 – últimos lançamentos da salga: 3 quadradinhos iguais aos dos pastos, com lápis e lixeira */

.sg-ult-cab { display: flex; justify-content: space-between;   }
.sg-ult-cab a { font-size: 12px; color: #ffd29a; text-decoration: none; } .sg-ult-cab a:hover { text-decoration: underline; }

/* v1.37.0 – mini-cartões: piquete numa linha só no topo, separado da quantidade de sacos */

/* cabeçalho dos quadrados dos piquetes igual ao dos últimos lançamentos */

/* lápis e lixeira centralizados no card */

/* v1.37.1 – Salga: últimos lançamentos com o mesmo padrão dos quadrados dos pastos */
.sg-cartao .secao-dobra-in { padding: 0 16px 20px; margin: 0 -16px -8px; }            /* espaço para a sombra dos quadrados não ser cortada (antes aparecia um "retângulo" atrás deles) */
.sg-ult { margin-top: 18px; padding-top: 14px; border-top: 1px dashed rgba(240,205,150,.22); }
.sg-ult-cab { align-items: center; margin-bottom: 10px; }
.sg-ult-cab .lc-rot { font-size: 11px; }
.sg-ult-cab a { padding: 4px 10px; border-radius: 999px; border: 1px solid rgba(240,205,150,.3); background: rgba(20,11,5,.35); }

/* últimos lançamentos: até 5 no computador, 2 no celular */

/* v1.37.2 – formulário da salga: campos alinhados pelo topo e carimbos numa faixa própria */
html body .sg-form .linha { align-items: start; }
.sg-form .linha > div { min-width: 0; }
.sg-form-car {  flex-wrap: wrap; align-items: center; gap: 6px;  min-height: 0; }
.sg-form-car:empty { display: none; }
.sg-form #sgKg { display: block; min-height: 16px; margin-top: 4px; }
.sg-form .sg-sobra { margin-top: 6px; }
@media (max-width: 700px) {
  .sg-form .linha { grid-template-columns: 1fr; gap: 12px; }
  .sg-form-car { margin: 0; }
  .sg-sobra { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  /* no celular os carimbos ficam logo abaixo do pasto escolhido */
  #fSalga { display: flex; flex-direction: column; gap: 12px; }
  #fSalga > * { order: 4; }
  #fSalga > .linha:first-of-type { display: contents; }
  #fSalga > .linha:first-of-type > div:first-child { order: 1; }
  #fSalga > .sg-form-car { order: 2;  }
  #fSalga > .linha:first-of-type > div:last-child { order: 3; }
}
/* caixa "Carimbos do lote" no formulário da salga */
.sg-form-car { display: block; margin: -2px 0 2px; }
.sg-car-box { border-radius: 12px; border: 1px solid rgba(240,205,150,.22); background: rgba(20,11,5,.38); padding: 10px 12px; }
.sg-car-cab { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px dashed rgba(240,205,150,.2); }
.sg-car-cab span { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--cobre); font-weight: 700; }
.sg-car-cab b { font: 700 16px "Zilla Slab", Georgia, serif; color: #fbecd0; }
.sg-car-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sg-car-it { display: flex; align-items: baseline; gap: 6px; padding: 6px 10px; border-radius: 9px; background: rgba(226,145,63,.12); border: 1px solid rgba(240,205,150,.2); }
.sg-car-it b { font-size: 12px; letter-spacing: .06em; color: #ffd29a; }
.sg-car-it span { font-size: 14px; color: #fbecd0; }
.sg-car-it small { margin-left: auto; font-size: 11.5px; color: var(--cinza); }
@media (max-width: 700px) { .sg-car-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } #fSalga > .sg-form-car { margin-top: -2px; } }

/* v1.38.0 – quadrados dos pastos (Lançamentos e Painel) no mesmo padrão da Salga: "PASTO 6C" com traço, carimbos em etiquetas */
.mz-tile { gap: 7px; }

.mz-tile .sg-chips .sg-chip { background: rgba(0,0,0,.28); border-color: rgba(255,255,255,.22); color: #fff; }
.mz-tile .sg-chip b { color: #ffd29a; }

.sg-cartao.fechada .secao-dobra-in { padding: 0 16px; margin-bottom: 0; }
   /* todos os quadrados da linha com a mesma altura */
   /* sem observação, o conteúdo se distribui pelo quadrado (sem buraco antes do rodapé) */

/* cabeçalho dos quadrados dos lançamentos igual ao da Salga: PASTO 6C à esquerda, produto à direita */

/* observação no quadrado do pasto: uma linha só, com "…" no fim (o texto inteiro aparece ao tocar no pasto) */

/* observação: etiqueta do tamanho do texto, texto centralizado, nunca maior que o quadrado */

/* v1.38.1 – quadrados da Salga com o traço do rodapé, igual aos dos lançamentos */
.sg-grade .sg-tile { justify-content: space-between; }

/* v1.38.2 – campos de data/mês centralizados na altura (o iPhone/Safari desenhava a data colada no topo) */
html body input[type=date], html body input[type=month], html body input[type=time], html body input[type=datetime-local] {
  -webkit-appearance: none; appearance: none; display: flex !important; align-items: center; box-sizing: border-box;
  height: var(--campo-h, 44px); min-height: var(--campo-h, 44px); line-height: normal !important; padding-top: 0; padding-bottom: 0; text-align: left; }
input[type=date]::-webkit-date-and-time-value, input[type=month]::-webkit-date-and-time-value,
input[type=time]::-webkit-date-and-time-value, input[type=datetime-local]::-webkit-date-and-time-value { text-align: left; margin: 0; padding: 0; min-height: 0; line-height: normal; }
input[type=date]::-webkit-datetime-edit, input[type=month]::-webkit-datetime-edit { padding: 0; line-height: normal; }
input[type=month]::-webkit-calendar-picker-indicator, input[type=time]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; }
/* v1.40.0 – ficha (relatório) da salga de um pasto */
.sg-grade .sg-tile[data-sgver] { cursor: pointer; transition: transform .12s, box-shadow .12s; }
.sg-grade .sg-tile[data-sgver]:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 10px 20px rgba(0,0,0,.5); }
.sg-grade .sg-tile[data-sgver]:focus-visible { outline: 3px solid rgba(255,210,150,.8); outline-offset: 2px; }
.sf-modal { max-width: 720px; }
.sf { display: flex; flex-direction: column; gap: 14px; }

 

@media (max-width: 700px) {

  .sf .acoes .btn { flex: 1 1 100%; justify-content: center; }
}

/* v1.42.0 – salga excluída no Histórico */

/* v1.45.0 – relatório gerado completo (Histórico › olho) */

.rl-sec { display: flex; flex-direction: column; gap: 10px; padding-top: 12px; border-top: 1px solid rgba(240,205,150,.12); }
.rl-sec-cab { display: flex; align-items: center; gap: 10px; }
.rl-sec-cab h4 { margin: 0; font: 700 17px "Zilla Slab", Georgia, serif; color: #fbecd0; }
.rl-sec-cab .secao-ic { width: 30px; height: 30px; flex: 0 0 30px; font-size: 15px; }
.rl-sec-extra { margin-left: auto; font-size: 12.5px; font-weight: 700; color: #ffd29a; padding: 3px 10px; border-radius: 999px; background: rgba(226,145,63,.14); border: 1px solid rgba(240,205,150,.22); white-space: nowrap; }

.rl-it { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(20,11,5,.4); border: 1px solid rgba(240,205,150,.12); font-size: 13.5px; }
.rl-d { font-weight: 700; color: #fbecd0; }
.rl-t { display: block; min-width: 0; overflow-wrap: anywhere; line-height: 1.35; } .rl-t small { display: block; font-size: 12px; color: var(--cinza); }
.rl-t b { color: #fbecd0; }
.rl-q { font-weight: 700; color: #ffd29a; white-space: nowrap; }
.rl-it .tag { white-space: nowrap; }
@media (max-width: 700px) {

  .rl-it { grid-template-columns: 44px 1fr; } .rl-it > :last-child { grid-column: 2; justify-self: start; }
  .rl-it.rl-sg { grid-template-columns: 44px 1fr auto; } .rl-it.rl-sg > :last-child { grid-column: auto; justify-self: end; }
  .rl-sec-cab h4 { font-size: 16px; }
}
.rl-sec-cab .secao-olho { margin-left: 8px; width: 36px; height: 36px; }
.rl-sec-cab .rl-sec-extra + .secao-olho { margin-left: 8px; }
.rl-sec-cab h4 + .secao-olho { margin-left: auto; }
.rl-sec-corpo { display: flex; flex-direction: column; gap: 10px; }
.rl-sec.fechada .rl-sec-corpo { display: none; }
.rl-sec.fechada { gap: 0; }

/* v1.47.0 – Lançamentos ativos e Salga dos cochos: 5 cards no computador, 2 no celular + "Ver todos" */
.grade-lim:not(.aberta):not(.buscando) > :nth-child(n+6) { display: none !important; }
.ver-todos { display: none; width: 100%; justify-content: center; margin: 10px 0 2px; }

@media (max-width: 700px) {
  .grade-lim:not(.aberta):not(.buscando) > :nth-child(n+3) { display: none !important; }
  .grade-lim.mais2:not(.buscando) + .ver-todos { display: flex; }
}
/* v1.47.1 – relatório: 5 cards por linha no computador (com "Ver todos") */
.rl-modal { max-width: 1140px; }

.rl-sec-corpo > .ver-todos { margin-top: 0; }
/* v1.47.2 – observação em itálico: a última letra não fica cortada (o itálico "sai" um pouco da caixa) */
.sf-obs { padding-right: .22em; padding-left: .04em; }
/* v1.48.0 – barra de busca no Painel (Lançamentos por pasto) e na Salga dos cochos */
.busca-cards { flex: 1 1 100%; padding: 10px 12px; border-radius: 10px; color: #2a1a10; background: linear-gradient(180deg, #fbf3e3, #f1e2c6); border: 1px solid #2a170a; box-shadow: inset 0 2px 3px rgba(80,45,15,.22); font: inherit; }
.busca-cards:focus { outline: none; border-color: #e09a4f; box-shadow: 0 0 0 3px rgba(224,154,79,.45); }
.busca-linha { margin: 0 0 12px; }
.busca-vazia { margin: 8px 0 0; }
@media (max-width: 700px) { .busca-cards { font-size: 16px; } }
/* v1.48.1 – títulos Categoria / Cabeças / Peso médio (kg) centralizados em cima de cada campo e alinhados pela base */
html body .grade-cat.cab, html body .itens-cab.linha-3 { align-items: end; margin-bottom: 6px; }
html body .grade-cat.cab > span, html body .itens-cab > span { display: block; text-align: center; line-height: 1.25; font: 700 11px "Zilla Slab", Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--cobre, #d7a86e); }
@media (max-width: 700px) { html body .grade-cat.cab > span, html body .itens-cab > span { font-size: 10.5px; letter-spacing: .06em; } }
/* v1.49.0 – card da salga: chip de cabeças junto dos carimbos */

/* v1.49.0 – carimbos + cabeças numa fileira só no card da salga */
.sg-grade .sg-tile .sg-chips { flex-wrap: nowrap; gap: 4px; min-width: 0; overflow: hidden; }
.sg-grade .sg-tile .sg-chip { flex: 0 1 auto; min-width: 0; white-space: nowrap; padding: 2px 6px; gap: 4px; font-size: 12px; }
.sg-grade .sg-tile .sg-chip b { font-size: 10px; letter-spacing: .03em; }
@media (max-width: 700px) { .sg-grade .sg-tile .sg-chips { gap: 3px; } .sg-grade .sg-tile .sg-chip { padding: 2px 4px; gap: 3px; font-size: 11px; } .sg-grade .sg-tile .sg-chip b { font-size: 9.5px; letter-spacing: 0; } }
.sg-grade .sg-tile .sg-chips.aperta { gap: 2px; } .sg-grade .sg-tile .sg-chips.aperta .sg-chip { padding: 2px 3px; gap: 2px; font-size: 10.5px; } .sg-grade .sg-tile .sg-chips.aperta .sg-chip b { font-size: 9px; letter-spacing: 0; }
.sg-grade .sg-tile .sg-chips.aperta2 .sg-chip { font-size: 9.5px; } .sg-grade .sg-tile .sg-chips.aperta2 .sg-chip b { font-size: 8.5px; }
/* v1.49.1 / v1.83 – estoque do depósito no formulário da salga */
.sg-sal-info { padding: 8px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.4; background: rgba(79,122,44,.28); border: 1px solid rgba(160,210,120,.35); color: #eef6e6; }
.sg-sal-info b { color: #fff; } .sg-sal-info.dep { background: rgba(20,11,5,.4); border-color: rgba(240,205,150,.18); color: var(--cinza); }
.sg-sal-info.erro { background: rgba(124,44,27,.55); border-color: rgba(255,138,112,.55); color: #ffd9cf; }
/* v1.49.1 – três lançamentos da salga em laranja + "(no depósito)" no estoque */
.sg-est small i { font-style: normal; font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--cinza); }

/* v1.50.0 – cards dos lançamentos ativos / painel no padrão da salga */

.mz-tile .sg-chips { flex-wrap: nowrap; gap: 4px; min-width: 0; overflow: hidden; }

.mz-tile .sg-chip { white-space: nowrap; }

.mz-tile { justify-content: flex-start; }
.mz-caixa { display: flex; flex-wrap: wrap; align-items: stretch; padding: 5px 2px; border-radius: 10px; background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.16); min-width: 0; row-gap: 6px; }
.mz-col { flex: 1 1 0; min-width: 34px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; padding: 0 3px; border-left: 1px solid rgba(255,255,255,.16); text-align: center; }
.mz-col:first-child { border-left: 0; }
.mz-col small { font: 700 9.5px "Zilla Slab", Georgia, serif; letter-spacing: .06em; text-transform: uppercase; color: #ffd29a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.mz-col b { font: 700 16px "Zilla Slab", Georgia, serif; line-height: 1.1; }
.mz-col.cab { flex-grow: 1.4; }
.mz-col.txt b { font-size: 12px; }

@media (max-width: 700px) { .mz-caixa { padding: 5px 1px; } .mz-col { padding: 0 2px; min-width: 30px; } .mz-col small { font-size: 9px; letter-spacing: 0; } .mz-col.cab { flex-grow: 1.7; } .mz-col b { font-size: 15px; } }
/* olhinho dos últimos lançamentos da salga */
.sg-ult-dir { display: inline-flex; align-items: center; gap: 8px; }
.sg-ult-olho { width: 32px; height: 32px; margin-left: 0; } .sg-ult-olho svg { width: 17px; height: 17px; }

.sg-ult.fechada .sg-ult-cab { margin-bottom: 0; }
.sg-ult.fechada .sg-ult-olho { background: var(--brasa); color: #fff7e8; border-color: #ffcf96; }
/* v1.50.1 – todo olhinho fechado fica laranja (painel, cartões, relatório, últimos lançamentos) */
.secao-olho[aria-expanded="false"], .secao-olho[aria-expanded="false"]:hover { background: var(--brasa); color: #fff7e8; border-color: #ffcf96; box-shadow: inset 0 1px 0 rgba(255,230,190,.45), 0 2px 8px rgba(226,145,63,.35); }
/* card sem observação: mostra "Sem observação" no mesmo lugar, para todos os cards ficarem iguais */

/* v1.51.0 – modo offline: faixa de aviso e listas */
.off-barra {     margin: 0 auto; padding: 8px 14px; font-size: 13px; color: #fff7e8;
  background: linear-gradient(180deg, #8f4313, #6f3a12); border-bottom: 1px solid rgba(255,207,150,.35); position: sticky; top: 0; z-index: 30; }
.off-barra[hidden] { display: none; }
.off-barra b { font: 700 14px "Zilla Slab", Georgia, serif; }
.off-barra > span { opacity: .92; flex: 1 1 auto; min-width: 0; }
.off-barra.env { background: linear-gradient(180deg, #3e5a26, #24361a); }
.off-barra.fal { background: linear-gradient(180deg, #7c2c1b, #4a170d); }
.off-bt { flex: 0 0 auto; cursor: pointer;  border-radius: 999px; border: 1px solid rgba(255,220,170,.5); background: rgba(0,0,0,.25); color: #fff3e0; font: 700 12px "Zilla Slab", Georgia, serif; }
.off-bt:hover { background: rgba(0,0,0,.4); }
.off-bt.off-fal { background: #7c2c1b; border-color: #ffab98; }
.off-lista { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 55vh; overflow: auto; }
.off-it { display: flex; flex-direction: column; gap: 2px; padding: 9px 11px; border-radius: 10px; background: rgba(0,0,0,.25); border: 1px solid rgba(255,255,255,.12); }
.off-it small { opacity: .75; font-size: 11.5px; }
.off-it.fal { border-color: rgba(255,171,152,.4); }
.off-acoes { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
/* v1.51.1 – faixa offline: texto à esquerda, botões sempre juntos (nunca quebram) */
.off-barra { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 12px; }
.off-txt { flex: 1 1 260px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.off-txt span { opacity: .92; line-height: 1.35; }
.off-bts { flex: 0 0 auto; display: flex; flex-wrap: nowrap; gap: 8px; }
.off-bt { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 14px; }
@media (max-width: 560px) {
  .off-barra { padding: 9px 12px; }
  .off-bts { flex: 1 1 100%; }
  .off-bts .off-bt { flex: 1 1 0; min-width: 0; }
}
.off-nw { font-style: normal; white-space: nowrap; }
@media (max-width: 380px) { .off-bts { gap: 6px; } .off-bts .off-bt { padding: 6px 6px; font-size: 11.5px; } }

/* v1.52.0 – avisos (toast) no topo, com ícone e cor por tipo; nunca cobrem o menu de baixo */
#avisos { position: fixed; z-index: 400;  left: 12px; right: 12px; display: flex;  gap: 8px; pointer-events: none; }
@media (min-width: 761px) { #avisos {  left: auto; right: 22px; width: 380px; } }
#avisos .toast { position: relative; left: auto; right: auto; bottom: auto; transform: none; max-width: none;  box-sizing: border-box; pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; gap: 11px;   overflow: hidden; z-index: auto;
  background: linear-gradient(180deg, #3a2312, #24150a); color: #fbecd0; border: 1px solid rgba(215,168,110,.4); border-left-width: 4px;
   font-size: 14px; line-height: 1.3;
  animation: avEntra .26s cubic-bezier(.2,.8,.3,1); }
#avisos .toast.sai { animation: avSai .2s ease-in forwards; }
@keyframes avEntra { from { opacity: 0; transform: translateY(-12px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes avSai { to { opacity: 0; transform: translateY(-10px) scale(.98); } }

@keyframes avTempo { from { transform: scaleX(1); } to { transform: scaleX(0); } }
.aviso-ok { border-left-color: #6fbf4f !important; }  
.aviso-aviso { border-left-color: #e2a13f !important; }  
.aviso-rede { border-left-color: #e2913f !important; }  
.aviso-erro { border-left-color: #e0604a !important; background: linear-gradient(180deg, #4a1c12, #2c0f08) !important; }  
.aviso-info { border-left-color: #c9a46e !important; }  
@media (prefers-reduced-motion: reduce) { #avisos .toast, #avisos .toast.sai { animation: none; } }
/* v1.52.1 – avisos embaixo: no celular cobrem a barra de navegação (por cima dela); no computador, canto inferior direito */
#avisos { top: auto; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); flex-direction: column; justify-content: flex-end; }
@media (min-width: 761px) { #avisos { top: auto; bottom: 24px; } }

@keyframes avSobe { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes avDesce { to { opacity: 0; transform: translateY(12px) scale(.98); } }
/* celular: o aviso ocupa a faixa da barra de navegação inteira (fundo igual ao da barra, sem sobrar pedaço do menu) */
@media (max-width: 760px) {
  #avisos { left: 0; right: 0; bottom: 0; padding: 8px 12px calc(env(safe-area-inset-bottom, 0px) + 8px); }
  #avisos:not(:empty) { background: linear-gradient(180deg, rgba(28,16,8,.96), #140a04); border-top: 1px solid rgba(215,168,110,.25); box-shadow: 0 -10px 24px rgba(0,0,0,.45); pointer-events: auto; }
}
/* v1.52.2 – avisos dentro da faixa do topo (celular e computador), ocupando a faixa inteira */
#avisos, #avisos:not(:empty) { top: 0; bottom: auto; left: 0; right: 0; width: auto; box-sizing: border-box; display: flex; flex-direction: column; justify-content: center;
  padding: 8px 12px 8px; gap: 0; border-top: 0; pointer-events: none; z-index: 400; }
#avisos:not(:empty) { pointer-events: auto; background:
    repeating-linear-gradient(90deg, rgba(255,255,255,.025) 0 2px, transparent 2px 9px),
    linear-gradient(180deg, #5c3519 0%, #3d2210 70%, #2f190b 100%);
  border-bottom: 1px solid #1a0f07; box-shadow: 0 4px 14px rgba(0,0,0,.45); }
@media (min-width: 761px) { #avisos, #avisos:not(:empty) { padding-left: 22px; padding-right: 22px; } }
#avisos .toast { flex: 1 1 auto; min-height: 0;  width: 100%;  border-radius: 12px; box-shadow: inset 0 1px 0 rgba(255,230,190,.08);
  animation-name: avTopo; }
#avisos .toast.sai { animation-name: avTopoSai; }
@keyframes avTopo { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes avTopoSai { to { opacity: 0; transform: translateY(-6px); } }

@media (max-width: 760px) { #avisos .toast { font-size: 13.5px; gap: 9px; }   }
/* título na mesma linha do texto (cabe em 2 linhas dentro da faixa do topo) */

/* mensagem longa: a faixa cresce para baixo (nunca corta o texto) */
#avisos .toast { max-height: none; }

#avisos, #avisos:not(:empty) { padding-top: 5px; padding-bottom: 5px; }
#avisos .toast { padding: 4px 8px 6px 10px; }

/* v1.53.0 – troca de aba estilo app: o topo e o menu ficam parados; só o conteúdo faz uma transição suave */
.topo { view-transition-name: topo; }
.nav { view-transition-name: menu; }
.off-barra { view-transition-name: faixa; }
#main { view-transition-name: conteudo; }
::view-transition-group(conteudo) { animation-duration: .28s; }
::view-transition-old(conteudo) { animation: vtSai .2s cubic-bezier(.4,0,1,1) both; }

html[data-troca="tras"]::view-transition-old(conteudo) { animation-name: vtSaiTras; }
html[data-troca="tras"]::view-transition-new(conteudo) { animation-name: vtEntraTras; }
@keyframes vtSai { to { opacity: 0; transform: translateX(-18px); } }
@keyframes vtEntra { from { opacity: 0; transform: translateX(22px); } }
@keyframes vtSaiTras { to { opacity: 0; transform: translateX(18px); } }
@keyframes vtEntraTras { from { opacity: 0; transform: translateX(-22px); } }
::view-transition-old(topo), ::view-transition-new(topo), ::view-transition-old(menu), ::view-transition-new(menu) { animation: none; }
/* navegadores sem a transição nativa: entrada suave */

/* v1.53.1 – troca de aba sem "vulto": a página antiga some rápido (sem ficar por baixo da nova)
   e a nova entra logo em seguida; o quadro não estica entre páginas de alturas diferentes */
::view-transition-group(conteudo) { animation: none; }
::view-transition-image-pair(conteudo) { isolation: auto; }
::view-transition-old(conteudo), html[data-troca="tras"]::view-transition-old(conteudo) {  mix-blend-mode: normal; }
::view-transition-new(conteudo) {  mix-blend-mode: normal; }

@keyframes vtSome { to { opacity: 0; } }
@keyframes vtSurge { from { opacity: 0; transform: translateX(14px); } to { opacity: 1; transform: none; } }
@keyframes vtSurgeTras { from { opacity: 0; transform: translateX(-14px); } to { opacity: 1; transform: none; } }
/* sem sobreposição nenhuma: a página antiga sai na hora e a nova aparece deslizando sobre o fundo */
::view-transition-old(conteudo), html[data-troca="tras"]::view-transition-old(conteudo) { animation: none; opacity: 0; }

/* v1.53.2 – sem "fundinho escuro" na troca: o fundo da página não faz fade (ele que escurecia a faixa
   entre o topo e o menu), e a página nova já aparece inteira, só com um deslize curto */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(conteudo) { animation: vtDesliza .18s cubic-bezier(.2,.8,.2,1) both; }
html[data-troca="tras"]::view-transition-new(conteudo) { animation: vtDeslizaTras .18s cubic-bezier(.2,.8,.2,1) both; }
@keyframes vtDesliza { from { transform: translateX(16px); } to { transform: none; } }
@keyframes vtDeslizaTras { from { transform: translateX(-16px); } to { transform: none; } }
/* v1.53.3 – menu de baixo: "Compra/Venda" nunca quebra em 2 linhas quando a aba está ativa (o negrito empurrava o texto) */
@media (max-width: 899px) { html body .nav a .nm { display: block; white-space: nowrap;  text-overflow: clip; letter-spacing: -.01em; } }
@media (max-width: 300px) { html body .nav a .nm { white-space: normal; } }
@media (max-width: 899px) { html body .nav a.ativo { font-weight: 600; } html body .nav a.ativo .nm { letter-spacing: -.035em; } }
@media (max-width: 400px) { html body .nav a .nm { font-size: 10px; } }
@media (max-width: 340px) { html body .nav a .nm { font-size: 9.5px; letter-spacing: -.03em; } html body .nav a.ativo .nm { letter-spacing: -.05em; } }
@media (max-width: 899px) { html body .nav a { padding-left: 0; padding-right: 0; min-width: 0; } html body .nav a .nm { overflow: visible; } }
@media (max-width: 370px) { html body .nav a[href="#negocios"] .nm { letter-spacing: -.06em; } }
/* v1.53.3 – troca de aba sem "fotografia" da página: o conteúdo novo só desliza (sem transparência) */
.topo, .nav, .off-barra, #main { view-transition-name: none; }
#main.trocou { animation: vtDesliza .2s cubic-bezier(.2,.8,.2,1); }
html[data-troca="tras"] #main.trocou { animation-name: vtDeslizaTras; }
@media (prefers-reduced-motion: reduce) { #main.trocou { animation: none; } }
/* estado inicial dos cards/seções com olhinho: aparece já aberto ou já fechado, sem animar */
.sem-anim, .sem-anim * { transition: none !important; }
/* v1.54.1 – Admin: ao trocar Usuários/Fazendas/Pastos… só o conteúdo desliza (título e botões ficam parados) */
#main > .trocou { animation: vtDesliza .2s cubic-bezier(.2,.8,.2,1); }
html[data-troca="tras"] #main > .trocou { animation-name: vtDeslizaTras; }
@media (prefers-reduced-motion: reduce) { #main > .trocou { animation: none; } }

/* =====================================================================
   v1.55.0 – Relatórios: seletor com setas ‹ › e lista "Trocar relatório"
   ===================================================================== */
.rel-sel { position: relative; z-index: 10; margin: 4px 0 16px; }
.rsel-bar { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 16px;
  background: linear-gradient(180deg, rgba(60,32,14,.82), rgba(32,17,7,.82)); border: 1px solid rgba(240,205,150,.16); box-shadow: 0 2px 10px rgba(0,0,0,.35); }
.rsel-seta { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; text-decoration: none; font-size: 26px; line-height: 1; padding-bottom: 3px;
  color: #f3d2a4; background: rgba(240,205,150,.07); border: 1px solid rgba(240,205,150,.16); transition: background .2s, transform .15s; -webkit-tap-highlight-color: transparent; }
.rsel-seta:hover { background: rgba(240,205,150,.14); }
.rsel-seta:active { transform: scale(.94); }
.rsel-seta.off { opacity: .3; }
html body .rsel-cur { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 12px; padding: 4px 6px; margin: 0; background: none; border: 0; box-shadow: none;
  color: inherit; text-align: left; cursor: pointer; border-radius: 12px; min-height: 0; width: auto; -webkit-tap-highlight-color: transparent; }
.rsel-ic { width: 42px; height: 42px; flex: 0 0 42px; border-radius: 12px; display: grid; place-items: center; background: var(--brasa); color: #fff7e8;
  box-shadow: inset 0 1px 0 rgba(255,230,190,.45), 0 2px 6px rgba(0,0,0,.4); }
.rsel-ic svg { width: 22px; height: 22px; }
.rsel-tx { display: flex; flex-direction: column; min-width: 0; gap: 1px; }
.rsel-tx small { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: #d7a86e; font-weight: 700; }
.rsel-tx b { font-size: 18px; color: #f6e7c8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html body .rsel-trocar { display: flex; align-items: center; gap: 8px; padding: 0 16px; height: 44px; min-height: 44px; margin: 0; width: auto; flex: 0 0 auto; border-radius: 12px;
  background: var(--brasa); color: #fff7e8; font-weight: 700; font-size: 15px; border: 1px solid rgba(255,207,150,.6); box-shadow: inset 0 1px 0 rgba(255,230,190,.45), 0 2px 8px rgba(226,145,63,.25);
  white-space: nowrap; cursor: pointer; text-shadow: 0 1px 0 rgba(80,30,5,.5); -webkit-tap-highlight-color: transparent; }
.rsel-trocar svg { width: 18px; height: 18px; }
.rsel-trocar:active { transform: scale(.97); }
.rsel-pts { display: flex; gap: 6px; justify-content: center; margin-top: 8px; }
.rsel-pts i { width: 7px; height: 7px; border-radius: 4px; background: rgba(240,205,150,.25); transition: width .25s, background .25s; }
.rsel-pts i.sel { width: 20px; background: #e2913f; }
.rsel-lista { position: absolute; right: 0; top: calc(100% - 12px); width: min(430px, 100%); padding: 6px; border-radius: 16px; background: #2a170b;
  border: 1px solid rgba(240,205,150,.22); box-shadow: 0 18px 40px rgba(0,0,0,.6); opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .18s ease, transform .18s ease; }
.rel-sel.aberta .rsel-lista { opacity: 1; transform: none; }
.rsel-lista[hidden] { display: none; }
.rsel-item { display: flex; align-items: center; gap: 12px; padding: 10px; border-radius: 12px; color: #f3e3c3; text-decoration: none; outline: none; -webkit-tap-highlight-color: transparent; }
.rsel-item:hover, .rsel-item:focus-visible { background: rgba(240,205,150,.08); }

.rsel-item.sel { background: rgba(226,145,63,.16); }

.rsel-item.sel::after { content: "✓"; margin-left: auto; padding-left: 8px; color: #ffb867; font-weight: 800; }
@media (max-width: 700px) {
  .rsel-bar { gap: 8px; padding: 7px; }
  .rsel-seta { width: 38px; height: 44px; flex-basis: 38px; font-size: 24px; }
  .rsel-trocar span { display: none; }
  html body .rsel-trocar { padding: 0 12px; }
  html body .rsel-cur { gap: 10px; padding: 2px; }
  .rsel-ic { width: 38px; height: 38px; flex-basis: 38px; }
  .rsel-tx small { font-size: 10px; letter-spacing: .1em; }
  .rsel-tx b { font-size: 15.5px; white-space: normal; line-height: 1.2; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .rsel-lista { width: 100%; transform-origin: top center; }
}
@media (prefers-reduced-motion: reduce) { .rsel-lista, .rsel-pts i { transition: none; } }
@media print { .rel-sel { display: none !important; } }

/* v1.55.1 – abertura do app: logo + barrinha por cima até a primeira tela estar pronta (sem esqueleto piscando) */
.carga-ini.abertura { position: fixed; inset: 0; z-index: 9999; min-height: 0; transition: opacity .3s ease, visibility 0s linear 0s; }
.carga-ini.abertura.saindo { opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility 0s linear .3s; pointer-events: none; }
@media (prefers-reduced-motion: reduce) { .carga-ini.abertura, .carga-ini.abertura.saindo { transition: none; } }
/* v1.56.0 – botão "tentar de novo" na abertura (só aparece se o app não conseguir carregar) */
.carga-msg { margin-top: 8px; padding: 12px 18px; border-radius: 12px; border: 1px solid rgba(255,207,150,.6); background: var(--brasa); color: #fff7e8; font: 600 15px/1.3 inherit; max-width: 280px; cursor: pointer; }

/* =====================================================================
   v1.57.0 – boiada chegando num pasto com gado: juntar ou tirar a que está lá
   ===================================================================== */
.chegada { display: grid; gap: 10px; padding: 14px; border-radius: 14px; background: rgba(226,145,63,.08); border: 1px solid rgba(226,145,63,.45); }
.chegada[hidden] { display: none; }
.chg-aviso { display: flex; gap: 10px; align-items: flex-start; }
.chg-aviso-ic { font-size: 20px; line-height: 1.2; }
.chg-aviso b { display: block; color: #ffcf96; font-size: 15.5px; }
.chg-aviso span { color: rgba(243,227,195,.8); font-size: 14px; }
.chg-tit { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--cobre); font-weight: 700; margin-top: 2px; }
html body .chg-op { display: flex; align-items: center; gap: 12px; padding: 12px; margin: 0; border-radius: 12px; cursor: pointer; text-transform: none; letter-spacing: 0;
  background: rgba(20,10,4,.45); border: 1px solid rgba(240,205,150,.18); color: #f3e3c3; font-weight: 400; transition: border-color .2s, background .2s; -webkit-tap-highlight-color: transparent; }
.chg-op input { position: absolute; opacity: 0; pointer-events: none; }
.chg-ic { width: 38px; height: 38px; flex: 0 0 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(240,205,150,.08); font-size: 19px; }
.chg-tx { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.chg-tx b { font-size: 15px; color: #f6e7c8; }
.chg-tx small { font-size: 13px; color: rgba(243,227,195,.68); line-height: 1.35; }
html body .chg-op.sel { border-color: rgba(255,190,120,.85); background: rgba(120,58,18,.45); box-shadow: 0 0 0 1px rgba(226,145,63,.35); }
.chg-op.sel .chg-ic { background: var(--brasa); }
.chg-op:focus-within { outline: 2px solid rgba(255,190,120,.7); outline-offset: 2px; }
.chg-para { display: grid; gap: 6px; }
.chg-para[hidden] { display: none; }
/* v1.57.1 – Registrar morte: "há X cabeça(s) nesta categoria" aparece sem empurrar os campos (o espaço já fica reservado) */
.mt-form #mMax { display: block; min-height: 1.45em; line-height: 1.45; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mt-form .linha { align-items: start; }

/* =====================================================================
   v1.57.2 – nome da fazenda no topo sempre inteiro, numa linha só (a letra diminui se precisar)
   O seletor nativo continua por cima (invisível): tocar abre a lista normal do celular.
   ===================================================================== */
html body .topo .fz-sel { position: relative; display: flex; align-items: center;   margin: 0;

  flex: 0 1 auto; min-width: 0; max-width: 340px; text-transform: none; letter-spacing: 0; font-weight: 700;  }
.fz-sel-txt { display: block; flex: 1 1 auto; min-width: 0; font-weight: 700; font-size: 15px; line-height: 1.15; white-space: nowrap; overflow: hidden; color: #2a1a10; }
.fz-sel-seta { position: absolute;  top: 50%; width: 13px; height: 9px; margin-top: -4px; color: #7a4318; pointer-events: none; }
html body .topo .fz-sel select { position: absolute; inset: 0; width: 100% !important; height: 100% !important; min-width: 0 !important; max-width: none !important;
  flex: none !important; margin: 0; padding: 0; opacity: 0; cursor: pointer; font-size: 16px; border: 0; }
html body .topo .fz-sel:focus-within { outline: 2px solid rgba(255,190,120,.85); outline-offset: 2px; }

@media (min-width: 900px) and (max-width: 1099px) { html body .topo .fz-sel { flex-basis: 190px;   }  }
@media (max-width: 899px) { html body .topo .fz-sel { flex: 1 1 auto; max-width: none; } .fz-sel-txt { font-size: 16px; } }
/* mais espaço para o nome caber grande numa linha só */
html body .topo .fz-sel {  padding-right: 26px; }
.fz-sel-seta { right: 9px; }
@media (max-width: 899px) { html body .topo {  padding-left: 12px; padding-right: 12px; } }

@media (min-width: 900px) and (max-width: 1099px) {  .fz-sel-txt { font-size: 14px; } }

/* v1.58.0 – lançamento com mais de um pasto (rodízio) */
.pq-extras { display: grid; gap: 10px; }
.pq-extras:empty { display: none; }
.pq-extra-lin { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: 8px; align-items: center; }
.pq-extra-lin select { width: 100%; }
.pq-mais-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin-top: -2px; }
.pq-mais-bar .ajuda { margin: 0; font-size: 13px; }
@media (min-width: 701px) { .pq-extras { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pq-extra-lin { grid-template-columns: minmax(0, 1fr) 42px; } }
.pq-extras > div > select { width: 100%; }
@media (min-width: 701px) { .linha-lanc.lanc-prod { grid-template-columns: 1fr 1fr; } }
.kpi .sub.lot-agora { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(224,154,79,.3); line-height: 1.5; }
.kpi .sub.lot-agora .tag { white-space: nowrap; }
/* v1.58.2 – só um carimbo: sem o X (o espaço continua, para o layout não pular) */
.rem-x.rem-oculto, html body .rem-x.rem-oculto { visibility: hidden; pointer-events: none; }
/* v1.58.3 – Relatórios: troca só nas setas (sem o botão de lista) */
html body .rsel-cur.rsel-fixo { cursor: default; }
html body .rsel-cur.rsel-fixo { justify-content: center; text-align: center; }
.rsel-cur.rsel-fixo .rsel-tx { align-items: center; }
/* v1.58.4 – card do pasto: produto numa linha só dele; nome do pasto e produto não quebram linha – a letra diminui para caber (app.js: caberUmaLinha) */

/* v1.58.5 – pasto e produto centralizados no card (continuam numa linha só; a letra diminui se não couber) */

/* v1.58.6 – Painel: card Cabeças organizado (peso médio, lotes e pastos ocupados em mini-caixas) */
.kpi.kpi-cab { display: flex; flex-direction: column; }
.kpi-cab-info { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr); margin-top: auto; border-radius: 10px; overflow: hidden;
  background: rgba(0,0,0,.18); border: 1px solid rgba(224,154,79,.22); }
.kpi-cab-info span { display: flex; flex-direction: column; align-items: center; gap: 1px;  min-width: 0; text-align: center; }
.kpi-cab-info span + span { border-left: 1px solid rgba(224,154,79,.2); }
.kpi-cab-info small { font-size: 10px;  text-transform: uppercase; color: #d7a86e; font-weight: 700; white-space: nowrap; }
.kpi-cab-info b { font: 700 15px "Zilla Slab", Georgia, serif; color: #f6e7c8; white-space: nowrap; }
@media (max-width: 420px) { .kpi-cab-info small { font-size: 8.5px; letter-spacing: .02em; } .kpi-cab-info b { font-size: 13px; } .kpi-cab-info span { padding: 5px 2px; } }
.kpi.kpi-cab .valor { margin-bottom: 8px; }
/* v1.58.7 – card Cabeças: rótulos e números sempre numa linha, dentro da caixinha (a letra diminui se precisar – app.js) */
.kpi-cab-info span { padding: 6px 6px; }
.kpi-cab-info small, .kpi-cab-info b { display: block; max-width: 100%; overflow: hidden; text-overflow: clip; }
.kpi-cab-info small { letter-spacing: .03em; }
/* celular: Peso médio numa linha inteira, Lotes e Pastos lado a lado embaixo (rótulos legíveis, sem apertar) */
@media (max-width: 520px) {
  .kpi-cab-info { grid-template-columns: 1fr 1fr; }
  .kpi-cab-info span:first-child { grid-column: 1 / -1; flex-direction: row; justify-content: center; align-items: baseline; gap: 6px; border-bottom: 1px solid rgba(224,154,79,.2); }
  .kpi-cab-info span:nth-child(2) { border-left: 0; }
  .kpi-cab-info span:nth-child(2), .kpi-cab-info span:nth-child(3) { flex-direction: row; justify-content: center; align-items: baseline; gap: 5px; }
  .kpi-cab-info span { padding: 5px 4px; }
  .kpi-cab-info small { font-size: 9.5px; display: inline-block; } .kpi-cab-info b { font-size: 14px; display: inline-block; }
}
.kpi-cab-info small, .kpi-cab-info b { line-height: 1.4; }
/* v1.59.1 – puxar para atualizar: a página desce e a bolinha laranja (sem seta) aparece no espaço entre o cabeçalho e o conteúdo */
html, body { overscroll-behavior-y: contain; }
.ptr { position: absolute; left: 50%; top: 100%; z-index: 1; transform: translate(-50%, -21px) scale(0); transform-origin: 50% 50%; opacity: 0; pointer-events: none; will-change: transform, opacity; }
.ptr-bola { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; color: #fff7e8;
  background: var(--brasa, linear-gradient(160deg, #e0913e, #a8571c)); border: 1px solid #2a1206;
  box-shadow: inset 0 1px 0 rgba(255,225,180,.55), 0 6px 16px rgba(0,0,0,.45); transition: box-shadow .2s ease; }
.ptr-bola svg { width: 26px; height: 26px; display: block; transform: rotate(-90deg); }
.ptr-trilho { fill: none; stroke: rgba(255,247,232,.25); stroke-width: 3; }
.ptr-arco { fill: none; stroke: #fff7e8; stroke-width: 3; stroke-linecap: round; }
.ptr.pronto .ptr-bola { box-shadow: inset 0 1px 0 rgba(255,225,180,.55), 0 6px 16px rgba(0,0,0,.45), 0 0 0 3px rgba(240,180,110,.35); }
.ptr.girando .ptr-bola svg { animation: ptrGira .75s linear infinite; }
.ptr.girando .ptr-trilho { stroke: transparent; }
.ptr.girando .ptr-arco { stroke-dashoffset: 48 !important; }
.ptr-anim, #main.ptr-anim { transition: transform .28s cubic-bezier(.2,.8,.2,1), opacity .28s ease; }
@keyframes ptrGira { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
@media (prefers-reduced-motion: reduce) { .ptr.girando .ptr-bola svg { animation-duration: 2s; } }
/* v1.60.0 – Admin: seletor com setas igual ao dos Relatórios */
.rsel-ic.rsel-emo { font-size: 22px; line-height: 1; }

/* =====================================================================
   v1.61.0 – Computador: a página usa a tela toda (até 1720px) e, em telas largas,
   Painel e Lançamentos ficam em duas colunas (estilo painel de controle).
   Celular e tablet não mudam.
   ===================================================================== */
@media (min-width: 1100px) {
  html body .conteudo {  padding-left: 28px; padding-right: 28px; }

}
@media (min-width: 1400px) {
  html body .conteudo { padding-left: 40px; padding-right: 40px; }

  /* Painel: lançamentos por pasto à esquerda; rebanho, pastos vazios e capacidade à direita */
  #main[data-rota=painel] { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); column-gap: 22px; align-items: start; }
  #main[data-rota=painel] > * { grid-column: 1 / -1; min-width: 0; }
  #main[data-rota=painel] > section.secao:nth-of-type(1) { grid-column: 1;  }
  #main[data-rota=painel] > section.secao:nth-of-type(n+2) { grid-column: 2; }
  /* coluna da direita é mais estreita: o conteúdo dela se arruma em menos colunas */
  #main[data-rota=painel] > section.secao:nth-of-type(n+2) .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }

  /* Lançamentos: formulário à esquerda (fica visível ao rolar); ativos, salga e mortes à direita */
  #main[data-rota=lancamentos] { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.35fr); column-gap: 22px; align-items: start; }
  #main[data-rota=lancamentos] > * { grid-column: 1 / -1; min-width: 0; }
  #main[data-rota=lancamentos] > .lanc-form { grid-column: 1;  }
  #main[data-rota=lancamentos] > :not(.fz-hero):not(.lanc-form) { grid-column: 2; }
  /* formulário numa coluna mais estreita: pastos um embaixo do outro, campos na largura toda, resumo 2 x 2 */
  .lanc-form .pq-extras { grid-template-columns: minmax(0, 1fr); }
  .lanc-form .linha-lanc.lanc-prod { grid-template-columns: minmax(0, 1fr); }
  .lanc-form .resumo-lanc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* o formulário só fica "parado" ao rolar se couber inteiro na tela */
@media (min-width: 1400px) and (min-height: 820px) {
  #main[data-rota=lancamentos] > .lanc-form { position: sticky; top: 72px; }
}
@media (min-width: 1400px) {
  /* na grade as margens não se juntam: deixa o espaço entre as seções igual nas duas colunas */
  #main[data-rota=painel] > section.secao { margin: 6px 0 12px; }
}
/* telas largas mas não enormes: coluna da direita um pouco maior para os rótulos não quebrarem */
@media (min-width: 1400px) and (max-width: 1700px) {
  #main[data-rota=painel] { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
}
/* v1.61.1 – duas colunas: a coluna da direita não "estica" quando a da esquerda cresce (abrir o olho / muitos pastos).
   A esquerda ocupa as linhas 3 a 6; a direita usa as linhas 3, 4 e 5 no tamanho do conteúdo, e a linha 6 (1fr)
   fica com toda a sobra – assim os cartões da direita ficam sempre juntinhos, um embaixo do outro. */
@media (min-width: 1400px) {
  #main[data-rota=painel], #main[data-rota=lancamentos] { grid-template-rows: auto auto auto auto auto 1fr; }
  #main[data-rota=painel] > .fz-hero, #main[data-rota=lancamentos] > .fz-hero { grid-row: 1; }
  #main[data-rota=painel] > .kpis { grid-row: 2; }
  #main[data-rota=painel] > section.secao:nth-of-type(1) { grid-row: 3 / 7; }
  #main[data-rota=painel] > section.secao:nth-of-type(2) { grid-row: 3; }
  #main[data-rota=painel] > section.secao:nth-of-type(3) { grid-row: 4; }
  #main[data-rota=painel] > section.secao:nth-of-type(4) { grid-row: 5; }
  #main[data-rota=lancamentos] > .lanc-form { grid-row: 2 / 7; }
  #main[data-rota=lancamentos] > :nth-child(3) { grid-row: 2; }
  #main[data-rota=lancamentos] > :nth-child(4) { grid-row: 3; }
  #main[data-rota=lancamentos] > :nth-child(5) { grid-row: 4; }
}
/* v1.62.0 – botão Atualizar no topo, à esquerda do Sair (mesma altura do Sair) */
html body .topo .btn-atualizar { display: inline-grid; place-items: center; padding: 0; width: 30px; height: 30px; flex: 0 0 auto; align-self: center; min-height: 0; min-width: 0; box-sizing: border-box; }
html body .topo .btn-atualizar svg { width: 18px; height: 18px; display: block; }
html body .topo .btn-atualizar:disabled { opacity: 1; cursor: progress; }
.btn-atualizar.girando svg { animation: ptrGira .8s linear infinite; }
/* o botão Atualizar é só para o computador: no celular/tablet usa-se puxar a tela para baixo */
@media (hover: none), (pointer: coarse), (max-width: 899px) { html body .topo .btn-atualizar { display: none; } }
/* v1.63.0 – Admin › Backup: Saúde do aplicativo */

/* v1.65.0 – Saúde do aplicativo: ícones com largura igual (o ▲ da Vercel é mais estreito que os emojis) */

/* v1.67.0 – Admin › Backup: lista dos backups guardados no Supabase */

.bk-guardados { display: flex; flex-direction: column; gap: 8px; }
.bk-it { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 12px; background: rgba(0,0,0,.18); border: 1px solid rgba(243,227,195,.12); }

.bk-it .btn.pequeno { width: auto; flex: 0 0 auto; min-width: 40px; padding: 6px 10px; margin: 0; }

/* v1.68.0 – Admin › Backup: lixeira em cada backup guardado */
.bk-it .btn.bk-del { border-color: rgba(220,90,70,.55); }
@media (max-width: 380px) { .bk-it { gap: 6px; padding: 8px; } .bk-it .btn.pequeno { min-width: 36px; padding: 6px 7px; } }

/* v1.69.0 – Admin › Backup: destaca o backup recém-feito na lista */
.bk-it { transition: background .4s, border-color .4s; }
.bk-it.bk-novo { background: rgba(120,170,80,.22); border-color: rgba(150,200,100,.6); }

/* v1.70.0 – Lançar por voz */

.voz-avisos { border-radius: 12px; padding: 10px 12px; background: rgba(120,170,80,.14); border: 1px solid rgba(150,200,100,.45); font-size: 14px; line-height: 1.45; }
.voz-avisos.tem-aviso { background: rgba(230,170,40,.12); border-color: rgba(230,170,40,.55); }
.voz-avisos ul { margin: 6px 0 0; padding-left: 4px; list-style: none; }
.voz-avisos li + li { margin-top: 3px; }
.voz-ouvi { opacity: .8; overflow-wrap: anywhere; }
.voz-tudo { margin-top: 4px; }
.voz-ok { animation: vozOk 1.8s ease-out; }
@keyframes vozOk { 0%, 35% { box-shadow: 0 0 0 3px rgba(130,200,90,.85); } 100% { box-shadow: 0 0 0 3px rgba(130,200,90,0); } }
.voz-jan { display: flex; flex-direction: column; gap: 12px; text-align: center; }
.voz-tit { margin: 0; font-size: 20px; }
.voz-ex { margin: 0; text-align: center; }
.voz-jan textarea { width: 100%; font-size: 16px; text-align: left; }
.voz-mic { position: relative; width: 96px; height: 96px; margin: 4px auto 0; border-radius: 50%; border: 2px solid rgba(243,227,195,.35); background: radial-gradient(circle at 35% 30%, #e08a3a, #a5531d); color: #fff; font-size: 40px; cursor: pointer; box-shadow: 0 6px 18px rgba(0,0,0,.35); -webkit-tap-highlight-color: transparent; }
.voz-mic .voz-ic { position: relative; z-index: 1; }
.voz-mic .voz-onda { position: absolute; inset: -2px; border-radius: 50%; }
.voz-mic.ouvindo { background: radial-gradient(circle at 35% 30%, #e05a4a, #a12a1d); }
.voz-mic.ouvindo .voz-onda { animation: vozOnda 1.3s ease-out infinite; }
@keyframes vozOnda { 0% { box-shadow: 0 0 0 0 rgba(224,90,74,.6); } 100% { box-shadow: 0 0 0 26px rgba(224,90,74,0); } }
.voz-status { font-size: 14px; opacity: .85; min-height: 1.4em; }

/* v1.70.1 – botão "Lançar por voz" laranja, largura toda, igual aos botões de lançar */
.btn.voz-abre { width: 100%; justify-content: center; gap: 10px; font-size: 17px; padding: 13px 16px; margin: 2px 0 6px; }
.btn.voz-abre .voz-abre-ic { font-size: 20px; line-height: 1; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }

/* v1.73.0 – voz mais esperta: etiquetas do que foi entendido, ler de volta, desfazer */
.vz-entendi { text-align: left; border-radius: 12px; padding: 8px 10px 10px; background: rgba(0,0,0,.18); border: 1px solid rgba(243,227,195,.18); }
.vz-entendi-tit { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; margin-bottom: 6px; }
.vz-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.vz-chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 14px; line-height: 1.25; background: rgba(243,227,195,.12); border: 1px solid rgba(243,227,195,.25); }
.vz-chip.vz-pasto { background: rgba(120,170,80,.18); border-color: rgba(150,200,100,.5); }
.vz-chip.vz-animal { background: rgba(224,138,58,.18); border-color: rgba(224,138,58,.55); }
.vz-chip.vz-prod { background: rgba(110,160,210,.16); border-color: rgba(130,180,230,.45); }
.vz-chip.vz-tira, .vz-chip.vz-apaga { background: rgba(220,80,60,.16); border-color: rgba(230,100,80,.5); }
.vz-chip.vz-duvida { background: rgba(230,170,40,.12); border-color: rgba(230,170,40,.55); }
.vz-chip.vz-info { opacity: .85; }

.voz-desfaz { margin-top: 8px; display: flex; justify-content: flex-end; }
.voz-desfaz .btn { width: auto; }

/* v1.74.0 – voz: pergunta o que falta, palavras ensinadas, dúvidas com botões, voz nas outras telas */
.vz-pergunta { font-size: 19px; font-weight: 700; line-height: 1.35; padding: 10px 12px; border-radius: 12px; background: rgba(224,138,58,.18); border: 1px solid rgba(224,138,58,.55); }

.vz-falta { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; }
.vz-falta .btn { width: auto; }
.voz-avisos li.vz-li-acao { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.voz-avisos li .btn { width: auto; padding: 4px 10px; font-size: 13px; }
.vz-bts { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.pl-lista { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.pl-lista li { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(243,227,195,.08); border: 1px solid rgba(243,227,195,.18); }

.vz-chip small { opacity: .8; }

/* v1.75.0 – voz aprende sozinha, perguntas por voz, vários lançamentos numa fala */
.vz-chip.vz-ordem { background: rgba(243,227,195,.22); border-color: rgba(243,227,195,.5); font-weight: 700; }
.vz-fila { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: rgba(243,227,195,.08); border: 1px dashed rgba(243,227,195,.35); display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.vz-fila .btn { width: auto; }
.vz-resposta { font-size: 18px; line-height: 1.45; padding: 12px 14px; margin: 10px 0 4px; border-radius: 12px; background: rgba(120,170,80,.14); border: 1px solid rgba(150,200,100,.45); }

/* v1.75.0 – gravação embaixo do botão (sem janela no meio da tela) */
.vzi { min-width: 0; max-width: 100%; margin: 2px 0 8px; }
.vzi:empty { display: none; }
.vzi-bar { position: relative; display: flex; align-items: center; gap: 12px; height: 58px; min-width: 0; box-sizing: border-box; border-radius: 16px; padding: 0 8px 0 16px; overflow: hidden;
  background: linear-gradient(135deg, #3a1a10, #5a2414 55%, #7a2e16); border: 1px solid rgba(255,140,90,.45); box-shadow: 0 8px 22px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.08); color: #fbe9d6;
  animation: vziEntra .35s cubic-bezier(.2,.8,.2,1); }
.vzi-bar::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 0% 50%, rgba(255,90,60,.22), transparent 60%); pointer-events: none; }
@keyframes vziEntra { from { opacity: .3; transform: scaleX(.92); } to { opacity: 1; transform: none; } }
.vzi-rec { display: flex; align-items: center; gap: 7px; font: 700 12px/1 system-ui, sans-serif; letter-spacing: .12em; color: #ffb59c; min-width: 54px; }
.vzi-dot { width: 11px; height: 11px; border-radius: 50%; background: #ff4b3a; animation: vziPulso 1.2s ease-out infinite; }
@keyframes vziPulso { 0% { box-shadow: 0 0 0 0 rgba(255,75,58,.6); } 100% { box-shadow: 0 0 0 9px rgba(255,75,58,0); } }
.vzi-onda { flex: 1; min-width: 0; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: 3px; height: 34px; }
.vzi-onda i { display: block; flex: 0 0 4px; width: 4px; height: 6px; border-radius: 3px; background: linear-gradient(180deg, #ffd2a8, #ff8a4a); opacity: .95; }
.vzi-tempo { font: 600 14px/1 ui-monospace, Menlo, monospace; color: #ffd8bf; min-width: 38px; text-align: right; }
.vzi-parar { position: relative; z-index: 1; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff3e6; display: grid; place-items: center; box-shadow: 0 2px 8px rgba(0,0,0,.35); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.vzi-parar:active { transform: scale(.9); }
.vzi-parar span { width: 14px; height: 14px; border-radius: 3px; background: #c8341f; }
.vzi-proc { flex: 1; display: flex; align-items: center; gap: 10px; font: 600 15px/1 system-ui, sans-serif; color: #ffe2c8; }
.vzi-spin { width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,226,200,.25); border-top-color: #ffb27a; animation: vziGira .8s linear infinite; }
@keyframes vziGira { to { transform: rotate(360deg); } }
.vzi-card { margin-top: 10px; border-radius: 14px; padding: 12px 14px; min-width: 0; box-sizing: border-box; background: rgba(0,0,0,.22); border: 1px solid rgba(243,227,195,.16); animation: vziEntra .35s ease-out; }
.vzi-perg { font-size: 18px; font-weight: 700; margin-bottom: 8px; color: #ffd9b8; }
.vzi-txt { font-size: 17px; line-height: 1.45; color: #f6e7cf; min-height: 1.45em; overflow-wrap: anywhere; }
.vzi-txt .int { color: rgba(246,231,207,.55); font-style: italic; }
.vzi-caret { display: inline-block; width: 2px; height: 1.05em; margin-left: 2px; vertical-align: -2px; background: #ffb27a; animation: vziPisca 1s steps(1) infinite; }
@keyframes vziPisca { 50% { opacity: 0; } }
.vzi-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.vzi-chips:empty { display: none; }
.vzi-chips .vz-chip { animation: vziChip .3s ease-out; }
@keyframes vziChip { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.vzi-dica { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 10px; margin-top: 8px; font-size: 12.5px; opacity: .75; overflow-wrap: anywhere; }
.vzi-links { display: inline-flex; gap: 10px; }
.vzi-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; text-decoration: underline; cursor: pointer; }
.vzi-nada { margin-top: 2px; padding: 10px 12px; border-radius: 12px; font-size: 14px; background: rgba(230,170,40,.12); border: 1px solid rgba(230,170,40,.5); }
.vzi-card .btn.voz-abre { margin: 4px 0 0; }
.vzi-edita textarea { width: 100%; font-size: 16px; margin-top: 6px; box-sizing: border-box; }
.voz-avisos .vzi-chips { margin: 6px 0 2px; }
.voz-desfaz { gap: 8px; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) { .vzi-bar, .vzi-card, .vzi-chips .vz-chip { animation: none; } }

/* v1.76.0 – microfone global: um botão só no canto da tela, em todas as páginas */

@keyframes vozFabBrilho { 0%, 70% { box-shadow: inset 0 1px 0 rgba(255,225,180,.55), 0 8px 20px rgba(0,0,0,.5), 0 0 0 0 rgba(226,145,63,.45); }
  100% { box-shadow: inset 0 1px 0 rgba(255,225,180,.55), 0 8px 20px rgba(0,0,0,.5), 0 0 0 14px rgba(226,145,63,0); } }
.fab { bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (min-width: 900px) { .fab { bottom: 28px; right: 28px; } }
.voz-dock { position: fixed; z-index: 960; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); margin: 0 auto; max-width: 560px;
  padding: 10px; border-radius: 20px; background: linear-gradient(180deg, #2c180b, #1f1108); border: 1px solid rgba(240,205,150,.22);
  box-shadow: 0 18px 40px rgba(0,0,0,.6), 0 0 0 1px rgba(0,0,0,.4); animation: vziEntra .3s cubic-bezier(.2,.8,.2,1); max-height: 70vh; overflow-y: auto; }
.voz-dock:empty, .voz-dock[hidden] { display: none; }

.voz-dock .vzi-card { margin-top: 8px; }
.voz-dock .vzi-bar ~ .vzi-card { margin-top: 8px; }
.voz-dock > .vzi-nada { margin: 0; }
.voz-dock > .voz-ouvi { padding: 4px 6px 0; }
.voz-dock .vz-resposta { margin: 8px 0 6px; }
.voz-dock .voz-desfaz { padding: 0 2px 2px; }

@media print { .voz-dock { display: none !important; } }
#fLanc, .voz-avisos { scroll-margin-top: 84px; }

/* v1.76.0 – microfone no meio da barra de baixo (celular) e "Falar" no topo (computador) */
.nav .nav-voz { position: relative; flex: 0 0 60px; display: flex; align-items: flex-start; justify-content: center; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav .nav-voz .bola { width: 56px; height: 56px; margin-top: -24px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #f0a050, #b5561c 70%); border: 3px solid #1d1007;
  box-shadow: inset 0 1px 0 rgba(255,225,180,.55), 0 6px 16px rgba(0,0,0,.55); transition: transform .15s; }
.nav .nav-voz .bola svg { width: 27px; height: 27px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.nav .nav-voz:active .bola { transform: scale(.92); }
.nav .nav-voz.gravando .bola { background: radial-gradient(circle at 35% 30%, #ff7a5c, #b8261a 70%); animation: vozGrava 1.2s ease-out infinite; }
@keyframes vozGrava { 0% { box-shadow: inset 0 1px 0 rgba(255,225,180,.5), 0 6px 16px rgba(0,0,0,.55), 0 0 0 0 rgba(255,80,60,.55); }
  100% { box-shadow: inset 0 1px 0 rgba(255,225,180,.5), 0 6px 16px rgba(0,0,0,.55), 0 0 0 14px rgba(255,80,60,0); } }
@media (max-width: 899px) { .nav.com-voz a .ic { width: 44px; }  }
@media (max-width: 360px) { .nav.com-voz a .ic { width: 38px; } .nav .nav-voz { flex-basis: 54px; } .nav .nav-voz .bola { width: 50px; height: 50px; } }
.topo-voz { display: none; }
@media (min-width: 900px) {
  .topo .nav .nav-voz { display: none; }
  html body .topo .topo-voz { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; align-self: center; height: 40px; min-height: 0; padding: 0 16px 0 12px; border-radius: 12px;
    border: 1px solid #5a2a0c; color: #fff; font-weight: 700; font-size: 15px; cursor: pointer;
    background: radial-gradient(circle at 30% 20%, #f0a050, #b5561c 75%); box-shadow: inset 0 1px 0 rgba(255,225,180,.5), 0 4px 10px rgba(0,0,0,.4); }
  html body .topo .topo-voz svg { width: 20px; height: 20px; }
  html body .topo .topo-voz.gravando { background: radial-gradient(circle at 30% 20%, #ff7a5c, #b8261a 75%); animation: vozGrava 1.2s ease-out infinite; }
  .voz-dock { left: auto; right: 24px; top: 84px; bottom: auto; width: 520px; }
}
@media (max-width: 899px) { .voz-dock { bottom: calc(92px + env(safe-area-inset-bottom)); } }
/* janela aberta no celular: a barra de baixo (com o microfone) continua por cima e a janela fica logo acima dela */
@media (max-width: 899px) {
  .modal-fundo { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  .modal-fundo .modal { border-radius: 16px; max-height: calc(100vh - 88px - env(safe-area-inset-bottom) - 16px); max-height: calc(100dvh - 88px - env(safe-area-inset-bottom) - 16px); }
  .cf-fundo { padding-bottom: 16px !important; }
}
/* microfone do celular: botão próprio sobre o espaço no meio da barra */
.nav .nav-voz-lugar { flex: 0 0 64px; }
.nav-voz { position: fixed; z-index: 950; width: 60px; height: 60px; margin-left: -30px; border: 0; background: none; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.nav-voz.fora { display: none; }
.nav-voz .bola { width: 56px; height: 56px; margin: 2px; border-radius: 50%; display: grid; place-items: center; color: #fff;
  background: radial-gradient(circle at 35% 30%, #f0a050, #b5561c 70%); border: 3px solid #1d1007; box-sizing: border-box;
  box-shadow: inset 0 1px 0 rgba(255,225,180,.55), 0 6px 16px rgba(0,0,0,.55); transition: transform .15s; }
.nav-voz .bola svg { width: 27px; height: 27px; filter: drop-shadow(0 1px 1px rgba(0,0,0,.35)); }
.nav-voz:active .bola { transform: scale(.92); }
.nav-voz.gravando .bola { background: radial-gradient(circle at 35% 30%, #ff7a5c, #b8261a 70%); animation: vozGrava 1.2s ease-out infinite; }
@media (min-width: 900px) { .nav-voz { display: none; } .topo .nav .nav-voz-lugar { display: none; } }
@media (max-width: 360px) { .nav .nav-voz-lugar { flex-basis: 56px; } }

@media print { .nav-voz, .topo-voz { display: none !important; } }

@media (max-width: 899px) { .nav.com-voz a { font-size: 9.5px; letter-spacing: -.02em; padding-left: 0; padding-right: 0; }
  .nav.com-voz a:has(.nm-curto) .nm { display: none; }  }
@media (max-width: 899px) {
  html body .nav.com-voz a:has(.nm-curto) .nm { display: none; } }

/* v1.76.1 – motor de voz único: campo do teclado e diagnóstico */
.vzi-tecl { width: 100%; box-sizing: border-box; font-size: 16px; margin-top: 8px; }

.vz-diag { white-space: pre-wrap; font: 12.5px/1.45 ui-monospace, Menlo, monospace; background: rgba(0,0,0,.25); border: 1px solid rgba(243,227,195,.15); border-radius: 10px; padding: 10px; max-height: 320px; overflow: auto; }

/* v1.77.0 – no computador: 4 cards (em 4 colunas) e "Ver todos" para o resto; no celular continua 2 */
@media (min-width: 701px) {

  .grade-lim.mais4:not(.buscando) + .ver-todos { display: flex; }
  .grade-lim:not(.aberta):not(.buscando) > :nth-child(n+5) { display: none !important; }
  .sg-grade.grade-lim { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* v1.78.0 – controlar o app pela voz: destaca a parte que foi aberta */
.voz-destaque { animation: vozDestaque 1.8s ease-out; }
@keyframes vozDestaque { 0%, 30% { box-shadow: 0 0 0 3px rgba(240,160,80,.95), 0 0 26px rgba(240,160,80,.55); } 100% { box-shadow: 0 0 0 0 rgba(240,160,80,0); } }
.secao, .cartao { scroll-margin-top: 84px; }
/* v1.79 – desfazer no aviso da voz e a ajuda “O que posso falar” */
.vzi-nada.vz-com-desf { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.vz-desf-dock { flex: none; font-weight: 700; white-space: nowrap; color: #f3c27a; }
.vz-ajuda { padding: 4px 4px 2px; }
.vz-aj-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; font-size: 16px; }
.vz-aj-grupo { padding: 8px 0; border-top: 1px solid rgba(243,227,195,.12); }
.vz-aj-tit { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .75; margin-bottom: 6px; }
.vz-aj-ex { display: flex; flex-wrap: wrap; gap: 6px; }
.vz-aj-ex .vz-chip { font-size: 13.5px; color: inherit; font-family: inherit; }
.vz-aj-bt { cursor: pointer; background: rgba(226,145,63,.16); border-color: rgba(226,145,63,.5); }
.vz-aj-bt:active { transform: scale(.97); }
.vz-aj-pe { font-size: 12.5px; opacity: .7; padding-top: 8px; border-top: 1px solid rgba(243,227,195,.12); }
.vz-aj-ex .vz-chip { text-align: left; }
/* v1.80 – ordem dos cards (carimbo / porcentagem) e o Relatório de Negócios com Ano/Mês no canto, junto do olho */
.busca-linha { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.busca-linha .busca-cards, .busca-linha input#busca { flex: 1 1 240px; min-width: 0; }

.ordem-seg { display: inline-flex; align-items: center; gap: 0; flex: none; padding: 3px; border-radius: 12px;
  background: rgba(0,0,0,.28); border: 1px solid rgba(240,205,150,.2); box-shadow: inset 0 1px 2px rgba(0,0,0,.35); }
.ordem-rot { font: 700 10.5px "Zilla Slab", Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: var(--cobre, #d7a86e); padding: 0 8px 0 7px; }
.ordem-seg button { display: inline-flex; align-items: center; gap: 6px; height: 34px; padding: 0 12px; border: 0; border-radius: 9px; background: transparent;
  color: rgba(243,227,195,.78); font: 600 13.5px/1 inherit; font-family: inherit; cursor: pointer; white-space: nowrap; transition: background .18s, color .18s, box-shadow .18s; }
.ordem-seg button i { font-style: normal; font-size: 10px; opacity: .8; }
.ordem-seg button:hover { color: #fbe9cc; }
.ordem-seg button.on { color: #2a1406; background: linear-gradient(180deg, #f3c27a, #d98a3e); box-shadow: 0 1px 0 rgba(255,230,190,.6) inset, 0 2px 6px rgba(0,0,0,.35); }
.ordem-seg button:focus-visible { outline: 2px solid #f3c27a; outline-offset: 1px; }
.reordenou > * { animation: ordemEntra .35s cubic-bezier(.2,.8,.2,1) both; }
@keyframes ordemEntra { from { opacity: .35; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (max-width: 700px) {
  .busca-linha .busca-cards, .busca-linha input#busca { flex-basis: 100%; }
  .busca-linha .ordem-seg { width: 100%; }

  .ordem-seg button { flex: 1 1 0; justify-content: center; height: 38px; padding: 0 8px; }
}
@media (prefers-reduced-motion: reduce) { .reordenou > * { animation: none; } }
/* Negócios › Relatório: Ano e Mês encostados no olho, no canto direito */
@media (min-width: 701px) {
  .ng-cab { justify-content: flex-start; }
  .ng-cab > .ng-filtro { margin-left: auto; }
}
/* v1.81 – ordem com um botão por critério que alterna: a seta gira (▼ maior / ▲ menor) e o texto troca */
.ordem-seg .ord-bt { gap: 7px; }
.ord-seta { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(243,227,195,.12);
  transition: transform .35s cubic-bezier(.3,1.4,.5,1), background .18s; }
.ord-seta svg { display: block; }
.ord-bt.sobe .ord-seta { transform: rotate(180deg); }
.ord-bt.on .ord-seta { background: rgba(42,20,6,.18); }
.ord-txt { display: inline-block; min-width: 0; }
.ord-txt.troca { animation: ordTxt .32s cubic-bezier(.2,.8,.2,1); }
@keyframes ordTxt { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
.ordem-seg.dois .ord-bt { min-width: 150px; justify-content: center; }
.ordem-seg.um .ord-bt { min-width: 118px; justify-content: center; }
@media (max-width: 700px) {
  .ordem-seg .ord-bt { min-width: 0; }
  .ordem-seg.um { width: auto; margin-left: auto; }

}
@media (prefers-reduced-motion: reduce) { .ord-seta, .ord-txt.troca { transition: none; animation: none; } }
@media (max-width: 700px) {
  .ordem-seg.dois .ordem-rot { display: none; }
  .ordem-seg.dois .ord-bt { flex: 1 1 0; padding: 0 6px; font-size: 14px; gap: 6px; }
}
/* Rebanho: busca e o botão de ordem na mesma linha também no celular */
@media (max-width: 700px) {
  .busca-linha:has(.ordem-seg.um) { flex-wrap: nowrap; }
  .busca-linha:has(.ordem-seg.um) .busca-cards { flex: 1 1 auto; min-width: 0; }
  .busca-linha .ordem-seg.um { width: auto; flex: none; margin-left: 0; }
  .ordem-seg.um .ordem-rot { display: none; }
}
/* ===== v1.82 – indicadores do Painel: ícone, número grande, desenho da situação e rodapé com o detalhe ===== */
.kp-novo { gap: 14px; align-items: stretch; margin-bottom: 16px; }
.kp-novo .kp { display: flex; flex-direction: column; gap: 10px; padding: 16px 18px 14px; min-width: 0; overflow: hidden; }
.kp-cab { display: flex; align-items: center; gap: 9px; min-width: 0; }
.kp-ic { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 10px; color: #3a1a06;
  background: linear-gradient(160deg, #f6cf8f, #d88a3c); box-shadow: inset 0 1px 0 rgba(255,240,210,.7), 0 2px 6px rgba(0,0,0,.35); }
.kp-ic svg { width: 18px; height: 18px; }
.kp-rot { font: 700 11px/1.2 "Zilla Slab", Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: var(--cobre, #d7a86e); min-width: 0; }
.kp-st { margin-left: auto; flex: none; font-size: 10.5px; font-weight: 700; line-height: 1; letter-spacing: .05em; text-transform: uppercase; padding: 5px 9px; border-radius: 999px;
  background: rgba(0,0,0,.28); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18); white-space: nowrap; }

.kp-pe { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding-top: 9px; border-top: 1px dashed rgba(224,154,79,.28);
  font-size: 12.5px; color: rgba(243,227,195,.66); }
.kp-pe b { color: #f6e7c8; font-weight: 700; font-variant-numeric: tabular-nums; }

.kp-barra { height: 9px; border-radius: 999px; background: rgba(0,0,0,.38); box-shadow: inset 0 1px 2px rgba(0,0,0,.5); overflow: hidden; }
.kp-barra i { display: block; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #c9783a, #f3c27a); box-shadow: 0 0 10px rgba(243,194,122,.35);
  transform-origin: left; animation: kpBarra 1s cubic-bezier(.2,.8,.2,1) both; }
.kp-barra.ok i { background: linear-gradient(90deg, #4f8a2a, #9fd67a); box-shadow: 0 0 10px rgba(140,210,100,.35); }
.kp-barra.alerta i { background: linear-gradient(90deg, #b9861c, #f2c25a); }
.kp-barra.erro i { background: linear-gradient(90deg, #a83a24, #ff8a6a); }
@keyframes kpBarra { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.kp-comp { display: flex; gap: 2px; height: 9px; border-radius: 999px; overflow: hidden; background: rgba(0,0,0,.38); }
.kp-comp i { display: block; min-width: 3px; animation: kpBarra 1s cubic-bezier(.2,.8,.2,1) both; transform-origin: left; }
.kp-leg { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 11.5px; color: rgba(243,227,195,.72); margin-top: -3px; }
.kp-leg span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.kp-leg i { width: 8px; height: 8px; border-radius: 3px; display: inline-block; }
.kp-leg b { color: #f6e7c8; }

/* lotação: cor pela situação + medidor */
.kp-lot.lot-ok { background: linear-gradient(160deg, #4f7a2c, #2c4a18); border-color: #142208; box-shadow: inset 0 1px 0 rgba(220,255,190,.35), inset 0 -3px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.45), 0 0 26px rgba(120,190,80,.22); }
.kp-lot.lot-alerta { background: linear-gradient(160deg, #a8741a, #6b4708); border-color: #2a1a04; box-shadow: inset 0 1px 0 rgba(255,230,170,.4), inset 0 -3px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.45), 0 0 26px rgba(230,170,50,.25); }
.kp-lot.lot-erro { background: linear-gradient(160deg, #a83a24, #6a1c0f); border-color: #2a0a04; box-shadow: inset 0 1px 0 rgba(255,200,180,.35), inset 0 -3px 0 rgba(0,0,0,.25), 0 10px 26px rgba(0,0,0,.45), 0 0 26px rgba(230,90,60,.28); }
.kp-lot.lot-cinza { background: linear-gradient(160deg, #5a4331, #2c1d12); }
.kp-lot::before { border-color: rgba(255,240,215,.4); }
.kp-lot .kp-ic { background: rgba(0,0,0,.25); color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.2); }
.kp-lot .kp-rot { color: #fff1dc; }
.kp-lot .kp-pe { border-top-color: rgba(255,240,215,.3); color: rgba(255,241,220,.8); }
.kp-lot .kp-pe b { color: #fff; }
.kp-lot-corpo { display: flex; align-items: flex-end; gap: 12px; }
.kp-gauge { flex: none; width: 112px; height: auto; overflow: visible; }
.kp-gauge path { fill: none; stroke-width: 11; stroke-linecap: round; }
.kp-gauge .g-fundo { stroke: rgba(0,0,0,.28); }
.kp-gauge .g-valor { stroke: #fff; filter: drop-shadow(0 0 4px rgba(255,255,255,.45)); stroke-dasharray: 200; stroke-dashoffset: 200; animation: kpArco 1.1s cubic-bezier(.2,.8,.2,1) .1s forwards; }
.kp-gauge .g-meta { stroke: #2a1406; stroke-width: 3; stroke-linecap: round; }
@keyframes kpArco { to { stroke-dashoffset: 0; } }
.kp-lot-num { display: flex; flex-direction: column; line-height: 1; padding-bottom: 2px; }
.kp-lot-num b { font: 700 38px/1 "Zilla Slab", Georgia, serif; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.35); font-variant-numeric: lining-nums tabular-nums; }
.kp-lot-num small { font: 600 14px "Zilla Slab", Georgia, serif; color: #fff1dc; margin-top: 4px; }
@media (min-width: 701px) and (max-width: 1180px) { .kp-novo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .kp-novo { grid-template-columns: 1fr 1fr; gap: 10px; }
  .kp-novo .kp-lot, .kp-novo .kp:nth-child(2) { grid-column: 1 / -1; }
  .kp-novo .kp { padding: 14px 14px 12px; gap: 9px; }

  .kp-novo .kp:nth-child(3) .kp-pe, .kp-novo .kp:nth-child(4) .kp-pe { flex-direction: column; gap: 2px; }
  .kp-novo .kp:nth-child(3) .kp-rot, .kp-novo .kp:nth-child(4) .kp-rot { font-size: 10px; letter-spacing: .1em; }
  .kp-gauge { width: 104px; }
}
@media (prefers-reduced-motion: reduce) { .kp-barra i, .kp-comp i, .kp-gauge .g-valor { animation: none; stroke-dashoffset: 0; } }

/* v1.82.2 – cada porcentagem centralizada debaixo da sua parte da barra */
.kp-leg.kp-leg-sob { flex-wrap: nowrap; gap: 2px; margin-top: -2px; }
.kp-leg.kp-leg-sob span { justify-content: center; min-width: 0; text-align: center; gap: 4px; }
/* v1.82.3 – barras dos indicadores correm uma vez só (sem a classe kp-anima, já aparecem cheias) */
.kp-novo:not(.kp-anima) .kp-barra i, .kp-novo:not(.kp-anima) .kp-comp i { animation: none; }
.kp-novo:not(.kp-anima) .kp-gauge .g-valor { animation: none; stroke-dashoffset: 0; }
.kp-anima .kp-barra i, .kp-anima .kp-comp i { animation-delay: var(--kp-atraso, 0ms); }
.kp-anima .kp-gauge .g-valor { animation-delay: calc(100ms + var(--kp-atraso, 0ms)); }
/* ===== v1.84 – topo novo: seletor da fazenda em duas linhas (rótulo + nome) com ícone, e Sair com ícone ===== */
html body .topo .fz-sel { gap: 10px; padding: 5px 7px 5px 5px; min-height: 48px; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,235,200,.10), rgba(0,0,0,.20)); border: 1px solid rgba(240,205,150,.28); color: #fbecd0;
  box-shadow: inset 0 1px 0 rgba(255,230,190,.16), 0 2px 8px rgba(0,0,0,.28); transition: border-color .2s, background .2s; }
html body .topo .fz-sel:hover { border-color: rgba(240,205,150,.5); }
.fz-sel-col { display: flex; flex-direction: column; justify-content: center; min-width: 0; flex: 1 1 auto; }
.fz-sel-rot { font: 700 9.5px/1 "Zilla Slab", Georgia, serif; letter-spacing: .18em; text-transform: uppercase; color: #d7a86e; margin: 1px 0 4px; }
html body .topo .fz-sel .fz-sel-txt { color: #fbecd0; font-family: "Zilla Slab", Georgia, serif; font-size: 16.5px; line-height: 1.1; letter-spacing: .01em; }
.fz-sel-seta-c { flex: none;   border-radius: 50%; display: grid; place-items: center; background: rgba(0,0,0,.28); box-shadow: inset 0 0 0 1px rgba(240,205,150,.25); }
html body .topo .fz-sel .fz-sel-seta { position: static; margin: 0; width: 12px; height: 8px; color: #f3c27a; }
html body .topo #btnSair { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 48px; min-height: 0; padding: 0 16px; flex: none; align-self: center;
  border-radius: 14px; background: linear-gradient(180deg, rgba(255,235,200,.08), rgba(0,0,0,.2)); border: 1px solid rgba(240,205,150,.28); color: #f6e7c8; font-weight: 600; font-size: 15px; }
html body .topo #btnSair svg { width: 19px; height: 19px; flex: none; }
html body .topo #btnSair:hover { border-color: rgba(240,205,150,.55); background: rgba(240,205,150,.1); }
html body .topo .topo-logo { width: 50px; height: 48px; border-radius: 14px; }
html body .topo { border-bottom: 1px solid rgba(201,138,75,.35); box-shadow: inset 0 1px 0 rgba(255,220,170,.18), 0 1px 0 rgba(0,0,0,.6), 0 6px 18px rgba(0,0,0,.35); }
@media (max-width: 899px) {
  html body .topo { padding-top: 10px; padding-bottom: 10px; gap: 10px; }
  html body .topo #btnSair { width: 48px; padding: 0; }
  html body .topo #btnSair span { display: none; }
}
@media (min-width: 900px) { html body .topo .fz-sel, html body .topo #btnSair, html body .topo .topo-logo { min-height: 44px; } html body .topo #btnSair { height: 44px; } html body .topo .topo-logo { width: 46px; height: 44px; } }
/* v1.84 – mais espaço para o nome: sem o ícone da casinha (a logo já identifica), seta menor */
html body .topo .fz-sel { padding-left: 12px; }
.fz-sel-seta-c { width: 24px; height: 24px; }
@media (min-width: 900px) { html body .topo .fz-sel { min-width: 170px; } html body .topo .fz-sel .fz-sel-txt { font-size: 15px; } }
@media (max-width: 899px) { html body .topo .fz-sel .fz-sel-txt { font-size: 16px; } }
@media (min-width: 900px) and (max-width: 1439px) { html body .topo #btnSair { width: 44px; padding: 0; } html body .topo #btnSair span { display: none; } }
@media (min-width: 900px) and (max-width: 1099px) { html body .topo .fz-sel { flex: 0 1 200px; min-width: 150px; max-width: 200px; } }
@media (min-width: 900px) and (max-width: 1339px) { html body .topo .fz-sel { flex: 0 1 210px; min-width: 150px; max-width: 210px; } }
/* ===== v1.85 – card da salga: tudo dentro do card, qualquer nome de pasto, produto ou carimbo ===== */
/* topo: pasto à esquerda e produto à direita; se não couberem juntos, o produto desce para a linha de baixo */

/* carimbos e categorias: os chips quebram linha em vez de se espremerem; nome comprido termina com … */
html body .sg-grade .sg-tile .sg-chips { flex-wrap: wrap; overflow: visible; gap: 5px; }
html body .sg-grade .sg-tile .sg-chip { flex: 0 1 auto; max-width: 100%; min-width: 0; gap: 5px; padding: 3px 8px; font-size: 12.5px; }
html body .sg-grade .sg-tile .sg-chip b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10.5px; letter-spacing: .04em; }
html body .sg-grade .sg-tile .sg-chip .sg-chip-n { flex: none; font-variant-numeric: tabular-nums; }
@media (max-width: 700px) { html body .sg-grade .sg-tile .sg-chip { padding: 2px 6px; gap: 4px; font-size: 11.5px; } html body .sg-grade .sg-tile .sg-chip b { font-size: 9.5px; letter-spacing: .02em; } }
/* v1.85 – card do pasto (Painel e Lançamentos ativos): carimbos/categorias com o nome inteiro; o que não cabe vai para a linha de baixo */
html body .mz-caixa { justify-content: center; }
html body .mz-col { flex: 1 0 auto; max-width: 100%; }
html body .mz-col.txt b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* v1.85.2 – teclado aberto no celular: o microfone e a barra de baixo saem do caminho (voltam quando o teclado fecha) */
@media (max-width: 899px) and (pointer: coarse) { body.teclado-aberto .topo .nav, body.teclado-aberto .nav-voz { display: none !important; } }
/* v1.85.3 – microfone no centro da barra também com número ímpar de abas (colaborador): os dois lados têm a mesma largura */
@media (max-width: 899px) {
  html body .topo .nav.com-voz > a { flex: 1 1 0; min-width: 0; }
  html body .topo .nav.com-voz > a.nav-largo { flex: var(--peso, 1) 1 0; }
}
/* v1.85.4 – card do pasto com muitos carimbos/categorias: Cabeças em cima (linha inteira) e o resto numa grade de 2 colunas */
html body .mz-caixa.muitos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 0; row-gap: 0; overflow: hidden; }
html body .mz-caixa.muitos .mz-col { border-left: 0; border-top: 1px solid rgba(255,255,255,.16); padding: 7px 6px; min-width: 0; max-width: none; justify-content: center; }
html body .mz-caixa.muitos .mz-col.cab { grid-column: 1 / -1; border-top: 0; flex-direction: row; align-items: baseline; justify-content: center; gap: 8px; padding: 7px 6px 6px; }
html body .mz-caixa.muitos .mz-col.dir { border-left: 1px solid rgba(255,255,255,.16); }
html body .mz-caixa.muitos .mz-col small { white-space: normal; overflow: visible; text-overflow: clip; line-height: 1.15; text-align: center; overflow-wrap: break-word; hyphens: none; letter-spacing: .02em; }
/* palavra comprida (ex.: NASCIMENTO) ocupa a linha inteira da grade; as outras se encaixam nas sobras */
html body .mz-caixa.muitos .mz-col.larga { grid-column: 1 / -1; }
/* v1.85.5 – cards da mesma linha sempre com a MESMA altura: no card com menos informação, o quadro de
   cabeças/carimbos cresce e ocupa o espaço (números centralizados e um pouco maiores) – sem buraco vazio */

html body .mz-tile { justify-content: flex-start; }
html body .mz-tile > .mz-caixa { flex: 1 1 auto; align-content: center; align-items: stretch; }
html body .mz-tile > .mz-caixa:not(.muitos) > .mz-col { justify-content: center; }
html body .mz-tile > .mz-caixa:not(.muitos) .mz-col b { font-size: 19px; }
html body .mz-tile > .mz-caixa.muitos { align-content: stretch; }
html body .mz-tile > .mz-caixa.muitos > .mz-col.cab { align-items: center; }
@media (max-width: 700px) { html body .mz-tile > .mz-caixa:not(.muitos) .mz-col b { font-size: 17px; } }
html body .mz-tile > .mz-caixa:not(.muitos) { align-content: stretch; }
html body .mz-tile > .mz-caixa.muitos { grid-template-rows: auto; grid-auto-rows: 1fr; }

/* v1.86.0 – voz que aprende com todas as fazendas: escolher o tipo, "não é isso?", Admin › Voz */
html body .vz-escolhe { display: flex; flex-direction: column; gap: 8px; }
html body .vz-escolhe > span { font-weight: 600; }
html body .vz-tipos { display: flex; flex-wrap: wrap; gap: 6px; }
html body .vz-tipos .btn { margin: 0; }
html body .vz-outro { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px dashed rgba(127,127,127,.35); font-size: 13px; opacity: .9; }
html body .vz-outro > span { color: var(--cinza); }
html body .vz-outro .vzi-link { white-space: nowrap; }

html body .vz-apr-chips { display: flex; flex-wrap: wrap; gap: 6px; }
html body .vz-apr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 8px 4px 10px; border-radius: 999px; border: 1px solid var(--borda); background: var(--verde-claro); color: var(--texto); font-size: 13px; }
html body .vz-apr-chip small { color: var(--cinza); font-size: 11px; }
html body .vz-apr-chip button { border: 0; background: none; padding: 0 2px; cursor: pointer; color: var(--cinza); font-size: 12px; line-height: 1; }
html body .vz-apr-chip button:hover { color: #b3261e; }

/* v1.87.0 – Painel: saudação com resumo, alertas, atalhos e mapa dos pastos */
html body .pn-hero { margin-bottom: 12px; }

/* alertas */
html body .pn-alertas-wrap { margin: 0 0 12px; }

html body .pn-alertas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
html body .pn-al { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 10px 12px; border-radius: 14px; cursor: pointer; font: inherit; color: var(--texto);
  background: var(--couro); border: 1px solid #140b05; border-left: 5px solid #d7a86e; box-shadow: var(--sombra); transition: transform .12s ease, filter .12s ease; }
html body .pn-al:hover { filter: brightness(1.1); } html body .pn-al:active { transform: scale(.98); }
html body .pn-al.erro { border-left-color: #e5584a; } html body .pn-al.alerta { border-left-color: #f0b04a; } html body .pn-al.sal { border-left-color: #8fb4d9; }
html body .pn-al-ic { font-size: 22px; line-height: 1; flex: 0 0 auto; }
html body .pn-al-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
html body .pn-al-txt b { font-size: 15px; color: #fbecd0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html body .pn-al-txt small { font-size: 13px; color: #d9bf98; }
html body .pn-al-seta { font-size: 22px; color: var(--cobre); opacity: .7; }
html body .pn-tudo-ok { display: flex; align-items: center; gap: 12px; padding: 12px 14px; margin: 0 0 12px; border-radius: 14px; background: rgba(110,170,80,.14); border: 1px solid rgba(140,200,100,.35); }
html body .pn-tudo-ok b { display: block; color: #cfeeb4; } html body .pn-tudo-ok small { color: #c8d9b6; }
/* atalhos */
html body .pn-atalhos { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 14px; }
html body .pn-atalhos.n5 { grid-template-columns: repeat(5, 1fr); }
html body .pn-at { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 10px 6px; border-radius: 16px; cursor: pointer;
  font: inherit; font-size: 13.5px; font-weight: 700; color: #fbecd0; text-align: center; line-height: 1.15;
  background: radial-gradient(120% 120% at 50% 0%, rgba(226,145,63,.25), transparent 60%), var(--couro); border: 1px solid #140b05; box-shadow: var(--sombra); transition: transform .12s ease, filter .12s ease; }
html body .pn-at:hover { filter: brightness(1.12); } html body .pn-at:active { transform: scale(.96); }
html body .pn-at-ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; font-size: 24px; background: var(--brasa); box-shadow: inset 0 1px 0 rgba(255,230,190,.45), 0 3px 8px rgba(0,0,0,.35); }
@media (max-width: 700px) {

  html body .pn-atalhos.n5 .pn-at:nth-child(n+4) { grid-column: span 1; }
  html body .pn-at { min-height: 76px; font-size: 12.5px; }
  html body .pn-at-ic { width: 40px; height: 40px; font-size: 22px; }
  html body .pn-alertas { grid-template-columns: 1fr; }
}
/* mapa dos pastos */
html body .pn-retiro + .pn-retiro { margin-top: 12px; }
html body .pn-retiro-nome { display: block; margin: 0 2px 6px; font-size: 11.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--cobre); font-weight: 700; }

 

html body .pn-at-c { display: none; }

@media (max-width: 700px) {
  html body .pn-atalhos.n5 { grid-template-columns: repeat(5, 1fr); gap: 6px; }
  html body .pn-atalhos.n4 { gap: 6px; }
  html body .pn-atalhos .pn-at { min-height: 70px; padding: 8px 2px; border-radius: 14px; font-size: 12px; gap: 5px; }
  html body .pn-atalhos .pn-at-ic { width: 38px; height: 38px; font-size: 20px; border-radius: 12px; }
  html body .pn-atalhos.n5 .pn-at-l { display: none; } html body .pn-atalhos.n5 .pn-at-c { display: block; }
  html body .pn-alertas.mais3:not(.aberta) > .pn-al:nth-child(n+4) { display: none; }

  html body .pn-al { padding: 8px 12px; }
}

/* v1.87.0 – avisos escondidos: só a barra; abre em "Ver todos" */
html body .pn-alertas-wrap > .pn-alertas { display: none; margin-top: 8px; }
html body .pn-alertas-wrap.aberta > .pn-alertas { display: grid; animation: pnAbre .2s ease; }
html body .pn-alertas-wrap .pn-alertas > .pn-al { display: flex !important; }
@keyframes pnAbre { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
html body .pn-alertas-bar { display: flex; align-items: center; gap: 10px; width: 100%; padding: 10px 14px; border-radius: 14px; cursor: pointer; font: inherit; text-align: left; color: var(--texto);
  background: var(--couro); border: 1px solid #140b05; border-left: 5px solid #8fb4d9; box-shadow: var(--sombra); }
html body .pn-alertas-bar.alerta { border-left-color: #f0b04a; } html body .pn-alertas-bar.erro { border-left-color: #e5584a; }
html body .pn-alertas-bar:hover { filter: brightness(1.1); }
html body .pn-alertas-ic { font-size: 20px; }
html body .pn-alertas-txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
html body .pn-alertas-txt b { color: #fbecd0; font-size: 15px; } html body .pn-alertas-txt small { color: #d9bf98; font-size: 13px; }
html body .pn-alertas-ver { flex: 0 0 auto; font-size: 13.5px; font-weight: 700; color: var(--cobre); padding: 6px 10px; border-radius: 10px; border: 1px solid rgba(215,168,110,.35); white-space: nowrap; }

/* v1.88.0 – Registrar morte e salga compactos: 2 campos por linha, foto e observação menores, botões sempre à vista */
html body .modal:has(.mf-compacto) { padding-bottom: 0; }
html body .modal:has(.mf-compacto) .mt-tit { position: sticky; top: -14px; z-index: 3; margin: -14px -14px 6px; padding: 12px 14px 10px; background: linear-gradient(180deg, #4a2a13, #3f230f); border-bottom: 1px solid rgba(240,205,150,.12); }
html body .mf-x { margin-left: auto; width: 36px; height: 36px; border-radius: 10px; border: 1px solid rgba(240,205,150,.3); background: rgba(20,11,5,.35); color: #f3e3c3; font-size: 16px; cursor: pointer; }
html body .mf-compacto { gap: 10px; }
html body .mf-compacto label { margin-bottom: 4px; font-size: 11.5px; }
html body .mf-compacto .linha { grid-template-columns: 1.35fr 1fr !important; gap: 8px; }
html body .mf-compacto :is(input:not([type=checkbox]):not([type=radio]):not([type=file]), select) { --campo-h: 42px; font-size: 15.5px; }
html body .mf-compacto input[type=date] { padding: 0 8px; font-size: 14.5px; }
html body .mf-compacto .ajuda { font-size: 12px; margin-top: 2px; }
html body .mf-compacto .ajuda:empty { display: none; }
/* foto: uma linha só; depois de escolher mostra a miniatura */
html body .mf-compacto .mf-foto {  justify-content: flex-start; }
html body .mf-compacto .mf-foto .mt-foto-vazio { flex-direction: row; gap: 10px; padding: 8px 12px; font-size: 14px; }
html body .mf-compacto .mf-foto .mt-foto-vazio b { font-size: 24px; }
html body .mf-compacto .mf-foto.tem img { max-height: 140px; width: auto; margin: 0 auto; display: block; }
/* observação recolhida */
html body .mf-obs { border: 1px dashed rgba(240,205,150,.28); border-radius: 12px; padding: 0 12px; }
html body .mf-obs > summary { cursor: pointer; list-style: none; padding: 10px 0; font-size: 14px; color: #e9cfa3; font-weight: 700; }
html body .mf-obs > summary::-webkit-details-marker { display: none; }
html body .mf-obs > summary::after { content: "＋"; float: right; color: var(--cobre); }
html body .mf-obs[open] > summary::after { content: "－"; }
html body .mf-obs > summary small { font-weight: 400; color: #c9ab83; }
html body .mf-obs[open] { padding-bottom: 10px; }
html body .mf-obs textarea { min-height: 60px !important; height: 60px; }
/* salga: carimbos e estoque menores, cocho em uma linha */
html body .mf-compacto .sg-car-box { padding: 8px 10px; }
html body .mf-compacto .sg-car-cab { padding-bottom: 6px; margin-bottom: 6px; font-size: 11px; }
html body .mf-compacto .sg-car-cab b { font-size: 15px; }
html body .mf-compacto .sg-car-it { padding: 4px 8px; font-size: 13px; }
html body .mf-compacto .sg-sal-info { padding: 6px 10px; font-size: 13px; margin: 0; }
html body .mf-compacto .sg-sobra { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; margin: 2px 0 0; }
html body .mf-compacto .sg-sobra span { min-height: 0; padding: 6px 2px; font-size: 12px; gap: 0; line-height: 1.15; }
/* botões fixos no rodapé da janela */
html body .mf-compacto .mf-acoes { position: sticky; bottom: 0; z-index: 3; margin: 4px -14px 0; padding: 10px 14px calc(10px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(180deg, rgba(58,32,14,.92), #3a200e 40%); border-top: 1px solid rgba(240,205,150,.12); }
html body .mf-compacto .mf-acoes .btn { min-height: 46px; }
@media (min-width: 700px) { html body .modal:has(.mf-compacto) .mt-tit { top: -16px; margin: -16px -16px 8px; padding: 14px 16px 12px; } html body .mf-compacto .mf-acoes { margin: 4px -16px 0; padding: 12px 16px; } }
html body .mf-compacto small.ajuda:empty { display: none !important; min-height: 0 !important; }
html body .mf-compacto .linha:has(#mOutraBox[hidden]) { grid-template-columns: 1fr !important; }
html body .mf-compacto .mf-foto { align-items: center; }
html body .mf-compacto .mf-foto { min-height: 54px; height: auto; }
html body .mf-compacto .mf-foto:not(.tem) { height: 54px; }
html body .mf-compacto .mf-foto .mt-foto-vazio { margin: auto 0; align-self: center; }

/* v1.89.0 – Lançar gado numa janela (igual morte e salga) */
html body .lf-fundo { position: fixed; inset: 0; z-index: 40; display: flex; align-items: flex-end; justify-content: center; background: rgba(10,5,2,.7); }
html body .lf-fundo[hidden] { display: none; }
html body .lf-fundo .lf-modal { width: 100%; max-width: 640px; max-height: 92vh; max-height: 92dvh; overflow: auto; overflow-x: hidden; box-sizing: border-box; border-radius: 16px 16px 0 0; padding: 14px; }
@media (min-width: 700px) { html body .lf-fundo { align-items: center; } html body .lf-fundo .lf-modal { border-radius: 16px; padding: 16px; max-width: 720px; } }
@media (max-width: 899px) {
  html body .lf-fundo { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  html body .lf-fundo .lf-modal { border-radius: 16px; max-height: calc(100dvh - 88px - env(safe-area-inset-bottom) - 16px); }
}
html body .lf-fundo.aberto .lf-modal { animation: lfEntra .18s ease-out; }
@keyframes lfEntra { from { transform: translateY(16px); opacity: .6; } to { transform: none; opacity: 1; } }
/* dentro da janela: pastos, produto e animais compactos */
html body .lf-form .pq-extras { grid-template-columns: minmax(0, 1fr) !important; gap: 8px; }
html body .lf-form .linha-lanc.lanc-prod { grid-template-columns: minmax(0, 1fr) !important; }
html body .lf-form .pq-mais-bar { margin-top: -4px; }
html body .lf-form .resumo-lanc { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 6px; margin: 0; }

html body .lf-form .resumo-lanc .kpi :is(.rotulo, small, .sub) { font-size: 10.5px; }
@media (max-width: 420px) { html body .lf-form .resumo-lanc { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
/* tela de Lançamentos no computador: tudo em uma coluna (o formulário agora abre em janela) */
@media (min-width: 1100px) {
  html body #main[data-rota=lancamentos] { display: block; }
  html body #main[data-rota=lancamentos] > .lanc-form { grid-row: auto; }
}
html body .lf-cartao .mt-topo { margin-top: 4px; }
/* v1.89.0 – ajustes de largura: peso médio cabe no card estreito; botões de ordem cabem em 320px */

@media (max-width: 360px) {
  html body .ordem-seg.dois .ord-bt { min-width: 0 !important; flex: 1 1 0; padding: 0 4px; font-size: 13px; gap: 4px; }
  html body .ordem-seg.dois .ord-seta { width: 18px; height: 18px; flex: 0 0 18px; }
  html body .ordem-seg { max-width: 100%; box-sizing: border-box; }
}
html body .mf-compacto .mf-foto:not(.tem) .mt-foto-vazio { position: absolute; inset: 0; margin: 0; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; padding: 0 14px; }
html body .mf-compacto .sg-sobra span { display: flex; flex-direction: column; align-items: center; justify-content: center; }
@media (max-width: 400px) {
  html body .mf-compacto input[type=date] { font-size: 13.5px; padding: 0 4px 0 8px; letter-spacing: -.2px; }
  html body .mf-compacto .linha { grid-template-columns: 1.15fr 1fr !important; }
}
html body .lf-fundo .lf-modal { padding-bottom: 0; }
html body .mf-compacto .sg-sobra label > span, html body .mf-compacto .sg-sobra input:checked + span { display: flex !important; flex-direction: column !important; align-items: center; justify-content: center; gap: 0; }
html body .sg-sobra-ic { font-style: normal; display: inline; margin-right: 4px; }
html body .mf-compacto .sg-sobra-ic { display: block; margin: 0 0 1px; font-size: 16px; line-height: 1.1; }
/* v1.89.0 – Painel no computador largo: saudação, avisos, atalhos e números em cima (igual no celular);
   mapa dos pastos na largura toda; embaixo, lançamentos por pasto à esquerda e rebanho, pastos vazios e capacidade à direita */
@media (min-width: 1400px) {
  html body #main[data-rota=painel] { grid-template-rows: auto auto auto auto auto auto auto auto 1fr; }
  html body #main[data-rota=painel] > .fz-hero { grid-row: 1; grid-column: 1 / -1; }
  html body #main[data-rota=painel] > :is(.pn-alertas-wrap, .pn-tudo-ok) { grid-row: 2; grid-column: 1 / -1; }
  html body #main[data-rota=painel] > .pn-atalhos { grid-row: 3; grid-column: 1 / -1; }
  html body #main[data-rota=painel] > .kpis { grid-row: 4; grid-column: 1 / -1; }

  html body #main[data-rota=painel] > section.secao:nth-of-type(2) { grid-column: 1; grid-row: 6 / 10; }
  html body #main[data-rota=painel] > section.secao:nth-of-type(3) { grid-column: 2; grid-row: 6; }
  html body #main[data-rota=painel] > section.secao:nth-of-type(4) { grid-column: 2; grid-row: 7; }
  html body #main[data-rota=painel] > section.secao:nth-of-type(5) { grid-column: 2; grid-row: 8; }
  
}
/* v1.89.1 – Rebanho por categoria: 4 cards no computador e 2 no celular + "Ver todos" (igual Lançamentos por pasto).
   O aviso "nada encontrado" da busca fica entre a grade e o botão: o botão continua aparecendo */

@media (max-width: 700px) { .grade-lim.mais2:not(.buscando) ~ .ver-todos { display: flex; } }
@media (min-width: 701px) {  .grade-lim.mais4:not(.buscando) ~ .ver-todos { display: flex; } }
.grade-lim.buscando ~ .ver-todos { display: none !important; }
/* v1.89.2 – resumo da janela Lançar gado: números dentro do quadro (sem encostar na borda tracejada) */
html body .lf-form .resumo-lanc .kpi { padding: 12px 14px; min-width: 0; }
html body .lf-form .resumo-lanc .kpi::before { inset: 5px; }
html body .lf-form .resumo-lanc .kpi .rotulo { font-size: 10.5px; letter-spacing: .08em; line-height: 1.25; }
html body .lf-form .resumo-lanc .kpi .valor { font-size: 20px; line-height: 1.2; margin-top: 4px; overflow-wrap: anywhere; }
html body .lf-form .resumo-lanc .kpi .sub { font-size: 11.5px; line-height: 1.3; margin-top: 2px; }
@media (max-width: 700px) { html body .lf-form .resumo-lanc { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 8px; } }
/* v1.90.0 – previsão na salga: dias que os sacos duram, ganho esperado e custo */
html body .sg-prev { border-radius: 12px; padding: 8px 12px; background: rgba(110,170,80,.12); border: 1px solid rgba(140,200,100,.35); }
html body .sg-prev-tit { font-weight: 700; color: #cfeeb4; font-size: 14px; }
html body .sg-prev-tit small { font-weight: 400; color: #c8d9b6; }
html body .sg-prev-num { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 4px 0 2px; }
html body .sg-prev-num span { display: flex; flex-direction: column; font-size: 13px; color: #e4f2d6; }
html body .sg-prev-num small { font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: #a9cf8c; }
html body .sg-prev-num b { font-size: 18px; color: #fff; }
html body .sg-prev .ajuda { color: #c8d9b6; }
html body .sg-prev-num i { font-style: normal; }
/* v1.91.0 – relatório de suplementação sem "cocho necessário": 3 números */

/* v1.93.0 – botão do modo claro / escuro no topo */
html body .topo #btnModo { display: inline-grid; place-items: center; width: 48px; height: 48px; padding: 0; flex: none; align-self: center; min-height: 0; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, rgba(255,235,200,.08), rgba(0,0,0,.2)); border: 1px solid rgba(240,205,150,.28); color: #f6e7c8; }
html body .topo #btnModo svg { width: 20px; height: 20px; }
@media (min-width: 900px) { html body .topo #btnModo { width: 44px; height: 44px; } }
@media (max-width: 380px) { html body .topo #btnModo { width: 42px; } }

/* v1.99.7 – COMPUTADOR: o site usa a largura toda da tela (sem as faixas vazias dos lados) e, em monitores grandes,
   tudo fica proporcionalmente maior (em vez de cartões esticados com letra pequena) */
@media (min-width: 1100px) { html body .conteudo { max-width: none; padding-left: clamp(24px, 2.2vw, 44px); padding-right: clamp(24px, 2.2vw, 44px); } }
/* v1.99.8 – sem ampliação extra: o Windows/Mac já ampliam a tela (ex.: monitor 4K em 150% aparece como 2560 px) –
   ampliar de novo deixava tudo grande demais e o topo fora de proporção. Fica só a largura toda. */

/* v1.108.0 – menu de baixo: cada aba com a largura do nome; o destaque da aba ativa nunca passa da coluna */
@media (max-width: 899px) { html body .nav.com-voz a .ic { width: var(--pilula, 52px); max-width: 100%; box-sizing: border-box; } }