/* ==========================================================================
   BRAZCÃO — PORTAL DOS PARCEIROS (assets/css/portal.css)
   Visual claro, de "portal": as cores da logo da Brazcão (mesmas variáveis do
   ERP), cartões brancos sobre fundo suave. Funciona no computador (menu à
   esquerda) e no celular (abas no rodapé).
   ========================================================================== */
:root{
  --azul-profundo:#16346B; --azul-marca:#24549C; --azul-medio:#0090D8; --azul-claro:#009CE4; --azul-vivo:#3FBBF0;
  --azul-palido:#E8F5FD; --azul-linha:#CBE4F5; --areia:#FCCC9C;
  --branco:#FFFFFF; --fundo:#F3F7FB; --tinta:#15294A; --tinta-suave:#5A6C86; --tinta-fraca:#8695A8; --linha:#E1E9F2;
  --verde:#1E8A5F; --verde-palido:#E3F2EB; --ambar:#B4791C; --ambar-palido:#FBF1DD; --vermelho:#C0492F; --vermelho-palido:#F9E7E2;
  --roxo:#6B4E9C; --roxo-palido:#EDE7F6;
  --raio:14px; --raio-p:10px;
  --sombra:0 1px 2px rgba(22,52,107,.06), 0 12px 32px rgba(22,52,107,.08); --sombra-p:0 1px 3px rgba(22,52,107,.08);
  --nav-largura:232px; --topo-altura:60px;
}
*{ box-sizing:border-box; }
html, body{ margin:0; min-height:100%; }
body{ font-family:"Open Sans", system-ui, -apple-system, "Segoe UI", Arial, sans-serif; font-size:14px; color:var(--tinta); background:var(--fundo); -webkit-font-smoothing:antialiased; }
button, input, select, textarea{ font-family:inherit; font-size:inherit; }
button{ cursor:pointer; }
h1,h2,h3,h4{ margin:0; font-weight:800; }
p{ margin:0; }
[hidden]{ display:none !important; }
.tela{ min-height:100vh; }
.tela[hidden]{ display:none !important; }

