/* ============================================================
   VetExames — folha de estilo da aplicação
   Portada fielmente do mock navegável (docs/mock.html).
   ============================================================ */
:root{
  --bg:#f4f6f9; --card:#ffffff; --border:#e3e8ef; --text:#1a2433; --muted:#64748b;
  --primary:#2563eb; --primary-soft:#eff4ff; --danger:#dc2626;
  /* Cores das 8 categorias (contrato P4). LAB e RAIOX são dois verdes distintos. */
  --lab:#16a34a; --lab-bg:#dcfce7; --ultrassom:#2563eb; --ultrassom-bg:#eff6ff;
  --cardio:#991b1b; --cardio-bg:#fee2e2; --raiox:#166534; --raiox-bg:#d1fae5;
  --video:#ea580c; --video-bg:#ffedd5; --hemogaso:#7c3aed; --hemogaso-bg:#f3e8ff;
  --pressao:#ef4444; --pressao-bg:#fef2f2; --vacina:#db2777; --vacina-bg:#fce7f3;
  --plat:#b45309; --plat-bg:#fef3e2;
  --radius:10px; font-size:15px;
}
*{box-sizing:border-box; margin:0; padding:0;}
body{font-family:"Segoe UI",system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text);}
.app{display:flex; min-height:100vh;}

