/* Filóo Atendimento — estilos das telas (gerado a partir de design/prototipo/fa.css). Tokens do design system Filóo Tech (camada produto).
   Tema escuro: .fa.dark — o botão de tema em cada cabeçalho alterna. */
.fa{
  --primary-50:#fffdf4;--primary-100:#fff9e4;--primary-200:#ffe3b8;--primary-300:#ffbe78;--primary-400:#ffa248;
  --primary-500:#f5891e;--primary-600:#da7501;--primary-700:#b56825;--primary-800:#8b5a34;--primary-900:#6a4830;
  --on-primary:#18181b;--ink-tint:#8b5a34;
  --app-bg:#fafafa;--app-surface:#ffffff;--app-subtle:#f4f4f5;--app-text:#3f3f46;--app-muted:#52525b;--app-faint:#71717a;
  --app-line:#e4e4e7;--app-line-strong:#d4d4d8;--card:#fffdf4;
  --cta:#15803d;--on-cta:#ffffff;--danger:#c0392b;
  --ok-bg:#f0fdf4;--ok:#15803d;--ok-text:#14532d;--ok-line:#86efac;
  --warn-bg:#fffbeb;--warn:#b45309;--warn-text:#78350f;--warn-line:#fcd34d;
  --bad-bg:#fef2f2;--bad:#991b1b;--bad-text:#7f1d1d;--bad-line:#fca5a5;
  --info-bg:#eff6ff;--info:#1d4ed8;--info-text:#1e3a8a;--info-line:#bfdbfe;
  --risk1:#b42318;--risk2:#e8590c;--risk3:#ffc629;--risk4:#0b6b4f;--risk5:#1f6fb2;--on-dark:#ffffff;--on-light:#1a1200;
  --menu-top:#235892;--menu-bottom:#1a4372;--navy:#0b2a4a;--demo:#ffc629;
  --note-bg:#fffbeb;--note-line:#fcd34d;--bubble-me:#fff9e4;
  --shadow:0 1px 2px rgba(0,0,0,.06);--shadow-pop:0 10px 30px rgba(8,29,52,.16);
  font-family:"Inter",ui-sans-serif,system-ui,sans-serif;color:var(--app-text);background:var(--app-bg);
  font-size:14px;line-height:20px;box-sizing:border-box;position:relative;
}
.fa.dark{
  --primary-50:#1a1610;--primary-100:#2a2014;--primary-200:#4a3218;
  --ink-tint:#ffbe78;--app-bg:#0b1520;--app-surface:#101d2c;--app-subtle:#16273a;--app-text:#e9eef3;--app-muted:#aab8c4;
  --app-faint:#8a9aa8;--app-line:#26384a;--app-line-strong:#3a4d60;--card:#142436;
  --ok-bg:#0f2a1c;--ok:#4ade80;--ok-text:#bbf7d0;--ok-line:#166534;
  --warn-bg:#2a1f0a;--warn:#fbbf24;--warn-text:#fde68a;--warn-line:#92400e;
  --bad-bg:#2c1214;--bad:#fca5a5;--bad-text:#fecaca;--bad-line:#7f1d1d;
  --info-bg:#0f1f3a;--info:#93c5fd;--info-text:#bfdbfe;--info-line:#1e3a8a;
  --note-bg:#2a1f0a;--note-line:#92400e;--bubble-me:#2a2014;--danger:#ff7a6b;
  --menu-top:#1a4372;--menu-bottom:#122f52;
  --shadow:0 1px 2px rgba(0,0,0,.4);
}
.fa *,.fa *::before,.fa *::after{box-sizing:border-box;}
.fa p,.fa h1,.fa h2,.fa h3,.fa h4,.fa ul,.fa ol,.fa dl,.fa dd,.fa figure{margin:0;padding:0;}
.fa ul,.fa ol{list-style:none;}
.fa a{color:var(--ink-tint);}
.fa button,.fa input,.fa select,.fa textarea{font-family:inherit;}
.fa svg.i{width:20px;height:20px;flex:none;}
.fa svg.i-sm{width:16px;height:16px;flex:none;}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;}

