:root {
  --raio: 10px;
  --fonte: 'Plus Jakarta Sans';
  --bg: #f1f5f9; --card: #ffffff; --text: #1e293b; --muted: #64748b;
  --border: #e2e8f0; --sidebar: #0f172a; --sidebar-text: #f8fafc;
  --primary: #2563eb; --success: #10b981; --warning: #f59e0b;
  --danger: #ef4444; --purple: #8b5cf6; --teal: #14b8a6;
  --input-bg: #f8fafc; --table-head: #f8fafc; --table-row-alt: #f8fafc;
  --shadow: 0 1px 3px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.04);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,.08);
}
body.dark {
  --bg: #0b1120; --card: #1e293b; --text: #f1f5f9; --muted: #94a3b8;
  --border: #334155; --sidebar: #020617; --input-bg: #0f172a;
  --table-head: #0f172a; --table-row-alt: #162032;
}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--fonte),system-ui,-apple-system,'Segoe UI',sans-serif;background:var(--bg);color:var(--text);
  transition:background .2s,color .2s;-webkit-font-smoothing:antialiased;letter-spacing:-.006em;}
/* Número em coluna alinha melhor com largura fixa; título ganha uma fonte com voz própria. */
.kpi-val,.td-valor,table td,table th,.dre-valor{font-variant-numeric:tabular-nums;}
h1,h2,h3,.brand,.card-title,.kpi-val{font-family:var(--fonte-titulo,var(--fonte)),system-ui,sans-serif;letter-spacing:-.02em;}

/* ── LAYOUT ── */
#app{display:flex;height:100vh;overflow:hidden;}
aside{width:260px;background:var(--sidebar);color:var(--sidebar-text);display:flex;flex-direction:column;padding:20px 16px;flex-shrink:0;overflow-y:auto;z-index:200;transition:transform .3s;}
main{flex:1;overflow-y:auto;display:flex;flex-direction:column;}
header{padding:16px 24px;background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0;}
.page{padding:24px;flex:1;}

