/* ALFRED Casa · sistema de estilo "Painel Claro"
   branco sobre cinza claro, preto como única cor forte, azul claro como acento de dado,
   tipografia Plus Jakarta Sans, cards com sombra suave, dial neumórfico.
   Compatibilidade: mantém os NOMES de variáveis do sistema antigo (Botânico) e do
   painel de energia, remapeados pra paleta clara, pro JS existente seguir intocado. */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root{
  /* tokens novos */
  --ink:#17191C; --mut:#A2A7AF; --chip:#EEF0F3; --chip2:#E7E9ED;
  --blue:#A9C7E8; --blue-t:#5B8BC4; --blue-bg:#EFF5FB;
  --red:#D96A5E; --red-bg:#FAECEA; --ambr:#D89E43; --ambr-bg:#F9F1E3;
  --grn:#5FA97C; --grn-bg:#E9F4EE;
  --sh:0 1px 2px rgba(23,25,28,.03),0 14px 34px -18px rgba(23,25,28,.14);
  --sh-soft:0 1px 2px rgba(23,25,28,.03),0 8px 22px -14px rgba(23,25,28,.10);

  /* aliases legados (Botânico) → paleta clara */
  --bg:#EDEFF2; --s1:#FFFFFF; --s2:#F1F2F5; --s3:#E7E9ED;
  --tx:#17191C; --tx2:#6E747D; --tx3:#A2A7AF;
  --line:rgba(23,25,28,.08); --line2:rgba(23,25,28,.14); --line-faint:rgba(23,25,28,.055);
  --hl:rgba(255,255,255,0);
  --sage:#17191C; --sage-2:#5B8BC4; --sage-dp:#17191C;
  --pos:#5FA97C; --neg:#D96A5E; --warn:#D89E43;
  --sage-a:rgba(23,25,28,.06); --neg-a:#FAECEA; --warn-a:#F9F1E3;

  /* aliases legados (painel energia) → paleta clara */
  --canvas:#EDEFF2; --surface:#FFFFFF; --surface2:#FFFFFF; --surface3:#EEF0F3;
  --hair:rgba(23,25,28,.08); --hair2:rgba(23,25,28,.14);
  --txt:#17191C; --txt2:#6E747D; --muted:#A2A7AF;
  --cyan:#17191C; --cyan-br:#5B8BC4; --cyan-dp:#17191C;
  --amber:#D89E43; --mint:#5FA97C; --coral:#D96A5E; --violet:#5B8BC4;

  /* tipografia: uma família só, hierarquia por peso */
  --display:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --ui:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --grot:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;
  --mono:'Plus Jakarta Sans',system-ui,-apple-system,sans-serif;

  --eout:cubic-bezier(.23,1,.32,1);
  --einout:cubic-bezier(.77,0,.175,1);
  --r-sm:10px; --r:12px; --r-lg:20px; --r-xl:24px;
  --sp1:4px; --sp2:8px; --sp3:12px; --sp4:16px; --sp5:24px; --sp6:32px;
  --sh-overlay:0 12px 32px -8px rgba(23,25,28,.18),0 4px 12px -4px rgba(23,25,28,.10);
}

*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  background:var(--bg);color:var(--tx);
  font-family:var(--ui);font-size:14px;line-height:1.5;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  min-height:100vh;
}

/* ===== layout com sidebar (shell.js injeta a nav) ===== */
.layout{display:grid;grid-template-columns:228px minmax(0,1fr);min-height:100vh}
.main{padding:26px 28px 48px;min-width:0}
.wrap{max-width:1180px;margin:0 auto}
.wrap.narrow{max-width:760px}

