/* =========================================================
   HelpDesk DMarkInfo — tema sobre o Materialize CSS
   Paleta do site DMarkInfo (tema escuro padrão + tema claro)
   ========================================================= */

/* ---------- Fontes locais ---------- */
@font-face { font-family:"Space Grotesk"; font-weight:400; font-display:swap; src:url("../vendor/fonts/space-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-weight:500; font-display:swap; src:url("../vendor/fonts/space-grotesk-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-weight:600; font-display:swap; src:url("../vendor/fonts/space-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family:"Space Grotesk"; font-weight:700; font-display:swap; src:url("../vendor/fonts/space-grotesk-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Atkinson Hyperlegible"; font-weight:400; font-display:swap; src:url("../vendor/fonts/atkinson-hyperlegible-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family:"Atkinson Hyperlegible"; font-weight:400; font-style:italic; font-display:swap; src:url("../vendor/fonts/atkinson-hyperlegible-latin-400-italic.woff2") format("woff2"); }
@font-face { font-family:"Atkinson Hyperlegible"; font-weight:700; font-display:swap; src:url("../vendor/fonts/atkinson-hyperlegible-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family:"Atkinson Hyperlegible"; font-weight:700; font-style:italic; font-display:swap; src:url("../vendor/fonts/atkinson-hyperlegible-latin-700-italic.woff2") format("woff2"); }
@font-face { font-family:"Material Icons"; font-style:normal; font-weight:400; font-display:block; src:url("../vendor/fonts/material-icons.woff2") format("woff2"); }
.material-icons { font-family:"Material Icons"; font-weight:normal; font-style:normal; font-size:20px; line-height:1; letter-spacing:normal;
  text-transform:none; display:inline-block; white-space:nowrap; word-wrap:normal; direction:ltr; -webkit-font-smoothing:antialiased; vertical-align:middle; }

/* ---------- Tokens (paleta DMarkInfo) ---------- */
:root, :root[data-theme="dark"] {
  color-scheme: dark;
  --bg:#101214; --surface:#181A1D; --surface-2:#202225; --line:#2A2D31; --line-strong:#3A3E44;
  --text:#F0F0F0; --text-soft:#C8CACD; --muted:#A0A0A0;
  --navy:#0A2540; --blue:#3399FF; --link:#3399FF; --logo-blue:#3594C7; --logo-gray:#E8EAED;
  --btn-bg:#3399FF; --btn-text:#0A2540; --btn-bg-hover:#5CADFF;
  --ok:#00FF4C; --warn:#FFAB00; --danger:#E53935; --violet:#A64DFF; --pink:#FF4D79;
  --header-bg:rgba(16,18,20,.88); --shadow:0 18px 40px rgba(0,0,0,.35);
  --side-active:rgba(51,153,255,.12); --bar-2:#1d4f7f; --overlay:rgba(0,0,0,.6);
}
:root[data-theme="light"] {
  color-scheme: light;
  --bg:#F5F7FA; --surface:#FFFFFF; --surface-2:#EDF1F6; --line:#DCE2EA; --line-strong:#C3CCD8;
  --text:#14181D; --text-soft:#2E343B; --muted:#595A5B;
  --navy:#0A2540; --blue:#3399FF; --link:#0B66C3; --logo-blue:#3594C7; --logo-gray:#595A5B;
  --btn-bg:#0A2540; --btn-text:#FFFFFF; --btn-bg-hover:#123A63;
  --ok:#0E9F45; --warn:#C98400; --danger:#D32F2F; --violet:#7B2FD0; --pink:#D81B4F;
  --header-bg:rgba(245,247,250,.9); --shadow:0 18px 40px rgba(10,37,64,.10);
  --side-active:rgba(11,102,195,.10); --bar-2:#9cc3ea; --overlay:rgba(10,37,64,.45);
}
:root { --font-display:"Space Grotesk","Segoe UI",system-ui,sans-serif; --font-body:"Atkinson Hyperlegible","Segoe UI",system-ui,sans-serif;
  --font-code:ui-monospace,"Cascadia Code",Consolas,monospace; --radius:1rem; --radius-sm:.6rem; --top-h:64px; --side-w:248px; }

/* ---------- Base (sobrepõe o Materialize) ---------- */
*,*::before,*::after { box-sizing:border-box; }
html { font-size:15px; }
html,body { background:var(--bg); color:var(--text); font-family:var(--font-body); line-height:1.55; margin:0; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,h5 { font-family:var(--font-display); margin:0; line-height:1.15; color:var(--text); font-weight:600; }
p { margin:0; }
a { color:var(--link); text-decoration:none; }
a:hover { text-decoration:underline; text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--blue); outline-offset:2px; border-radius:4px; }
code,pre { font-family:var(--font-code); }
hr { border:0; border-top:1px solid var(--line); margin:16px 0; }
.muted { color:var(--muted); } .small { font-size:13px; } .tiny { font-size:12px; }
.text-ok { color:var(--ok); } .text-warn { color:var(--warn); } .text-danger { color:var(--danger); }
.hide { display:none !important; }
.sr-only { position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip-link { position:absolute; left:1rem; top:-4rem; z-index:999; padding:.6rem 1rem; border-radius:var(--radius-sm); background:var(--btn-bg); color:var(--btn-text); }
.skip-link:focus { top:1rem; }
::-webkit-scrollbar { width:8px; height:8px; } ::-webkit-scrollbar-track { background:var(--bg); }
::-webkit-scrollbar-thumb { background:var(--surface-2); border-radius:10px; border:2px solid var(--bg); }
.flex { display:flex; align-items:center; gap:10px; } .flex-wrap { flex-wrap:wrap; } .grow { flex:1; min-width:0; }
.ml-auto { margin-left:auto; } .mt-1 { margin-top:8px; } .mt-2 { margin-top:16px; } .mt-3 { margin-top:24px; } .mb-1 { margin-bottom:8px; } .mb-2 { margin-bottom:16px; }

/* ---------- Topbar ---------- */
.topbar { position:sticky; top:0; z-index:60; height:var(--top-h); display:flex; align-items:center; gap:14px; padding:0 20px;
  background:var(--header-bg); border-bottom:1px solid var(--line); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); }
.brand { display:flex; align-items:center; gap:10px; width:calc(var(--side-w) - 20px); color:var(--text); flex:none; }
.brand:hover { text-decoration:none; }
.brand svg { width:34px; height:34px; flex:none; }
.brand b { font-family:var(--font-display); font-size:18px; letter-spacing:-.01em; display:block; line-height:1.1; }
.brand small { display:block; font-size:11px; color:var(--muted); letter-spacing:.08em; text-transform:uppercase; }
.pinwheel .petal { fill:var(--logo-blue); } .pinwheel .petal-gray { fill:var(--logo-gray); }
.search { flex:1; max-width:520px; display:flex; align-items:center; gap:8px; height:40px; padding:0 14px; border-radius:999px;
  background:var(--surface); border:1px solid var(--line); color:var(--muted); }
.search input.browser-default { flex:1; background:transparent; border:0; outline:0; color:var(--text); font:inherit; font-size:14px; height:38px; min-width:0; }
.search kbd { font-size:11px; padding:1px 6px; border-radius:6px; border:1px solid var(--line-strong); color:var(--muted); font-family:var(--font-body); }
.top-actions { margin-left:auto; display:flex; align-items:center; gap:10px; }
.icon-btn { position:relative; width:40px; height:40px; border-radius:50%; border:1px solid var(--line-strong); display:inline-flex; align-items:center;
  justify-content:center; color:var(--text); background:transparent; cursor:pointer; flex:none; padding:0; }
.icon-btn:hover { border-color:var(--blue); background:var(--surface); text-decoration:none; }
.icon-btn.plain { border-color:transparent; }
.icon-btn.sm { width:32px; height:32px; } .icon-btn.sm .material-icons { font-size:18px; }
.badge-count { position:absolute; top:-3px; right:-3px; min-width:18px; height:18px; padding:0 5px; border-radius:999px; background:var(--danger); color:#fff;
  font-size:11px; line-height:18px; text-align:center; font-weight:700; border:2px solid var(--bg); }
.menu-toggle { display:none; }
.user-chip { display:flex; align-items:center; gap:10px; padding:2px 4px 2px 2px; border-radius:999px; color:var(--text); cursor:pointer; background:transparent; border:0; font:inherit; }
.user-chip:hover { background:var(--surface); text-decoration:none; }
.user-chip .who-text { font-size:13px; line-height:1.2; text-align:left; } .user-chip .who-text small { display:block; color:var(--muted); font-size:11px; }
.avatar { width:38px; height:38px; border-radius:50%; background:var(--navy); color:#fff; display:inline-flex; align-items:center; justify-content:center;
  font-family:var(--font-display); font-weight:600; font-size:14px; box-shadow:0 0 0 2px var(--bg),0 0 0 3px var(--logo-blue); flex:none; }
.avatar.sm { width:30px; height:30px; font-size:12px; box-shadow:none; }
.avatar.xs { width:24px; height:24px; font-size:10px; box-shadow:none; }

/* Dropdown (usuário, notificações) */
.dropdown-content { background:var(--surface) !important; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow) !important; min-width:220px; }
.dropdown-content li { min-height:auto; }
.dropdown-content li > a, .dropdown-content li > button { color:var(--text) !important; font-size:14px !important; padding:10px 16px !important; display:flex !important;
  align-items:center; gap:10px; width:100%; background:none; border:0; font-family:var(--font-body); cursor:pointer; line-height:1.3; text-align:left; }
.dropdown-content li > a > i, .dropdown-content li > button > i { margin:0 !important; color:var(--muted); height:auto !important; line-height:1 !important; }
.dropdown-content li:hover, .dropdown-content li.active { background:var(--surface-2) !important; }
.dropdown-content li.divider { background:var(--line); min-height:1px; height:1px; }
.notif-panel { width:360px; max-width:92vw; }
.notif-panel .head { display:flex; align-items:center; padding:12px 16px; border-bottom:1px solid var(--line); font-family:var(--font-display); font-weight:600; }
.notif-item { display:block; padding:10px 16px; border-bottom:1px solid var(--line); color:var(--text); font-size:13.5px; }
.notif-item:hover { background:var(--surface-2); text-decoration:none; }
.notif-item.unread { box-shadow:inset 3px 0 0 var(--blue); }
.notif-item small { display:block; color:var(--muted); font-size:12px; margin-top:2px; }

/* ---------- Layout ---------- */
.shell { display:grid; grid-template-columns:var(--side-w) minmax(0,1fr); min-height:calc(100vh - var(--top-h)); }
.sidebar { border-right:1px solid var(--line); background:var(--surface); padding:14px 12px; display:flex; flex-direction:column; gap:2px;
  position:sticky; top:var(--top-h); height:calc(100vh - var(--top-h)); overflow-y:auto; }
.side-label { font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:14px 12px 6px; }
.side-link { display:flex; align-items:center; gap:12px; padding:9px 12px; border-radius:var(--radius-sm); color:var(--text-soft);
  font-family:var(--font-display); font-weight:500; font-size:14px; }
.side-link:hover { background:var(--surface-2); text-decoration:none; color:var(--text); }
.side-link .material-icons { color:var(--muted); }
.side-link.active { background:var(--side-active); color:var(--text); box-shadow:inset 3px 0 0 var(--blue); }
.side-link.active .material-icons { color:var(--blue); }
.side-link .count { margin-left:auto; font-size:12px; padding:0 8px; border-radius:999px; background:var(--surface-2); color:var(--text-soft); font-family:var(--font-body); }
.side-link .count.alert { background:rgba(229,57,53,.18); color:var(--danger); }
.side-user { display:none; }
.side-foot { margin-top:auto; padding:14px 12px 4px; border-top:1px solid var(--line); font-size:12px; color:var(--muted); }
.side-overlay { display:none; }
.main { padding:26px 30px 48px; min-width:0; }
.page-head { display:flex; align-items:flex-end; gap:16px; margin-bottom:22px; flex-wrap:wrap; }
.crumbs { font-size:13px; color:var(--muted); margin-bottom:6px; } .crumbs a { color:var(--muted); }
.page-head h1 { font-size:28px; font-weight:700; letter-spacing:-.02em; }
.page-head p { color:var(--muted); margin-top:4px; }
.page-head .actions { margin-left:auto; display:flex; gap:8px; flex-wrap:wrap; }

/* ---------- Botões ---------- */
.btnx { display:inline-flex; align-items:center; justify-content:center; gap:8px; height:40px; padding:0 18px; border-radius:999px; border:1px solid transparent;
  font-family:var(--font-display); font-weight:600; font-size:14px; cursor:pointer; white-space:nowrap; text-decoration:none !important; line-height:1;
  transition:background-color .2s, border-color .2s, color .2s; background:transparent; color:var(--text); }
.btnx.primary { background:var(--btn-bg); color:var(--btn-text); } .btnx.primary:hover { background:var(--btn-bg-hover); }
.btnx.outline { border-color:var(--line-strong); color:var(--text); } .btnx.outline:hover { border-color:var(--blue); }
.btnx.danger { border-color:rgba(229,57,53,.5); color:var(--danger); } .btnx.danger:hover { background:rgba(229,57,53,.1); }
.btnx.ghost { color:var(--text-soft); } .btnx.ghost:hover { background:var(--surface-2); }
.btnx.sm { height:34px; padding:0 14px; font-size:13px; } .btnx.xs { height:28px; padding:0 10px; font-size:12px; }
.btnx.block { width:100%; height:46px; font-size:15px; }
.btnx .material-icons { font-size:18px; }
.btnx[disabled] { opacity:.5; cursor:not-allowed; }
form.inline { display:inline; }

/* ---------- Cards ---------- */
.cardx { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; min-width:0; }
.cardx.flush { padding:0; overflow:hidden; }
.cardx h3 { font-size:16px; font-weight:600; display:flex; align-items:center; gap:8px; }
.cardx h3 .material-icons { color:var(--logo-blue); }
.card-head { display:flex; align-items:center; gap:10px; margin-bottom:14px; flex-wrap:wrap; }
.cardx.flush .card-head { padding:16px 20px 0; }
.card-head .more { margin-left:auto; font-size:13px; }
.grid-kpi { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.kpi { position:relative; overflow:hidden; display:block; color:var(--text); }
a.kpi:hover { text-decoration:none; border-color:var(--line-strong); }
.kpi .lbl { font-size:13px; color:var(--muted); }
.kpi .val { font-family:var(--font-display); font-size:32px; font-weight:700; letter-spacing:-.02em; margin-top:6px; }
.kpi .delta { font-size:12px; color:var(--muted); }
.kpi .ico { position:absolute; right:14px; top:14px; width:36px; height:36px; border-radius:10px; display:flex; align-items:center; justify-content:center; }
.k1 .ico { background:rgba(51,153,255,.14); color:var(--blue); } .k2 .ico { background:rgba(166,77,255,.14); color:var(--violet); }
.k3 .ico { background:rgba(255,171,0,.14); color:var(--warn); } .k4 .ico { background:rgba(229,57,53,.14); color:var(--danger); }
.k5 .ico { background:rgba(0,255,76,.12); color:var(--ok); }
.kpi.k4.is-alert { border-color:rgba(229,57,53,.45); } .kpi.k4.is-alert .val { color:var(--danger); }
.grid-2 { display:grid; grid-template-columns:minmax(0,1.7fr) minmax(0,1fr); gap:14px; margin-bottom:16px; }
.grid-2e { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.grid-3 { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.grid-4 { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.stack { display:flex; flex-direction:column; gap:14px; min-width:0; }

/* Gráfico de barras */
.bars { display:flex; align-items:flex-end; gap:6px; height:170px; padding-top:6px; border-bottom:1px solid var(--line); }
.bars .col { flex:1; display:flex; align-items:flex-end; gap:2px; height:100%; min-width:0; }
.bars .a { flex:1; background:var(--blue); border-radius:4px 4px 0 0; min-height:2px; }
.bars .b { flex:1; background:var(--bar-2); border-radius:4px 4px 0 0; min-height:2px; }
.bars-x { display:flex; gap:6px; font-size:11px; color:var(--muted); margin-top:6px; } .bars-x span { flex:1; text-align:center; min-width:0; overflow:hidden; }
.legend { display:flex; gap:14px; font-size:12px; color:var(--muted); margin-left:auto; }
.legend i { display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px; }
.donut-wrap { display:flex; align-items:center; gap:18px; flex-wrap:wrap; }
.donut { width:150px; height:150px; border-radius:50%; flex:none; display:flex; align-items:center; justify-content:center; }
.donut > div { width:112px; height:112px; border-radius:50%; background:var(--surface); display:flex; flex-direction:column; align-items:center; justify-content:center; }
.donut b { font-family:var(--font-display); font-size:30px; } .donut small { color:var(--muted); font-size:12px; }
.sla-list { flex:1; display:flex; flex-direction:column; gap:12px; font-size:13px; min-width:160px; }
.sla-row { display:flex; justify-content:space-between; gap:8px; } .sla-row span { color:var(--muted); }
.meter { height:6px; border-radius:6px; background:var(--surface-2); overflow:hidden; margin-top:4px; }
.meter i { display:block; height:100%; background:var(--blue); border-radius:6px; }
.mini-list { display:flex; flex-direction:column; }
.mini-list > div, .mini-list > a { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; color:var(--text); }
.mini-list > *:last-child { border-bottom:none; }
.mini-list .n { margin-left:auto; font-family:var(--font-display); font-weight:600; }
.mini-list .meter { flex:1; max-width:120px; margin:0 0 0 auto; }

/* ---------- Tabelas ---------- */
.table-wrap { overflow-x:auto; }
table.tk { width:100%; border-collapse:collapse; font-size:13.5px; }
table.tk th { text-align:left; font-weight:400; color:var(--muted); font-size:12px; text-transform:uppercase; letter-spacing:.06em; padding:10px; border-bottom:1px solid var(--line); white-space:nowrap; }
table.tk td, table.tk th { display:table-cell; border-radius:0; }
table.tk td { padding:11px 10px; border-bottom:1px solid var(--line); vertical-align:middle; color:var(--text-soft); }
table.tk tbody tr { border-bottom:none; }
table.tk tbody tr:hover td { background:var(--surface-2); }
table.tk tr:last-child td { border-bottom:none; }
table.tk td.id { font-family:var(--font-display); font-weight:600; white-space:nowrap; }
table.tk td.title b, table.tk td.title a.t { color:var(--text); font-weight:700; display:block; }
table.tk td.title small { color:var(--muted); }
table.tk .nowrap { white-space:nowrap; }
table.tk th:first-child, table.tk td:first-child { padding-left:20px; } table.tk th:last-child, table.tk td:last-child { padding-right:20px; }
.empty { text-align:center; color:var(--muted); padding:36px 16px; }
.empty .material-icons { font-size:40px; color:var(--line-strong); display:block; margin:0 auto 8px; }

/* Chips e selos */
.chip-s { display:inline-flex; align-items:center; gap:6px; padding:2px 10px; border-radius:999px; font-size:12px; white-space:nowrap; border:1px solid var(--line-strong); color:var(--text-soft); line-height:1.6; }
.chip-s .dot { width:8px; height:8px; border-radius:50%; background:var(--muted); }
.chip-s.on { background:var(--text); color:var(--bg); border-color:var(--text); }
a.chip-s:hover { text-decoration:none; border-color:var(--blue); }
.dot.st-aberto { background:var(--blue); } .dot.st-em_atendimento { background:var(--violet); } .dot.st-pendente { background:var(--warn); }
.dot.st-resolvido { background:var(--ok); } .dot.st-fechado { background:var(--muted); }
.prio { display:inline-block; padding:2px 9px; border-radius:6px; font-size:12px; font-weight:700; white-space:nowrap; }
.prio.critica { background:rgba(229,57,53,.16); color:var(--danger); } .prio.alta { background:rgba(255,77,121,.14); color:var(--pink); }
.prio.media { background:rgba(255,171,0,.14); color:var(--warn); } .prio.baixa { background:rgba(51,153,255,.14); color:var(--link); }
.tag { display:inline-block; padding:1px 8px; border-radius:6px; font-size:12px; background:var(--surface-2); color:var(--text-soft); white-space:nowrap; }
.tag.ok { background:rgba(0,255,76,.1); color:var(--ok); } .tag.warn { background:rgba(255,171,0,.12); color:var(--warn); }
.tag.danger { background:rgba(229,57,53,.14); color:var(--danger); } .tag.blue { background:rgba(51,153,255,.14); color:var(--link); }
.sla { font-size:12.5px; white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.sla .material-icons { font-size:16px; }
.sla.ok { color:var(--ok); } .sla.risk { color:var(--warn); } .sla.late { color:var(--danger); font-weight:700; } .sla.paused { color:var(--muted); }
.who { display:flex; align-items:center; gap:8px; white-space:nowrap; }

/* ---------- Formulários ---------- */
.form-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px 16px; }
.form-grid .full { grid-column:1 / -1; }
.field { display:flex; flex-direction:column; gap:6px; min-width:0; }
.field > label { font-size:13px; color:var(--text-soft); font-family:var(--font-display); font-weight:500; position:static; transform:none; }
.field .hint { font-size:12px; color:var(--muted); }
.field .err { font-size:12px; color:var(--danger); }
input.browser-default, select.browser-default, textarea.browser-default {
  width:100%; min-height:44px; padding:10px 14px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--surface);
  color:var(--text); font:inherit; font-size:14.5px; outline:none; box-shadow:none; margin:0; transition:border-color .15s, box-shadow .15s; }
textarea.browser-default { min-height:120px; resize:vertical; line-height:1.5; }
select.browser-default { appearance:none; -webkit-appearance:none; padding-right:36px; cursor:pointer;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size:5px 5px; background-repeat:no-repeat; }
select.browser-default option { background:var(--surface); color:var(--text); }
input.browser-default:focus, select.browser-default:focus, textarea.browser-default:focus { border-color:var(--blue); box-shadow:0 0 0 3px rgba(51,153,255,.18); }
input.browser-default.invalid, select.browser-default.invalid, textarea.browser-default.invalid { border-color:var(--danger); }
input[type=file].browser-default { padding:9px 12px; }
input[type=file]::file-selector-button { border:1px solid var(--line-strong); background:var(--surface-2); color:var(--text); border-radius:999px; padding:4px 12px; margin-right:10px; font:inherit; font-size:13px; cursor:pointer; }
.input-icon { position:relative; } .input-icon > .material-icons { position:absolute; left:13px; top:12px; color:var(--muted); pointer-events:none; }
.input-icon > input.browser-default { padding-left:42px; }
.input-icon > .toggle-pass { position:absolute; right:6px; top:6px; }
.check { display:inline-flex; align-items:center; gap:8px; color:var(--text-soft); font-size:14px; cursor:pointer; user-select:none; }
.check input { position:static !important; opacity:1 !important; pointer-events:auto !important; width:18px; height:18px; accent-color:var(--blue); margin:0; }
.form-actions { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; flex-wrap:wrap; }
.filters { display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end; margin-bottom:14px; }
.filters .field { min-width:150px; flex:1; } .filters .field.wide { flex:2; min-width:220px; }
.filters input.browser-default, .filters select.browser-default { min-height:38px; padding-top:7px; padding-bottom:7px; font-size:13.5px; }
.filters select.browser-default { background-position:calc(100% - 18px) 16px, calc(100% - 13px) 16px; }
.seg { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }

/* Alertas */
.alert { display:flex; gap:10px; align-items:flex-start; padding:11px 14px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); background:var(--surface);
  color:var(--text-soft); font-size:13.5px; margin-bottom:16px; }
.alert .material-icons { font-size:19px; }
.alert.error { border-color:rgba(229,57,53,.45); background:rgba(229,57,53,.08); } .alert.error .material-icons { color:var(--danger); }
.alert.success { border-color:rgba(0,200,80,.4); background:rgba(0,200,80,.07); } .alert.success .material-icons { color:var(--ok); }
.alert.warning { border-color:rgba(255,171,0,.45); background:rgba(255,171,0,.07); } .alert.warning .material-icons { color:var(--warn); }
.alert.info .material-icons { color:var(--blue); }

/* Paginação */
.pager { display:flex; align-items:center; gap:6px; justify-content:space-between; padding:12px 20px; border-top:1px solid var(--line); font-size:13px; color:var(--muted); flex-wrap:wrap; }
.pager .pages { display:flex; gap:4px; }
.pager a, .pager span.cur { min-width:32px; height:32px; padding:0 8px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; border:1px solid var(--line); color:var(--text-soft); }
.pager span.cur { background:var(--btn-bg); color:var(--btn-text); border-color:transparent; }
.pager a:hover { border-color:var(--blue); text-decoration:none; }

/* ---------- Detalhe do chamado ---------- */
.detail { display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:16px; align-items:start; }
.tabs-x { display:flex; gap:22px; border-bottom:1px solid var(--line); margin:4px 0 16px; overflow-x:auto; }
.tabs-x a { padding:10px 0; color:var(--muted); font-family:var(--font-display); font-weight:500; font-size:14px; white-space:nowrap; cursor:pointer; }
.tabs-x a:hover { text-decoration:none; color:var(--text); }
.tabs-x a.on { color:var(--text); box-shadow:inset 0 -2px 0 var(--blue); }
.tab-pane { display:none; } .tab-pane.on { display:block; }
.timeline { display:flex; flex-direction:column; gap:14px; }
.msg { display:grid; grid-template-columns:36px minmax(0,1fr); gap:12px; }
.msg .bubble { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:12px 16px; min-width:0; }
.msg.tech .bubble { border-color:rgba(51,153,255,.45); }
.msg.internal .bubble { background:rgba(255,171,0,.07); border-style:dashed; border-color:rgba(255,171,0,.55); }
.msg .meta { font-size:12px; color:var(--muted); margin-bottom:4px; display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
.msg .meta b { color:var(--text); font-size:13px; }
.msg .body { color:var(--text-soft); font-size:14px; overflow-wrap:anywhere; }
.event { font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:8px; padding-left:48px; }
.event .material-icons { font-size:16px; }
.event b { color:var(--text-soft); font-weight:700; }
.attach { display:inline-flex; align-items:center; gap:6px; margin:8px 6px 0 0; padding:5px 10px; border-radius:8px; background:var(--surface-2); font-size:12.5px; color:var(--text-soft); }
.attach:hover { text-decoration:none; color:var(--text); }
.reply .box { border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); }
.reply .box textarea.browser-default { border:0; min-height:90px; background:transparent; box-shadow:none !important; }
.reply .bar { display:flex; align-items:center; gap:8px; padding:8px 10px; border-top:1px solid var(--line); flex-wrap:wrap; }
.reply .files { font-size:12px; color:var(--muted); }
.props { display:flex; flex-direction:column; }
.props > div { display:flex; justify-content:space-between; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); font-size:13.5px; }
.props > div:last-child { border-bottom:none; }
.props span { color:var(--muted); } .props b { text-align:right; }
.sla-box { padding:14px; border-radius:var(--radius-sm); border:1px solid var(--line-strong); margin-bottom:12px; }
.sla-box.ok { background:rgba(0,200,80,.06); border-color:rgba(0,200,80,.35); } .sla-box.risk { background:rgba(255,171,0,.08); border-color:rgba(255,171,0,.45); }
.sla-box.late { background:rgba(229,57,53,.08); border-color:rgba(229,57,53,.45); } .sla-box.paused { background:var(--surface-2); }
.sla-box .t { font-family:var(--font-display); font-size:24px; font-weight:700; }
.sla-box.ok .t { color:var(--ok); } .sla-box.risk .t { color:var(--warn); } .sla-box.late .t { color:var(--danger); } .sla-box.paused .t { color:var(--muted); }
.sla-box.ok .meter i { background:var(--ok); } .sla-box.risk .meter i { background:var(--warn); } .sla-box.late .meter i { background:var(--danger); }
.stars { display:flex; gap:4px; flex-direction:row-reverse; justify-content:flex-end; }
.stars input { display:none; }
.stars label { font-size:30px; color:var(--line-strong); cursor:pointer; line-height:1; }
.stars input:checked ~ label, .stars label:hover, .stars label:hover ~ label { color:var(--warn); }
.rating-static { color:var(--warn); letter-spacing:2px; }

/* Base de conhecimento */
.kb-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.kb-card { display:flex; flex-direction:column; gap:8px; color:var(--text); }
.kb-card:hover { text-decoration:none; border-color:var(--line-strong); box-shadow:var(--shadow); }
.kb-card p { color:var(--muted); font-size:13.5px; }
.article { max-width:52rem; }
.article .content { color:var(--text-soft); font-size:15.5px; line-height:1.7; }
.article .content p, .article .content ul, .article .content ol { margin:0 0 1em; }
.article .content h2, .article .content h3 { margin:1.4em 0 .6em; }
.article .content code { padding:.1em .4em; border-radius:6px; background:var(--surface-2); font-size:.9em; }
.article .content pre { padding:12px 14px; border-radius:var(--radius-sm); background:var(--surface-2); overflow:auto; }
.article .content li::marker { color:var(--logo-blue); }
.kb-hero { background:var(--navy); color:#fff; border-radius:var(--radius); padding:28px; margin-bottom:16px; position:relative; overflow:hidden; }
.kb-hero h2 { color:#fff; font-size:24px; } .kb-hero p { color:#C8D3DF; margin:6px 0 16px; }
.kb-hero .search { max-width:640px; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.2); }
.kb-hero .search input.browser-default { color:#fff; }
.kb-hero .search input::placeholder { color:#9FB3C8; }
.kb-hero svg { position:absolute; right:-60px; bottom:-80px; width:260px; opacity:.18; }
.suggest-box { border:1px dashed var(--line-strong); border-radius:var(--radius-sm); padding:12px 14px; }

/* Portal do solicitante */
.portal-actions { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; margin-bottom:16px; }
.portal-actions a { display:flex; gap:14px; align-items:center; color:var(--text); }
.portal-actions a:hover { text-decoration:none; border-color:var(--blue); }
.portal-actions .ic { width:46px; height:46px; border-radius:12px; display:flex; align-items:center; justify-content:center; background:rgba(51,153,255,.14); color:var(--blue); flex:none; }

/* Mobile: lista em cards */
.ticket-cards { display:none; flex-direction:column; gap:10px; padding:12px; }
.ticket-card { display:block; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; color:var(--text); }
.ticket-card:hover { text-decoration:none; }
.ticket-card .top { display:flex; gap:8px; align-items:center; margin-bottom:6px; }
.ticket-card b { display:block; line-height:1.3; }
.ticket-card .bottom { display:flex; align-items:center; gap:8px; margin-top:8px; font-size:12.5px; color:var(--muted); flex-wrap:wrap; }

/* Modal (Materialize) */
.modal { background:var(--surface); color:var(--text); border:1px solid var(--line); border-radius:var(--radius); max-width:560px; box-shadow:var(--shadow); }
.modal .modal-content { padding:22px 24px; } .modal h4 { font-size:20px; margin-bottom:12px; }
.modal .modal-footer { background:transparent; padding:10px 20px 18px; height:auto; display:flex; justify-content:flex-end; gap:8px; }
.modal-overlay { background:var(--overlay) !important; }

/* Toast (Materialize) */
#toast-container { top:auto !important; bottom:20px; right:20px; }
.toast { background:var(--surface-2) !important; color:var(--text) !important; border:1px solid var(--line-strong); border-radius:var(--radius-sm) !important;
  box-shadow:var(--shadow) !important; font-size:14px; min-height:44px; gap:10px; }
.toast.success { border-color:rgba(0,200,80,.5); } .toast.error { border-color:rgba(229,57,53,.55); } .toast.warning { border-color:rgba(255,171,0,.55); }
.toast .material-icons { font-size:19px; }
.toast.success .material-icons { color:var(--ok); } .toast.error .material-icons { color:var(--danger); } .toast.warning .material-icons { color:var(--warn); }

/* ---------- Login ---------- */
.login { min-height:100vh; display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); }
.brand-pane { position:relative; overflow:hidden; background:#0A2540; color:#F0F0F0; padding:48px 56px; display:flex; flex-direction:column; }
.brand-pane .mark { position:absolute; right:-140px; bottom:-140px; width:520px; opacity:.22; }
.brand-pane .logo { display:flex; align-items:center; gap:12px; } .brand-pane .logo svg { width:42px; height:42px; }
.brand-pane .logo b { font-family:var(--font-display); font-size:22px; color:#fff; display:block; line-height:1.1; }
.brand-pane .logo small { display:block; font-size:11px; letter-spacing:.1em; color:#9FB3C8; text-transform:uppercase; }
.brand-pane h2 { margin-top:auto; font-size:44px; font-weight:700; letter-spacing:-.03em; color:#fff; max-width:14ch; line-height:1.05; }
.brand-pane h2 span { color:#3399FF; }
.brand-pane .lead { color:#C8D3DF; max-width:30rem; margin:16px 0 28px; font-size:16px; }
.feat { display:flex; flex-direction:column; gap:12px; margin-bottom:auto; position:relative; z-index:1; }
.feat div { display:flex; align-items:center; gap:12px; color:#E2E8EF; font-size:15px; }
.feat i { width:36px; height:36px; border-radius:10px; background:rgba(51,153,255,.16); color:#5CADFF; display:inline-flex; align-items:center; justify-content:center; }
.brand-pane .foot { margin-top:40px; font-size:12px; color:#9FB3C8; position:relative; z-index:1; } .brand-pane .foot a { color:#9FB3C8; }
.form-pane { background:var(--bg); display:flex; align-items:center; justify-content:center; padding:40px 24px; position:relative; }
.form-pane .theme { position:absolute; top:22px; right:24px; }
.form-card { width:100%; max-width:400px; }
.form-card h1 { font-size:30px; font-weight:700; letter-spacing:-.02em; }
.form-card .sub { color:var(--muted); margin:6px 0 24px; }
.form-card .field { margin-bottom:16px; }
.form-card .row-between { display:flex; align-items:center; justify-content:space-between; font-size:13.5px; margin:4px 0 22px; gap:8px; flex-wrap:wrap; }
.sep { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:12px; margin:22px 0; }
.sep::before, .sep::after { content:""; flex:1; height:1px; background:var(--line); }
.center { text-align:center; }
.lgpd { margin-top:26px; font-size:12px; color:var(--muted); text-align:center; line-height:1.5; }
.m-logo { display:none; align-items:center; gap:10px; margin-bottom:28px; } .m-logo svg { width:38px; height:38px; } .m-logo b { font-family:var(--font-display); font-size:20px; }

/* Páginas de erro */
.error-page { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; text-align:center; }
.error-page .code { font-family:var(--font-display); font-size:88px; font-weight:700; color:var(--logo-blue); line-height:1; }

/* ---------- Responsivo ---------- */
@media (max-width:1200px) {
  .grid-kpi { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .grid-2 { grid-template-columns:1fr; }
  .detail { grid-template-columns:minmax(0,1fr) 290px; }
  .kb-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:992px) {
  .shell { grid-template-columns:1fr; }
  .menu-toggle { display:inline-flex; }
  .brand { width:auto; }
  .brand small { display:none; }
  .search { display:none; }
  .user-chip .who-text, .user-chip > .material-icons { display:none; }
  .top-new .label { display:none; } .top-new { width:40px; padding:0; }
  .sidebar { position:fixed; top:0; left:0; bottom:0; height:100vh; width:280px; z-index:90; transform:translateX(-100%); visibility:hidden;
    transition:transform .25s ease, visibility .25s; box-shadow:var(--shadow); }
  body.side-open .sidebar { transform:none; visibility:visible; }
  body.side-open .side-overlay { display:block; position:fixed; inset:0; background:var(--overlay); z-index:80; }
  .side-user { display:flex; align-items:center; gap:10px; padding:4px 10px 10px; }
  .side-user b { font-family:var(--font-display); display:block; } .side-user small { color:var(--muted); }
  .detail { grid-template-columns:1fr; }
  .grid-3, .grid-4, .portal-actions { grid-template-columns:1fr 1fr; }
  .login { grid-template-columns:1fr; } .brand-pane { display:none; } .m-logo { display:flex; }
  .form-pane { align-items:flex-start; padding-top:80px; }
}
@media (max-width:700px) {
  .topbar { padding:0 12px; gap:8px; }
  .main { padding:16px 14px 90px; }
  .page-head h1 { font-size:23px; }
  .page-head .actions { margin-left:0; width:100%; }
  .grid-kpi { grid-template-columns:1fr 1fr; gap:10px; }
  .kpi .val { font-size:26px; } .kpi .ico { display:none; }
  .grid-2e, .grid-3, .grid-4, .kb-grid, .portal-actions, .form-grid { grid-template-columns:1fr; }
  .responsive-table table.tk { display:none; }
  .responsive-table .ticket-cards { display:flex; }
  .filters .field { min-width:100%; }
  .bars-x span:nth-child(even) { visibility:hidden; }
  .msg { grid-template-columns:28px minmax(0,1fr); gap:8px; } .msg .avatar.sm { width:28px; height:28px; font-size:11px; }
  .event { padding-left:36px; }
  .fab { position:fixed; right:16px; bottom:20px; height:52px; box-shadow:var(--shadow); z-index:50; }
}
@media (min-width:701px) { .fab { display:none; } }
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation:none !important; transition:none !important; } }
@media print {
  .topbar, .sidebar, .reply, .page-head .actions, .fab { display:none !important; }
  .shell { display:block; } .main { padding:0; } body { background:#fff; color:#000; }
}

/* ---------- Ajustes finos ---------- */
@media (min-width:993px) { .shell { background:linear-gradient(to right, var(--surface) calc(var(--side-w) - 1px), var(--line) calc(var(--side-w) - 1px), var(--line) var(--side-w), transparent var(--side-w)); } }
.filters input.browser-default, .filters select.browser-default { height:40px; min-height:40px; padding-top:0; padding-bottom:0; }
.filters select.browser-default { background-position:calc(100% - 18px) 17px, calc(100% - 13px) 17px; }
.mb-1 { margin-bottom:12px; }
@media (max-width:700px) { .grid-kpi > :last-child:nth-child(odd) { grid-column:1 / -1; } }
.repeat-row input.browser-default, .repeat-row select.browser-default { height:40px; min-height:40px; padding-top:0; padding-bottom:0; }
.repeat-row select.browser-default { background-position:calc(100% - 18px) 17px, calc(100% - 13px) 17px; }