/* ===== Ícones SVG inline ({% icon %} / {% logo_pata %}) ===== */
.ic{flex-shrink:0; vertical-align:-.15em;}
.logo-mark{color:#60a5fa; margin-right:6px; vertical-align:-.18em;}   /* pata na sidebar/topbar (fundo escuro) */
.logo-mark-azul{color:var(--primary);}                                 /* pata em fundo claro (login/offline) */
.cat-dot{display:inline-block; width:8px; height:8px; border-radius:50%; margin-right:6px; background:currentColor;}

/* ===== Login (página isolada) ===== */
body.login-page{background:linear-gradient(135deg,#101828,#1e3a8a); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;}
.login-card{background:#fff; border-radius:16px; padding:34px; width:100%; max-width:380px; box-shadow:0 20px 50px rgba(0,0,0,.3);}
.login-card h2{font-size:1.3rem; margin-bottom:4px;}
.login-card .logo{font-size:1.4rem; font-weight:700; margin-bottom:18px;}
.login-card .logo span{color:var(--primary);}
.login-card label{margin-top:12px;}
.login-card .btn{width:100%; justify-content:center; margin-top:18px;}
.login-hint{font-size:.75rem; color:var(--muted); margin-top:14px; text-align:center; line-height:1.5;}
.login-hint a{color:var(--primary); text-decoration:none;}
.login-hint a:hover{text-decoration:underline;}
.form-errors{background:#fee8e8; color:var(--danger); border:1px solid #fbc9c9; border-radius:8px; padding:10px 12px; font-size:.85rem; margin-top:12px;}
.form-errors ul{list-style:none;}

/* ===== Sidebar ===== */
aside{width:230px; background:#101828; color:#cbd5e1; padding:16px 12px; flex-shrink:0; display:flex; flex-direction:column; gap:3px; position:sticky; top:0; height:100vh;}
aside .logo{font-size:1.1rem; font-weight:700; color:#fff; padding:6px 12px 10px; letter-spacing:.3px;}
aside .logo span{color:#60a5fa;}
aside .logo a{color:inherit; text-decoration:none;}
.tenant-box{background:#1c2942; border-radius:8px; padding:9px 12px; margin:0 2px 12px; font-size:.85rem;}
.tenant-box .t-lbl{font-size:.65rem; text-transform:uppercase; letter-spacing:.5px; color:#7c8aa5;}
.tenant-box .t-name{font-weight:700; color:#fff;}
aside a.nav{color:inherit; text-decoration:none; cursor:pointer; padding:10px 12px; border-radius:8px; display:flex; gap:10px; align-items:center; font-size:.94rem;}
aside a.nav:hover{background:#1c2942;}
aside a.nav.active{background:var(--primary); color:#fff; font-weight:600;}
aside a.nav.plat.active{background:var(--plat);}
.nav-sep{border-top:1px solid #263248; margin:8px 6px; padding-top:8px; font-size:.65rem; text-transform:uppercase; letter-spacing:.6px; color:#7c8aa5;}
.user-box{margin-top:auto; border-top:1px solid #263248; padding:12px 8px 4px; font-size:.82rem;}
.user-box .u-name{color:#fff; font-weight:600;}
.role-pill{display:inline-block; font-size:.68rem; font-weight:700; padding:2px 8px; border-radius:20px; background:#2b3b57; color:#cbd5e1; margin-top:3px;}
.user-box .signout{background:none; border:none; cursor:pointer; color:#93a4c0; font-size:.78rem; margin-top:10px; display:inline-flex; align-items:center; gap:6px; padding:0;}
.user-box .signout:hover{color:#fff;}

/* ===== Hamburger (desktop): recolhe/expande a sidebar ===== */
.hamburguer{
  display:inline-flex; align-items:center; justify-content:center;
  width:38px; height:38px; margin-bottom:14px;
  border:1px solid var(--border); border-radius:8px;
  background:var(--card); color:var(--muted);
  font-size:1.15rem; line-height:1; cursor:pointer;
  transition:border-color .15s, color .15s;
}
.hamburguer:hover{border-color:var(--primary); color:var(--primary);}
/* Transição suave só depois do 1º frame (evita animar no carregamento). */
.app.nav-anim aside{transition:width .22s ease, padding .22s ease;}
.app.nav-collapsed aside{width:0; min-width:0; padding-left:0; padding-right:0; overflow:hidden;}

main{flex:1; padding:26px 32px; max-width:1200px;}

.page-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; gap:16px; flex-wrap:wrap;}
h1{font-size:1.35rem;}
.subtitle{color:var(--muted); font-size:.9rem; margin-top:3px;}
.card{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:20px; margin-bottom:18px;}

/* ===== Mensagens (framework de messages) ===== */
.messages{list-style:none; margin-bottom:16px;}
.messages li{border-radius:8px; padding:11px 14px; font-size:.88rem; margin-bottom:8px; border:1px solid var(--border); background:var(--card);}
.messages li.success{background:#e5f6e9; color:#15803d; border-color:#bfe8ca;}
.messages li.info{background:var(--primary-soft); color:var(--primary); border-color:#c8d9fd;}
.messages li.warning{background:var(--plat-bg); color:var(--plat); border-color:#f5ddb0;}
.messages li.error{background:var(--lab-bg); color:var(--danger); border-color:#fbc9c9;}

/* ===== Banner de impersonação (modo suporte) ===== */
.support-banner{background:var(--plat); color:#fff; border-radius:8px; padding:10px 14px; font-size:.85rem; margin-bottom:16px; display:flex; justify-content:space-between; align-items:center; gap:12px; flex-wrap:wrap;}
.support-banner a{color:#fff; font-weight:700; text-decoration:underline;}

/* ===== Botões / inputs ===== */
.btn{border:none; cursor:pointer; border-radius:8px; padding:9px 16px; font-size:.9rem; font-weight:600; display:inline-flex; align-items:center; gap:7px; text-decoration:none; color:inherit;}
.btn-primary{background:var(--primary); color:#fff;} .btn-primary:hover{background:#1d4fd7;}
.btn-primary:disabled{background:#9db8ef; cursor:not-allowed;}
.btn-plat{background:var(--plat); color:#fff;} .btn-plat:hover{background:#92400e;}
.btn-outline{background:#fff; border:1px solid var(--border); color:var(--text);} .btn-outline:hover{border-color:var(--primary); color:var(--primary);}
.btn-ghost-danger{background:none; color:var(--danger); border:none; font-size:1rem; cursor:pointer; padding:4px 8px;}
.btn-sm{padding:6px 11px; font-size:.8rem;}
label{display:block; font-size:.78rem; font-weight:600; color:var(--muted); margin-bottom:5px; text-transform:uppercase; letter-spacing:.4px;}
input,select,textarea{width:100%; padding:9px 11px; border:1px solid var(--border); border-radius:8px; font-size:.92rem; background:#fff; color:var(--text); font-family:inherit;}
input:focus,select:focus,textarea:focus{outline:2px solid #bfd3fe; border-color:var(--primary);}
input[type=checkbox]{width:17px; height:17px; accent-color:var(--primary); cursor:pointer;}
/* Campo de senha com botão "olho" (mostrar/ocultar) — injetado via app.js. */
.pw-wrap{display:block; position:relative;}
.pw-wrap input{padding-right:42px;}
.pw-toggle{position:absolute; top:0; right:0; height:100%; width:40px; display:flex; align-items:center; justify-content:center; background:none; border:none; padding:0; margin:0; cursor:pointer; color:var(--muted); border-radius:0 8px 8px 0;}
.pw-toggle:hover{color:var(--text);}
.pw-toggle:focus-visible{outline:2px solid var(--primary); outline-offset:-2px;}
.grid{display:grid; gap:14px;} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-2{grid-template-columns:1fr 1fr;}
@media(max-width:900px){.grid-4,.grid-3,.grid-2{grid-template-columns:1fr 1fr;}}
.field-error{color:var(--danger); font-size:.78rem; margin-top:4px;}

/* ===== Badges ===== */
.badge{font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap;}
.b-lab{background:var(--lab-bg); color:var(--lab);} .b-ultrassom{background:var(--ultrassom-bg); color:var(--ultrassom);} .b-cardio{background:var(--cardio-bg); color:var(--cardio);}
.b-raiox{background:var(--raiox-bg); color:var(--raiox);} .b-video{background:var(--video-bg); color:var(--video);} .b-hemogaso{background:var(--hemogaso-bg); color:var(--hemogaso);}
.b-pressao{background:var(--pressao-bg); color:var(--pressao);} .b-vacina{background:var(--vacina-bg); color:var(--vacina);}
.st{font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap;}
.chip{display:inline-block; background:var(--primary-soft); color:var(--primary); border-radius:20px; padding:2px 10px; font-size:.75rem; font-weight:600; margin:2px 4px 2px 0;}
.chip-green{background:#e5f6e9; color:#15803d;} .chip-red{background:#fee8e8; color:#dc2626;} .chip-amber{background:#fef3e2; color:#b45309;}

/* ===== Cirurgias: pills de etapa, progresso de exames e stepper ===== */
.cir-st{font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:20px; white-space:nowrap; display:inline-block;}
.cir-st-REGISTRADO{background:#eef1f5; color:#475569;}
.cir-st-AGUARDANDO_EXAMES{background:#fef3e2; color:#b45309;}
.cir-st-AGUARDANDO_ANALISE{background:#f2ebfc; color:#6d28d9;}
.cir-st-AGENDAMENTO{background:#e5edff; color:#3f51c9;}
.cir-st-AGUARDANDO_CIRURGIA{background:#e0f5f9; color:#0e7490;}
.cir-st-FEITO{background:#e5f6e9; color:#15803d;}
.cir-prog{display:inline-flex; align-items:center; gap:7px; white-space:nowrap;}
.cir-bar{width:70px; height:6px; border-radius:99px; background:#e9edf3; overflow:hidden; display:inline-block;}
.cir-bar i{display:block; height:100%; background:#16a34a;}
.cir-prog small{font-size:.74rem; color:var(--muted);}
.cir-stepper{display:flex; padding:16px 10px; overflow-x:auto;}
.cir-step{flex:1; min-width:110px; text-align:center; position:relative;}
.cir-step:not(:last-child)::after{content:""; position:absolute; top:13px; left:calc(50% + 18px); right:calc(-50% + 18px); height:2px; background:var(--border);}
.cir-step.done:not(:last-child)::after{background:#16a34a;}
.cir-step .dot{width:26px; height:26px; border-radius:50%; display:inline-grid; place-items:center; font-size:.78rem; font-weight:800; color:#fff; background:#cbd5e1; position:relative; z-index:1;}
.cir-step.done .dot{background:#16a34a;}
.cir-step.now .dot{background:#b45309; box-shadow:0 0 0 4px #fdecd3;}
.cir-step h5{font-size:.72rem; margin-top:7px; font-weight:700; color:var(--muted);}
.cir-step.now h5{color:#b45309;} .cir-step.done h5{color:var(--text);}
/* Checkbox-chips do form (cirurgias do caso) */
label.cir-check{display:inline-flex; align-items:center; gap:7px; margin:2px 12px 2px 0;
  text-transform:none; letter-spacing:normal; font-size:.9rem; cursor:pointer; color:var(--text);}
label.cir-check input{width:16px;}
/* Itens escolhidos via dropdown no Novo Cadastro (cirurgias / exames extras) */
.cir-item{display:inline-flex; align-items:center; gap:10px; border:1px solid var(--border);
  background:var(--card); border-radius:10px; padding:7px 10px;}
.cir-item .cir-remover{border:none; background:none; color:var(--muted); font-size:1.05rem;
  cursor:pointer; line-height:1; padding:2px 4px;}
.cir-item .cir-remover:hover{color:var(--danger);}

/* Mini-pipeline do fluxo do exame (Controle de Exames / detalhe do caso) */
.ex-pipe{display:inline-flex; align-items:center; flex-wrap:wrap; gap:2px; row-gap:6px;}
.ex-step{display:inline-flex; align-items:center; gap:5px; border:1px solid var(--border); background:var(--card);
  border-radius:999px; padding:3px 10px 3px 4px; font-size:.74rem; font-weight:600; color:var(--muted);
  cursor:pointer; font-family:inherit; line-height:1.2; white-space:nowrap;}
.ex-step .ex-dot{width:18px; height:18px; border-radius:50%; background:#e2e8f0; color:#475569;
  display:grid; place-items:center; font-size:.66rem; font-weight:800; flex:none;}
.ex-step:hover{border-color:var(--primary); color:var(--primary);}
.ex-step.done{border-color:#bfe6cd; color:#15803d; background:#f2fbf5;}
.ex-step.done .ex-dot{background:#16a34a; color:#fff;}
.ex-step.now{border-color:var(--primary); color:var(--primary); background:var(--primary-soft); box-shadow:0 0 0 2px #cfe0ff;}
.ex-step.now .ex-dot{background:var(--primary); color:#fff;}
.ex-lig{width:12px; height:2px; background:var(--border); flex:none; display:inline-block;}
.ex-lig.done{background:#16a34a;}
@media (max-width:768px){ .ex-step .ex-nome{max-width:96px; overflow:hidden; text-overflow:ellipsis;} }

/* Editor do fluxo do exame (modal de cadastro) */
.etapas-editor{display:flex; flex-direction:column; gap:7px; margin-top:6px;}
.etapa-row{display:flex; align-items:center; gap:8px;}
.etapa-row .etapa-num{flex:none; width:22px; height:22px; border-radius:50%; background:var(--primary-soft); color:var(--primary); font-size:.74rem; font-weight:700; display:grid; place-items:center;}
.etapa-row input[name="etapas"]{flex:1;}
.etapa-row .etapa-del{flex:none; width:28px; height:28px; border:1px solid var(--border); background:var(--card); color:var(--muted); border-radius:8px; font-size:1rem; cursor:pointer; line-height:1;}
.etapa-row .etapa-del:hover{color:var(--danger); border-color:var(--danger);}
.etapas-editor .etapa-add{align-self:flex-start; margin-top:2px;}
/* Prévia deduplicada */
.cir-previa{background:#f8fafc; border:1px dashed #cfd8e6; border-radius:10px; padding:14px 15px;}
.cir-previa .exrow{display:flex; align-items:baseline; gap:10px; padding:7px 0; border-bottom:1px solid #eef1f6; flex-wrap:wrap;}
.cir-previa .exrow:last-child{border-bottom:none;}
.cir-previa .exname{font-weight:600; min-width:140px;}
.cir-previa .from{font-size:.76rem; color:var(--muted);}

/* ===== Tabelas ===== */
table{width:100%; border-collapse:collapse; font-size:.88rem;}
th{text-align:left; font-size:.72rem; text-transform:uppercase; letter-spacing:.5px; color:var(--muted); padding:10px 12px; border-bottom:2px solid var(--border);}
td{padding:11px 12px; border-bottom:1px solid var(--border); vertical-align:top;}
tr:hover td{background:#f8fafc;}
.row-actions{white-space:nowrap;}
.row-actions button,.row-actions a{background:none; border:none; color:inherit; text-decoration:none; cursor:pointer; padding:3px 6px; border-radius:6px; font-size:.95rem; display:inline-block;}
.row-actions button:hover,.row-actions a:hover{background:var(--primary-soft);}
.row-actions button.locked,.row-actions a.locked{opacity:.35; cursor:not-allowed;}

/* ===== Seletor de categoria ===== */
.cat-select{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.cat-card{border:2px solid var(--border); border-radius:var(--radius); padding:16px 14px; cursor:pointer; text-align:center; background:#fff; transition:.15s; position:relative; overflow:hidden;}
.cat-card .nm{font-weight:700; font-size:.95rem;}
/* Acento de cor da categoria: barra superior de 3px (sem emoji/ícone) */
.cat-card::before{content:""; position:absolute; top:0; left:0; right:0; height:3px; background:transparent;}
.cat-card.acc-lab::before{background:var(--lab);}
.cat-card.acc-ultrassom::before{background:var(--ultrassom);}
.cat-card.acc-cardio::before{background:var(--cardio);}
.cat-card.acc-raiox::before{background:var(--raiox);}
.cat-card.acc-video::before{background:var(--video);}
.cat-card.acc-hemogaso::before{background:var(--hemogaso);}
.cat-card.acc-pressao::before{background:var(--pressao);}
.cat-card.acc-vacina::before{background:var(--vacina);}
.cat-card.sel-lab{border-color:var(--lab); background:var(--lab-bg);}
.cat-card.sel-ultrassom{border-color:var(--ultrassom); background:var(--ultrassom-bg);}
.cat-card.sel-cardio{border-color:var(--cardio); background:var(--cardio-bg);}
.cat-card.sel-raiox{border-color:var(--raiox); background:var(--raiox-bg);}
.cat-card.sel-video{border-color:var(--video); background:var(--video-bg);}
.cat-card.sel-hemogaso{border-color:var(--hemogaso); background:var(--hemogaso-bg);}
.cat-card.sel-pressao{border-color:var(--pressao); background:var(--pressao-bg);}
.cat-card.sel-vacina{border-color:var(--vacina); background:var(--vacina-bg);}

.lab-block{border:1px solid var(--border); border-radius:var(--radius); margin-bottom:14px; background:#fbfcfe; overflow:hidden;}
.lab-block-head{display:flex; gap:12px; align-items:end; padding:14px; background:#f2f5fa; border-bottom:1px solid var(--border);}
.lab-block-head .fld{flex:1;}
.lab-block-body{padding:14px;}
.rec-row{display:grid; grid-template-columns:2fr .8fr 44px; gap:10px; align-items:end; margin-bottom:8px; max-width:520px;}
.rec-head{display:flex; justify-content:space-between; align-items:center; margin:14px 0 8px;} .rec-head strong{font-size:.85rem;}

.tipo-img{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.tipo-card{border:2px solid var(--border); border-radius:var(--radius); padding:16px; text-align:center; cursor:pointer; background:#fff; position:relative;}
.tipo-card.sel{border-color:var(--primary); background:var(--primary-soft); font-weight:700; color:var(--primary);}
/* Check de seleção: o TEMPLATE renderiza {% icon "check" 14 "tipo-check" %} dentro do card;
   fica oculto e só aparece quando o card tem .sel (sem ::after com texto). */
.tipo-card .tipo-check{position:absolute; top:6px; right:8px; display:none;}
.tipo-card.sel .tipo-check{display:inline-block;}

.kpis{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:18px;}
@media(max-width:900px){.kpis{grid-template-columns:1fr 1fr;}}
.kpi{background:var(--card); border:1px solid var(--border); border-radius:var(--radius); padding:14px 16px;}
.kpi .v{font-size:1.5rem; font-weight:800;} .kpi .l{font-size:.75rem; color:var(--muted); text-transform:uppercase; letter-spacing:.5px; margin-top:2px;}
.empty{text-align:center; color:var(--muted); padding:34px 0; font-size:.9rem;} .sub-lab{font-size:.8rem; color:var(--muted);}
.coleta-bar{display:flex; justify-content:space-between; align-items:end; gap:14px; flex-wrap:wrap;}
tr.sel-row td{background:var(--primary-soft);}

/* ===== Modal ===== */
.modal-bg{position:fixed; inset:0; background:rgba(10,20,40,.45); display:none; align-items:center; justify-content:center; z-index:60; padding:20px;}
.modal-bg.open{display:flex;}
.modal{background:#fff; border-radius:14px; max-width:640px; width:100%; padding:26px; max-height:88vh; overflow:auto;}
.modal.wide{max-width:760px;}
.dl{display:grid; grid-template-columns:170px 1fr; row-gap:9px; font-size:.9rem; margin-top:14px;} .dl dt{color:var(--muted); font-weight:600;}
.toolbar{display:flex; gap:10px; flex-wrap:wrap;} .hint{font-size:.78rem; color:var(--muted); margin-top:8px;}
.cad-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start;} @media(max-width:900px){.cad-grid{grid-template-columns:1fr;}}

/* ===== Comprovante (impressão) ===== */
.receipt{font-family:"Segoe UI",sans-serif; color:#111; font-size:13px;}
.receipt h3{font-size:1.05rem; margin-bottom:2px;} .receipt .r-clinic{font-size:.8rem; color:#555; margin-bottom:12px;}
.receipt table{font-size:12px; margin:10px 0;} .receipt th,.receipt td{border:1px solid #cbd5e1; padding:6px 8px;}
.receipt .r-meta{display:flex; gap:26px; font-size:.85rem; margin-bottom:6px; flex-wrap:wrap;}
.sign-row{display:flex; gap:40px; margin-top:40px;}
.sign-row .sign{flex:1; text-align:center;}
.sign-row .line{border-top:1px solid #333; padding-top:5px; font-size:.78rem; color:#333;}
#comprovante{display:none;}
@media print{
  aside, main .no-print, .modal-bg,
  .topbar-mobile, .bottomnav, .more-sheet-bg{display:none !important;}
  main{padding:0 !important;}
  #comprovante{display:block !important; padding:8px;}
  @page{margin:16mm;}
}

/* ============================================================
   MODO APP (mobile) — top bar + bottom nav + bottom-sheet.
   Elementos ficam sempre no DOM; escondidos no desktop, exibidos ≤768px.
   ============================================================ */

/* Toques nativos / anti-zoom globais */
body{-webkit-tap-highlight-color:transparent; -webkit-text-size-adjust:100%; overscroll-behavior-y:contain;}
.bottomnav, .topbar-mobile, .btn, .nav, .bn-item{-webkit-user-select:none; user-select:none;}
body.sheet-open{overflow:hidden;}

/* ----- Top bar (mobile) ----- */
.topbar-mobile{
  position:fixed; top:0; left:0; right:0; z-index:50; display:none;
  align-items:center; justify-content:space-between; gap:12px;
  height:calc(52px + env(safe-area-inset-top));
  padding:env(safe-area-inset-top) 16px 0;
  background:#101828; color:#fff; box-shadow:0 1px 0 rgba(255,255,255,.06);
}
.topbar-mobile .tb-brand{display:flex; align-items:center; gap:2px; color:#fff; text-decoration:none; font-weight:700; font-size:1.05rem; letter-spacing:.3px;}
.topbar-mobile .tb-brand span{color:#60a5fa;}
.topbar-mobile .tb-tenant{font-size:.8rem; font-weight:600; color:#cbd5e1; max-width:54%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-align:right;}

/* ----- Bottom nav (mobile) ----- */
.bottomnav{
  position:fixed; bottom:0; left:0; right:0; z-index:50; display:none;
  justify-content:space-around; align-items:stretch; gap:2px;
  padding:6px 8px calc(6px + env(safe-area-inset-bottom));
  background:#101828; box-shadow:0 -1px 0 rgba(255,255,255,.06);
}
.bottomnav .bn-item{
  flex:1; min-height:48px; background:none; border:none; cursor:pointer;
  color:#93a4c0; text-decoration:none; border-radius:10px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px;
  padding:6px 2px; font-size:.62rem; font-weight:600; font-family:inherit;
}
.bottomnav .bn-item .bn-ico{line-height:1; display:flex; align-items:center; justify-content:center; height:22px;}
.bottomnav .bn-item .bn-lbl{letter-spacing:.2px;}
.bottomnav .bn-item.active{color:#fff;}
.bottomnav .bn-fab{color:#fff;}
.bottomnav .bn-fab .bn-ico{
  background:var(--primary); color:#fff; width:46px; height:46px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:1.35rem;
  margin-top:-18px; border:3px solid #101828; box-shadow:0 6px 16px rgba(37,99,235,.5);
}
.bottomnav .bn-fab.active .bn-ico{background:#1d4fd7;}

/* ----- Bottom-sheet "Mais" ----- */
.more-sheet-bg{position:fixed; inset:0; z-index:70; display:none; align-items:flex-end; justify-content:center; background:rgba(10,20,40,.5);}
.more-sheet-bg.open{display:flex;}
.more-sheet{
  width:100%; max-width:768px; background:#fff; border-radius:18px 18px 0 0;
  padding:8px 16px calc(20px + env(safe-area-inset-bottom));
  box-shadow:0 -10px 40px rgba(0,0,0,.3); animation:vx-sheet-up .22s ease;
}
@keyframes vx-sheet-up{from{transform:translateY(100%);}to{transform:translateY(0);}}
.more-sheet .ms-grip{width:38px; height:4px; border-radius:4px; background:#cbd5e1; margin:6px auto 12px;}
.more-sheet .ms-item{
  display:flex; align-items:center; gap:12px; padding:13px 8px; border-radius:10px;
  text-decoration:none; color:var(--text); font-size:.95rem; font-weight:600;
  border-bottom:1px solid var(--border);
}
.more-sheet .ms-item:hover,.more-sheet .ms-item:active{background:var(--primary-soft);}
.more-sheet .ms-item.active{color:var(--primary);}
.more-sheet .ms-ico{width:24px; display:inline-flex; align-items:center; justify-content:center; color:var(--muted);}
.more-sheet .ms-item.active .ms-ico{color:var(--primary);}
.more-sheet .ms-user{display:flex; align-items:center; gap:10px; padding:14px 8px 10px;}
.more-sheet .ms-uname{font-weight:700;}
.more-sheet .ms-logout{padding:4px 8px 8px;}
.more-sheet .ms-logout .btn{width:100%; justify-content:center;}
.more-sheet .ms-close{width:100%; margin-top:8px; padding:12px; background:none; border:none; cursor:pointer; color:var(--muted); font-size:.9rem; font-weight:600; font-family:inherit;}

/* ----- Página offline ----- */
body.offline-page{background:linear-gradient(135deg,#101828,#1e3a8a); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.offline-card{background:#fff; border-radius:16px; padding:34px 28px; width:100%; max-width:360px; text-align:center; box-shadow:0 20px 50px rgba(0,0,0,.3);}
.offline-card .offline-ico{color:var(--muted); margin-bottom:4px;}
.offline-card .logo{font-size:1.3rem; font-weight:700; margin:8px 0 14px;}
.offline-card .logo span{color:var(--primary);}
.offline-card h2{font-size:1.15rem; margin-bottom:8px;}
.offline-card p{color:var(--muted); font-size:.9rem; line-height:1.5; margin-bottom:20px;}
.offline-card .btn{width:100%; justify-content:center;}

/* ============================================================
   Breakpoint "modo app": ≤768px. Desktop acima disso fica intacto.
   ============================================================ */
@media (max-width:768px){
  .app{display:block;}
  aside{display:none;}
  .hamburguer{display:none;}          /* recurso exclusivo do desktop */
  .topbar-mobile{display:flex;}
  .bottomnav{display:flex;}

  main{
    max-width:none; padding:16px 14px;
    padding-top:calc(52px + env(safe-area-inset-top) + 14px);
    padding-bottom:calc(66px + env(safe-area-inset-bottom) + 16px);
  }

  /* Inputs ≥16px: evita o zoom automático do iOS */
  input,select,textarea{font-size:16px;}

  /* Grids empilham (kpis mantêm 2 colunas) */
  .grid-2,.grid-3,.grid-4,.cat-select,.tipo-img,.cad-grid{grid-template-columns:1fr;}
  .kpis{grid-template-columns:1fr 1fr;}
  .rec-row{grid-template-columns:1fr; max-width:none;}
  .lab-block-head{flex-direction:column; align-items:stretch;}
  .row-actions button,.row-actions a{min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center;}

  .page-head{gap:10px;}
  .coleta-bar{gap:10px;}

  /* Tabelas viram cards (stacked table): a tela adiciona a classe + data-label */
  table.table-cards thead{display:none;}
  table.table-cards tr{display:block; border:1px solid var(--border); border-radius:10px; margin-bottom:10px; padding:6px 12px; background:#fff;}
  table.table-cards tr:hover td{background:transparent;}
  table.table-cards td{display:flex; justify-content:space-between; gap:14px; border:none; padding:8px 0;}
  table.table-cards td::before{content:attr(data-label); font-weight:600; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.4px;}

  /* Modais viram bottom-sheet */
  .modal-bg{align-items:flex-end; padding:0;}
  .modal{max-width:none; width:100%; border-radius:16px 16px 0 0; max-height:92vh;}
}