/* ---------- Cascos ---------- */
.phone{width:390px;height:844px;display:flex;flex-direction:column;overflow:hidden;}
.top{flex:none;display:flex;align-items:center;gap:8px;height:56px;padding:0 8px 0 12px;background:var(--app-surface);box-shadow:var(--shadow);position:relative;z-index:2;}
.top .brand{display:flex;align-items:center;gap:8px;font-weight:800;color:var(--ink-tint);font-size:15px;text-decoration:none;}
.top .brand img{height:26px;width:auto;}
.top .spacer{flex:1;}
.scroll{flex:1;overflow:hidden;padding:20px 16px 24px;display:flex;flex-direction:column;gap:20px;}
.tabbar{flex:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));background:var(--app-surface);border-top:1px solid var(--app-line);padding:6px 4px 14px;}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;font-size:11px;font-weight:700;color:var(--app-faint);text-decoration:none;border-radius:10px;min-height:44px;justify-content:center;}
.tabbar a.on{color:var(--ink-tint);}
.tabbar a.on svg{color:var(--primary-600);}
.back{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--ink-tint);text-decoration:none;min-height:44px;padding-right:8px;}

/* Desktop: página fluida */
.desk{min-height:900px;display:flex;flex-wrap:wrap;background:var(--app-bg);}
.side{flex:1 1 248px;max-width:256px;background:linear-gradient(to bottom,var(--menu-top),var(--menu-bottom));color:#fff;display:flex;flex-direction:column;gap:2px;padding:18px 12px;}
.side .logo{padding:4px 10px 18px;display:flex;align-items:center;gap:8px;}
.side .logo img{height:30px;}
.side .grp{font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;opacity:.75;padding:14px 12px 4px;}
.side a{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:8px;color:#fff;text-decoration:none;font-size:14px;font-weight:600;}
.side a.on{background:rgba(255,255,255,.16);}
.side a .count{margin-left:auto;font-size:12px;font-weight:800;background:rgba(255,255,255,.2);border-radius:9999px;padding:0 8px;line-height:20px;}
.side .who{margin-top:auto;display:flex;align-items:center;gap:10px;padding:12px 10px 4px;border-top:1px solid rgba(255,255,255,.18);font-size:13px;}
.main{flex:999 1 560px;min-width:0;display:flex;flex-direction:column;}
.bar{flex:none;min-height:60px;display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:10px 24px;background:var(--app-surface);box-shadow:var(--shadow);}
.bar .crumb{font-size:13px;color:var(--app-faint);display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.bar .crumb b{color:var(--app-text);}
.bar .spacer{flex:1;}
.content{flex:1;padding:24px;display:flex;flex-direction:column;gap:24px;max-width:1280px;width:100%;}
.cols{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start;}
.cols>.grow{flex:999 1 520px;min-width:0;}
.cols>.aside{flex:1 1 320px;min-width:0;max-width:100%;}

/* ---------- Tipo ---------- */
.greet{font-size:24px;line-height:32px;font-weight:800;color:var(--ink-tint);}
.h2{font-size:20px;line-height:28px;font-weight:800;color:var(--ink-tint);}
.sec{font-size:13px;line-height:20px;font-weight:800;text-transform:uppercase;letter-spacing:.03em;color:var(--ink-tint);}
.lead{font-size:16px;line-height:24px;color:var(--app-text);}
.muted{color:var(--app-muted);} .faint{color:var(--app-faint);font-size:12px;line-height:16px;}
.num{font-variant-numeric:tabular-nums;}
.big{font-size:30px;line-height:36px;font-weight:800;color:var(--ink-tint);font-variant-numeric:tabular-nums;}
.mono{font-family:ui-monospace,"IBM Plex Mono",monospace;font-variant-numeric:tabular-nums;}

/* ---------- Superfícies ---------- */
.card{background:var(--card);border-radius:10px;padding:20px;}
.card.tight{padding:16px;}
.white{background:var(--app-surface);border-radius:10px;padding:16px;}
.line{border:1px solid var(--app-line);}
.stack{display:flex;flex-direction:column;gap:12px;}
.row{display:flex;align-items:center;gap:12px;}
.wrap{flex-wrap:wrap;}
.between{display:flex;align-items:center;justify-content:space-between;gap:12px;}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;}
.grid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;}
.divider{height:1px;background:var(--app-line);}
.list{background:var(--app-surface);border-radius:10px;overflow:hidden;}
.list>a,.list>div,.list>label{display:flex;align-items:center;gap:12px;padding:14px 16px;border-bottom:1px solid var(--app-line);text-decoration:none;color:inherit;}
.list>*:last-child{border-bottom:none;}

/* ---------- Botões ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid transparent;cursor:pointer;font-weight:700;font-size:16px;line-height:24px;
  padding:11px 22px;border-radius:9999px;text-decoration:none;min-height:48px;white-space:nowrap;}
.btn-primary{background:var(--cta);color:var(--on-cta);}
.btn-brand{background:var(--primary-500);color:var(--on-primary);}
.btn-outline{background:var(--app-surface);color:var(--ink-tint);border-color:var(--ink-tint);}
.btn-ghost{background:transparent;color:var(--ink-tint);}
.btn-danger{background:var(--danger);color:#fff;}
.btn-sm{font-size:14px;line-height:20px;padding:8px 14px;min-height:40px;}
.btn-block{display:flex;width:100%;}
.icon-btn{width:44px;height:44px;border:none;background:transparent;border-radius:9999px;display:inline-flex;align-items:center;justify-content:center;color:var(--ink-tint);cursor:pointer;position:relative;text-decoration:none;flex:none;}
.icon-btn:hover{background:var(--app-subtle);}
.badge{position:absolute;top:5px;right:4px;min-width:18px;height:18px;border-radius:9999px;background:var(--danger);color:#fff;font-size:11px;font-weight:800;line-height:18px;text-align:center;padding:0 5px;border:2px solid var(--app-surface);}
.link{font-size:14px;font-weight:700;color:var(--ink-tint);text-decoration:underline;}
.theme-btn{cursor:pointer;}
.theme-btn .moon{display:inline-flex;} .theme-btn .sun{display:none;}
.fa.dark .theme-btn .moon{display:none;}
.fa.dark .theme-btn .sun{display:inline-flex;}
.fa.dark .logo-light{display:none;}
.fa .logo-dark{display:none;}
.fa.dark .logo-dark{display:inline;}
.theme-in:focus-visible+svg{outline:2px solid var(--primary-600);border-radius:6px;}

/* ---------- Avatar ---------- */
.av{width:36px;height:36px;border-radius:9999px;background:var(--primary-200);color:var(--primary-900);display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;flex:none;}
.av.sm{width:28px;height:28px;font-size:11px;}
.av.lg{width:48px;height:48px;font-size:16px;}
.av.agent{background:#dbeafe;color:#1e3a8a;}
.av.bot{background:var(--primary-500);color:var(--on-primary);border-radius:10px;}
.fa.dark .av{color:var(--primary-100);}
.fa.dark .av.agent{background:#1e3a8a;color:#dbeafe;}

/* ---------- Pílulas ---------- */
.pill{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;padding:3px 10px;font-size:12px;line-height:16px;font-weight:700;white-space:nowrap;}
.pill.dot::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.pill-ok{background:var(--ok-bg);color:var(--ok);}
.pill-warn{background:var(--warn-bg);color:var(--warn);}
.pill-bad{background:var(--bad-bg);color:var(--bad);}
.pill-info{background:var(--info-bg);color:var(--info);}
.pill-muted{background:var(--app-subtle);color:var(--app-muted);}
.pill-brand{background:var(--primary-100);color:var(--ink-tint);}
/* Prioridade (sempre com a palavra) */
.prio{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;padding:3px 10px;font-size:12px;line-height:16px;font-weight:700;white-space:nowrap;}
.prio::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;}
.p1{background:var(--risk1);color:var(--on-dark);} .p2{background:var(--risk2);color:var(--on-light);} .p3{background:var(--risk3);color:var(--on-light);}
.p4{background:var(--risk4);color:var(--on-dark);} .p5{background:var(--risk5);color:var(--on-dark);}
.p0{background:var(--app-subtle);color:var(--app-muted);border:1px dashed var(--app-line-strong);}
/* Semáforo de SLA: forma + cor + texto */
.sla{display:inline-flex;align-items:center;gap:6px;font-size:12px;line-height:16px;font-weight:800;white-space:nowrap;font-variant-numeric:tabular-nums;border-radius:8px;padding:3px 8px;}
.sla svg{width:14px;height:14px;flex:none;}
.sla-ok{color:var(--ok);background:var(--ok-bg);} .sla-warn{color:var(--warn);background:var(--warn-bg);} .sla-late{color:var(--bad);background:var(--bad-bg);}
.sla-pause{color:var(--app-muted);background:var(--app-subtle);}
.tag{display:inline-flex;border-radius:4px;background:var(--app-subtle);color:var(--app-muted);font-size:11px;font-weight:700;padding:2px 6px;text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;}
.jira{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--info);text-decoration:none;border:1px solid var(--info-line);background:var(--info-bg);border-radius:6px;padding:2px 6px;}

/* ---------- Chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;}
.chip{display:inline-flex;align-items:center;gap:6px;border-radius:9999px;background:var(--app-surface);border:1px solid var(--app-line);padding:7px 14px;font-size:14px;font-weight:600;color:var(--app-text);cursor:pointer;text-decoration:none;min-height:36px;}
.chip.on,label.chip:has(input:checked){background:var(--primary-500);border-color:var(--primary-500);color:var(--on-primary);}
label.chip:has(input:focus-visible){outline:2px solid var(--primary-700);outline-offset:2px;}

/* ---------- Segmento e abas ---------- */
.seg{display:flex;background:var(--app-subtle);border-radius:9999px;padding:4px;gap:4px;}
.seg a,.seg label{flex:1;text-align:center;padding:8px 12px;border-radius:9999px;font-size:14px;font-weight:700;color:var(--app-muted);text-decoration:none;cursor:pointer;white-space:nowrap;}
.seg a.on,.seg label:has(input:checked){background:var(--app-surface);color:var(--ink-tint);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.tabs{display:flex;gap:4px;border-bottom:1px solid var(--app-line);overflow:hidden;}
.tabs a,.tabs label{padding:10px 14px;font-size:14px;font-weight:700;color:var(--app-muted);text-decoration:none;border-bottom:2px solid transparent;margin-bottom:-1px;cursor:pointer;white-space:nowrap;}
.tabs a.on,.tabs label:has(input:checked){color:var(--ink-tint);border-bottom-color:var(--primary-500);}

/* ---------- Campos ---------- */
.field{display:flex;flex-direction:column;gap:6px;}
.field label,.lbl{font-size:14px;font-weight:700;color:var(--ink-tint);}
.input,.field input,.field select,.field textarea{width:100%;height:48px;padding:0 14px;border:1px solid var(--app-line);border-radius:10px;background:var(--app-surface);color:var(--app-text);font-size:16px;}
.field textarea{height:auto;min-height:96px;padding:12px 14px;line-height:1.5;resize:none;}
.field.focus input{border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-200);}
.hint{font-size:12px;color:var(--app-faint);}
.check{display:flex;gap:12px;align-items:flex-start;font-size:14px;line-height:20px;color:var(--app-text);cursor:pointer;}
.check input{width:20px;height:20px;margin:0;accent-color:var(--primary-600);flex:none;}
/* Interruptor */
.switch{position:relative;display:inline-flex;width:44px;height:26px;flex:none;cursor:pointer;}
.switch input{position:absolute;opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.switch span{position:absolute;inset:0;border-radius:9999px;background:var(--app-line-strong);transition:background .15s;}
.switch span::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;box-shadow:0 1px 2px rgba(0,0,0,.2);transition:transform .15s;}
.switch:has(input:checked) span{background:var(--cta);}
.switch:has(input:checked) span::after{transform:translateX(18px);}
.switch:has(input:focus-visible) span{outline:2px solid var(--primary-700);outline-offset:2px;}

/* ---------- Conversa ---------- */
.thread{display:flex;flex-direction:column;gap:14px;}
.msg{display:flex;gap:10px;align-items:flex-end;max-width:100%;}
.msg .bubble{border-radius:16px;padding:10px 14px;font-size:15px;line-height:22px;max-width:86%;}
.msg .meta{font-size:11px;color:var(--app-faint);margin-top:4px;display:flex;gap:6px;align-items:center;flex-wrap:wrap;}
.msg.them .bubble{background:var(--app-surface);border:1px solid var(--app-line);border-bottom-left-radius:4px;color:var(--app-text);}
.msg.me{flex-direction:row-reverse;}
.msg.me .bubble{background:var(--bubble-me);border:1px solid var(--primary-200);border-bottom-right-radius:4px;color:var(--app-text);}
.msg.me .meta{justify-content:flex-end;}
.msg.note .bubble{background:var(--note-bg);border:1px dashed var(--note-line);color:var(--app-text);}
.msg.ref .bubble{background:var(--info-bg);border:1px solid var(--info-line);color:var(--app-text);}
.sys{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12px;color:var(--app-faint);text-align:center;}
.sys::before,.sys::after{content:"";height:1px;background:var(--app-line);flex:1;}
.sys b{color:var(--app-muted);}
.typing{display:inline-flex;gap:4px;padding:14px 16px;}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--app-faint);opacity:.5;}
.typing i:nth-child(2){opacity:.75;} .typing i:nth-child(3){opacity:1;}
.composer{background:var(--app-surface);border:1px solid var(--app-line);border-radius:20px;padding:12px 12px 10px 16px;box-shadow:0 4px 18px rgba(0,0,0,.05);display:flex;flex-direction:column;gap:10px;}
.composer.focus{border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-200);}
.composer textarea{border:none;outline:none;resize:none;background:transparent;color:var(--app-text);font-size:16px;line-height:24px;min-height:48px;width:100%;padding:0;}
.composer .tools{display:flex;align-items:center;gap:4px;}
.composer .send{margin-left:auto;width:44px;height:44px;border-radius:9999px;border:none;background:var(--cta);color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;}
.composer .send.off{background:var(--app-line-strong);}
.mode{display:flex;gap:4px;background:var(--app-subtle);border-radius:9999px;padding:3px;width:max-content;max-width:100%;}
.mode label,.mode a{padding:6px 12px;border-radius:9999px;font-size:13px;font-weight:700;color:var(--app-muted);cursor:pointer;text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:6px;}
.mode label:has(input:checked),.mode a.on{background:var(--app-surface);color:var(--ink-tint);box-shadow:0 1px 2px rgba(0,0,0,.08);}
.mode label.note:has(input:checked){background:var(--note-bg);color:var(--warn-text);}
.quick{display:flex;flex-wrap:wrap;gap:8px;}
.quick a,.quick label{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--primary-300);background:var(--app-surface);color:var(--ink-tint);border-radius:9999px;padding:8px 14px;font-size:14px;font-weight:700;text-decoration:none;cursor:pointer;min-height:40px;}
.quick label:has(input:checked){background:var(--primary-500);border-color:var(--primary-500);color:var(--on-primary);}