/* ---------------- login ---------------- */
#tela-login{ position:relative; display:flex; align-items:center; justify-content:center; padding:24px 16px; }
.lg-fundo{ position:absolute; inset:0; background:linear-gradient(160deg, var(--azul-profundo) 0%, var(--azul-marca) 55%, #2E6BC4 100%); }
.lg-caixa{ position:relative; width:100%; max-width:380px; background:#fff; border-radius:18px; padding:28px 24px 20px; box-shadow:0 18px 50px rgba(10,25,60,.35); text-align:center; }
.lg-logo{ height:64px; width:auto; margin-bottom:8px; }
.lg-caixa h1{ font-size:20px; color:var(--azul-profundo); }
.lg-sub{ font-size:12.5px; color:var(--tinta-suave); margin-bottom:18px; }
.lg-campo{ display:block; text-align:left; margin-bottom:12px; }
.lg-campo span{ display:block; font-size:11px; font-weight:700; letter-spacing:.4px; color:var(--tinta-suave); margin-bottom:4px; }
.lg-campo input{ width:100%; border:1px solid var(--linha); border-radius:10px; padding:12px; color:var(--tinta); background:#fff; }
.lg-campo input:focus{ outline:2px solid var(--azul-claro); border-color:transparent; }
.lg-lembrar{ display:flex; align-items:center; gap:8px; font-size:13px; color:var(--tinta-suave); margin:2px 2px 14px; text-align:left; }
.lg-lembrar input{ width:18px; height:18px; accent-color:var(--azul-marca); }
.lg-entrar{ width:100%; border:none; border-radius:10px; padding:14px; background:var(--azul-marca); color:#fff; font-size:15px; font-weight:700; }
.lg-entrar:hover{ background:var(--azul-profundo); }
.lg-entrar:disabled{ opacity:.6; }
.lg-erro{ margin-top:12px; background:var(--vermelho-palido); color:var(--vermelho); border-radius:8px; padding:10px; font-size:13px; }
.lg-rodape{ margin-top:16px; font-size:11.5px; color:var(--tinta-fraca); line-height:1.6; }
.lg-demo{ margin-top:10px; font-size:11.5px; background:var(--ambar-palido); color:var(--ambar); border-radius:8px; padding:8px 10px; line-height:1.5; }

/* ---------------- carregando ---------------- */
#tela-carregando{ display:flex; align-items:center; justify-content:center; background:var(--fundo); }
.cg-meio{ text-align:center; color:var(--tinta-suave); }
.cg-logo{ height:60px; margin-bottom:14px; }
.cg-giro{ width:28px; height:28px; border:3px solid var(--azul-linha); border-top-color:var(--azul-marca); border-radius:50%; margin:0 auto 12px; animation:gira .8s linear infinite; }
@keyframes gira{ to{ transform:rotate(360deg); } }

/* ---------------- moldura do portal ---------------- */
#tela-app{ display:grid; grid-template-columns:var(--nav-largura) 1fr; grid-template-rows:var(--topo-altura) 1fr; grid-template-areas:"topo topo" "nav corpo"; min-height:100vh; }
.ap-topo{ grid-area:topo; display:flex; align-items:center; gap:12px; padding:0 16px; background:#fff; border-bottom:1px solid var(--linha); position:sticky; top:0; z-index:20; }
.ap-menu{ display:none; border:none; background:none; color:var(--azul-marca); width:36px; height:36px; border-radius:8px; }
.ap-menu svg{ width:24px; height:24px; }
.ap-logo{ height:36px; width:auto; }
.ap-quem{ display:flex; flex-direction:column; line-height:1.2; min-width:0; flex:1; }
.ap-rot{ font-size:10.5px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--tinta-fraca); }
.ap-quem b{ font-size:14px; color:var(--tinta); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ap-selo{ font-size:11px; font-weight:700; color:var(--verde); background:var(--verde-palido); border-radius:20px; padding:4px 10px; white-space:nowrap; }
.ap-selo.off{ color:var(--vermelho); background:var(--vermelho-palido); }
.ap-selo.demo{ color:var(--ambar); background:var(--ambar-palido); }
.ap-sino{ position:relative; border:none; background:none; color:var(--tinta-suave); width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; }
.ap-sino:hover{ background:var(--azul-palido); color:var(--azul-marca); }
.ap-sino svg{ width:22px; height:22px; }
.ap-sino em{ position:absolute; top:2px; right:2px; min-width:17px; height:17px; border-radius:9px; background:var(--vermelho); color:#fff; font-style:normal; font-size:10.5px; font-weight:800; display:flex; align-items:center; justify-content:center; padding:0 4px; }

.ap-nav{ grid-area:nav; background:var(--azul-profundo); color:#fff; padding:14px 10px; display:flex; flex-direction:column; gap:3px; position:sticky; top:var(--topo-altura); height:calc(100vh - var(--topo-altura)); overflow:auto; }
.ap-nav button{ display:flex; align-items:center; gap:11px; width:100%; border:none; background:none; color:#C9DAF2; border-radius:10px; padding:10px 12px; font-size:13.5px; font-weight:700; text-align:left; }
.ap-nav button svg{ width:20px; height:20px; flex:none; }
.ap-nav button em{ font-style:normal; margin-left:auto; background:rgba(255,255,255,.18); border-radius:9px; padding:1px 8px; font-size:11px; }
.ap-nav button:hover{ background:rgba(255,255,255,.08); color:#fff; }
.ap-nav button.on{ background:var(--azul-marca); color:#fff; }
.ap-nav .sep{ height:1px; background:rgba(255,255,255,.12); margin:8px 6px; }
.ap-nav .nav-rodape{ margin-top:auto; font-size:11px; color:rgba(255,255,255,.55); padding:10px 12px 4px; line-height:1.5; }
.ap-sombra{ display:none; }

.ap-corpo{ grid-area:corpo; padding:20px 24px 40px; min-width:0; }
.ap-rodape-nav{ display:none; }

/* ---------------- blocos ---------------- */
.pt-cab{ display:flex; align-items:flex-end; justify-content:space-between; gap:14px; flex-wrap:wrap; margin-bottom:16px; }
.pt-cab h2{ font-size:21px; color:var(--tinta); }
.pt-cab p{ font-size:13px; color:var(--tinta-suave); margin-top:3px; }
.eyebrow{ font-size:10.5px; font-weight:800; letter-spacing:.7px; text-transform:uppercase; color:var(--azul-marca); }
.card{ background:#fff; border:1px solid var(--linha); border-radius:var(--raio); padding:18px 20px; box-shadow:var(--sombra-p); }
.card h3{ font-size:16px; margin:2px 0 6px; }
.card + .card{ margin-top:14px; }
.grid2{ display:grid; grid-template-columns:1.15fr .85fr; gap:16px; align-items:start; }
.grid3{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
.hint{ font-size:12.5px; color:var(--tinta-suave); margin:4px 0 12px; line-height:1.5; }
.nota{ background:var(--azul-palido); border-left:3px solid var(--azul-marca); border-radius:8px; padding:10px 13px; font-size:12.5px; margin:12px 0; line-height:1.55; }
.nota.ok{ background:var(--verde-palido); border-left-color:var(--verde); }
.nota.atencao{ background:var(--ambar-palido); border-left-color:var(--ambar); }
.nota.erro{ background:var(--vermelho-palido); border-left-color:var(--vermelho); }
.vazio{ padding:30px; text-align:center; color:var(--tinta-suave); display:flex; flex-direction:column; gap:5px; }
.vazio b{ color:var(--tinta); font-size:14.5px; }
.conta{ background:var(--azul-palido); color:var(--azul-marca); border-radius:8px; padding:1px 9px; font-size:12.5px; margin-left:6px; }

/* botões */
.btn{ border:none; background:var(--azul-marca); color:#fff; border-radius:10px; padding:10px 18px; font-size:13.5px; font-weight:800; }
.btn:hover{ background:var(--azul-profundo); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn.bloco{ width:100%; margin-top:8px; padding:12px; font-size:14px; }
.btn.claro{ background:#fff; color:var(--azul-marca); border:1.5px solid var(--azul-linha); }
.btn.claro:hover{ border-color:var(--azul-marca); background:var(--azul-palido); }
.btn.perigo{ background:#fff; color:var(--vermelho); border:1.5px solid #EFC9C0; }
.btn.perigo:hover{ background:var(--vermelho-palido); }
.btn.mini{ padding:6px 12px; font-size:12px; border-radius:8px; }

/* formulário */
.campo{ display:flex; flex-direction:column; gap:5px; margin-bottom:12px; }
.campo > span{ font-size:12px; font-weight:700; color:var(--azul-profundo); }
.campo i{ font-style:normal; color:var(--vermelho); }
.campo input, .campo textarea, .campo select{ border:1px solid var(--azul-linha); border-radius:9px; padding:9px 12px; font-size:13.5px; color:var(--tinta); background:#fff; width:100%; }
.campo input:focus, .campo textarea:focus, .campo select:focus{ border-color:var(--azul-marca); outline:none; box-shadow:0 0 0 3px var(--azul-palido); }
.campo input.ro{ background:var(--fundo); color:var(--tinta-suave); }
.linha2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.linha3{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:12px; }

.segs{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.seg{ border:1.5px solid var(--azul-linha); background:#fff; border-radius:10px; padding:10px 11px; text-align:left; display:flex; flex-direction:column; gap:3px; }
.seg b{ font-size:13px; color:var(--tinta); }
.seg i{ font-style:normal; font-size:10.5px; color:var(--tinta-fraca); line-height:1.3; }
.seg small{ font-size:11.5px; font-weight:800; color:var(--azul-marca); margin-top:3px; }
.seg:hover{ border-color:var(--azul-marca); }
.seg.on{ border-color:var(--azul-marca); background:var(--azul-palido); }
.seg.on b{ color:var(--azul-marca); }

.opcs{ display:flex; gap:7px; flex-wrap:wrap; }
.opc{ border:1.5px solid var(--azul-linha); background:#fff; border-radius:9px; padding:7px 13px; font-size:12.5px; font-weight:700; color:var(--tinta-suave); }
.opc.on{ background:var(--azul-marca); border-color:var(--azul-marca); color:#fff; }

.keeps{ display:flex; gap:8px; flex-wrap:wrap; }
.keep{ display:inline-flex; align-items:center; gap:7px; border:1.5px solid var(--azul-linha); background:#fff; border-radius:20px; padding:7px 14px; font-size:12.5px; font-weight:700; color:var(--tinta-suave); }
.keep:hover{ border-color:var(--ambar); }
.keep .tick{ opacity:0; color:var(--ambar); font-weight:900; }
.keep.on{ border-color:var(--ambar); background:var(--ambar-palido); color:var(--ambar); }
.keep.on .tick{ opacity:1; }
.keep small{ font-weight:600; opacity:.8; }

/* lista de pets */
.lista{ display:flex; flex-direction:column; gap:8px; }
.pet{ display:flex; align-items:center; gap:12px; border:1px solid var(--linha); border-radius:11px; padding:11px 14px; background:#fff; }
.pet:hover{ border-color:var(--azul-linha); background:#FCFDFF; }
.pet.sel{ border-color:var(--azul-marca); background:var(--azul-palido); }
.chk{ width:18px; height:18px; accent-color:var(--azul-marca); cursor:pointer; flex:none; }
.chk-vazio{ width:18px; flex:none; }
.cod{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12.5px; font-weight:800; background:var(--azul-profundo); color:#fff; border-radius:7px; padding:6px 10px; white-space:nowrap; flex:none; }
.pet-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pet-nm{ font-size:14.5px; font-weight:800; color:var(--tinta); }
.pet-meta{ font-size:12px; color:var(--tinta-suave); }
.tags{ display:flex; gap:5px; flex-wrap:wrap; margin-top:2px; }
.tag{ font-size:10.5px; font-weight:700; border-radius:6px; padding:2px 7px; background:var(--linha); color:var(--tinta-suave); }
.tag.t-individual{ background:#E7F0FF; color:#1B4FA8; }
.tag.t-assistida{ background:#F3E9FB; color:#7B1FA2; }
.tag.keep{ background:var(--ambar-palido); color:var(--ambar); }
.tag.obs{ background:var(--vermelho-palido); color:var(--vermelho); }
.status{ font-size:11px; font-weight:800; border-radius:20px; padding:5px 12px; white-space:nowrap; flex:none; }
.status.st-cadastrado{ background:var(--linha); color:var(--tinta-suave); }
.status.st-solicitado{ background:var(--ambar-palido); color:var(--ambar); }
.status.st-agendado{ background:#E7F0FF; color:#1B4FA8; }
.status.st-coletado{ background:var(--verde-palido); color:var(--verde); }
.status.st-entregue{ background:var(--roxo-palido); color:var(--roxo); }
.status.st-cancelado, .status.st-recusado{ background:var(--vermelho-palido); color:var(--vermelho); }
.status.st-pendente{ background:var(--ambar-palido); color:var(--ambar); }
.status.st-aceito{ background:#E7F0FF; color:#1B4FA8; }
.status.st-concluido{ background:var(--verde-palido); color:var(--verde); }
.pet-acoes{ display:flex; gap:6px; flex:none; }
.ico-btn{ border:1px solid var(--linha); background:#fff; color:var(--tinta-suave); width:30px; height:30px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; }
.ico-btn:hover{ border-color:var(--azul-marca); color:var(--azul-marca); }
.ico-btn svg{ width:16px; height:16px; }

.barra{ position:sticky; bottom:12px; display:flex; align-items:center; justify-content:space-between; gap:14px; background:#fff; border:1px solid var(--azul-linha); border-radius:12px; padding:12px 18px; box-shadow:var(--sombra); font-size:13.5px; color:var(--tinta-suave); margin-top:14px; z-index:5; }

/* filtros / abas internas */
.pilulas{ display:flex; gap:7px; flex-wrap:wrap; margin-bottom:14px; }
.pilula{ border:1.5px solid var(--azul-linha); background:#fff; color:var(--tinta-suave); border-radius:20px; padding:7px 14px; font-size:12.5px; font-weight:700; }
.pilula:hover{ border-color:var(--azul-marca); color:var(--azul-marca); }
.pilula.on{ background:var(--azul-marca); border-color:var(--azul-marca); color:#fff; }
.pilula em{ font-style:normal; background:rgba(0,0,0,.12); border-radius:8px; padding:0 6px; font-size:11px; margin-left:4px; }
.busca{ border:1px solid var(--azul-linha); border-radius:20px; padding:8px 14px; width:260px; max-width:100%; }

/* INÍCIO — cartões de números */
.kpis{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-bottom:16px; }
.kpi{ background:#fff; border:1px solid var(--linha); border-radius:var(--raio); padding:14px 16px; box-shadow:var(--sombra-p); cursor:pointer; display:flex; flex-direction:column; gap:3px; text-align:left; }
.kpi:hover{ border-color:var(--azul-marca); }
.kpi b{ font-size:26px; color:var(--azul-marca); line-height:1.1; }
.kpi span{ font-size:12px; color:var(--tinta-suave); font-weight:700; }
.kpi.amb b{ color:var(--ambar); } .kpi.ver b{ color:var(--verde); } .kpi.rox b{ color:var(--roxo); }
.avisos{ display:flex; flex-direction:column; gap:7px; }
.aviso{ display:flex; gap:10px; align-items:flex-start; border-radius:10px; padding:10px 13px; font-size:12.5px; line-height:1.5; background:var(--azul-palido); }
.aviso.ok{ background:var(--verde-palido); } .aviso.atencao{ background:var(--ambar-palido); }
.aviso time{ flex:none; font-size:11px; color:var(--tinta-fraca); font-weight:700; margin-top:2px; }
.aviso.lido{ opacity:.6; }

/* pedidos */
.pedido{ border:1px solid var(--linha); border-radius:12px; padding:14px 16px; background:#fff; margin-bottom:10px; }
.pedido-cab{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:8px; }
.pedido-cab b{ font-size:14px; }
.pedido-cab .quando{ font-size:12px; color:var(--tinta-suave); }
.pedido-pets{ display:flex; gap:6px; flex-wrap:wrap; margin:6px 0; }
.pedido-pets span{ font-size:12px; background:var(--fundo); border:1px solid var(--linha); border-radius:7px; padding:3px 8px; }
.pedido-pets span b{ font-family:ui-monospace,Menlo,Consolas,monospace; color:var(--azul-profundo); }
.pedido-resp{ font-size:12.5px; color:var(--tinta); background:var(--azul-palido); border-radius:8px; padding:8px 11px; margin-top:6px; }
.pedido-acoes{ display:flex; gap:8px; margin-top:8px; }

/* linha do tempo (cinzas) */
.timeline{ display:flex; gap:0; margin:8px 0 4px; }
.tl{ flex:1; display:flex; flex-direction:column; align-items:center; gap:4px; position:relative; font-size:10.5px; font-weight:700; color:var(--tinta-fraca); text-align:center; }
.tl::before{ content:""; position:absolute; top:7px; left:-50%; width:100%; height:2px; background:var(--linha); z-index:0; }
.tl:first-child::before{ display:none; }
.tl i{ width:16px; height:16px; border-radius:50%; background:#fff; border:2px solid var(--linha); z-index:1; }
.tl.feito{ color:var(--verde); } .tl.feito i{ background:var(--verde); border-color:var(--verde); } .tl.feito::before{ background:var(--verde); }
.tl.atual{ color:var(--azul-marca); } .tl.atual i{ border-color:var(--azul-marca); background:var(--azul-palido); }

/* tabelas */
table.tb{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
table.tb th{ text-align:left; font-size:10.5px; letter-spacing:.5px; text-transform:uppercase; color:var(--tinta-fraca); padding:8px 10px; border-bottom:1px solid var(--linha); white-space:nowrap; }
table.tb td{ padding:9px 10px; border-bottom:1px solid var(--fundo); vertical-align:middle; }
table.tb tr:last-child td{ border-bottom:none; }
table.tb td.num, table.tb th.num{ text-align:right; font-variant-numeric:tabular-nums; }
table.tb td.dinheiro{ font-weight:700; white-space:nowrap; }
table.tb tr.grupo td{ background:var(--azul-palido); color:var(--azul-profundo); font-weight:800; font-size:12px; letter-spacing:.3px; }
table.tb .neg{ color:var(--vermelho); } table.tb .pos{ color:var(--verde); }
.tb-rolagem{ overflow:auto; }

/* tabela de preços */
.precos-cab{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
.precos-cab span{ background:var(--fundo); border:1px solid var(--linha); border-radius:8px; padding:6px 11px; font-size:12px; color:var(--tinta-suave); }
.precos-cab span b{ color:var(--tinta); }

/* saldo */
.saldo{ display:flex; align-items:baseline; gap:10px; }
.saldo b{ font-size:30px; color:var(--tinta); }
.saldo.deve b{ color:var(--vermelho); } .saldo.credito b{ color:var(--verde); }

/* informações */
.hor{ display:flex; justify-content:space-between; padding:8px 0; border-bottom:1px solid var(--linha); font-size:13.5px; }
.hor b{ color:var(--tinta); } .hor span{ color:var(--tinta-suave); }
.passos{ margin:6px 0 0; padding-left:18px; font-size:13px; line-height:1.75; }
.pill{ background:var(--azul-palido); color:var(--azul-marca); border-radius:6px; padding:1px 7px; font-weight:700; }

/* calendário simples (solicitar) */
.cal-dica{ display:flex; gap:8px; align-items:center; font-size:12.5px; margin-top:6px; padding:8px 11px; border-radius:8px; background:var(--verde-palido); color:var(--verde); font-weight:700; }
.cal-dica.plantao{ background:var(--ambar-palido); color:var(--ambar); }
.cal-dica.erro{ background:var(--vermelho-palido); color:var(--vermelho); }

/* relatórios (barras) */
.barras{ display:flex; flex-direction:column; gap:6px; }
.barra-l{ display:grid; grid-template-columns:90px 1fr 40px; gap:10px; align-items:center; font-size:12.5px; }
.barra-l i{ height:14px; border-radius:4px; background:var(--azul-marca); display:block; min-width:2px; }
.barra-l b{ text-align:right; }

/* janela (modal) */
.ov{ position:fixed; inset:0; background:rgba(21,41,74,.45); display:flex; align-items:center; justify-content:center; padding:16px; z-index:50; }
.jan{ background:#fff; border-radius:16px; padding:20px 22px; width:100%; max-width:560px; max-height:92vh; overflow:auto; box-shadow:0 24px 60px rgba(10,25,60,.35); }
.jan h3{ font-size:17px; margin-bottom:10px; }
.jan-acoes{ display:flex; justify-content:flex-end; gap:8px; margin-top:14px; }
.jan.vermelha{ border-top:5px solid var(--vermelho); }

/* recado flutuante */
#recados{ position:fixed; left:50%; bottom:22px; transform:translateX(-50%); display:flex; flex-direction:column; gap:8px; z-index:60; pointer-events:none; }
.recado{ background:var(--azul-profundo); color:#fff; border-radius:10px; padding:11px 16px; font-size:13px; font-weight:700; box-shadow:var(--sombra); max-width:92vw; animation:sobe .2s ease; }
.recado.erro{ background:var(--vermelho); }
@keyframes sobe{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none; } }

/* ---------------- celular ---------------- */
@media (max-width:900px){
  #tela-app{ grid-template-columns:1fr; grid-template-areas:"topo" "corpo"; }
  .ap-menu{ display:flex; align-items:center; justify-content:center; }
  .ap-logo{ display:none; }
  .ap-nav{ position:fixed; top:var(--topo-altura); left:0; bottom:0; width:260px; height:auto; transform:translateX(-100%); transition:transform .18s ease; z-index:30; box-shadow:0 0 40px rgba(0,0,0,.3); }
  .ap-nav.aberto{ transform:none; }
  .ap-sombra{ display:block; position:fixed; inset:0; top:var(--topo-altura); background:rgba(0,0,0,.35); z-index:25; opacity:0; pointer-events:none; transition:opacity .18s; }
  .ap-sombra.aberto{ opacity:1; pointer-events:auto; }
  .ap-corpo{ padding:14px 14px 90px; }
  .ap-rodape-nav{ display:grid; grid-template-columns:repeat(5,1fr); position:fixed; left:0; right:0; bottom:0; background:#fff; border-top:1px solid var(--linha); padding:6px 4px calc(6px + env(safe-area-inset-bottom)); z-index:20; }
  .ap-rodape-nav button{ border:none; background:none; color:var(--tinta-fraca); display:flex; flex-direction:column; align-items:center; gap:3px; font-size:10px; font-weight:800; padding:4px 2px; border-radius:8px; }
  .ap-rodape-nav button svg{ width:22px; height:22px; }
  .ap-rodape-nav button.on{ color:var(--azul-marca); }
  .grid2, .grid3, .linha3{ grid-template-columns:1fr; }
  .segs{ grid-template-columns:1fr; }
  .kpis{ grid-template-columns:1fr 1fr; }
  .pt-cab h2{ font-size:18px; }
  .card{ padding:14px 14px; }
  .pet{ flex-wrap:wrap; }
  .pet .status{ margin-left:auto; }
  .barra{ bottom:76px; flex-direction:column; align-items:stretch; }
  .busca{ width:100%; }
}
@media print{ .ap-topo, .ap-nav, .ap-rodape-nav, .btn, .barra{ display:none !important; } #tela-app{ display:block; } .ap-corpo{ padding:0; } }

/* v2 — proposta por kg (calculadora pelo peso) */
.kg-calc{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:10px 0 4px; font-size:13px; color:var(--tinta-suave); }
.kg-calc input{ width:90px; border:1px solid var(--azul-linha); border-radius:8px; padding:7px 10px; text-align:right; font-weight:700; color:var(--tinta); }
.kg-calc b{ color:var(--azul-marca); }

/* v3 — cadastro do pet com só os tipos que a tabela do parceiro oferece (n1/n2/n3 = quantos) */
.segs.n1{ grid-template-columns:1fr; }
.segs.n2{ grid-template-columns:repeat(2,1fr); }
@media (max-width:900px){ .segs.n1, .segs.n2, .segs.n3{ grid-template-columns:1fr; } }

/* ======================================================================
   v6 (20/10/2026) — O PADRÃO DO ERP NO PORTAL (padrao.css do ERP, v167):
   pílula = 32 px, 12,5 px/700, MAIÚSCULAS, branca com borda cinza, ativa
   azul-marca; botão = 32 px, cantos de 9 px; pequeno = 26 px, 11,5 px; a
   1400 px ou menos, 30 px e 12 px. Vale para todas as telas do portal.
   ====================================================================== */
.pilula{ display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box; min-height:32px; padding:6px 14px; line-height:18px;
  font-size:12.5px; font-weight:700; letter-spacing:.2px; text-transform:uppercase; border:1px solid var(--linha); border-radius:999px; background:#fff; color:var(--tinta-suave);
  white-space:nowrap; transition:background .12s, border-color .12s, color .12s; }
.pilula:hover{ border-color:var(--azul-medio); color:var(--azul-marca); background:#fff; }
.pilula.on{ background:var(--azul-marca); border-color:var(--azul-marca); color:#fff; }
.pilula.on:hover{ background:var(--azul-profundo); border-color:var(--azul-profundo); color:#fff; }
.pilula em{ line-height:16px; padding:0 7px; }
.pilulas{ gap:6px; align-items:center; }
.pilulas-2{ justify-content:space-between; }
.pilulas-grupo{ display:inline-flex; gap:6px; flex-wrap:wrap; }
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:6px; box-sizing:border-box; min-height:32px; padding:6px 14px; line-height:18px; font-size:12.5px; font-weight:700; border:1px solid var(--azul-marca); border-radius:9px; }
.btn:hover{ background:var(--azul-profundo); border-color:var(--azul-profundo); }
.btn.claro{ border-color:var(--linha); }
.btn.claro:hover{ border-color:var(--azul-medio); color:var(--azul-marca); background:var(--azul-palido); }
.btn.perigo{ border-color:#EAC4BB; }
.btn.perigo:hover{ border-color:var(--vermelho); background:var(--vermelho-palido); color:var(--vermelho); }
.btn.mini{ min-height:26px; padding:3px 10px; line-height:18px; font-size:11.5px; border-radius:7px; }
.btn.bloco{ min-height:38px; }
.busca{ box-sizing:border-box; min-height:32px; padding:6px 11px; line-height:18px; font-size:12.5px; border:1px solid var(--linha); border-radius:9px; }
@media (max-width:1400px){
  .pilula, .btn, .per-datas input[type=date]{ min-height:30px; padding:5px 12px; font-size:12px; }
  .btn.mini{ min-height:26px; padding:3px 10px; font-size:11.5px; }
  .busca{ min-height:30px; padding:5px 10px; font-size:12px; }
}

/* ---- período (TODO O PERÍODO · HOJE · ESTE MÊS · PERÍODO de/até) ---- */
.per-barra{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.per-datas{ display:inline-flex; align-items:center; gap:8px; margin-left:4px; font-size:12px; font-weight:700; color:var(--tinta-suave); }
.per-datas.on{ color:var(--azul-marca); }
.per-datas.on input[type=date]{ border-color:var(--azul-marca); color:var(--azul-marca); }
.per-datas label{ display:inline-flex; align-items:center; gap:5px; }
.per-datas input[type=date]{ box-sizing:border-box; min-height:32px; padding:4px 8px; border:1px solid var(--linha); border-radius:9px; font-size:12.5px; font-weight:700; color:var(--tinta); background:#fff; }
.per-datas input[type=date]:focus{ outline:none; border-color:var(--azul-marca); box-shadow:0 0 0 3px var(--azul-palido); }

/* ---- INÍCIO: cards quadrados à esquerda; à direita HOJE (em cima) e o que a Brazcão executou (embaixo) ---- */
.ini{ display:grid; grid-template-columns:calc(var(--lado, 132px) * 2 + 12px) minmax(0,1fr); gap:16px; align-items:stretch; }
/* v7: o Início é preso na altura da tela (sem rolagem da página): cabeçalho + barra do período em cima e a grade
   ocupando o que sobra; o lado dos cards vem do JS (ajustarInicio) pela altura que sobra */
#ap-corpo[data-tela="inicio"]{ height:calc(100vh - var(--topo-altura)); overflow:hidden; display:flex; flex-direction:column; padding-bottom:14px; }
#ap-corpo[data-tela="inicio"] .ini{ flex:1; min-height:0; }
.ini-cab{ flex:none; }
.ini-cab .per-barra{ margin-left:auto; }
.ini-esq{ display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start; }
.ini-card{ aspect-ratio:1/1; width:var(--lado, auto); height:var(--lado, auto); background:#fff; border:1px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra-p); display:flex; flex-direction:column; justify-content:center; align-items:center; gap:7px;
  text-align:center; padding:10px; cursor:pointer; transition:border-color .12s, transform .06s, box-shadow .12s; }
.ini-card:hover{ border-color:var(--azul-marca); transform:translateY(-1px); box-shadow:var(--sombra); }
.ini-card b{ font-size:34px; line-height:1; color:var(--azul-marca); letter-spacing:-.5px; font-variant-numeric:tabular-nums; }
.ini-card span{ font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:var(--tinta-suave); line-height:1.25; }
.ini-card.c-cinza b{ color:var(--tinta-suave); } .ini-card.c-azul2 b{ color:#1B4FA8; } .ini-card.c-roxo b{ color:var(--roxo); }
.ini-card.c-ambar b{ color:var(--ambar); } .ini-card.c-verde b{ color:var(--verde); } .ini-card.c-laranja b{ color:#C2410C; }
/* a coluna da direita tem a ALTURA da coluna dos cards (absoluta dentro dela): as duas caixas dividem essa altura e rolam por dentro */
.ini-dir{ position:relative; min-height:0; }
.ini-dir-in{ position:absolute; inset:0; display:grid; grid-template-rows:1fr 1fr; gap:14px; }
.ini-dir .card + .card{ margin-top:0; }
.ini-box{ display:flex; flex-direction:column; min-height:0; padding:14px 16px; }
.ini-box-cab{ flex:none; margin-bottom:6px; }
.ini-box-cab h3{ margin:1px 0 0; }
.ini-rol{ flex:1; min-height:0; overflow:auto; }
.ini-rol table.tb th{ position:sticky; top:0; background:#fff; z-index:1; }
.ini-rol table.tb td{ padding:7px 10px; }
.cod.mini{ font-size:11px; padding:3px 7px; }
.ev{ display:flex; gap:10px; padding:8px 0; border-bottom:1px solid var(--fundo); font-size:12.5px; align-items:flex-start; }
.ev:last-child{ border-bottom:none; }
.ev time{ flex:none; width:82px; font-size:11px; font-weight:700; color:var(--tinta-fraca); padding-top:3px; }
.ev-corpo{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.ev-corpo b{ color:var(--tinta); } .ev-corpo > span{ color:var(--tinta-suave); line-height:1.5; }
.ev-corpo .cod, .ini-rol .cod{ color:#fff; }   /* v7: a etiqueta não herda o cinza do texto ao lado (ficava sem contraste no fundo azul) */ .ev-corpo i, .ev-i{ font-style:normal; color:var(--tinta-fraca); font-size:12px; }
.ev-aceite b{ color:#1B4FA8; } .ev-coletado b{ color:var(--verde); } .ev-cremado b{ color:#C2410C; } .ev-cinzas b, .ev-lembranca b{ color:var(--roxo); } .ev-recusa b{ color:var(--vermelho); }
@media (max-width:1100px){
  #ap-corpo[data-tela="inicio"]{ height:auto; overflow:visible; display:block; }
  .ini{ grid-template-columns:1fr; }
  .ini-card{ width:auto; height:auto; }
  .ini-esq{ grid-template-columns:repeat(4,1fr); }
  .ini-dir-in{ position:static; grid-template-rows:none; }
  .ini-box{ max-height:380px; }
}
@media (max-width:600px){ .ini-esq{ grid-template-columns:1fr 1fr; } .ini-card b{ font-size:30px; } }
.per-limpar{ margin-left:4px; }
.per-limpar:disabled{ opacity:.45; cursor:default; }
.per-limpar:disabled:hover{ border-color:var(--linha); color:var(--tinta-suave); background:#fff; }

/* ---- v8: aviso de nova versão do portal (a mesma regra do ERP — aviso-versao.js) ---- */
.faixa-versao{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:9px 16px; background:var(--ambar-palido); color:var(--tinta); border-bottom:1px solid #EAD5A8; font-size:13px; }
.faixa-versao em{ font-style:normal; color:var(--tinta-suave); }

/* ---- v9: MEUS PETS como planilha — uma barra só (busca ✕ · selects · período · contador · lista|cards · ação), lista densa ou cards ---- */
.pt-barra{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.pt-busca{ position:relative; display:inline-flex; flex:1 1 200px; max-width:300px; }
.pt-busca input{ width:100%; box-sizing:border-box; min-height:32px; padding:6px 30px 6px 11px; border:1px solid var(--linha); border-radius:9px; font-size:12.5px; color:var(--tinta); }
.pt-busca input:focus{ outline:none; border-color:var(--azul-marca); box-shadow:0 0 0 3px var(--azul-palido); }
.pt-busca input::-webkit-search-cancel-button{ display:none; }
.pt-busca-x{ position:absolute; right:4px; top:50%; transform:translateY(-50%); width:24px; height:24px; border:none; background:none; color:var(--tinta-fraca); font-size:13px; font-weight:700; border-radius:6px; display:flex; align-items:center; justify-content:center; }
.pt-busca-x:hover{ background:var(--azul-palido); color:var(--azul-marca); }
.pt-sel{ box-sizing:border-box; min-height:32px; padding:5px 10px; border:1px solid var(--linha); border-radius:9px; background:#fff; color:var(--tinta-suave); font-size:12.5px; font-weight:700; cursor:pointer; max-width:200px; }
.pt-sel:hover{ border-color:var(--azul-medio); color:var(--azul-marca); }
.pt-sel:focus{ outline:none; border-color:var(--azul-marca); box-shadow:0 0 0 3px var(--azul-palido); }
.pt-conta{ font-size:12.5px; color:var(--tinta-fraca); font-weight:700; margin-left:auto; white-space:nowrap; }
.pt-tabela{ padding:0; overflow:hidden; }
.pt-rol{ max-height:calc(100vh - var(--topo-altura) - 185px); }
table.planilha{ font-size:12.5px; }
table.planilha th{ position:sticky; top:0; background:#fff; z-index:1; padding:8px 9px; border-bottom:1px solid var(--linha); }
table.planilha td{ padding:6px 9px; line-height:1.35; white-space:nowrap; border-bottom:1px solid var(--fundo); }
table.planilha td.num{ text-align:right; }
table.planilha tbody tr{ cursor:pointer; }
table.planilha tbody tr:hover td{ background:var(--azul-palido); }
table.planilha td.acoes .ico-btn{ width:26px; height:26px; margin-left:2px; }
table.ficha th{ text-align:left; font-size:10.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--tinta-fraca); padding:7px 10px 7px 0; width:150px; vertical-align:top; border-bottom:1px solid var(--fundo); }
table.ficha td{ padding:7px 0; font-size:13px; border-bottom:1px solid var(--fundo); }
.jan h3 .status{ margin-left:6px; vertical-align:middle; }
@media (max-width:1400px){ .pt-sel, .pt-busca input{ min-height:30px; font-size:12px; } }
@media (max-width:900px){ .pt-busca{ max-width:none; flex-basis:100%; } .pt-conta{ margin-left:0; } .pt-rol{ max-height:none; } }
/* v9: a planilha cabe inteira a 1300 px — Tutor(es) e Lembranças quebram linha, o resto fica numa linha; espaçamento mais justo */
table.planilha td{ padding:5px 7px; }
table.planilha th{ padding:7px 7px; }
table.planilha td:nth-child(3), table.planilha td:nth-child(8){ white-space:normal; min-width:110px; max-width:220px; line-height:1.3; }
table.planilha td .status{ font-size:10px; padding:4px 9px; }
table.planilha td .tag{ font-size:10px; }
table.planilha td .cod{ font-size:10.5px; padding:3px 6px; }
table.planilha td:nth-child(3){ min-width:150px; max-width:260px; }
table.planilha td:nth-child(8){ min-width:100px; max-width:200px; }
.pt-tabela{ border-radius:var(--raio-p); }
.pt-rol{ overflow-x:hidden; }
table.planilha td:nth-child(3){ min-width:140px; }
table.planilha td:nth-child(8){ min-width:90px; }
table.planilha td.acoes{ padding-left:2px; padding-right:4px; }
table.planilha td.acoes .ico-btn{ margin-left:1px; }

/* ---- v13: PRODUTOS (vitrine do ERP) e lembranças no cadastro do pet ---- */
.prod-grade{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:14px; }
.prod-grade.compacta{ grid-template-columns:repeat(auto-fill, minmax(170px, 1fr)); gap:10px; max-height:60vh; overflow:auto; padding:2px; }
.prod-card{ background:#fff; border:1px solid var(--linha); border-radius:var(--raio); box-shadow:var(--sombra-p); overflow:hidden; text-align:left; padding:0; display:flex; flex-direction:column; cursor:pointer; transition:border-color .12s, transform .06s; font-family:inherit; color:var(--tinta); }
.prod-card:hover{ border-color:var(--azul-marca); transform:translateY(-2px); }
.prod-foto{ display:block; height:150px; background:var(--azul-palido); overflow:hidden; position:relative; }
.prod-grade.compacta .prod-foto{ height:110px; }
.prod-foto img{ width:100%; height:100%; object-fit:cover; display:block; }
.prod-foto.sem img{ display:none; }
.prod-foto.sem::after{ content:"sem foto"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; color:var(--tinta-fraca); }
.prod-corpo{ display:flex; flex-direction:column; gap:4px; padding:10px 12px 12px; flex:1; }
.prod-nome{ font-size:13px; line-height:1.25; }
.prod-desc{ font-size:11.5px; color:var(--tinta-suave); line-height:1.4; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.prod-valor{ margin-top:auto; padding-top:4px; font-size:14px; font-weight:800; color:var(--azul-marca); }
.prod-valor.grande{ font-size:20px; margin:8px 0; }
.prod-detalhe{ display:grid; grid-template-columns:240px 1fr; gap:18px; align-items:start; }
.prod-detalhe .prod-foto.grande{ height:240px; border-radius:12px; }
.prod-desc-full{ font-size:13px; line-height:1.55; color:var(--tinta); margin-top:6px; }
.jan.jan-larga{ max-width:760px; }
.lemb-lista{ display:flex; flex-direction:column; gap:6px; margin-bottom:8px; }
.lemb-item{ display:flex; align-items:center; gap:10px; border:1px solid var(--linha); border-radius:10px; padding:6px 8px 6px 6px; background:#fff; }
.lemb-item img{ width:40px; height:40px; border-radius:7px; object-fit:cover; background:var(--azul-palido); flex:none; }
.lemb-nome{ flex:1; font-size:13px; font-weight:700; color:var(--tinta); }
.lemb-item b{ font-size:13px; color:var(--azul-marca); white-space:nowrap; }
.lemb-x{ width:28px; height:28px; border:1px solid #EFC9C0; border-radius:8px; background:#fff; color:var(--vermelho); font-weight:800; font-size:13px; display:inline-flex; align-items:center; justify-content:center; flex:none; }
.lemb-x:hover{ background:var(--vermelho-palido); border-color:var(--vermelho); }
.total-crem{ display:flex; flex-direction:column; gap:3px; background:var(--azul-palido); border-radius:10px; padding:10px 14px; margin:4px 0 2px; font-size:13px; color:var(--tinta-suave); }
.total-crem b{ color:var(--tinta); }
.total-crem-total{ font-size:14px; color:var(--tinta); border-top:1px solid #CBE4F5; padding-top:5px; margin-top:3px; }
.total-crem-total b{ color:var(--azul-marca); font-size:16px; }
@media (max-width:900px){ .prod-detalhe{ grid-template-columns:1fr; } .prod-grade{ grid-template-columns:1fr 1fr; } .prod-grade.compacta{ grid-template-columns:1fr 1fr; } }
/* v13: rodapé fixo da janela do pet — o TOTAL e os botões ficam sempre à vista, mesmo com a janela rolando */
.jan-rodape{ position:sticky; bottom:-20px; background:#fff; margin:10px -22px -20px; padding:8px 22px 16px; border-top:1px solid var(--linha); z-index:2; }
.jan-rodape .jan-acoes{ margin-top:10px; }
.jan-rodape .total-crem{ margin:0; }
/* v14: campo com unidade fixa à direita (peso em kg) — a máscara preenche pela direita, como os valores do ERP */
.campo-un{ position:relative; display:block; }
.campo-un input{ padding-right:44px; font-variant-numeric:tabular-nums; }
.campo-un b{ position:absolute; right:12px; top:50%; transform:translateY(-50%); font-size:12px; font-weight:800; letter-spacing:.3px; color:var(--tinta-suave); pointer-events:none; }
/* v15: pedido de cancelamento (pedido já aceito, aguardando a Brazcão) */
.status.st-cancelamento{ background:#FDE7E7; color:#B42318; }
.pedido-resp.aguarda{ background:#FFF4E5; color:#7A4B00; }
/* v16: faixa no topo com a novidade da Brazcão (abaixo da faixa de versão) e a marca de "recebido" no pedido pendente */
.faixa-avisos{ display:flex; align-items:center; justify-content:center; gap:12px; flex-wrap:wrap; padding:9px 16px; background:#E0F2FE; color:#0C4A6E; border-bottom:1px solid #7DD3FC; font-size:13px; }
.faixa-avisos em{ font-style:normal; color:var(--tinta-suave); }
.faixa-avisos .btn.mini{ background:#0369A1; border-color:#0369A1; color:#fff; }
.pedido-resp.recebido{ background:#ECFDF5; color:#065F46; }
/* v17: Solicitar coleta / Agendar entrega — um card por pet, com data, período, observação e botão dentro do card */
.sc-lista{ display:flex; flex-direction:column; gap:10px; }
.sc-card{ padding:12px 14px 12px 16px; }
.sc-card.st-cadastrado{ border-left:4px solid var(--azul-marca); }
.sc-card.st-solicitado{ border-left:4px solid var(--ambar); }
.sc-card.st-agendado{ border-left:4px solid var(--verde); }
.sc-cab{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.sc-nome{ font-size:14px; color:var(--tinta); }
.sc-meta{ font-size:12px; color:var(--tinta-suave); }
.sc-cab .status{ margin-left:auto; }
.sc-linha{ display:grid; grid-template-columns:170px 160px 1fr auto; gap:10px; align-items:end; margin-top:10px; }
.sc-linha .campo{ margin-bottom:0; }
.sc-linha .btn{ white-space:nowrap; margin-bottom:3px; }
.sc-dica{ margin-top:8px; }
.sc-marca{ margin-top:8px; padding:9px 12px; border-radius:9px; font-size:13px; background:var(--azul-palido); color:var(--tinta); line-height:1.45; }
.sc-marca.pendente{ background:var(--ambar-palido); }
.sc-marca.ok{ background:var(--verde-palido); color:var(--verde); }
.sc-marca a{ color:inherit; font-weight:700; }
.sc-hint{ margin:-6px 0 12px; }
@media (max-width:900px){ .sc-linha{ grid-template-columns:1fr 1fr; } .sc-linha .sc-obs-campo, .sc-linha .btn{ grid-column:1 / -1; } }
/* v18: caixinha por card, barra AGENDAR dos marcados e os dois avisos da tela Solicitar coleta / Agendar entrega */
.sc-avisos{ display:grid; gap:8px; margin:0 0 12px; }
.sc-avisos .nota{ margin:0; }
.sc-sel-barra{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 0 12px; padding:9px 14px; background:var(--azul-palido); border:1px solid #CBE4F5; border-radius:10px; font-size:13px; color:var(--tinta); }
.sc-sel-barra[hidden]{ display:none !important; }
.sc-chk{ width:18px; height:18px; flex:none; accent-color:var(--azul-marca); cursor:pointer; margin:0; }
.sc-card.sel{ outline:2px solid var(--azul-marca); outline-offset:-1px; }
.sc-linha.juntos{ grid-template-columns:1fr 1fr; margin-top:0; }
/* v19: card da tela Solicitar/Agendar — pet à esquerda, agendamento à direita; dica do dia só com aviso */
.sc-card{ display:flex; align-items:center; gap:18px; }
.sc-card .sc-cab{ flex:0 0 44%; min-width:0; display:flex; align-items:flex-start; gap:10px; margin-left:0; }
.sc-id{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.sc-l1{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sc-cab .status{ margin-left:0; }
.sc-chk{ margin-top:4px; }
.sc-card .sc-dir{ flex:1 1 auto; min-width:0; }
.sc-linha{ grid-template-columns:150px 150px auto; gap:8px 10px; align-items:end; margin-top:0; }
.sc-linha .btn{ grid-row:1; grid-column:3; justify-self:start; }
.sc-linha .sc-obs-campo{ grid-row:2; grid-column:1 / -1; }
.sc-marca{ margin-top:0; }
.sc-dica{ margin-top:6px; }
.cal-dica[hidden]{ display:none !important; }
@media (max-width:900px){ .sc-card{ flex-direction:column; align-items:stretch; } .sc-card .sc-cab{ flex-basis:auto; } .sc-linha{ grid-template-columns:1fr 1fr; } .sc-linha .btn{ grid-row:auto; grid-column:1 / -1; } .sc-linha .sc-obs-campo{ grid-row:auto; } }
/* v20: aviso num card no canto direito do cabeçalho; card da lista compacto (2 linhas à esquerda, 1 linha à direita) */
.sc-nota-canto{ flex:0 0 auto; max-width:320px; font-size:12.5px; line-height:1.4; padding:10px 12px; border-radius:10px; background:var(--azul-palido); border-left:4px solid var(--azul-marca); color:var(--tinta); }
.sc-card{ padding:9px 12px 9px 14px; gap:14px; }
.sc-card .sc-cab{ flex:0 0 40%; gap:8px; align-items:center; }
.sc-chk{ margin-top:0; }
.sc-id{ gap:3px; }
.sc-l2{ display:flex; align-items:center; flex-wrap:wrap; gap:4px 8px; }
.sc-l2 .tags{ margin-top:0; }
.sc-card .sc-dir{ flex:1 1 60%; }
.sc-linha{ grid-template-columns:138px 132px 1fr auto; gap:0 8px; align-items:end; }
.sc-linha .campo{ gap:2px; }
.sc-linha .campo > span{ font-size:11px; }
.sc-linha .campo input, .sc-linha .campo select{ padding:7px 9px; font-size:13px; }
.sc-linha .btn{ grid-row:auto; grid-column:auto; margin-bottom:1px; }
.sc-linha .sc-obs-campo{ grid-row:auto; grid-column:auto; }
.sc-dica{ margin-top:6px; }
@media (max-width:1100px){ .pt-cab .sc-nota-canto{ max-width:260px; } }
@media (max-width:900px){ .pt-cab{ flex-wrap:wrap; } .sc-nota-canto{ max-width:none; } .sc-linha{ grid-template-columns:1fr 1fr; } .sc-linha .sc-obs-campo, .sc-linha .btn{ grid-column:1 / -1; } }
.pt-cab > div:first-child{ flex:1 1 320px; min-width:0; }   /* v20: o bloco do título encolhe para o card do aviso caber à direita */
.sc-card .sc-cab{ flex-basis:37%; }   /* v20: um pouco mais de largura para a observação */
/* v21: card em 2 linhas — caixinha · pet (código/nome/tutor/óbito + tipo/produtos) · agendamento (dia/período + observações) · botão */
.sc-card{ display:grid; grid-template-columns:auto minmax(0,1fr) auto auto; grid-template-areas:"chk pet ag btn" "dica dica dica dica"; align-items:center; gap:0 14px; padding:10px 14px 10px 12px; }
.sc-card.sem-chk{ grid-template-columns:minmax(0,1fr) minmax(0,560px); grid-template-areas:"pet marca" "dica dica"; }
.sc-card .sc-chk{ grid-area:chk; margin:0; }
.sc-pet{ grid-area:pet; display:flex; flex-direction:column; gap:5px; min-width:0; }
.sc-pet-l1{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; font-size:13px; color:var(--tinta-suave); }
.sc-pet-l1 .sc-nome{ font-size:14.5px; color:var(--tinta); }
.sc-sep{ color:var(--tinta-fraca); }
.sc-pet-l2{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12.5px; color:var(--tinta-suave); }
.sc-tipo{ font-weight:800; letter-spacing:.3px; text-transform:uppercase; font-size:12px; }
.sc-tipo.t-coletiva{ color:var(--azul-marca); }
.sc-tipo.t-individual, .sc-tipo.t-assistida{ color:var(--vermelho); }
.sc-card .cod.c-coletiva{ background:var(--azul-marca); color:#fff; }
.sc-card .cod.c-individual, .sc-card .cod.c-assistida{ background:var(--vermelho); color:#fff; }
.sc-prods.sem{ font-style:italic; color:var(--tinta-fraca); }
.sc-ag{ grid-area:ag; display:flex; flex-direction:column; gap:5px; width:300px; }
.sc-ag-l1{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.sc-ag .campo{ margin:0; gap:2px; }
.sc-ag .campo > span{ font-size:11px; }
.sc-ag .campo input, .sc-ag .campo select{ padding:6px 9px; font-size:13px; }
.sc-card .sc-enviar{ grid-area:btn; }
.sc-card .sc-dica{ grid-area:dica; margin-top:6px; }
.sc-card .sc-marca{ grid-area:marca; margin:0; }
@media (max-width:900px){ .sc-card{ grid-template-columns:auto minmax(0,1fr); grid-template-areas:"chk pet" "ag ag" "btn btn" "dica dica"; } .sc-card.sem-chk{ grid-template-columns:1fr; grid-template-areas:"pet" "marca" "dica"; } .sc-ag{ width:auto; } .sc-card .sc-enviar{ justify-self:stretch; } }
.sc-card .sc-pet{ align-self:center; justify-content:center; }   /* v21: o bloco do pet não estica com a altura da linha */
.sc-pet > *{ flex:0 0 auto; }
/* v22: chips como antes no card (tipo e produtos); código vermelho de verdade; o agendamento preenche o meio entre o pet e o botão */
.sc-card{ grid-template-columns:auto auto minmax(300px,1fr) auto; }
.sc-card .sc-pet{ max-width:52%; }
.sc-pet-l2{ gap:5px 6px; }
.sc-pet-l2 .tag{ font-size:11px; padding:3px 8px; }
.sc-tipo{ letter-spacing:0; text-transform:none; font-size:11px; }
.sc-tipo.t-coletiva{ color:var(--tinta-suave); }
.tag.t-individual.sc-tipo{ color:#1B4FA8; }
.tag.t-assistida.sc-tipo{ color:#7B1FA2; }
.sc-card .cod.c-individual, .sc-card .cod.c-assistida{ background:#C62828; }
.sc-prods.sem{ font-size:12px; }
.sc-ag{ width:auto; }
.sc-ag-l1{ grid-template-columns:1fr 1fr; }
@media (max-width:900px){ .sc-card .sc-pet{ max-width:none; } }
/* v22b: o bloco do pet usa a largura do próprio texto (até 520 px) e o agendamento fica com o resto — a porcentagem em max-width fazia a coluna encolher para o mínimo */
.sc-card{ grid-template-columns:auto fit-content(520px) minmax(300px,1fr) auto; }
.sc-card.sem-chk{ grid-template-columns:fit-content(520px) minmax(0,1fr); }
.sc-card .sc-pet{ max-width:none; }
.sc-card{ grid-template-columns:auto minmax(max-content,42%) minmax(300px,1fr) auto; }   /* v22c: coluna do pet alinhada entre os cards (42 %), nunca menor que o texto */
.sc-card.sem-chk{ grid-template-columns:minmax(max-content,42%) minmax(0,1fr); }
/* v23: tutores compridos dobram de linha dentro do bloco do pet (coluna com teto de 50 %); código e nome abrem o cadastro */
.sc-card{ grid-template-columns:auto fit-content(50%) minmax(300px,1fr) auto; }
.sc-card.sem-chk{ grid-template-columns:fit-content(55%) minmax(0,1fr); }
.sc-pet-l1 > *{ min-width:0; overflow-wrap:anywhere; }
.sc-pet-l1 .sc-tutor{ flex:0 1 auto; }
.sc-abrir{ cursor:pointer; }
.sc-abrir.cod:hover{ filter:brightness(1.15); }
.sc-nome.sc-abrir:hover{ text-decoration:underline; }
/* v24: bloco do pet em 3 linhas — código/nome/óbito · tutor(es) · tipo e produtos */
.sc-pet{ gap:4px; }
.sc-pet-tut{ font-size:13px; color:var(--tinta-suave); line-height:1.35; overflow-wrap:anywhere; }
/* v24b: card mais baixo — campos do agendamento de 30 px, rótulos menores, bloco do pet apertado */
.sc-card{ padding:8px 14px 8px 12px; }
.sc-ag{ gap:4px; }
.sc-ag .campo{ gap:1px; }
.sc-ag .campo > span{ font-size:10.5px; line-height:1.15; }
.sc-ag .campo input, .sc-ag .campo select{ padding:4px 8px; font-size:13px; line-height:1.3; min-height:30px; height:30px; }
.sc-pet{ gap:3px; }
.sc-pet-l1{ font-size:12.5px; }
.sc-pet-l1 .sc-nome{ font-size:14px; }
.sc-pet-tut{ font-size:12.5px; }
.sc-pet-l2 .tag{ font-size:10.5px; padding:2px 7px; }
/* v25: dois cards iguais abaixo do título da tela Solicitar/Agendar (como pedir · vários pets numa busca) */
.sc-cards2{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:-6px 0 12px; }
.sc-info{ background:var(--azul-palido); border-left:4px solid var(--azul-marca); border-radius:10px; padding:10px 14px; font-size:12.5px; line-height:1.45; color:var(--tinta); }
.sc-info b{ color:var(--azul-profundo); }
@media (max-width:900px){ .sc-cards2{ grid-template-columns:1fr; } }
/* v26: cabeçalho do Início com altura fixa — o texto do período nunca dobra de linha (ESTE MÊS e PERÍODO encolhiam os cards) */
.ini-cab > div:first-child{ flex:1 1 auto; min-width:0; }
.ini-cab h2, .ini-cab p{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* v26: as faixas do topo (--faixas, medida pelo portal.js) saem da altura da grade, do menu lateral e do Início */
#tela-app{ min-height:calc(100vh - var(--faixas, 0px)); }
.ap-nav{ height:calc(100vh - var(--topo-altura) - var(--faixas, 0px)); }
#ap-corpo[data-tela="inicio"]{ height:calc(100vh - var(--topo-altura) - var(--faixas, 0px)); }
/* v27: card de Minhas coletas — COLETA 01 · situação | pedido realizado dia…; pet em uma linha; texto verde; 3 pontos com horário */
.pedido.pd2{ padding:10px 14px 8px; }
.pd-topo{ display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.pd-titulo{ font-size:13px; letter-spacing:.3px; color:var(--azul-profundo); }
.pedido.st-pendente .pd-titulo{ color:var(--ambar); }
.pedido.st-aceito .pd-titulo{ color:#1B4FA8; }
.pedido.st-concluido .pd-titulo{ color:var(--verde); }
.pedido.st-cancelamento .pd-titulo, .pedido.st-recusado .pd-titulo, .pedido.st-cancelado .pd-titulo{ color:#B42318; }
.pd-quando{ font-size:12.5px; color:var(--tinta-suave); }
.pd-pets{ display:flex; flex-direction:column; gap:3px; margin-top:6px; }
.pd-pet{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; font-size:12.5px; color:var(--tinta-suave); }
.pd-pet b{ color:var(--tinta); font-size:13px; }
.pd-pet .sep{ color:var(--tinta-fraca); }
.pd-pet .cod.c-coletiva{ background:var(--azul-marca); color:#fff; }
.pd-pet .cod.c-individual, .pd-pet .cod.c-assistida{ background:#C62828; color:#fff; }
.pd-pet .sem{ font-style:italic; color:var(--tinta-fraca); }
.pd-obs{ font-size:12.5px; color:var(--tinta-suave); margin-top:3px; }
.pedido.pd2 .pedido-resp{ margin-top:6px; padding:7px 10px; font-size:12.5px; }
.pd-rodape{ display:flex; align-items:center; gap:12px; margin-top:4px; }
.pd-rodape .timeline{ flex:1; margin:4px 0 0; }
.timeline.tl3 .tl small{ display:block; font-size:11px; font-weight:600; color:var(--tinta-suave); margin-top:1px; }
.pd-rodape .pedido-acoes{ margin:0; flex:none; }
/* v28: linha do pet em colunas de largura fixa (código · nome · tutores · óbito · cremação · produtos · OBS.) — texto comprido dobra na própria coluna */
.pd-pet.pd-grid{ display:grid; grid-template-columns:auto minmax(90px,.9fr) minmax(140px,1.3fr) auto auto minmax(130px,1.3fr) minmax(140px,1.5fr); gap:3px 10px; align-items:start; }
.pd-grid > *{ min-width:0; overflow-wrap:anywhere; }
.pd-grid .tag{ white-space:normal; }
.pd-grid .pd-prods{ display:flex; flex-wrap:wrap; gap:4px; }
.pd-grid .pd-obs-col b{ color:var(--tinta-suave); font-size:12px; }
@media (max-width:900px){ .pd-pet.pd-grid{ grid-template-columns:1fr 1fr; } }
.pd-pet.pd-grid{ grid-template-columns:auto minmax(90px,.9fr) minmax(150px,1.6fr) auto auto minmax(120px,1.1fr) minmax(140px,1.4fr); }   /* v28b: tutores com mais largura */
/* v29: colunas da linha do pet pelo conteúdo (com teto) — sem vazio depois do nome e dos tutores; produtos e OBS. ficam com o que sobra */
.pd-pet.pd-grid{ grid-template-columns:auto fit-content(220px) fit-content(320px) auto auto minmax(180px,1.3fr) minmax(160px,1fr); gap:3px 14px; }
/* v30 (Filipe): colunas justas, pouco espaço entre elas, sem esticar para preencher; só tutores, produtos e OBS. podem dobrar em 2 linhas (teto de largura) */
.pd-pet.pd-grid{ grid-template-columns:auto auto fit-content(260px) auto auto fit-content(260px) fit-content(320px); gap:3px 10px; }
.pd-grid > :nth-child(1), .pd-grid > :nth-child(2), .pd-grid > :nth-child(4), .pd-grid > :nth-child(5){ white-space:nowrap; }
/* v31: as linhas dos pets de um pedido dividem UMA grade (colunas alinhadas entre as linhas, como planilha) e a sobra fica no fim — as colunas "auto" não esticam mais para preencher (era isso que abria espaço entre os textos) */
.pd-pets{ display:grid; grid-template-columns:auto auto fit-content(260px) auto auto fit-content(260px) fit-content(320px); gap:3px 10px; justify-content:start; align-items:start; }
.pd-pet.pd-grid{ display:contents; }
.pd-pets > .pd-pet > *{ min-width:0; overflow-wrap:anywhere; }
/* v32: histórico de Minhas coletas como planilha (uma linha por pet, 11 colunas + ação) */
.pt-rol.hist-rol{ overflow-x:auto; max-height:calc(100vh - var(--topo-altura) - 230px); }
table.planilha.hist td:nth-child(3), table.planilha.hist td:nth-child(8){ white-space:nowrap; min-width:0; max-width:none; }
table.planilha.hist td:nth-child(7), table.planilha.hist td:nth-child(9), table.planilha.hist td:nth-child(10), table.planilha.hist td:nth-child(11){ white-space:normal; min-width:120px; max-width:220px; line-height:1.3; }
table.planilha.hist td:nth-child(9) .tag{ display:inline-block; margin:1px 2px 1px 0; }
table.planilha.hist td .cancelada, table.planilha.hist td .recusada{ color:#B42318; font-weight:700; }
table.planilha.hist td .cod.c-coletiva{ background:var(--azul-marca); }
table.planilha.hist td .cod.c-individual, table.planilha.hist td .cod.c-assistida{ background:#C62828; }
table.planilha.hist td .sem{ color:var(--tinta-fraca); }
table.planilha.hist td:nth-child(7), table.planilha.hist td:nth-child(9), table.planilha.hist td:nth-child(10), table.planilha.hist td:nth-child(11){ min-width:100px; max-width:200px; }   /* v32b: cabe em 1300 px sem rolagem */
table.planilha.hist td, table.planilha.hist th{ padding-left:7px; padding-right:7px; }

/* v33 (Filipe, 22/10): MINHA CONTA — "deixar os dois cards do mesmo tamanho, tanto horizontal quanto vertical". Duas colunas
   iguais e os dois cards esticam até a altura do maior (o .card + .card da base punha 14 px de margem no segundo — zerada aqui,
   senão ele ficaria 14 px mais baixo). A linha "Portal dos Parceiros vN" desce para o pé do card do cadastro, no espaço que
   sobra. Em tela estreita (≤ 900 px) continua uma coluna só, cada card com a própria altura. */
.grid2.iguais{ grid-template-columns:1fr 1fr; align-items:stretch; }
.grid2.iguais > .card{ margin-top:0; }
.grid2.iguais .card.pe-versao{ position:relative; padding-bottom:50px; }
.grid2.iguais .card.pe-versao .versao{ position:absolute; left:20px; bottom:16px; margin:0; }
@media (max-width:900px){ .grid2.iguais{ grid-template-columns:1fr; } .grid2.iguais .card.pe-versao .versao{ left:14px; } }

/* v34 (Filipe, 23/10): INFORMAÇÕES — 4 cards na ordem dele (passo a passo e como funciona à esquerda; contato e horários à
   direita), colunas iguais divididas no meio; cada coluna empilha os seus cards, então cada card tem a própria altura.
   .ctt = linha "rótulo | valor" do contato (rótulo fixo à esquerda, valor dobra); .hor = linha dos horários (valor à direita). */
.grid2.metade{ grid-template-columns:1fr 1fr; }
.ctt{ display:flex; gap:12px; padding:7px 0; border-bottom:1px solid var(--linha); font-size:13.5px; line-height:1.45; }
.ctt span{ color:var(--tinta-suave); flex:0 0 96px; }
.ctt b{ color:var(--tinta); min-width:0; overflow-wrap:anywhere; }
.hor b{ text-align:right; margin-left:14px; }
@media (max-width:900px){ .grid2.metade{ grid-template-columns:1fr; } }

/* v35 (Filipe, 23/10): INFORMAÇÕES — esquerda com 3 cards (passo a passo, como funciona, contato); direita só o card dos horários,
   filho direto da grade, esticado até a altura dos 3 (align-items:stretch). Sem rolagem vertical na tela dele (1529 × 698 px):
   cards mais compactos só nesta tela — padding 14/18, passos 12,5 px com entrelinha 1,5, contato 13 px com 5 px de respiro,
   10 px entre os cards. Em tela estreita (≤ 900 px) volta a empilhar tudo numa coluna, sem esticar. */
.grid2.metade.infos3{ align-items:stretch; }
.infos3 > .card{ margin-top:0; }
.infos3 .card{ padding:14px 18px; }
.infos3 .card + .card{ margin-top:10px; }
.infos3 .card h3{ font-size:15px; margin:2px 0 3px; }
.infos3 .passos{ font-size:12.5px; line-height:1.5; margin-top:3px; }
.infos3 .ctt{ padding:5px 0; font-size:13px; line-height:1.35; }
.infos3 .ctt span{ flex-basis:76px; }
.infos3 .ctt:last-child{ border-bottom:none; }
.infos3 .hor{ padding:7px 0; }
.infos3 .nota{ margin:10px 0 0; }
@media (max-width:900px){ .grid2.metade.infos3{ align-items:start; } .infos3 > .card{ margin-top:14px; } }
/* v35: só na tela INFORMAÇÕES o respiro de baixo do corpo é 20 px (era 40) — com 40 a página rolava 10 px na tela dele (1529 × 698) */
#ap-corpo[data-tela="infos"]{ padding-bottom:20px; }

/* v36 (Filipe, 23/10): horários com TÍTULOS DE SEÇÃO (.hor-tit: negrito azul, espaço acima) e linhas simples (.hor-txt);
   na tela INFORMAÇÕES as linhas ficam mais apertadas (5 px) para a lista longa dele caber ao lado dos 3 cards sem rolar. */
.hor-tit{ font-weight:800; font-size:12px; letter-spacing:.3px; color:var(--azul-marca); margin:12px 0 2px; }
.hor-tit:first-child{ margin-top:2px; }
.hor-txt{ padding:6px 0; border-bottom:1px solid var(--linha); font-size:13px; color:var(--tinta-suave); line-height:1.4; }
.infos3 .hor{ padding:5px 0; font-size:13px; }
.infos3 .hor-txt{ padding:5px 0; }
.infos3 .hor-tit{ margin:10px 0 1px; }
.infos3 .nota{ padding:8px 11px; font-size:12px; }