.sidebar{padding:26px 16px 22px 20px;border-right:1px solid rgba(23,25,28,.05);display:flex;flex-direction:column;gap:6px;position:sticky;top:0;height:100vh;overflow-y:auto}
.sb-who{display:flex;align-items:center;gap:11px;padding:2px 6px 20px}
.sb-av{width:40px;height:40px;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:800;font-size:15px;box-shadow:0 6px 14px -6px rgba(23,25,28,.4);flex:none}
.sb-hi{font-size:10px;color:var(--mut);font-weight:600}
.sb-nm{font-size:13px;font-weight:800;letter-spacing:-.1px;white-space:nowrap}
.nvi{position:relative;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:12px;font-size:13px;font-weight:600;color:#8E939B;transition:color .18s var(--eout);text-decoration:none}
.nvi svg{width:18px;height:18px;stroke-width:1.7;flex:none}
.nvi:hover{color:var(--ink)}
.nvi.on{color:var(--ink);font-weight:800}
.nvi.on::before{content:"";position:absolute;left:-20px;top:50%;transform:translateY(-50%);border-left:7px solid var(--ink);border-top:5px solid transparent;border-bottom:5px solid transparent}
.sb-gap{flex:1}
.sb-foot{padding:10px 6px 0;font-size:9px;color:#C6CAD0;font-weight:700;letter-spacing:.6px;text-transform:uppercase}

/* ===== cabeçalho de página ===== */
.phead{display:flex;align-items:flex-start;gap:14px;margin-bottom:20px;flex-wrap:wrap}
.phead .t h1{font-size:20px;font-weight:800;letter-spacing:-.3px;font-family:var(--display)}
.phead .t .sub{font-size:11.5px;color:var(--mut);font-weight:500;margin-top:2px}
.phead .spacer{flex:1}

/* ===== números ===== */
.num{font-variant-numeric:tabular-nums lining-nums}
.money{display:inline-flex;align-items:baseline;gap:.08em;font-variant-numeric:tabular-nums lining-nums;color:var(--tx)}
.money .sym{font-size:.42em;font-weight:700;color:var(--tx2);align-self:flex-start;margin-top:.42em}
.money .int{font-weight:800;letter-spacing:-.02em}
.money .cts{font-size:.42em;font-weight:700;color:var(--tx2)}
.hero-val{font-family:var(--display);font-weight:800;letter-spacing:-.02em;line-height:1;color:var(--tx)}
.overline{font-size:10px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--mut)}
.big{font-family:var(--display);font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.5px;line-height:1}
.unit{font-size:12px;color:var(--tx2);font-weight:700}

/* ===== card ===== */
.card{
  position:relative;background:var(--s1);border:1px solid rgba(23,25,28,.035);border-radius:var(--r-lg);
  box-shadow:var(--sh-soft);
}
.card .lbl{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--tx2);display:flex;align-items:center;gap:7px;margin-bottom:14px;font-weight:800}
.card .lbl svg{width:14px;height:14px;stroke:var(--mut);fill:none;stroke-width:1.8}

/* ===== grid 12 col ===== */
.bento{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:16px}
.c12{grid-column:span 12}.c8{grid-column:span 8}.c7{grid-column:span 7}.c6{grid-column:span 6}.c5{grid-column:span 5}.c4{grid-column:span 4}.c3{grid-column:span 3}

/* ===== botões ===== */
.btn{
  font-family:var(--ui);font-weight:700;font-size:12.5px;border:none;border-radius:12px;
  padding:11px 16px;cursor:pointer;background:var(--ink);color:#fff;
  transition:transform .16s var(--eout),opacity .16s var(--eout);
}
.btn:hover{opacity:.9}
.btn:active{transform:scale(.97)}
.btn:disabled{opacity:.5;cursor:default}
.btn.ghost{background:var(--chip);color:var(--tx)}
.btn.ghost:hover{opacity:1;background:var(--chip2)}
.btn.outline{background:#fff;color:var(--ink);border:1px solid var(--line2)}
.btn.outline:hover{border-color:var(--ink);opacity:1}

/* ===== inputs ===== */
.inp{
  background:#fff;border:1px solid var(--line);border-radius:12px;color:var(--tx);
  font-family:var(--ui);font-size:13.5px;font-weight:600;padding:11px 13px;outline:none;width:100%;
  transition:border-color .16s var(--eout);
}
.inp:focus{border-color:var(--ink)}
.inp::placeholder{color:var(--mut);font-weight:500}

/* ===== linhas de lista ===== */
.row{display:flex;align-items:center;gap:var(--sp3);padding:13px 2px;border-top:1px solid var(--line-faint)}
.row:first-child{border-top:none}
.idot{width:7px;height:7px;border-radius:50%;flex:none}
.row .val{margin-left:auto;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tx)}