/* ---------- Linha de chamado ---------- */
.tk{display:flex;flex-direction:column;gap:8px;background:var(--app-surface);border-radius:10px;padding:14px 16px;text-decoration:none;color:inherit;position:relative;}
.tk:hover{box-shadow:0 4px 6px -1px rgba(0,0,0,.1),0 2px 4px -2px rgba(0,0,0,.1);}
.tk .t{font-size:15px;line-height:22px;font-weight:700;color:var(--app-text);}
.tk .n{font-size:12px;font-weight:700;color:var(--app-faint);font-variant-numeric:tabular-nums;}
.tk.unread .t::after{content:"";display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--primary-600);margin-left:8px;vertical-align:2px;}
.star{color:var(--app-line-strong);display:inline-flex;cursor:pointer;}
.star.on,label.star:has(input:checked){color:var(--primary-500);}
.star svg{fill:currentColor;}
.who{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--app-muted);}
.who b{color:var(--app-text);font-weight:700;}

/* ---------- Tabela ---------- */
.tbl-box{overflow-x:auto;background:var(--app-surface);border-radius:10px;}
.tbl{width:100%;border-collapse:collapse;font-size:14px;min-width:980px;}
.tbl th{text-align:left;font-size:11px;font-weight:800;color:var(--app-faint);text-transform:uppercase;letter-spacing:.04em;padding:10px 12px;border-bottom:1px solid var(--app-line);white-space:nowrap;}
.tbl td{padding:12px;border-bottom:1px solid var(--app-line);color:var(--app-text);vertical-align:middle;}
.tbl tr:last-child td{border-bottom:none;}
.tbl tr.hot td{background:var(--bad-bg);}
.tbl a{color:var(--app-text);font-weight:700;text-decoration:none;}