/* ── SIDEBAR ── */
.brand{font-size:1.1rem;font-weight:800;letter-spacing:-.5px;display:flex;align-items:center;gap:10px;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.08);}
.brand span{color:var(--primary);}
nav{flex:1;}
.nav-item{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:8px;cursor:pointer;color:#94a3b8;font-size:.9rem;font-weight:500;transition:all .15s;margin-bottom:2px;border:none;background:none;width:100%;text-align:left;}
.nav-item:hover{background:rgba(255,255,255,.06);color:#fff;}
.nav-item.active{background:var(--primary);color:#fff;box-shadow:0 4px 12px rgba(37,99,235,.35);}
.nav-item i{width:18px;text-align:center;}
/* Títulos de seção do menu: 11 itens soltos viraram lista de compras. */
.nav-grupo{font-size:.62rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:#64748b;
  padding:0 12px;margin:14px 0 6px;}
.nav-grupo:first-of-type{margin-top:10px;}
.nav-rodape{margin-top:14px;padding-top:10px;border-top:1px solid rgba(255,255,255,.08);}
.nav-badge{margin-left:auto;background:var(--danger);color:#fff;font-size:.65rem;padding:2px 6px;border-radius:10px;}
.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.08);}
.user-box{display:flex;align-items:center;gap:10px;padding:8px;}
.avatar{width:34px;height:34px;background:var(--primary);border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;flex-shrink:0;}
.user-info{flex:1;min-width:0;}
.user-name{font-size:.85rem;font-weight:600;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.user-role{font-size:.7rem;color:#94a3b8;}
.btn-logout{background:none;border:none;color:#64748b;cursor:pointer;padding:6px;border-radius:6px;}
.btn-logout:hover{color:#ef4444;}
.theme-toggle{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;border-radius:8px;cursor:pointer;color:#94a3b8;font-size:.85rem;margin-bottom:8px;}
.theme-toggle:hover{background:rgba(255,255,255,.06);}
.toggle-pill{width:36px;height:20px;background:#334155;border-radius:10px;position:relative;transition:background .2s;}
.toggle-pill.on{background:var(--primary);}
.toggle-dot{position:absolute;width:14px;height:14px;background:#fff;border-radius:50%;top:3px;left:3px;transition:transform .2s;}
.toggle-pill.on .toggle-dot{transform:translateX(16px);}

/* ── CARDS KPI ── */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:20px;}
.kpi{background:var(--card);border-radius:12px;padding:20px;border:1px solid var(--border);box-shadow:var(--shadow);position:relative;overflow:hidden;transition:transform .15s;}
.kpi:hover{transform:translateY(-2px);}
.kpi-label{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);margin-bottom:6px;}
.kpi-val{font-size:1.7rem;font-weight:800;letter-spacing:-.5px;margin-bottom:4px;}
.kpi-sub{font-size:.8rem;color:var(--muted);}
.kpi-icon{position:absolute;right:-10px;bottom:-10px;font-size:4rem;opacity:.05;}

/* ── GRID ── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:16px;}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:16px;}
.grid-big{display:grid;grid-template-columns:2fr 1fr;gap:16px;margin-bottom:16px;}

/* ── CARD GENÉRICO ── */
.card{background:var(--card);border-radius:calc(var(--raio) + 2px);padding:20px;border:1px solid var(--border);box-shadow:var(--shadow);}
.card-title{font-size:.95rem;font-weight:700;margin-bottom:16px;padding-bottom:12px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:8px;}
.chart-wrap{position:relative;height:260px;}

/* ── TABELAS ── */
.tbl-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:.88rem;}
thead th{background:var(--table-head);padding:10px 12px;text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);position:sticky;top:0;z-index:5;white-space:nowrap;}
tbody tr{border-bottom:1px solid var(--border);transition:background .1s;}
tbody tr:hover{background:var(--table-row-alt);}
tbody td{padding:11px 12px;vertical-align:middle;}
.tbl-scroll{overflow-y:auto;max-height:380px;}

/* ── BADGES ── */
.badge{display:inline-block;padding:3px 8px;border-radius:20px;font-size:.72rem;font-weight:700;white-space:nowrap;}
.badge-pago{background:#dcfce7;color:#166534;}
.badge-pendente{background:#fef9c3;color:#854d0e;}
.badge-atrasado{background:#fee2e2;color:#991b1b;}
.badge-cancelado{background:#f1f5f9;color:#64748b;}
.badge-isento{background:#ede9fe;color:#5b21b6;}
.badge-emitida{background:#dbeafe;color:#1e40af;}
body.dark .badge-pago{background:#14532d;color:#86efac;}
body.dark .badge-pendente{background:#422006;color:#fcd34d;}
body.dark .badge-atrasado{background:#450a0a;color:#fca5a5;}
body.dark .badge-cancelado{background:#1e293b;color:#94a3b8;}
body.dark .badge-emitida{background:#1e3a8a;color:#93c5fd;}

/* ── BOTÕES ── */
.btn{display:inline-flex;align-items:center;gap:6px;padding:9px 16px;border-radius:var(--raio);border:none;cursor:pointer;font-size:.88rem;font-weight:600;transition:all .15s;}
.btn-primary{background:var(--primary);color:#fff;}
.btn-primary:hover{filter:brightness(1.1);}
.btn-success{background:var(--success);color:#fff;}
.btn-success:hover{filter:brightness(1.1);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-danger:hover{filter:brightness(1.1);}
.btn-ghost{background:var(--card);color:var(--text);border:1px solid var(--border);}
.btn-ghost:hover{background:var(--bg);}
.btn-sm{padding:6px 10px;font-size:.8rem;}
.btn-icon{width:32px;height:32px;padding:0;justify-content:center;border-radius:6px;}
.fab{position:fixed;right:20px;bottom:80px;width:56px;height:56px;border-radius:50%;background:var(--primary);color:#fff;border:none;font-size:1.4rem;cursor:pointer;box-shadow:0 4px 16px rgba(37,99,235,.5);z-index:100;display:none;align-items:center;justify-content:center;}

/* ── FORMULÁRIOS ── */
.form-group{margin-bottom:14px;}
label{display:block;font-size:.8rem;font-weight:600;margin-bottom:5px;color:var(--muted);}
input,select,textarea{width:100%;padding:9px 12px;background:var(--input-bg);border:1px solid var(--border);border-radius:var(--raio);color:var(--text);font-size:.9rem;outline:none;transition:border .15s;}
input:focus,select:focus,textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(37,99,235,.1);}
.form-row{display:grid;gap:12px;}
.form-row.c2{grid-template-columns:1fr 1fr;}
.form-row.c3{grid-template-columns:1fr 1fr 1fr;}
textarea{min-height:80px;resize:vertical;}

/* ── MODAL ── */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:300;display:flex;align-items:center;justify-content:center;padding:16px;backdrop-filter:blur(3px);}
.modal{background:var(--card);border-radius:16px;width:100%;max-width:640px;max-height:90vh;overflow-y:auto;box-shadow:var(--shadow-lg);}
.modal-header{padding:20px 24px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:var(--card);z-index:5;}
.modal-header h3{font-size:1rem;font-weight:700;}
.modal-body{padding:24px;}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:10px;position:sticky;bottom:0;background:var(--card);}

/* ── SIDEBAR FILTROS ── */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:16px;}
.filter-bar input,.filter-bar select{width:auto;flex:1;min-width:140px;}

/* ── FILA ── */
.fila-item{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-bottom:8px;display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fila-item-info{flex:1;font-size:.85rem;}
.fila-item-info b{display:block;}

/* ── MENSALISTAS ── */
.mes-chip{display:inline-block;width:38px;height:28px;border-radius:6px;text-align:center;line-height:28px;font-size:.68rem;font-weight:700;cursor:pointer;border:1px solid var(--border);transition:all .15s;}
.mes-PAGO{background:#dcfce7;color:#166534;border-color:#86efac;}
.mes-PENDENTE{background:#fef9c3;color:#854d0e;border-color:#fcd34d;}
.mes-ATRASADO{background:#fee2e2;color:#991b1b;border-color:#fca5a5;}
.mes-ISENTO{background:#ede9fe;color:#5b21b6;border-color:#c4b5fd;}
.mes--{background:var(--bg);color:var(--muted);}
body.dark .mes-PAGO{background:#14532d;color:#86efac;}
body.dark .mes-PENDENTE{background:#422006;color:#fcd34d;}
body.dark .mes-ATRASADO{background:#450a0a;color:#fca5a5;}

/* ── LOGIN ── */
#login-screen{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;z-index:500;
  background:radial-gradient(120% 90% at 50% 0%, var(--card) 0%, var(--bg) 60%);}
body.dark #login-screen{background:radial-gradient(120% 90% at 50% 0%, #161f2e 0%, var(--bg) 60%);}
.login-box{background:var(--card);border:1px solid var(--border);border-radius:18px;padding:34px 30px;width:100%;max-width:390px;
  box-shadow:0 18px 44px rgba(15,23,42,.10);}
.login-logo{text-align:center;margin-bottom:22px;}
.login-logo h1{font-size:1.45rem;font-weight:700;letter-spacing:-.02em;margin:10px 0 2px;}
.login-logo p{font-size:.82rem;color:var(--muted);}
.login-logo{text-align:center;margin-bottom:28px;}
.login-logo h1{font-size:1.5rem;font-weight:800;margin-top:10px;}
.login-logo p{font-size:.85rem;color:var(--muted);}

/* ── TOAST ── */
#toast-container{position:fixed;bottom:90px;right:20px;z-index:999;display:flex;flex-direction:column;gap:8px;}
.toast{padding:12px 18px;border-radius:10px;color:#fff;font-size:.88rem;font-weight:600;box-shadow:var(--shadow-lg);animation:slideIn .25s ease;display:flex;align-items:center;gap:8px;max-width:320px;}
.toast-ok{background:#10b981;}
.toast-err{background:#ef4444;}
.toast-info{background:#2563eb;}
@keyframes slideIn{from{transform:translateX(100%);opacity:0}to{transform:translateX(0);opacity:1}}

/* ── BOTTOM NAV (MOBILE) ── */
#bottom-nav{display:none;position:fixed;bottom:0;left:0;right:0;background:var(--sidebar);border-top:1px solid rgba(255,255,255,.08);z-index:200;height:60px;align-items:stretch;}
.bnav-item{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;color:#64748b;font-size:.6rem;font-weight:600;cursor:pointer;border:none;background:none;transition:color .15s;}
.bnav-item i{font-size:1.1rem;}
.bnav-item.active{color:var(--primary);}

/* ── CHANGELOG ── */
.change-item{padding:14px 0;border-bottom:1px solid var(--border);}
.change-item:last-child{border-bottom:none;}
.change-badge{display:inline-block;padding:2px 8px;border-radius:20px;font-size:.7rem;font-weight:700;margin-bottom:6px;}
.cb-NOVO{background:#dbeafe;color:#1e40af;}
.cb-MELHORIA{background:#dcfce7;color:#166534;}
.cb-CORRECAO{background:#fef9c3;color:#854d0e;}
.cb-SEGURANCA{background:#fee2e2;color:#991b1b;}

/* ── TABELA DE LANÇAMENTOS ── */
.tabela-lanc .td-valor{font-weight:700;text-align:right;}
.tabela-lanc .td-proc{max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.tabela-lanc .td-obs{max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:.82rem;}
.tabela-lanc .td-acoes{white-space:nowrap;}

/* ── ORIGEM POPUP ── */
.origem-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.origem-btn{display:flex;align-items:center;gap:10px;padding:14px 14px;border-radius:10px;background:var(--card);border:1.5px solid var(--border);color:var(--text);cursor:pointer;text-align:left;font-weight:600;font-size:.85rem;transition:all .12s;line-height:1.2;}
.origem-btn:hover{border-color:var(--primary);background:var(--bg);transform:translateY(-1px);}
.origem-btn i{font-size:1.3rem;flex-shrink:0;width:24px;text-align:center;}
.origem-btn.adv{color:#dc2626;}
.origem-btn.org{color:#7c3aed;}
.origem-btn.go {color:#2563eb;}
.origem-btn.ind{color:#16a34a;}
.origem-btn.pat{color:#0891b2;}
.origem-btn.out{color:#64748b;}
@media(max-width:500px){.origem-grid{grid-template-columns:1fr;}}

/* ── IA ── */
.ia-box{background:linear-gradient(135deg,#1e3a8a,#312e81);border-radius:12px;padding:16px;margin-bottom:16px;color:#fff;}
.ia-box h4{font-size:.9rem;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.ia-box textarea{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;width:100%;min-height:80px;resize:vertical;font-family:inherit;font-size:.88rem;line-height:1.45;padding:10px 12px;}
.ia-box textarea::placeholder{color:rgba(255,255,255,.55);}
.ia-box textarea:focus{border-color:rgba(255,255,255,.5);box-shadow:none;}
.ia-input-row{display:flex;gap:8px;align-items:center;}
.ia-input-row input{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);color:#fff;flex:1;}
.ia-input-row input::placeholder{color:rgba(255,255,255,.5);}
.ia-input-row input:focus{border-color:rgba(255,255,255,.5);box-shadow:none;}

/* ── RESPONSIVO ── */
@media(max-width:1200px){.kpi-grid{grid-template-columns:repeat(2,1fr);}.grid-big,.grid-3{grid-template-columns:1fr;}}
@media(max-width:768px){
  aside{position:fixed;top:0;left:0;height:100%;transform:translateX(-110%);width:280px;}
  aside.open{transform:translateX(0);}
  .fab{display:flex;}
  #bottom-nav{display:flex;}
  main{padding-bottom:60px;}
  .page{padding:12px;}
  .kpi-grid{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px;}
  .kpi{padding:12px 12px 14px;border-radius:10px;}
  .kpi-label{font-size:.62rem;letter-spacing:.3px;margin-bottom:4px;line-height:1.15;}
  .kpi-val{font-size:1.1rem;font-weight:800;letter-spacing:-.3px;margin-bottom:2px;word-break:break-word;line-height:1.15;}
  .kpi-sub{font-size:.68rem;line-height:1.2;}
  .kpi-icon{font-size:2.4rem;right:-6px;bottom:-6px;opacity:.07;}
  .grid-2,.grid-big,.grid-3{grid-template-columns:1fr;gap:10px;margin-bottom:10px;}
  .card{padding:14px;border-radius:10px;}
  .card-title{font-size:.85rem;margin-bottom:10px;padding-bottom:8px;}
  .chart-wrap{height:220px;}
  .modal{max-height:95vh;margin:auto;}
  .modal-body{padding:16px;}
  .filter-bar{flex-direction:column;}
  .filter-bar input,.filter-bar select{width:100%;}
  #global-filters{padding:10px 12px;gap:6px;}
  #global-filters select{flex:1;min-width:0;width:auto !important;}
  header{padding:12px 14px;}
  header .btn-text{display:none;}
  header h2{font-size:.95rem;}
  #page-sub{font-size:.7rem;}
  table{font-size:.78rem;}
  thead th,tbody td{padding:8px 6px;}
  #overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:199;}
  #overlay.on{display:block;}

  /* ── Tabela de lançamentos vira layout de cards ──────────────────── */
  .tabela-lanc{display:block;}
  .tabela-lanc thead{display:none;}
  .tabela-lanc tbody{display:block;}
  .tabela-lanc tbody tr.lanc-row{
    display:grid;
    grid-template-columns:54px 1fr;
    grid-template-areas:
      "acoes data"
      "acoes paciente"
      "acoes valor"
      "acoes dentista"
      "acoes proc"
      "acoes forma"
      "acoes obs";
    gap:3px 12px;
    padding:10px 12px;
    margin-bottom:10px;
    border:1px solid var(--border);
    border-left:4px solid var(--muted);
    border-radius:8px;
    background:var(--card);
  }
  .tabela-lanc tbody tr.status-pago     {border-left-color:var(--success);}
  .tabela-lanc tbody tr.status-pendente {border-left-color:var(--warning);}
  .tabela-lanc tbody tr.status-cancelado{border-left-color:var(--muted);}
  .tabela-lanc tbody td{border:none;padding:1px 0;font-size:.8rem;line-height:1.3;display:block;max-width:100%;white-space:normal;overflow:visible;text-overflow:clip;}
  .tabela-lanc .td-acoes{
    grid-area:acoes;
    display:flex;flex-direction:column;gap:6px;
    align-items:center;align-self:start;
    padding-right:10px;
    border-right:1px solid var(--border);
    min-height:60px;
  }
  .tabela-lanc .td-acoes .btn-icon{width:36px;height:36px;}
  .tabela-lanc .td-data    {grid-area:data;font-weight:700;color:var(--muted);font-size:.7rem;text-transform:uppercase;letter-spacing:.4px;}
  .tabela-lanc .td-paciente{grid-area:paciente;font-size:.92rem;}
  .tabela-lanc .td-valor   {grid-area:valor;text-align:left !important;font-weight:800;font-size:1rem;color:var(--primary);}
  .tabela-lanc .td-dentista{grid-area:dentista;font-size:.78rem;}
  .tabela-lanc .td-dentista::before{content:"Dentista: ";color:var(--muted);font-weight:600;}
  .tabela-lanc .td-proc    {grid-area:proc;font-size:.78rem;}
  .tabela-lanc .td-proc::before{content:"Procedimento: ";color:var(--muted);font-weight:600;}
  .tabela-lanc .td-forma   {grid-area:forma;font-size:.78rem;}
  .tabela-lanc .td-forma::before{content:"Forma: ";color:var(--muted);font-weight:600;}
  .tabela-lanc .td-obs     {grid-area:obs;font-size:.76rem;color:var(--muted);font-style:italic;margin-top:2px;}
  .tabela-lanc .td-obs:empty{display:none;}
  .tabela-lanc .td-status{display:none;} /* status virou cor da borda esquerda do card */

  /* O <div class="tbl-wrap"> acima da tabela tem overflow-x:auto que não precisamos no mobile */
  .card .tbl-wrap{overflow-x:visible;}
}
@media(max-width:380px){
  .kpi-grid{grid-template-columns:1fr;}
  .kpi-val{font-size:1.4rem;}
}
@media print{
  aside,#bottom-nav,.fab,header,.btn,.filter-bar{display:none!important;}
  .page{padding:0;}
  body{background:#fff;color:#000;}
}


/* Canal "Ajude-nos a melhorar": destaque no topo e no menu */
.btn-melhorar{background:linear-gradient(135deg,var(--primary),#0ea5e9);border:0;box-shadow:0 2px 8px rgba(14,165,233,.35);}
.btn-melhorar:hover{filter:brightness(1.08);}
.nav-melhorar{color:var(--primary);font-weight:700;}
.sug-item{border:1px solid var(--border);border-radius:10px;padding:12px;margin-bottom:10px;background:var(--card);}
.sug-meta{font-size:.75rem;color:var(--muted);display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:6px;}
.sug-texto{white-space:pre-wrap;font-size:.9rem;}
.sug-resposta{margin-top:8px;padding:8px 10px;border-left:3px solid var(--primary);background:rgba(14,165,233,.06);font-size:.85rem;white-space:pre-wrap;}
.badge-nova{background:#dbeafe;color:#1e40af;}
.badge-lida{background:#fef9c3;color:#854d0e;}
.badge-feita{background:#dcfce7;color:#166534;}
.badge-descartada{background:#f1f5f9;color:#64748b;}
body.dark .badge-nova{background:#1e3a8a;color:#93c5fd;}
body.dark .badge-lida{background:#422006;color:#fcd34d;}
body.dark .badge-feita{background:#14532d;color:#86efac;}
body.dark .badge-descartada{background:#1e293b;color:#94a3b8;}

/* Configurações: cards retráteis (acordeão). Fechados por padrão; estado lembrado por navegador. */
.grid-acordeao{align-items:start}  /* card aberto não estica o vizinho da mesma linha */
.card.acordeao{padding-bottom:0}
.acordeao-cab{width:100%;background:none;border:0;border-bottom:1px solid var(--border);color:inherit;cursor:pointer;text-align:left;font:inherit;font-size:.95rem;font-weight:700;padding:0 0 12px;margin-bottom:0;display:flex;align-items:center;gap:8px}
.acordeao-cab[aria-expanded="true"]{margin-bottom:14px}
.acordeao-qtd{font-weight:500;color:var(--muted);font-size:.8rem}
.acordeao-seta{margin-left:auto;transition:transform .15s;color:var(--muted)}
.acordeao-cab[aria-expanded="true"] .acordeao-seta{transform:rotate(180deg)}
.acordeao-corpo{padding-bottom:16px}


/* ═══════════════════════════════════════════════════════════════════════
   MOBILE — padrão dos apps da Fluxa (molde: zap-web). Bloco no fim de propósito:
   vence os utilitários acima por ordem de cascata, sem mexer no desktop.
   ═══════════════════════════════════════════════════════════════════════ */

/* iOS não pode reescalar a fonte sozinho (vira "tela sambando" ao girar). */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

/* Pull-to-refresh do navegador puxando a página inteira: fora. */
body { overscroll-behavior-y: none; }

/* Altura real da janela no celular (a barra de endereço muda vh e o topo some). */
#app { height: 100dvh; }

/* Duplo toque no Safari dá zoom e é o que "sambava" a tela: manipulation
   mantém rolagem e pinça, mas desliga o zoom de duplo toque. */
html, body, button, a, .btn, .card, .kpi, .bnav-item, .nav-item, label, input, select, textarea { touch-action: manipulation; }

/* Toque com resposta (o app "responde" ao dedo) e sem menu nativo de long-press. */
.tap, .btn, .nav-item, .bnav-item, .kpi { -webkit-tap-highlight-color: transparent; }
.btn:active, .bnav-item:active, .kpi:active { transform: scale(.97); }
.btn, .bnav-item, .nav-item { transition: transform .08s ease, background-color .15s ease, color .15s ease; }
.card, .kpi, .sug-item { -webkit-touch-callout: none; }
.card input, .card textarea, .modal input, .modal textarea, [contenteditable="true"] { -webkit-touch-callout: default; -webkit-user-select: text; user-select: text; }

/* Rolagem interna com inércia e sem "vazar" o scroll para a página. */
.tbl-scroll, .modal-body, .page, main { -webkit-overflow-scrolling: touch; overscroll-behavior-y: contain; }

@media (max-width: 768px) {
  /* ── Quem rola é a PÁGINA, não uma caixa interna ────────────────────
     Com rolagem interna (main{overflow:auto}) o navegador do celular mantém
     a barra de endereço na tela o tempo todo. Rolando o documento ela
     recolhe sozinha e sobram ~80px de altura útil. */
  #app { display: block; height: auto; min-height: 100dvh; overflow: visible; }
  main { display: block; overflow: visible; }
  body { overflow-x: hidden; }

  /* Campo com menos de 16px faz o iOS dar ZOOM ao focar — era a causa do "samba".
     O !important é de propósito: caixas com estilo próprio (a da IA, .88rem)
     reintroduziam o zoom. */
  input, select, textarea { font-size: 16px !important; }
  .ia-box textarea { min-height: 112px; line-height: 1.4; }

  /* ── Alvo de toque: 44px é o mínimo pra dedo, nada de mira de agulha ── */
  .btn { min-height: 44px; padding: 11px 16px; }
  .btn-sm { min-height: 40px; padding: 9px 12px; font-size: .82rem; }
  .btn-icon { width: 44px; height: 44px; min-height: 44px; border-radius: 10px; font-size: 1rem; }
  .mes-chip { min-width: 44px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; }
  .nav-item { min-height: 46px; font-size: .95rem; }

  /* Cabeçalho respeitando o notch; sem transbordar. */
  main > header { padding: calc(env(safe-area-inset-top, 0px) + 18px) 16px 14px; gap: 10px; }
  main > header h2 { font-size: 1rem; }

  /* Filtros do topo: campos que cabem de verdade (antes cortavam "202⌄", "Toc⌄"). */
  #global-filters { padding: 10px 14px; gap: 6px; flex-wrap: nowrap; }
  /* Seta nativa comia o texto ("202⌄", "Tod⌄"): seta própria, centralizado, sem sobra. */
  #global-filters select {
    flex: 1 1 0; min-width: 0; width: auto !important; font-size: 16px; padding: 11px 16px 11px 6px;
    -webkit-appearance: none; appearance: none; text-align: center; text-align-last: center;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 10px) 52%, calc(100% - 6px) 52%;
    background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
  }
  #global-filters span { display: none; }            /* o "a" entre os meses não cabe e não faz falta */
  #global-filters .btn { flex: 0 0 auto; padding: 11px 13px; }
  #global-filters .btn .btn-text { display: none; }  /* só o ícone do filtro */

  /* Conteúdo acima da barra flutuante + área de gestos. */
  /* Conteúdo NUNCA passa por baixo da pílula: altura dela (70) + respiro (14) + folga (36). */
  main { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 120px); }
  .page { padding: 14px 14px 8px; }
  /* Toda página precisa de rolagem suficiente pra barra de endereço do
     navegador recolher — senão Resultado/Config/Despesas viram "site" e o
     resto vira "app". Mede-se pela sobra: nenhuma abaixo de ~250px. */
  #page-container { min-height: calc(100dvh + 40px); }

  body.sem-filtros #global-filters { display: none !important; }  /* o display:flex é inline no partial */

  /* DRE: três colunas estreitas — "Pago" e "Pendente" colavam uma na outra. */
  #tb-dre { width: 100%; font-size: .84rem; }
  #tb-dre th { padding: 6px 0 6px 12px; font-size: .64rem; letter-spacing: .4px; }
  #tb-dre td { padding: 9px 0 9px 12px; }
  #tb-dre th:first-child, #tb-dre td:first-child { padding-left: 0; width: 48%; }

  /* Login é a primeira tela: mesmo padrão de dedo e de área segura. */
  #login-screen { padding: calc(env(safe-area-inset-top, 0px) + 16px) 16px calc(env(safe-area-inset-bottom, 0px) + 16px); align-items: flex-start; overflow-y: auto; }
  .login-box { padding: 28px 22px; margin: auto; }
  .login-box input { min-height: 48px; }
  .login-box .btn { min-height: 48px; }
  .login-box .btn-sm { min-height: 44px; font-size: .9rem !important; }

  /* ── Barra inferior: pílula flutuante (molde zap/evo) ───────────────── */
  #bottom-nav {
    display: flex; position: fixed; left: 10px; right: 10px;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    height: auto; padding: 6px 4px; gap: 2px;
    background: rgba(255,255,255,.88); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(0,0,0,.08); border-radius: 999px;
    box-shadow: 0 6px 24px rgba(0,0,0,.18); z-index: 200;
  }
  body.dark #bottom-nav { background: rgba(20,20,20,.88); border-color: rgba(255,255,255,.1); }
  .bnav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 4px; padding: 8px 1px; min-height: 56px; border-radius: 999px;
    font-size: .58rem; font-weight: 600; color: var(--muted); line-height: 1.05;
    min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
  .bnav-item i { font-size: 1.5rem; }            /* ícone é o que se acerta com o dedo */
  .bnav-item.active { color: var(--primary); }
  body.dark .bnav-item { color: #94a3b8; }

  /* O botão + divide a faixa de baixo com a pílula, em vez de boiar no meio da
     lista cobrindo cartão (body.com-fab vem do roteador, só onde ele aparece). */
  .fab { right: 10px; bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); width: 58px; height: 58px; box-shadow: 0 6px 24px rgba(37,99,235,.45); }
  body.com-fab #bottom-nav { right: 78px; padding-inline: 2px; }
  body.com-fab .bnav-item { font-size: .5rem; letter-spacing: -.2px; padding-inline: 0; }
  body.com-fab .bnav-item i { font-size: 1.35rem; }

  /* ── Barra de ações de cada página: uma linha só, botões que cabem ─── */
  .acoes-topo { display: flex !important; flex-wrap: wrap; gap: 8px !important; margin-bottom: 12px !important; }
  .acoes-topo > .btn { flex: 1 1 auto; justify-content: center; padding: 11px 10px; font-size: .82rem; white-space: nowrap; }
  .acoes-topo > .btn-icon { flex: 0 0 auto; }
  /* Abas (Falta emitir / Emitidas / …): grade de dois, todas do mesmo tamanho. */
  .acoes-topo > #fis-abas { display: grid !important; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; }
  .acoes-topo > #fis-abas .btn { width: 100%; justify-content: center; }
  /* Select apertado corta o texto ("Todos os grupo⌄"): metade da linha, no mínimo. */
  .acoes-topo > select { flex: 1 1 calc(50% - 4px); min-width: 0; width: auto !important; }
  .acoes-topo > input { flex: 1 1 100%; min-width: 0; width: auto !important; }
  /* Banco: a conta é a decisão da tela — linha inteira, e os dois botões abaixo. */
  #page-banco .acoes-topo > select { flex: 1 1 100%; }
  /* As três abas do Banco cabem numa linha só, do mesmo tamanho. */
  #bc-abas { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 6px; width: 100%; }
  #bc-abas .btn { width: 100%; justify-content: center; padding: 11px 4px; font-size: .78rem; }
  #page-banco .acoes-topo > .btn { flex: 1 1 calc(50% - 4px); }
  .acoes-topo > input + .btn-icon { flex: 0 0 auto; }

  /* ── Filtros da página: busca em cima, selects em duas colunas ─────── */
  .filter-bar { display: grid !important; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
  .filter-bar > input[type="text"], .filter-bar > input:not([type]), .filter-bar > input[placeholder*="Buscar"] { grid-column: 1 / -1; }
  .filter-bar > input, .filter-bar > select, .filter-bar > .btn { width: 100% !important; min-width: 0; margin: 0; }
  .filter-bar > .btn { justify-content: center; }
  /* Rótulo longo ("Todas as confianças") não pode morrer na seta — e o campo
     não pode ter menos de 16px, senão o iOS dá zoom. Seta desenhada aqui. */
  .filter-bar > select, .acoes-topo > select {
    font-size: 16px; padding: 11px 20px 11px 10px; text-overflow: ellipsis;
    -webkit-appearance: none; appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
    background-position: calc(100% - 11px) 53%, calc(100% - 7px) 53%;
    background-size: 4px 4px, 4px 4px; background-repeat: no-repeat;
  }

  /* Faixas de números das telas de conciliação/anúncios: duas por linha, iguais. */
  .conc-stats, .anun-stats { display: grid !important; grid-template-columns: 1fr 1fr; gap: 10px; }
  .conc-stats > *, .anun-stats > * { width: auto !important; min-width: 0; margin: 0 !important; }

  /* ── Toda tabela larga vira lista de cartões (ver js/core/tabela-mobile.js) ── */
  .tbl-wrap, .tbl-scroll { overflow-x: visible; }
  /* Caixa com rolagem própria dentro de página que já rola = scroll aninhado e
     cartão cortado no meio (era o caso do Histórico). A página rola, só ela.
     O !important é pelo max-height inline (60-70vh) que as páginas trazem. */
  .tbl-scroll { max-height: none !important; overflow-y: visible; }
  table.tbl-cards { display: block; width: 100%; font-size: .82rem; }
  table.tbl-cards thead { display: none; }
  table.tbl-cards tbody { display: block; }
  table.tbl-cards tbody tr {
    display: block; background: var(--card); border: 1px solid var(--border);
    border-radius: 10px; padding: 8px 12px; margin-bottom: 8px;
  }
  body.dark table.tbl-cards tbody tr { background: var(--table-row-alt); }
  table.tbl-cards tbody tr:nth-child(even) { background: var(--card); }
  table.tbl-cards tbody td {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    border: none; border-top: 1px solid var(--border); padding: 6px 0;
    text-align: left !important; white-space: normal; word-break: break-word; line-height: 1.3;
  }
  table.tbl-cards tbody td:first-child { border-top: none; font-weight: 700; font-size: .95rem; padding-top: 2px; }
  table.tbl-cards tbody td[data-rot]::before {
    content: attr(data-rot); flex: 0 0 auto; color: var(--muted);
    font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .4px;
  }
  table.tbl-cards tbody td:empty { display: none; }
  /* Conteúdo secundário da célula (dentista, evidência, nota) cai pra linha de
     baixo em vez de ser espremido até quebrar letra no meio da palavra. */
  table.tbl-cards tbody td { flex-wrap: wrap; }
  table.tbl-cards tbody td > * { min-width: 0; word-break: break-word; }
  table.tbl-cards tbody td > small, table.tbl-cards tbody td > i { flex: 1 1 100%; text-align: right; }
  table.tbl-cards tbody td[colspan] { display: block; text-align: center !important; border: none; }
  /* Célula só de botões: eles ficam em linha, à direita, sem rótulo pendurado. */
  table.tbl-cards tbody td:has(.btn-icon), table.tbl-cards tbody td:has(.btn) { justify-content: flex-end; gap: 8px; flex-wrap: wrap; }
  table.tbl-cards tbody td:has(.btn-icon)::before { content: none; }

  /* ── Mensalistas: os 12 meses viram uma grade de 4 por linha ───────── */
  #page-mensalistas table.tbl-cards tbody td:has(.mes-chip) {
    display: inline-flex; width: 25%; justify-content: center; border: none; padding: 3px 0;
  }
  #page-mensalistas table.tbl-cards tbody td:has(.mes-chip)::before { content: none; }
  #page-mensalistas table.tbl-cards tbody td:has(.mes-chip) { flex-direction: column; gap: 2px; }
  #page-mensalistas table.tbl-cards tbody td:has(.mes-chip) .mes-chip { width: 100%; }
  /* Sem o cabeçalho da tabela, o chip precisa dizer de que mês ele é. */
  #page-mensalistas table.tbl-cards tbody td:has(.mes-chip)::before {
    content: attr(data-rot); display: block;
    font-size: .58rem; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .3px;
  }

  /* ── Tabela de lançamentos: ações no canto, texto ganhando a largura ── */
  .tabela-lanc tbody tr.lanc-row {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "data     acoes"
      "paciente acoes"
      "valor    acoes"
      "dentista acoes"
      "proc     acoes"
      "forma    acoes"
      "obs      obs";
    padding: 12px;
  }
  .tabela-lanc .td-acoes {
    flex-direction: row; gap: 6px; align-self: start;
    padding: 0 0 0 10px; border-right: none; border-left: 1px solid var(--border); min-height: 0;
  }
  .tabela-lanc .td-acoes .btn-icon { width: 40px; height: 40px; }

  /* Modais: altura real, rodapé fora da área de gestos, sem "sobrar" nas bordas. */
  .modal { max-height: 92dvh; width: calc(100vw - 16px); margin: 8px auto; }
  .modal-body { max-height: calc(92dvh - 132px); }
  .modal-footer { padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); flex-wrap: wrap; gap: 8px; }
  .modal-footer .btn { flex: 1 1 auto; justify-content: center; }

  /* Modal vira bottom-sheet (padrão do zap): sobe de baixo, cantos arredondados em cima. */
  .modal-backdrop { align-items: flex-end; padding: 0; }
  .modal { border-radius: 16px 16px 0 0; margin: 0 auto; width: 100%; max-height: 92dvh; animation: subir .18s ease-out; }
  @keyframes subir { from { transform: translateY(14px); opacity: .6 } to { transform: none; opacity: 1 } }

  /* Menu lateral aberto: a pílula e o botão + saem da frente (cobriam o rodapé
     do menu — modo escuro, usuário, sair). */
  body:has(aside.open) #bottom-nav, body:has(aside.open) .fab { opacity: 0; pointer-events: none; transform: translateY(24px); }
  #bottom-nav, .fab { transition: opacity .18s ease, transform .18s ease; }
  aside { padding-top: calc(env(safe-area-inset-top, 0px) + 20px); padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 20px); }

  /* O botão do canal de sugestões não disputa espaço com o título no celular —
     no celular ele vive no menu lateral (mesmo padrão do Zap e do Evo). */
  #feedback-slot { display: none; }

  /* KPI é cartão de leitura rápida: dois por linha, sempre (qualquer grade). */
  .kpi-grid, .grid-3:has(> .kpi), .grid-2:has(> .kpi) { display: grid; grid-template-columns: 1fr 1fr !important; gap: 10px; }

  /* Nada de elemento estourando a caixa. */
  .card, .kpi, .modal { max-width: 100%; }
  img, canvas { max-width: 100%; }
  pre, code { white-space: pre-wrap; word-break: break-word; }
}