/* ===== badges ===== */
.badge{font-size:9.5px;letter-spacing:.4px;text-transform:uppercase;font-weight:800;padding:4px 8px;border-radius:7px;white-space:nowrap}
.badge.neg,.badge.crit{color:var(--red);background:var(--red-bg)}
.badge.warn{color:var(--ambr);background:var(--ambr-bg)}
.badge.ok{color:var(--tx2);background:var(--chip)}
.badge.nd{color:var(--mut);background:var(--chip)}
.badge.sage{color:var(--grn);background:var(--grn-bg)}
.badge.blue{color:var(--blue-t);background:var(--blue-bg)}

/* ===== chip de navegação ===== */
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--tx2);background:#fff;border:1px solid var(--line);padding:8px 13px;border-radius:11px;text-decoration:none;transition:color .16s var(--eout),border-color .16s var(--eout)}
.chip:hover{color:var(--ink);border-color:var(--line2)}
.chip svg{width:13px;height:13px}

/* ===== pill preta (ação primária pequena) ===== */
.pillb{background:var(--ink);color:#fff;font-size:11px;font-weight:700;padding:8px 14px;border-radius:10px;display:inline-flex;align-items:center;gap:6px;border:none;cursor:pointer;transition:transform .16s var(--eout)}
.pillb:active{transform:scale(.96)}

/* ===== marca (fallback, sidebar cobre) ===== */
.mark{width:30px;height:30px;border-radius:9px;flex:none;position:relative;background:var(--ink);display:flex;align-items:center;justify-content:center}
.mark::after{content:"";width:10px;height:10px;border-radius:3px;background:#fff}

/* ===== tiles de ícone ===== */
.tile{width:36px;height:36px;border-radius:11px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:none}
.tile svg{width:17px;height:17px;stroke-width:1.7}
.tile.lt{background:var(--chip);color:var(--ink)}

/* ===== estados compartilhados ===== */
.empty{text-align:center;color:var(--mut);font-size:12.5px;padding:26px 0;line-height:1.6;font-weight:500}
.load{text-align:center;color:var(--mut);font-size:12px;padding:30px 0;font-weight:500}
.msg{font-size:12.5px;min-height:16px}
.note{font-size:11px;color:var(--mut);margin-top:12px;line-height:1.55;font-weight:500}
.live{display:inline-flex;align-items:center;gap:6px;font-size:10px;font-weight:800;color:var(--grn)}
.live .dot{width:6px;height:6px;border-radius:50%;background:var(--grn);animation:pl 1.6s infinite}
@keyframes pl{0%,100%{box-shadow:0 0 0 0 rgba(95,169,124,.35)}50%{box-shadow:0 0 0 5px rgba(95,169,124,0)}}

/* ===== stat chips (energia) ===== */
.stat{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:7px 12px;font-size:11px;font-weight:700;color:var(--tx2);text-decoration:none}
.led{width:7px;height:7px;border-radius:50%;background:var(--grn);box-shadow:0 0 0 3px var(--grn-bg);transition:.3s}
.led.off{background:var(--red);box-shadow:0 0 0 3px var(--red-bg)}
.band{width:9px;height:9px;border-radius:3px;display:inline-block}

/* ===== formulários compartilhados ===== */
.form{padding:17px;margin-bottom:14px;display:none}
.form.open{display:block}
.form h3{font-size:14px;font-weight:800;margin-bottom:13px}
.fld{margin-bottom:11px}
.fld label,.field label{display:block;font-size:9.5px;font-weight:800;text-transform:uppercase;letter-spacing:1px;color:var(--mut);margin-bottom:6px}
.frow{display:flex;gap:10px}.frow .fld{flex:1}
.fact{display:flex;gap:8px;margin-top:4px}.fact .btn{flex:1}
.field{margin-bottom:10px}
.field input,.field select{width:100%;background:#fff;border:1px solid var(--line);border-radius:11px;color:var(--tx);font-family:var(--ui);font-size:13px;font-weight:600;padding:10px 12px;outline:none}
.field input:focus,.field select:focus{border-color:var(--ink)}

/* ===== check redondo ===== */
.check{width:22px;height:22px;border-radius:50%;border:1.6px solid #C6CAD0;flex:none;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.16s var(--eout);background:#fff}
.check:hover{border-color:var(--ink)}
.check svg{width:11px;height:11px;stroke:#fff;stroke-width:3.2;opacity:0}

/* ===== avatar quadradinho ===== */
.av{width:26px;height:26px;border-radius:8px;flex:none;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px;color:#fff}

/* ===== hero de página (número grande) ===== */
.hero{padding:20px 22px}
.hero .cap{font-size:11.5px;color:var(--mut);font-weight:600;margin-top:4px}
.prg{height:7px;border-radius:99px;background:var(--chip2);overflow:hidden;margin-top:14px}
.prg i{display:block;height:100%;border-radius:99px;background:var(--ink);transition:width .5s var(--eout)}

/* ===== tabela ===== */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{font-size:9px;font-weight:800;letter-spacing:.8px;text-transform:uppercase;color:var(--mut);text-align:right;padding:8px 8px;border-bottom:1px solid var(--line)}
th:first-child,td:first-child{text-align:left}
td{font-size:12px;font-weight:600;text-align:right;padding:10px 8px;border-bottom:1px solid var(--line-faint);color:var(--tx2);font-variant-numeric:tabular-nums}
td b{color:var(--tx);font-weight:800}
tr.sel td{background:var(--blue-bg)}
td.per{color:var(--tx);font-weight:700;cursor:pointer}

/* ===== seg control ===== */
.seg{display:inline-flex;background:var(--chip2);border-radius:12px;padding:3px;gap:2px}
.seg button{background:transparent;border:none;color:var(--tx2);font-family:var(--ui);font-size:11.5px;font-weight:700;padding:7px 12px;border-radius:9px;cursor:pointer;transition:.15s}
.seg button.on{background:#fff;color:var(--ink);box-shadow:0 2px 6px -2px rgba(23,25,28,.18)}
.togmini{display:inline-flex;gap:2px;background:var(--chip2);border-radius:9px;padding:3px;margin-left:auto}
.togmini button{background:transparent;border:none;color:var(--tx2);font-size:10.5px;font-weight:700;font-family:var(--ui);padding:4px 10px;border-radius:6px;cursor:pointer}
.togmini button.on{background:var(--ink);color:#fff}

/* ===== kpi horizonte ===== */
.hzrow{display:flex;gap:10px;flex-wrap:wrap}
.hz{flex:1;min-width:150px;background:#fff;border:1px solid rgba(23,25,28,.035);box-shadow:var(--sh-soft);border-radius:16px;padding:14px 16px}
.hzk{font-size:10px;letter-spacing:1.2px;text-transform:uppercase;color:var(--mut);font-weight:700}
.hzv{font-family:var(--display);font-size:22px;font-weight:800;margin-top:4px;font-variant-numeric:tabular-nums;letter-spacing:-.4px}
.hzu{font-size:11px;color:var(--tx2);font-weight:700}
.hzd{font-size:10.5px;margin-top:3px;color:var(--mut);min-height:14px;font-weight:700}
.hzd.up{color:var(--red)}.hzd.down{color:var(--grn)}

/* ===== segmentos internos (mini stats em card) ===== */
.seg-row{display:flex;gap:10px;margin-top:14px;flex-wrap:wrap}
.seg-row .seg,.seg-row .s{display:block;flex:1;min-width:80px;background:var(--chip);border:none;border-radius:12px;padding:10px 12px}
.seg-row .n{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.seg-row .l{font-size:9.5px;color:var(--mut);margin-top:1px;font-weight:700}
.hgrid{display:flex;gap:8px;margin-top:2px;flex-wrap:wrap}
.hcell{flex:1;min-width:74px;background:var(--chip);border-radius:12px;padding:11px}
.hcell .hn{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}
.hcell .hl{font-size:9.5px;color:var(--mut);margin-top:2px;font-weight:700}
.pill{font-size:9.5px;letter-spacing:.5px;text-transform:uppercase;font-weight:800;padding:4px 9px;border-radius:7px;display:inline-block}
.pill.ok{color:var(--grn);background:var(--grn-bg)}
.pill.warn{color:var(--ambr);background:var(--ambr-bg)}
.pill.crit{color:var(--red);background:var(--red-bg)}

/* ===== foco visível ===== */
:focus-visible{outline:none;box-shadow:0 0 0 2px var(--bg),0 0 0 4px var(--ink)}

/* ===== reveal escalonado ===== */
@keyframes reveal{to{opacity:1;transform:none}}
.stagger>*{opacity:0;transform:translateY(8px);animation:reveal .38s var(--eout) forwards}
.stagger>*:nth-child(2){animation-delay:.05s}
.stagger>*:nth-child(3){animation-delay:.1s}
.stagger>*:nth-child(4){animation-delay:.15s}
.stagger>*:nth-child(5){animation-delay:.2s}
.stagger>*:nth-child(6){animation-delay:.25s}
.stagger>*:nth-child(7){animation-delay:.3s}
.stagger>*:nth-child(8){animation-delay:.35s}

.hide{display:none!important}

/* ===== base mobile (regras da pesquisa: HIG, M3, WCAG, web.dev) ===== */
html{overflow-x:clip}
html,body{overscroll-behavior-y:none}
*{-webkit-tap-highlight-color:transparent}
img,svg,canvas{max-width:100%}

/* ===== bottom tab bar (mobile) + sheet "Mais" ===== */
.tabbar{display:none}
.sheetov{display:none}
@media(max-width:760px){
  .tabbar{
    display:grid;grid-template-columns:repeat(5,1fr);position:fixed;left:0;right:0;bottom:0;z-index:80;
    background:rgba(255,255,255,.96);backdrop-filter:none;border-top:1px solid rgba(23,25,28,.08);
    padding:6px 4px calc(6px + env(safe-area-inset-bottom));
  }
  .tbi{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    min-height:52px;border:none;background:none;text-decoration:none;color:#8E939B;border-radius:12px;font-family:var(--ui)}
  .tbi svg{width:22px;height:22px;stroke-width:1.7}
  .tbi span{font-size:10px;font-weight:700;letter-spacing:.1px}
  .tbi.on{color:var(--ink)}
  .tbi.on span{font-weight:800}
  .tbi:active{background:var(--chip)}
  .sheetov{display:block;position:fixed;inset:0;z-index:90;background:rgba(23,25,28,.35);opacity:0;pointer-events:none;transition:opacity .22s var(--eout)}
  .sheetov.open{opacity:1;pointer-events:auto}
  .sheet{position:fixed;left:0;right:0;bottom:0;z-index:91;background:#fff;border-radius:22px 22px 0 0;
    padding:14px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:var(--sh-overlay);
    transform:translateY(102%);transition:transform .26s var(--eout)}
  .sheetov.open .sheet{transform:none}
  .sheet .grab{width:38px;height:4px;border-radius:99px;background:var(--chip2);margin:0 auto 12px}
  .sheet .stit{font-size:11px;font-weight:800;letter-spacing:1px;text-transform:uppercase;color:var(--mut);margin:2px 4px 10px}
  .sheet .sgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .sheet .snvi{display:flex;align-items:center;gap:11px;padding:13px 12px;border-radius:14px;background:var(--chip);
    color:var(--tx);font-size:13.5px;font-weight:700;text-decoration:none;min-height:48px}
  .sheet .snvi svg{width:19px;height:19px;stroke-width:1.7;flex:none}
  .sheet .snvi.on{background:var(--ink);color:#fff}
  .sheet .snvi:active{opacity:.85}
}

/* ===== responsivo ===== */
@media(max-width:900px){
  .c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 6}
}
@media(max-width:760px){
  .layout{grid-template-columns:1fr}
  .sidebar{display:none}
  .main{padding:16px 16px calc(84px + env(safe-area-inset-bottom))}
  body{font-size:15px}
  .bento{gap:12px}
  .c8,.c7,.c6,.c5,.c4,.c3{grid-column:span 12}
  .phead .t h1{font-size:19px}
  .wrap{max-width:100%}

  /* inputs: 16px mata o auto-zoom do iOS Safari */
  .main .inp,.main .field input,.main .field select,.main .vinp,.main .tarifa,
  #authCard input{font-size:max(16px,1em)!important}

  /* alvos de toque 44-48 (HIG 44pt / M3 48dp / WCAG 2.5.8) */
  .main .btn{min-height:44px}
  .main .pillb{min-height:40px;padding:9px 15px}
  .main .chipk{min-height:40px;display:inline-flex;align-items:center}
  .main .check{width:28px;height:28px;position:relative}
  .main .check::after{content:"";position:absolute;inset:-10px}
  .main .check svg{width:13px;height:13px}
  .main .qbtn{width:40px;height:40px;font-size:18px}
  .main .iconbtn{width:40px;height:40px}
  .main .gbtn{width:38px;height:38px}
  .main .del{padding:10px;opacity:1}
  .main .seg button{padding:10px 14px;min-height:40px}
  .main .togmini button{padding:8px 12px}
  .main .nav button{width:40px;height:40px}
  .main .hchip{padding:13px 0}
  .main .qty{gap:12px}
  .main .row,.main .lit,.main .item,.main .task,.main .ev{padding-top:14px;padding-bottom:14px}
  .main .addbar .btn{width:52px;min-height:48px}
  .main table td{padding:12px 8px}
  .main .sug button{min-height:48px}

  /* tipografia mobile: pisos de legibilidade */
  .main .iname,.main .tt,.main .ttit,.main .cnome,.main .dtit,.main .idesc{font-size:15px}
  .main .imeta,.main .mt,.main .tmeta,.main .cmeta,.main .dmeta,.main .iamb{font-size:12px}
  .main .empty{font-size:13.5px}
  .main .note{font-size:12px}
  .main .badge{font-size:10px;padding:5px 9px}
  .main .stat{min-height:38px}

  /* grids sem estouro (minmax(0,1fr) + min-width:0) */
  .main .card,.main .mcard{min-width:0}
  .main .hzrow .hz{min-width:140px}
  .main .heat{gap:2px}
  .main .selrow{gap:10px}
  .main .selrow .seg{max-width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
  .main .perlabel{min-width:0;flex:1}

  /* botão sair do auth acima da tab bar */
  #authOut{bottom:calc(76px + env(safe-area-inset-bottom))!important}
}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .stagger>*{opacity:1;transform:none}
}

/* input type=search sem o X nativo (usado pra suprimir autofill de credencial) */
input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;display:none}
input[type="search"]{-webkit-appearance:none;appearance:none}