/* ---------- Indicadores ---------- */
.stat{background:var(--app-surface);border-radius:10px;padding:14px 16px;display:flex;flex-direction:column;gap:4px;text-decoration:none;color:inherit;border:1px solid transparent;}
.stat .v{font-size:28px;line-height:34px;font-weight:800;color:var(--app-text);font-variant-numeric:tabular-nums;}
.stat .l{font-size:12px;font-weight:700;color:var(--app-muted);display:flex;align-items:center;gap:6px;}
.stat.bad{border-color:var(--bad-line);} .stat.bad .v{color:var(--bad);}
.stat.warn{border-color:var(--warn-line);} .stat.warn .v{color:var(--warn);}
.stat.on{box-shadow:0 0 0 2px var(--primary-500);}
.bars{display:flex;flex-direction:column;gap:10px;}
.bars .b{display:grid;grid-template-columns:120px minmax(0,1fr) 40px;gap:10px;align-items:center;font-size:13px;}
.bars .track{height:10px;border-radius:9999px;background:var(--app-subtle);overflow:hidden;}
.bars .fill{height:100%;border-radius:9999px;background:var(--primary-500);}

/* ---------- Timeline ---------- */
.tl{display:flex;flex-direction:column;}
.tl li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:12px;position:relative;padding-bottom:18px;}
.tl li::before{content:"";position:absolute;left:13px;top:28px;bottom:0;width:2px;background:var(--app-line);}
.tl li:last-child::before{display:none;}
.tl .dot{width:28px;height:28px;border-radius:9999px;background:var(--app-subtle);color:var(--app-muted);display:flex;align-items:center;justify-content:center;}
.tl .dot svg{width:15px;height:15px;}
.tl .dot.brand{background:var(--primary-100);color:var(--ink-tint);}
.tl .dot.ok{background:var(--ok-bg);color:var(--ok);}
.tl .dot.warn{background:var(--warn-bg);color:var(--warn);}
.tl .dot.info{background:var(--info-bg);color:var(--info);}
.tl .what{font-size:14px;line-height:20px;color:var(--app-text);}
.tl .what b{font-weight:700;}
.tl .when{font-size:12px;color:var(--app-faint);margin-top:2px;}
.tl .chg{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap;margin-top:6px;font-size:12px;}
.tl .chg s{color:var(--app-faint);}

/* ---------- Alertas, aviso e toast ---------- */
.alert{display:flex;gap:10px;align-items:flex-start;border-radius:10px;padding:12px 14px;font-size:14px;line-height:20px;border:1px solid transparent;}
.alert-info{background:var(--info-bg);color:var(--info-text);border-color:var(--info-line);}
.alert-warn{background:var(--warn-bg);color:var(--warn-text);border-color:var(--warn-line);}
.alert-bad{background:var(--bad-bg);color:var(--bad-text);border-color:var(--bad-line);}
.alert-ok{background:var(--ok-bg);color:var(--ok-text);border-color:var(--ok-line);}
.toast{position:absolute;z-index:20;display:flex;gap:12px;align-items:flex-start;background:var(--navy);color:#fff;border-radius:14px;padding:12px 14px;box-shadow:0 12px 32px rgba(8,29,52,.35);font-size:14px;line-height:20px;text-decoration:none;}
.toast small{display:block;color:#c9d6e2;font-size:12px;}
.toast .bar-t{position:absolute;left:14px;right:14px;bottom:6px;height:3px;border-radius:9999px;background:rgba(255,255,255,.18);overflow:hidden;}
.toast .bar-t i{display:block;height:100%;width:62%;background:var(--primary-400);}
.imp{flex:none;display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap;padding:8px 16px;background:#b42318;color:#fff;font-size:13px;font-weight:700;}
.imp a{color:#fff;}
.demo{flex:none;text-align:center;padding:4px 12px;background:var(--demo);color:#1a1200;font-size:11px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}

/* ---------- Dado sensível ---------- */
.mask{display:inline-flex;align-items:center;gap:6px;border-radius:6px;background:var(--app-subtle);padding:1px 4px 1px 8px;font-family:ui-monospace,"IBM Plex Mono",monospace;font-size:13px;}
.mask label{cursor:pointer;font-family:"Inter",sans-serif;font-size:12px;font-weight:700;color:var(--ink-tint);padding:2px 6px;border-radius:4px;}
.mask .full,.mask .copy{display:none;}
.mask:has(input:checked) .part{display:none;}
.mask:has(input:checked) .full{display:inline;}
.mask:has(input:checked) .copy{display:inline-flex;}
.mask:has(input:checked) label.show{display:none;}
.mask .copy{align-items:center;gap:4px;border:none;background:var(--app-surface);color:var(--ink-tint);font-family:"Inter",sans-serif;font-size:12px;font-weight:700;border-radius:4px;padding:2px 6px;cursor:pointer;}
.mask-log{display:none;}
.rv:has(.mask input:checked) .mask-log{display:flex;}

/* ---------- Menus (details) ---------- */
details.menu{position:relative;}
details.menu>summary{list-style:none;cursor:pointer;}
details.menu>summary::-webkit-details-marker{display:none;}
details.menu .pop{position:absolute;right:0;top:calc(100% + 6px);z-index:30;background:var(--app-surface);border:1px solid var(--app-line);border-radius:14px;box-shadow:var(--shadow-pop);min-width:280px;padding:8px;display:flex;flex-direction:column;gap:2px;}
details.menu .pop a,details.menu .pop label{display:flex;align-items:center;gap:10px;padding:10px;border-radius:8px;color:var(--app-text);text-decoration:none;font-size:14px;cursor:pointer;}
details.menu .pop a:hover,details.menu .pop label:hover{background:var(--app-subtle);}
details.menu .pop .h{font-size:11px;font-weight:800;color:var(--app-faint);text-transform:uppercase;letter-spacing:.05em;padding:8px 10px 2px;}

/* Acordeão */
.acc details{background:var(--app-surface);border-radius:10px;padding:14px 16px;}
.acc details+details{margin-top:8px;}
.acc summary{cursor:pointer;font-weight:700;color:var(--ink-tint);font-size:14px;list-style:none;display:flex;justify-content:space-between;gap:12px;}
.acc summary::-webkit-details-marker{display:none;}
.acc summary::after{content:"+";font-weight:800;}
.acc details[open] summary::after{content:"–";}

/* Árvore */
.tree{display:flex;flex-direction:column;gap:2px;}
.tree a{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:8px;color:var(--app-text);text-decoration:none;font-size:14px;}
.tree a.on{background:var(--primary-100);color:var(--ink-tint);font-weight:700;}
.tree .d1{padding-left:28px;} .tree .d2{padding-left:48px;} .tree .d3{padding-left:68px;}

/* Modal */
.scrim{position:absolute;inset:0;background:rgba(8,29,52,.5);z-index:25;display:flex;align-items:flex-end;justify-content:center;}
.sheet{background:var(--app-surface);border-radius:20px 20px 0 0;padding:20px 16px 24px;width:100%;display:flex;flex-direction:column;gap:14px;box-shadow:0 -10px 30px rgba(0,0,0,.2);}
.sheet .grab{width:40px;height:4px;border-radius:9999px;background:var(--app-line-strong);align-self:center;}
.dialog{background:var(--app-surface);border-radius:16px;padding:24px;width:min(520px,92%);display:flex;flex-direction:column;gap:14px;box-shadow:0 20px 40px rgba(0,0,0,.3);margin:auto;}

/* Estrelas da avaliação */
.rate{display:flex;gap:4px;}
.rate label{cursor:pointer;color:var(--app-line-strong);display:inline-flex;padding:4px;}
.rate label:has(input:checked),.rate label:has(~ label input:checked){color:var(--primary-500);}
.rate label svg{fill:currentColor;width:36px;height:36px;}


/* Tema do sistema: escuro quando o SO pede e o usuário não fixou o claro. */
@media (prefers-color-scheme: dark){
  .fa.system{
  --primary-50:#1a1610;--primary-100:#2a2014;--primary-200:#4a3218;
  --ink-tint:#ffbe78;--app-bg:#0b1520;--app-surface:#101d2c;--app-subtle:#16273a;--app-text:#e9eef3;--app-muted:#aab8c4;
  --app-faint:#8a9aa8;--app-line:#26384a;--app-line-strong:#3a4d60;--card:#142436;
  --ok-bg:#0f2a1c;--ok:#4ade80;--ok-text:#bbf7d0;--ok-line:#166534;
  --warn-bg:#2a1f0a;--warn:#fbbf24;--warn-text:#fde68a;--warn-line:#92400e;
  --bad-bg:#2c1214;--bad:#fca5a5;--bad-text:#fecaca;--bad-line:#7f1d1d;
  --info-bg:#0f1f3a;--info:#93c5fd;--info-text:#bfdbfe;--info-line:#1e3a8a;
  --note-bg:#2a1f0a;--note-line:#92400e;--bubble-me:#2a2014;--danger:#ff7a6b;
  --menu-top:#1a4372;--menu-bottom:#122f52;
  --shadow:0 1px 2px rgba(0,0,0,.4);
  }
  .fa.system .theme-btn .moon{display:none;}
  .fa.system .theme-btn .sun{display:inline-flex;}
  .fa.system .logo-light{display:none;}
  .fa.system .logo-dark{display:inline;}
  .fa.system .av{color:var(--primary-100);}
  .fa.system .av.agent{background:#1e3a8a;color:#dbeafe;}
}