/* ============================================================
   DEV Control — tema escuro futurista. Fonte Calibri.
   Tokens da marca (governanca_benel) entram nos --accent* quando disponíveis.
   ============================================================ */

:root {
    /* Superfícies (Benel dark mode oficial) */
    --bg: #1A1A2E;
    --surface: #242438;
    --surface-2: #2E2E45;
    --surface-3: #363654;
    --border: #3A3A55;
    --border-soft: #2c2c44;

    /* Texto */
    --text: #F2F2F7;
    --text-strong: #FFFFFF;
    --muted: #9CA3AF;
    --muted-2: #6f6f8f;

    /* Acentos — azul de ação Benel (#2D63F5) + azul claro p/ brilho */
    --accent: #2D63F5;
    --accent-2: #7099F9;
    --accent-dark: #1E4AD9;
    --accent-soft: rgba(45, 99, 245, .16);
    --accent-border: rgba(45, 99, 245, .42);

    /* Semânticas Benel (verde #009b3a/#28C76F, amarelo #fedf00) */
    --success: #28C76F; --success-soft: rgba(40, 199, 111, .14);
    --warning: #FFB547; --warning-soft: rgba(255, 181, 71, .14);
    --danger:  #EA5455; --danger-soft:  rgba(234, 84, 85, .14);
    --info:    #4A7BF7; --info-soft:    rgba(74, 123, 247, .14);
    --orange:  #FF8A3D; --orange-soft:  rgba(255, 138, 61, .14);

    /* Aliases legados (mantêm inline styles das views funcionando) */
    --color-bg: var(--bg);
    --color-surface: var(--surface);
    --color-border: var(--border);
    --color-text: var(--text);
    --color-muted: var(--muted);
    --color-primary: var(--accent);
    --color-primary-dark: var(--accent-dark);
    --color-primary-soft: var(--accent-soft);
    --color-sidebar: #150649;
    --color-sidebar-text: #b8c4e6;
    --color-sidebar-active: var(--accent);

    --radius: 12px;
    --radius-sm: 8px;
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .35);
    --shadow: 0 12px 34px rgba(0, 0, 0, .45);
    --ring: 0 0 0 3px var(--accent-soft);
    --sidebar-w: 250px;
    --sidebar-w-collapsed: 68px;
    --topbar-h: 62px;
    --font: 'Calibri', 'Carlito', 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
    --mono: ui-monospace, 'Cascadia Code', 'Consolas', monospace;
}

* { box-sizing: border-box; }

html, body {
    margin: 0; padding: 0;
    font-family: var(--font);
    background: var(--bg);
    color: var(--text);
    font-size: 14.5px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}

/* Fundo com leve textura futurista (grid + glow), discreta */
body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
        radial-gradient(900px 500px at 82% -8%, rgba(45, 99, 245, .13), transparent 60%),
        radial-gradient(700px 500px at -5% 110%, rgba(112, 153, 249, .07), transparent 55%);
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--accent-2); }

.ico { width: 18px; height: 18px; flex: none; display: inline-block; vertical-align: middle; }
.ico--lg { width: 22px; height: 22px; }
.ico--sm { width: 15px; height: 15px; }

/* ---------------- Layout shell ---------------- */
.layout { display: flex; min-height: 100vh; }

.sidebar {
    width: var(--sidebar-w);
    background: var(--color-sidebar);
    color: var(--color-sidebar-text);
    position: fixed; inset: 0 auto 0 0;
    display: flex; flex-direction: column;
    border-right: 1px solid var(--border-soft);
    transition: width .18s ease; z-index: 40;
}
.sidebar__brand {
    height: var(--topbar-h); display: flex; align-items: center; gap: 11px;
    padding: 0 18px; color: #fff; font-weight: 600; letter-spacing: .2px;
    border-bottom: 1px solid var(--border-soft); white-space: nowrap; overflow: hidden;
}
.sidebar__brand .brand-mark { flex: none; display: grid; place-items: center; color: #fff; }
.sidebar__brand .brand-word { color: #fff; font-weight: 500; font-size: 15px; letter-spacing: .3px; }
.sidebar__brand .brand-word strong { color: var(--accent-2); font-weight: 700; }
.sidebar__brand img.brand-logo { height: 24px; width: auto; max-width: 100%; flex: 0 0 auto; object-fit: contain; display: block; filter: brightness(0) invert(1); }
.sidebar__brand .brand-symbol { display: none; flex: 0 0 32px; width: 32px; height: 32px; object-fit: contain; }
.sidebar__nav { padding: 10px 10px 20px; overflow-y: auto; flex: 1; }
.sidebar__section {
    font-size: 10px; text-transform: uppercase; letter-spacing: 1.4px;
    color: var(--muted-2); padding: 16px 12px 6px;
}
.nav-item {
    display: flex; align-items: center; gap: 11px; position: relative;
    padding: 9px 12px; border-radius: var(--radius-sm);
    color: var(--color-sidebar-text); white-space: nowrap; overflow: hidden;
    margin-bottom: 2px; cursor: pointer; font-size: 13.5px; font-weight: 500;
    transition: background .12s, color .12s;
}
.nav-item:hover { background: rgba(255, 255, 255, .05); color: #fff; }
.nav-item.active { background: var(--accent-soft); color: var(--text-strong); }
.nav-item.active::before {
    content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--accent); box-shadow: 0 0 12px var(--accent);
}
.nav-item .ico { opacity: .9; }
.nav-item.active .ico { color: var(--accent); opacity: 1; }

.content { flex: 1; margin-left: var(--sidebar-w); transition: margin-left .18s ease; display: flex; flex-direction: column; min-width: 0; }

.topbar {
    height: var(--topbar-h); background: rgba(17, 23, 37, .85); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--border); display: flex; align-items: center; gap: 14px;
    padding: 0 20px; position: sticky; top: 0; z-index: 30;
}
.topbar__toggle { border: none; background: transparent; cursor: pointer; color: var(--muted); padding: 7px; border-radius: 8px; display: grid; place-items: center; }
.topbar__toggle:hover { background: var(--surface-3); color: var(--text); }

.search { position: relative; flex: 1; max-width: 480px; }
.search input {
    width: 100%; height: 40px; padding: 0 12px 0 38px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2);
    font-size: 13.5px; color: var(--text); font-family: inherit;
}
.search input::placeholder { color: var(--muted-2); }
.search input:focus { outline: none; border-color: var(--accent-border); box-shadow: var(--ring); background: var(--surface-3); }
.search .search__ico { position: absolute; left: 11px; top: 11px; color: var(--muted); pointer-events: none; }
.search__results {
    position: absolute; top: 46px; left: 0; right: 0; background: var(--surface-2);
    border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow);
    max-height: 360px; overflow-y: auto; display: none; z-index: 50;
}
.search__results.open { display: block; }
.search__group-label { font-size: 10.5px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted-2); padding: 10px 14px 4px; }
.search__item { display: block; padding: 8px 14px; color: var(--text); }
.search__item:hover { background: var(--accent-soft); }
.search__item small { color: var(--muted); }

.topbar__spacer { flex: 1; }
.topbar__actions { display: flex; align-items: center; gap: 6px; }

.icon-btn { position: relative; border: none; background: transparent; cursor: pointer; width: 40px; height: 40px; border-radius: 10px; color: var(--muted); display: grid; place-items: center; }
.icon-btn:hover { background: var(--surface-3); color: var(--text); }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; min-width: 16px; height: 16px; background: var(--danger); color: #fff; border-radius: 9px; font-size: 10px; display: grid; place-items: center; padding: 0 4px; box-shadow: 0 0 0 2px var(--surface); }

.user-menu { display: flex; align-items: center; gap: 9px; cursor: pointer; padding: 5px 8px; border-radius: 10px; }
.user-menu:hover { background: var(--surface-3); }
.avatar { width: 32px; height: 32px; border-radius: 9px; flex: none; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #05101f; display: grid; place-items: center; font-weight: 700; font-size: 13px; }
.user-menu__name { font-weight: 600; font-size: 13px; color: var(--text); }
.user-menu__role { font-size: 11px; color: var(--muted); }

.main { padding: 24px; flex: 1; }

/* ---------------- Dropdown ---------------- */
.dropdown { position: relative; }
.dropdown__panel { position: absolute; right: 0; top: 48px; min-width: 270px; background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); display: none; z-index: 60; overflow: hidden; }
.dropdown__panel.open { display: block; }
.dropdown__header { padding: 12px 14px; border-bottom: 1px solid var(--border); font-weight: 600; display: flex; justify-content: space-between; align-items: center; color: var(--text); }
.dropdown__item { display: block; padding: 10px 14px; border-bottom: 1px solid var(--border-soft); color: var(--text); }
.dropdown__item--icon { display: flex; align-items: center; gap: 10px; }
.dropdown__item--icon .ico { color: var(--muted); flex: none; }
.dropdown__item--icon:hover .ico { color: var(--accent); }
.dropdown__item--button { width: 100%; text-align: left; border: none; background: none; cursor: pointer; font: inherit; }
.dropdown__item--danger:hover, .dropdown__item--danger:hover .ico { color: var(--danger); }
.dropdown__item:last-child { border-bottom: none; }
.dropdown__item:hover { background: var(--surface-3); }
.dropdown__item small { color: var(--muted); display: block; }
.dropdown__empty { padding: 18px 14px; color: var(--muted); text-align: center; }
/* sino: lista com rolagem (até 30 avisos) */
#notif-panel { width: min(360px, calc(100vw - 24px)); }
#notif-list { max-height: min(60vh, 460px); overflow-y: auto; overscroll-behavior: contain; }
#notif-list .dropdown__item.is-unread { border-left: 3px solid var(--accent); }
#notif-list .dropdown__item .notif-time { font-size: 11px; color: var(--muted); display: block; margin-top: 2px; }

/* ---------------- Page header ---------------- */
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; margin: 0 0 3px; color: var(--text-strong); letter-spacing: -.2px; }
.page-head .subtitle { color: var(--muted); font-size: 13px; }
.breadcrumb { font-size: 12px; color: var(--muted-2); margin-bottom: 7px; }
.breadcrumb a { color: var(--muted); }

/* ---------------- Cards / grid ---------------- */
.grid { display: grid; gap: 16px; }
.grid--metrics { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
.grid--2 { grid-template-columns: 1.6fr 1fr; }

.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow-sm); }
.card__head { padding: 15px 18px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; }
.card__head h2 { font-size: 15px; margin: 0; color: var(--text-strong); }
.card__body { padding: 18px; }
.card__body--flush { padding: 0; }

.metric { padding: 18px; display: flex; flex-direction: column; gap: 8px; position: relative; overflow: hidden; }
.metric__label { color: var(--muted); font-size: 12.5px; display: flex; align-items: center; gap: 9px; }
.metric__value { font-size: 30px; font-weight: 700; line-height: 1; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.metric__value.is-alert { color: var(--danger); }
.metric__hint { font-size: 11.5px; color: var(--muted-2); }
.metric--link { color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.metric--link:hover, .metric--link:focus-visible { border-color: var(--accent-border); transform: translateY(-2px); box-shadow: var(--shadow); outline: none; }
.metric .ico-box { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); }
/* Farol do cartão (verde ok / vermelho alerta pulsante) */
.metric__farol { position: absolute; top: 14px; right: 14px; width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px rgba(40, 199, 111, .6); }
.metric__farol.is-warn { background: var(--warning); box-shadow: 0 0 8px rgba(255, 181, 71, .6); }
.metric__farol.is-alert { background: var(--danger); animation: pulse 1.6s ease-in-out infinite; }
.grid--metrics .card { animation: fade-up .45s ease both; }
.dc-seen .grid--metrics .card { animation: none; }
@keyframes fade-up { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

/* ---------------- Tables ---------------- */
.table-wrap { overflow-x: auto; }
table.table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.table th, .table td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--border-soft); vertical-align: middle; }
.table th { font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px; color: var(--muted-2); background: var(--surface-2); font-weight: 600; }
.table tbody tr:hover { background: var(--surface-2); }
.table td .code { font-family: var(--mono); font-weight: 600; color: var(--accent); font-size: 12.5px; }
.code { font-family: var(--mono); }
.table .empty { text-align: center; color: var(--muted); padding: 36px; }

/* ---------------- Badges (sóbrios: ponto + borda) ---------------- */
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 600; white-space: nowrap; border: 1px solid var(--border); background: transparent; color: var(--muted); }
.badge__dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex: none; }
.badge--success { color: var(--success); border-color: rgba(55, 211, 153, .3); }
.badge--warning { color: var(--warning); border-color: rgba(245, 183, 78, .3); }
.badge--danger  { color: var(--danger);  border-color: rgba(248, 114, 107, .3); }
.badge--info    { color: var(--info);    border-color: rgba(76, 196, 240, .3); }
.badge--orange  { color: var(--orange);  border-color: rgba(255, 138, 61, .32); }
.badge--muted   { color: var(--muted);   border-color: var(--border); }
/* Farol: pulso no crítico (vermelho) */
.badge__dot.is-critical { animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(234, 84, 85, .55); }
    50%      { box-shadow: 0 0 0 4px rgba(234, 84, 85, 0); }
}

/* ---------------- Buttons ---------------- */
.btn { display: inline-flex; align-items: center; gap: 7px; justify-content: center; padding: 9px 15px; border-radius: var(--radius-sm); border: 1px solid transparent; font-size: 13.5px; font-weight: 600; cursor: pointer; background: var(--surface-3); color: var(--text); font-family: inherit; transition: background .12s, border-color .12s, box-shadow .12s; }
.btn:hover { color: var(--text-strong); }
.btn--primary { background: linear-gradient(135deg, var(--accent), var(--accent-dark)); color: #ffffff; border-color: transparent; box-shadow: 0 6px 18px rgba(45, 99, 245, .32); }
.btn--primary:hover { box-shadow: 0 8px 22px rgba(45, 99, 245, .46); }
.btn--outline { border-color: var(--border); background: transparent; color: var(--text); }
.btn--outline:hover { background: var(--surface-3); border-color: var(--accent-border); }
.btn--danger { background: var(--danger); color: #1a0605; }
.btn--danger:hover { filter: brightness(1.08); }
.btn--sm { padding: 6px 11px; font-size: 12.5px; }
.btn--block { width: 100%; }
.btn:disabled { opacity: .55; cursor: not-allowed; }
.btn .ico { width: 16px; height: 16px; }

/* ---------------- Forms ---------------- */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.form-grid .full { grid-column: 1 / -1; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-size: 12.5px; font-weight: 600; color: var(--text); }
.field label .req { color: var(--danger); }
.field input, .field select, .field textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); font-size: 13.5px; font-family: inherit; background: var(--surface-2); color: var(--text); width: 100%; }
.field input::placeholder, .field textarea::placeholder { color: var(--muted-2); }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent-border); box-shadow: var(--ring); background: var(--surface-3); }
.field select option { background: var(--surface-2); color: var(--text); }
.field textarea { resize: vertical; min-height: 88px; }
.field .hint { font-size: 11.5px; color: var(--muted-2); }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field .error-msg { font-size: 11.5px; color: var(--danger); }
.checkbox-row { display: flex; flex-wrap: wrap; gap: 14px; }
.checkbox { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text); }
.checkbox input { width: auto; accent-color: var(--accent); }

/* Controle segmentado (ex.: classificação do documento) */
.seg { display: flex; flex-wrap: wrap; gap: 8px; }
.seg__opt { flex: 1 1 120px; position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s; }
.seg__opt input { position: absolute; opacity: 0; pointer-events: none; }
.seg__opt:hover { border-color: var(--accent-border); }
.seg__opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); color: var(--text-strong); }
.seg__opt--warning:has(input:checked) { border-color: var(--warning); background: rgba(255, 181, 71, .12); }
.seg__opt--danger:has(input:checked) { border-color: var(--danger); background: rgba(248, 114, 107, .12); }
.seg__opt:has(input:focus-visible) { box-shadow: var(--ring); }
.status-inline { padding: 6px 28px 6px 10px; border: 1px solid var(--border); border-radius: 999px; background-color: var(--surface-2); color: var(--text); font-size: 12.5px; font-family: inherit; cursor: pointer; max-width: 210px; }
.status-inline:hover { border-color: var(--accent-border); }
.status-inline:focus { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
.status-inline:disabled { opacity: .6; cursor: progress; }
.status-inline.is-saved { border-color: var(--success); box-shadow: 0 0 0 3px var(--success-soft); }
.field-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--muted); line-height: 1.45; }

/* Lista de checkboxes com rolagem (setores/pessoas com acesso) */
.check-list { max-height: 190px; overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; }
.check-list .checkbox[hidden] { display: none; }
.check-list__filter { margin-bottom: 6px; }
.field[hidden] { display: none; }
.form-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 8px; }

.filters { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.filters .field { min-width: 150px; }

/* ---------------- Tabs ---------------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tab { padding: 12px 15px; font-size: 13.5px; font-weight: 600; color: var(--muted); border-bottom: 2px solid transparent; cursor: pointer; white-space: nowrap; background: none; border-top: none; border-left: none; border-right: none; }
.tab:hover { color: var(--text); }
.tab.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab .count { background: var(--surface-3); color: var(--muted); border-radius: 20px; font-size: 11px; padding: 1px 7px; margin-left: 5px; }
.tab-panel { display: none; padding-top: 20px; }
.tab-panel.active { display: block; }

/* ---------------- Definition list ---------------- */
.dl { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px 24px; }
.dl__item { display: flex; flex-direction: column; gap: 3px; }
.dl__label { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--muted-2); }
.dl__value { font-size: 13.5px; word-break: break-word; color: var(--text); }

/* ---------------- Timeline ---------------- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline li { position: relative; padding: 0 0 16px 22px; border-left: 2px solid var(--border); }
.timeline li:last-child { border-left-color: transparent; padding-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: -5px; top: 3px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent-soft); }
.timeline .t-desc { font-size: 13.5px; color: var(--text); }
.timeline .t-meta { font-size: 11.5px; color: var(--muted-2); }

/* ---------------- Comments ---------------- */
.comment { padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); margin-bottom: 10px; background: var(--surface-2); }
.comment.is-internal { background: var(--warning-soft); border-color: rgba(245, 183, 78, .3); }
.comment__head { display: flex; justify-content: space-between; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.comment__author { font-weight: 600; color: var(--text); }
.comment__body { font-size: 13.5px; white-space: pre-wrap; color: var(--text); }

/* ---------------- Toasts ---------------- */
.toast-stack { position: fixed; top: 18px; right: 18px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast { min-width: 260px; max-width: 380px; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: var(--radius-sm); box-shadow: var(--shadow); padding: 12px 14px; font-size: 13.5px; color: var(--text); display: flex; gap: 10px; align-items: flex-start; animation: slidein .18s ease; }
.toast--success { border-left-color: var(--success); }
.toast--error { border-left-color: var(--danger); }
.toast--warning { border-left-color: var(--warning); }
.toast--info { border-left-color: var(--info); }
@keyframes slidein { from { transform: translateX(30px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------------- Modal ---------------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(4, 7, 13, .68); backdrop-filter: blur(3px); z-index: 150; display: none; align-items: center; justify-content: center; padding: 20px; }
.modal-overlay.open { display: flex; }
.modal { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); width: 100%; max-width: 440px; animation: slidein .15s ease; }
.modal__head { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 700; font-size: 15px; color: var(--text-strong); }
.modal__body { padding: 20px; font-size: 14px; color: var(--text); }
.modal__foot { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 10px; }
.modal__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.modal--wide { max-width: 640px; max-height: calc(100vh - 40px); display: flex; flex-direction: column; }
.modal--wide .modal__body { overflow-y: auto; }
.modal__close { background: none; border: none; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; padding: 0 4px; }
.modal__close:hover { color: var(--text-strong); }
.modal .form-actions { margin-top: 4px; display: flex; justify-content: flex-end; gap: 10px; }

/* ---------- Barra de progresso (topo) ---------- */
#progress-bar { position: fixed; top: 0; left: 0; height: 3px; width: 0; opacity: 0; z-index: 9999;
    background: linear-gradient(90deg, var(--accent), var(--accent-2)); box-shadow: 0 0 10px var(--accent-soft);
    transition: width .22s ease, opacity .26s ease; pointer-events: none; }

/* ---------- Spinner em botão ---------- */
.btn.is-loading { color: transparent !important; pointer-events: none; position: relative; }
.btn.is-loading::after { content: ""; position: absolute; top: 50%; left: 50%; width: 15px; height: 15px;
    margin: -8px 0 0 -8px; border: 2px solid rgba(255, 255, 255, .35); border-top-color: #fff; border-radius: 50%;
    animation: dc-spin .6s linear infinite; }
@keyframes dc-spin { to { transform: rotate(360deg); } }

/* ---------- Skeleton (carregando) ---------- */
.skeleton { display: block; border-radius: 6px; background: linear-gradient(90deg, var(--surface-2) 25%, var(--surface-3) 37%, var(--surface-2) 63%);
    background-size: 400% 100%; animation: dc-shimmer 1.2s ease-in-out infinite; }
.skeleton--line { height: 11px; margin: 6px 0; width: 100%; }
.skeleton--line.short { width: 55%; }
@keyframes dc-shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

/* ---------- Ícone/imagem de sistema ---------- */
.sys-icon { display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; object-fit: cover;
    vertical-align: middle; overflow: hidden; flex: none; border: 1px solid var(--border); background: var(--surface-2); }
.sys-card { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border);
    border-radius: var(--radius-sm); background: var(--surface-2); transition: border-color .15s, transform .15s; cursor: pointer; }
.sys-card:hover { border-color: var(--accent-border); transform: translateY(-1px); }
.sys-card__body { min-width: 0; flex: 1; }
.sys-card__name { font-weight: 600; color: var(--text-strong); font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sys-card__meta { font-size: 11.5px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.sys-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }

@media (prefers-reduced-motion: reduce) {
    .skeleton, .btn.is-loading::after { animation: none; }
    #progress-bar { transition: opacity .2s ease; }
    .sys-card:hover { transform: none; }
}

/* ---------- Rodapé fixo (versão/build) ---------- */
.app-footer { position: fixed; left: var(--sidebar-w); right: 0; bottom: 0; height: 30px; z-index: 40;
    background: var(--color-sidebar); color: var(--color-sidebar-text); border-top: 1px solid rgba(255, 255, 255, .06);
    display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11.5px; letter-spacing: .2px;
    transition: left .18s ease; }
.app-footer .sep { opacity: .4; }
.app-footer__name { font-weight: 600; }
.app-footer a { color: inherit; }
/* Conteúdo rola por baixo do rodapé fixo (espaço para não esconder o fim). */
.main { padding-bottom: 54px; }
@media (max-width: 768px) { .app-footer { left: 0; } }
.auth-ver { margin-top: 22px; text-align: center; font-size: 11px; color: var(--muted-2); letter-spacing: .3px; }

/* ---------------- Auth ---------------- */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; overflow: hidden; }
.auth-wrap::before { content: ""; position: absolute; inset: 0; z-index: 0; background: radial-gradient(900px 520px at 78% -8%, rgba(45, 99, 245, .18), transparent 60%), radial-gradient(700px 460px at 12% 118%, rgba(112, 153, 249, .12), transparent 55%); }
.auth-shell { position: relative; z-index: 1; width: 100%; max-width: 940px; display: grid; grid-template-columns: 1.05fr .95fr; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); overflow: hidden; min-height: 540px; }

/* Painel de marca (esquerda) */
.auth-brand { position: relative; padding: 40px 38px; display: flex; flex-direction: column; justify-content: space-between; color: #eef2ff; background: linear-gradient(155deg, var(--color-sidebar, #150649) 0%, #1d0b63 55%, #2436a8 130%); overflow: hidden; }
.auth-brand__grid { position: absolute; inset: 0; opacity: .4; background-image: linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(circle at 30% 20%, #000, transparent 78%); mask-image: radial-gradient(circle at 30% 20%, #000, transparent 78%); }
.auth-brand__inner { position: relative; z-index: 1; }
.auth-brand .brand-logo { height: 40px; width: auto; filter: brightness(0) invert(1); margin-bottom: 30px; }
.auth-brand__title { font-size: 26px; font-weight: 700; margin: 0 0 8px; letter-spacing: .3px; }
.auth-brand__tag { font-size: 14px; color: rgba(238, 242, 255, .78); margin: 0 0 26px; max-width: 30ch; line-height: 1.5; }
.auth-brand__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.auth-brand__list li { position: relative; padding-left: 24px; font-size: 13.5px; color: rgba(238, 242, 255, .9); line-height: 1.45; }
.auth-brand__list li::before { content: ""; position: absolute; left: 0; top: 6px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-2, #7099f9); box-shadow: 0 0 10px rgba(112, 153, 249, .8); }
.auth-brand__foot { position: relative; z-index: 1; font-size: 11.5px; color: rgba(238, 242, 255, .55); }

/* Cartão do formulário (direita) */
.auth-panel { display: grid; place-items: center; padding: 40px 40px; }
.auth-card { width: 100%; max-width: 360px; }
.auth-card__head { display: flex; align-items: center; gap: 10px; margin-bottom: 26px; }
.auth-card__head .brand-logo--sm { height: 26px; width: auto; filter: brightness(0) invert(1); }
.auth-eyebrow { font-size: 11px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--muted); }
.auth-title { font-size: 21px; font-weight: 700; color: var(--text-strong); margin: 0 0 6px; }
.auth-card .subtitle { color: var(--muted); font-size: 13.5px; margin-bottom: 22px; line-height: 1.5; }
.auth-card .field { margin-bottom: 15px; }
.auth-card .aux { text-align: center; margin-top: 18px; font-size: 13px; }

/* Páginas de erro (403/404) */
.error-card { position: relative; z-index: 1; max-width: 420px; background: var(--surface); border: 1px solid var(--border); border-radius: 18px; box-shadow: var(--shadow); padding: 34px 32px; text-align: center; }
.error-card .auth-card__head { justify-content: center; }
.error-code { font-size: 64px; font-weight: 800; line-height: 1; letter-spacing: 2px; color: var(--accent-2, #7099f9); margin-bottom: 10px; }
.error-hint { font-size: 12.5px; margin: -10px 0 20px; }
.error-actions { display: flex; flex-direction: column; gap: 10px; }

/* Checklist da política de senha */
.pw-rules { list-style: none; margin: -6px 0 16px; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 12px; font-size: 12px; color: var(--muted); }
.pw-rules li { position: relative; padding-left: 18px; line-height: 1.5; }
.pw-rules li::before { content: ""; position: absolute; left: 2px; top: 5px; width: 8px; height: 8px; border-radius: 50%; border: 1.5px solid var(--muted-2, #6b7280); }
.pw-rules li.ok { color: var(--success, #34d399); }
.pw-rules li.ok::before { background: var(--success, #34d399); border-color: var(--success, #34d399); }
@media (max-width: 420px) { .pw-rules { grid-template-columns: 1fr; } }

/* Input com botão (mostrar/ocultar senha) */
.input-wrap { position: relative; display: flex; align-items: center; }
.input-wrap input { flex: 1; padding-right: 42px; }
.input-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; cursor: pointer; color: var(--muted); display: inline-flex; border-radius: 6px; }
.input-toggle:hover { color: var(--text); }
.input-toggle .ico { width: 18px; height: 18px; }
.input-toggle.is-on { color: var(--accent-2, #7099f9); }

/* Campo de código (OTP) */
.otp-input { text-align: center; font-family: var(--mono, monospace); font-size: 28px; letter-spacing: 10px; padding: 12px 10px; font-weight: 600; }
.auth-count { font-weight: 600; color: var(--text); font-variant-numeric: tabular-nums; }

/* Checkbox de dispositivo confiável */
.auth-check { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--muted); margin: 4px 0 18px; cursor: pointer; }
.auth-check input { width: 16px; height: 16px; accent-color: var(--accent); }

/* Link de reenvio */
.auth-resend-form { text-align: center; margin-top: 14px; }
.btn-link { background: none; border: none; color: var(--accent-2, #7099f9); font-size: 13px; cursor: pointer; padding: 4px 8px; }
.btn-link:hover { text-decoration: underline; }
.btn-link:disabled { color: var(--muted-2); cursor: default; text-decoration: none; }

@media (max-width: 760px) {
    .auth-shell { grid-template-columns: 1fr; max-width: 420px; min-height: 0; }
    .auth-brand { display: none; }
    .auth-panel { padding: 34px 28px; }
}

/* ---------------- Banner / placeholders ---------------- */
.banner { padding: 12px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 500; margin-bottom: 18px; display: flex; align-items: center; gap: 10px; border: 1px solid var(--border); }
.banner .ico { flex: none; }
.banner--warning { background: var(--warning-soft); color: var(--warning); border-color: rgba(245, 183, 78, .3); }
.banner--info { background: var(--info-soft); color: var(--info); border-color: rgba(76, 196, 240, .3); }

.placeholder-box { text-align: center; color: var(--muted); padding: 46px 20px; }
.placeholder-box .ph-icon { color: var(--muted-2); margin-bottom: 12px; display: inline-flex; }
.placeholder-box .ph-icon .ico { width: 34px; height: 34px; }

/* ---------------- Pagination ---------------- */
.pagination { display: flex; gap: 5px; align-items: center; padding: 14px 18px; justify-content: flex-end; font-size: 13px; color: var(--muted); }
.pagination a, .pagination span.current { padding: 6px 11px; border: 1px solid var(--border); border-radius: var(--radius-sm); color: var(--text); }
.pagination a:hover { background: var(--surface-3); border-color: var(--accent-border); }
.pagination .current { background: var(--accent-soft); color: var(--text-strong); border-color: var(--accent-border); }
.pagination .disabled { color: var(--muted-2); opacity: .5; }

/* ---------------- Utils ---------------- */
.row-between { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.muted { color: var(--muted); }
.mt-0 { margin-top: 0; }
.stack > * + * { margin-top: 14px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
pre { font-family: var(--mono); background: var(--surface-2); border: 1px solid var(--border); padding: 12px; border-radius: 8px; white-space: pre-wrap; overflow-x: auto; color: var(--text); font-size: 12.5px; }

/* ---------------- Sidebar collapsed ----------------
   A classe fica no <html> (aplicada antes do paint) e só vale no desktop. */
@media (min-width: 769px) {
    .sidebar-collapsed .sidebar { width: var(--sidebar-w-collapsed); }
    .sidebar-collapsed .content { margin-left: var(--sidebar-w-collapsed); }
    .sidebar-collapsed .app-footer { left: var(--sidebar-w-collapsed); }
    .sidebar-collapsed .sidebar__brand { justify-content: center; padding: 0; }
    .sidebar-collapsed .sidebar__brand img.brand-logo, .sidebar-collapsed .sidebar__brand .brand-word { display: none; }
    .sidebar-collapsed .sidebar__brand .brand-symbol { display: block; }
    .sidebar-collapsed .nav-item span, .sidebar-collapsed .sidebar__section { display: none; }
    .sidebar-collapsed .nav-item { justify-content: center; }
}
/* Carga inicial sem transições/animações (removida pelo JS após o load). */
.no-anim *, .no-anim *::before, .no-anim *::after { transition: none !important; }

/* ---------------- Responsive ---------------- */
@media (max-width: 1024px) { .grid--2 { grid-template-columns: 1fr; } }
/* Backdrop da sidebar (mobile) — escondido por padrão. */
.sidebar-backdrop { display: none; position: fixed; inset: 0; background: rgba(4, 7, 13, .5); z-index: 90; }

@media (max-width: 768px) {
    .sidebar { transform: translateX(-100%); width: var(--sidebar-w); transition: transform .2s ease; z-index: 100; }
    body.sidebar-open .sidebar { transform: none; }
    body.sidebar-open .sidebar-backdrop { display: block; }
    .content { margin-left: 0; }
    .form-grid { grid-template-columns: 1fr; }
    .search { max-width: none; }
    .user-menu__name, .user-menu__role { display: none; }
}
.is-navigating, .is-navigating a { cursor: progress; }

/* ---------------- Upload de arquivos (componente attachment_upload) ---------------- */
.upload { position: relative; display: flex; flex-direction: column; gap: 6px; width: 100%; }
.upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; clip: rect(0 0 0 0); }
.upload__zone { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border: 1.5px dashed var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); cursor: pointer; transition: border-color .15s, background .15s; min-height: 64px; }
.upload__zone:hover, .upload__zone.is-drag { border-color: var(--accent); background: var(--accent-soft); }
.upload__input:focus-visible + .upload__zone { box-shadow: var(--ring); border-color: var(--accent); }
.upload__icon { width: 38px; height: 38px; flex: none; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); border: 1px solid var(--accent-border); }
.upload__icon--sm { width: 30px; height: 30px; border-radius: 7px; }
.upload__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.upload__text strong { font-size: 13.5px; font-weight: 600; color: var(--text-strong); }
.upload__text small { font-size: 11.5px; color: var(--muted); }
.upload__file { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--accent-border); border-radius: var(--radius-sm); background: var(--surface-2); }
.upload__file[hidden], .upload__zone[hidden] { display: none; }
.upload__meta { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.upload__name { font-size: 13px; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload__size { font-size: 11.5px; color: var(--muted); }
.upload__clear { background: none; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.upload__clear:hover { color: var(--danger); background: var(--surface-3); }
.upload__error { font-size: 12px; color: var(--danger); min-height: 0; }
.upload.has-error .upload__zone { border-color: var(--danger); }

/* Formulário de anexo (upload + botão) */
.attach-form { display: flex; gap: 10px; align-items: stretch; margin-top: 12px; }
.attach-form .upload { flex: 1; min-width: 0; }
.attach-form .btn { align-self: flex-start; min-height: 40px; }
.attach-list { display: flex; flex-direction: column; gap: 8px; }
.attach-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 8px; padding: 10px 14px; background: var(--surface-2); }
.attach-item__name { display: inline-flex; align-items: center; gap: 8px; min-width: 0; word-break: break-word; }
.attach-item__meta { font-size: 12px; color: var(--muted); }

@media (max-width: 768px) {
    .attach-form { flex-direction: column; }
    .attach-form .btn { align-self: stretch; width: 100%; justify-content: center; }
    .upload__zone { padding: 16px 14px; }
    .attach-item { flex-direction: column; align-items: flex-start; }
}

/* Papel de acesso (ACL clássico: um papel por usuário) */
.role-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.role-grid .error-msg { grid-column: 1 / -1; }
.role-opt { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 12px 14px 12px 40px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; transition: border-color .15s, background .15s; }
.role-opt input { position: absolute; left: 14px; top: 14px; width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.role-opt:hover { border-color: var(--accent-border); }
.role-opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }
.role-opt:has(input:focus-visible) { box-shadow: var(--ring); }
.role-opt__name { font-weight: 600; font-size: 13.5px; color: var(--text-strong); }
.role-opt__desc { font-size: 12px; color: var(--muted); line-height: 1.4; }
.role-opt__meta { font-size: 11.5px; color: var(--muted-2); margin-top: 2px; }
.role-opt--admin:has(input:checked) { border-color: var(--danger); background: rgba(248, 114, 107, .1); }

/* ================= Dashboard — painel de operação (cabe em uma tela) ================= */
.dash { position: relative; display: grid; grid-template-rows: auto auto minmax(0, 1fr); gap: 14px; isolation: isolate; }
/* Fundo técnico só do painel: malha fina + brilho azul, desvanecendo para baixo. */
.dash::before {
    content: ""; position: absolute; inset: -24px -24px -54px; z-index: -1; pointer-events: none;
    background-image:
        linear-gradient(rgba(112, 153, 249, .06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112, 153, 249, .06) 1px, transparent 1px),
        radial-gradient(640px 320px at 18% 20%, rgba(45, 99, 245, .16), transparent 70%);
    background-size: 28px 28px, 28px 28px, auto;
    -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
    mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
@media (min-width: 1101px) and (min-height: 640px) {
    .dash { height: calc(100vh - var(--topbar-h) - 78px); }
    /* A linha inferior ocupa só o espaço que sobra; listas paginam em vez de crescer. */
    .dash-bottom { grid-template-rows: minmax(0, 1fr); grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); grid-template-columns: none; }
}
.dash-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.dash-head h1 { font-size: 22px; margin: 0; color: var(--text-strong); letter-spacing: -.2px; }
.dash-head .subtitle { color: var(--muted); font-size: 13px; }
.dash-clock { margin-left: 6px; padding: 1px 8px; border: 1px solid var(--accent-border); border-radius: 999px; color: var(--accent-2); font-variant-numeric: tabular-nums; font-size: 12px; }

.dash-top { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; gap: 14px; }

/* Saúde da operação */
.dash-health { position: relative; overflow: hidden; display: flex; align-items: center; gap: 18px; padding: 18px; --lvl: var(--accent-2); }
.dash-health--success { --lvl: var(--success); }
.dash-health--warning { --lvl: var(--warning); }
.dash-health--danger { --lvl: var(--danger); }
.dash-health::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(260px 160px at 22% 50%, color-mix(in srgb, var(--lvl) 18%, transparent), transparent 70%); }
.dash-health__ring { position: relative; width: 132px; height: 132px; flex: none; }
.dash-health__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--surface-3); stroke-width: 9; }
.ring-ticks { fill: none; stroke: var(--border); stroke-width: 3; stroke-dasharray: 1.5 5.4; }
.ring-value { fill: none; stroke: var(--lvl); stroke-width: 9; stroke-linecap: round; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--lvl) 60%, transparent)); animation: ring-fill 1.1s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes ring-fill { from { stroke-dasharray: 0 var(--ring-circ); } to { stroke-dasharray: var(--ring-dash) var(--ring-circ); } }
.dc-seen .ring-value { animation: none; }
.dash-health__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.dash-health__num strong { font-size: 38px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.dash-health__num span { font-size: 11px; color: var(--muted); margin-top: 4px; }
.dash-health__body { position: relative; z-index: 1; min-width: 0; flex: 1; }
.dash-health__body h2 { font-size: 15px; margin: 0 0 4px; color: var(--text-strong); }
.dash-health__status { display: flex; align-items: center; gap: 7px; font-size: 13px; color: var(--text); margin-bottom: 10px; }
.status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--lvl); box-shadow: 0 0 8px var(--lvl); }
.dash-factors { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.dash-factors li { display: grid; grid-template-columns: 1fr 56px 34px; align-items: center; gap: 8px; font-size: 11.5px; color: var(--muted); }
.dash-factors__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-factors__bar, .dash-status__bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.dash-factors__bar span, .dash-status__bar span { display: block; height: 100%; border-radius: 3px; background: var(--accent-2); }
.dash-factors__val { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }

/* KPIs */
.dash-kpis { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 12px; }
.kpi {
    position: relative; overflow: hidden; display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto auto; column-gap: 12px;
    padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); color: inherit; text-decoration: none;
    background: linear-gradient(160deg, rgba(46, 46, 69, .92), rgba(36, 36, 56, .92));
    transition: border-color .15s, transform .15s;
}
.kpi:hover, .kpi:focus-visible { border-color: var(--accent-border); transform: translateY(-2px); outline: none; color: inherit; }
.kpi:focus-visible { box-shadow: var(--ring); }
.kpi__icon { grid-row: 1 / 4; align-self: center; position: relative; width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center; color: var(--accent-2); background: var(--accent-soft); }
/* Ícone animado: anel de varredura girando devagar em volta do ícone. */
@property --kpi-a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.kpi__icon::before {
    content: ""; position: absolute; inset: -3px; border-radius: 13px; padding: 1.5px;
    background: conic-gradient(from var(--kpi-a), transparent 0 70%, var(--accent-2) 88%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: kpi-scan 4.5s linear infinite;
}
.kpi:nth-child(2n) .kpi__icon::before { animation-delay: -1.5s; }
.kpi:nth-child(3n) .kpi__icon::before { animation-delay: -3s; }
@keyframes kpi-scan { to { --kpi-a: 360deg; } }
.kpi__icon .ico { width: 20px; height: 20px; }
.kpi__label { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi__value { font-size: 28px; line-height: 1.1; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.kpi__value small { font-size: 14px; font-weight: 600; color: var(--muted); margin-left: 2px; }
.kpi__hint { font-size: 11.5px; color: var(--muted-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi--alert { border-color: rgba(234, 84, 85, .45); }
.kpi--alert .kpi__icon { color: var(--danger); background: var(--danger-soft); }
.kpi--alert .kpi__icon::before { background: conic-gradient(from var(--kpi-a), transparent 0 60%, var(--danger) 90%, transparent 100%); animation-duration: 2.2s; }
.kpi--alert .kpi__value { color: var(--danger); }
.kpi--alert .kpi__hint { color: var(--danger); opacity: .85; }

/* Painéis inferiores */
.dash-bottom { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; min-height: 0; }
.dash-panel { display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.dash-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border); }
.dash-panel__head h2 { font-size: 14.5px; margin: 0; color: var(--text-strong); }
.dash-panel__link { font-size: 12.5px; }
.dash-panel__body { flex: 1; min-height: 0; padding: 12px 16px; overflow: hidden; }
.dash-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.dash-list [data-page-item][hidden] { display: none; }

.pager { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pager button { width: 26px; height: 26px; border-radius: 7px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); cursor: pointer; font-size: 15px; line-height: 1; }
.pager button:hover:not(:disabled) { border-color: var(--accent-border); color: var(--accent-2); }
.pager button:disabled { opacity: .35; cursor: default; }
.pager button:focus-visible { outline: none; box-shadow: var(--ring); }

.dash-sys { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border-soft); border-radius: var(--radius-sm); background: var(--surface-2); color: inherit; }
.dash-sys:hover { border-color: var(--accent-border); color: inherit; }
.dash-sys__body { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-sys__name { font-size: 13px; font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-sys__code { font-size: 11px; color: var(--muted); font-family: var(--mono); }
.dash-sys__badges { flex: none; }

.dash-feed li { padding: 7px 0 7px 14px; border-left: 2px solid var(--border); position: relative; }
.dash-feed li::before { content: ""; position: absolute; left: -5px; top: 12px; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px var(--accent-soft); }
.dash-feed__desc { display: block; font-size: 13px; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-feed__meta { display: block; font-size: 11px; color: var(--muted-2); }

.dash-tickets { display: flex; flex-direction: column; gap: 14px; }
.spark { position: relative; }
.spark__meta { font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.spark__meta strong { color: var(--text-strong); font-size: 15px; }
.spark__svg { display: block; width: 100%; height: 64px; overflow: visible; }
.spark__line { fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.spark__area { fill: url(#sparkFill); }
.spark__stop-a { stop-color: var(--accent-2); stop-opacity: .32; }
.spark__stop-b { stop-color: var(--accent-2); stop-opacity: 0; }
.spark__hit { fill: transparent; cursor: crosshair; }
.spark__hit:hover { fill: rgba(112, 153, 249, .08); }
.spark__axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted-2); margin-top: 3px; }
.spark__tip { position: absolute; top: 18px; padding: 4px 8px; border-radius: 6px; background: var(--surface-3); border: 1px solid var(--border); font-size: 11.5px; color: var(--text-strong); white-space: nowrap; pointer-events: none; }
.dash-status { display: flex; flex-direction: column; gap: 7px; min-height: 0; }
.dash-status__title { font-size: 12px; color: var(--muted); }
.dash-status__row { display: grid; grid-template-columns: minmax(0, 1fr) 90px 28px; align-items: center; gap: 10px; font-size: 12.5px; color: var(--text); }
.dash-status__row:hover { color: var(--accent-2); }
.dash-status__label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-status__val { text-align: right; font-variant-numeric: tabular-nums; color: var(--text-strong); }

@media (max-width: 1400px) {
    .dash-top { grid-template-columns: 290px 1fr; }
    .dash-health { gap: 14px; padding: 14px; }
    .dash-health__ring { width: 104px; height: 104px; }
    .dash-health__num strong { font-size: 30px; }
    .dash-factors li { grid-template-columns: 1fr 40px 32px; }
    .kpi { padding: 10px 12px; column-gap: 10px; }
    .kpi__icon { width: 34px; height: 34px; }
    .kpi__icon .ico { width: 18px; height: 18px; }
    .kpi__value { font-size: 22px; }
}
@media (min-width: 1401px) and (max-height: 820px) { .kpi { padding: 10px 14px; } .kpi__value { font-size: 24px; } }
@media (max-width: 1100px) { .dash-top { grid-template-columns: 1fr; } .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 768px) { .dash::before { inset: -24px 0 -54px 0; } .dash-head .btn { width: 100%; } }
@media (max-width: 520px) { .dash-health { flex-direction: column; align-items: stretch; } .dash-health__ring { align-self: center; }
    .dash-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
    .kpi { grid-template-columns: 1fr; padding: 10px 12px; }
    .kpi__icon { grid-row: auto; align-self: start; width: 30px; height: 30px; margin-bottom: 6px; }
    .kpi__icon .ico { width: 16px; height: 16px; }
    .kpi__value { font-size: 22px; } }
/* Telas baixas (ex.: notebook 1366×768): compacta para sobrar espaço às listas. */
@media (min-width: 1101px) and (max-height: 760px) {
    .dash { gap: 10px; }
    .dash-head h1 { font-size: 19px; }
    .dash-top, .dash-kpis, .dash-bottom { gap: 10px; }
    .dash-health { padding: 10px 14px; }
    .dash-health__ring { width: 92px; height: 92px; }
    .dash-health__num strong { font-size: 26px; }
    .dash-factors { gap: 3px; }
    .dash-health__status { margin-bottom: 6px; }
    .kpi { padding: 8px 12px; }
    .kpi__value { font-size: 20px; }
    .dash-panel__head { padding: 8px 14px; }
    .dash-panel__body { padding: 8px 14px; }
    .dash-sys { padding: 6px 10px; }
    .dash-feed li { padding: 4px 0 4px 14px; }
    .spark__svg { height: 48px; }
    .dash-tickets { gap: 8px; }
}
@media (prefers-reduced-motion: reduce) { .kpi__icon::before, .ring-value { animation: none; } }

/* ================= Status Benel — farol + página pública ================= */
.light { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--text); white-space: nowrap; --lc: var(--muted-2); }
.light--green, .light--unknown { --lc: var(--success); }
.light--yellow { --lc: var(--warning); }
.light--red { --lc: var(--danger); }
.light--maint { --lc: var(--info); }
.light__dot { position: relative; width: 10px; height: 10px; border-radius: 50%; background: var(--lc); box-shadow: 0 0 8px color-mix(in srgb, var(--lc) 70%, transparent); flex: none; }
.light--unknown .light__dot { background: transparent; border: 2px solid var(--lc); box-shadow: none; }
.light--red .light__dot::after, .light--yellow .light__dot::after { content: ""; position: absolute; inset: -4px; border-radius: 50%; border: 2px solid var(--lc); opacity: 0; animation: light-ping 1.8s ease-out infinite; }
.light--yellow .light__dot::after { animation-duration: 2.6s; }
@keyframes light-ping { 0% { transform: scale(.6); opacity: .8; } 100% { transform: scale(1.9); opacity: 0; } }
.light--sm { font-size: 11.5px; gap: 5px; } .light--sm .light__dot { width: 8px; height: 8px; }
.light--lg { font-size: 15px; } .light--lg .light__dot { width: 14px; height: 14px; }

.status-body { min-height: 100vh; display: flex; flex-direction: column; }
.status-body::before {
    background-image:
        linear-gradient(rgba(112, 153, 249, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(112, 153, 249, .05) 1px, transparent 1px),
        radial-gradient(900px 480px at 80% -10%, rgba(45, 99, 245, .16), transparent 60%);
    background-size: 28px 28px, 28px 28px, auto;
}
.status-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-bottom: 1px solid var(--border-soft); background: rgba(21, 6, 73, .55); backdrop-filter: blur(8px); }
.status-top__brand { display: flex; align-items: center; gap: 12px; color: var(--text-strong); font-weight: 600; font-size: 15px; }
.status-top__brand:hover { color: var(--text-strong); }
.status-top__brand .brand-logo { height: 22px; width: auto; filter: brightness(0) invert(1); }
.status-top__brand span { padding-left: 12px; border-left: 1px solid var(--border); }
.status-main { flex: 1; width: 100%; max-width: 1100px; margin: 0 auto; padding: 28px 20px 40px; display: flex; flex-direction: column; gap: 18px; }
.status-foot { text-align: center; font-size: 12px; color: var(--muted-2); padding: 16px; }

.st-back { font-size: 13px; color: var(--muted); align-self: flex-start; }
.st-hero { --lc: var(--success); position: relative; overflow: hidden; display: flex; align-items: center; gap: 20px; padding: 26px 28px; border-radius: 16px; border: 1px solid color-mix(in srgb, var(--lc) 40%, var(--border)); background: linear-gradient(120deg, color-mix(in srgb, var(--lc) 16%, var(--surface)), var(--surface) 70%); }
.st-hero--yellow { --lc: var(--warning); } .st-hero--red { --lc: var(--danger); } .st-hero--maint { --lc: var(--info); } .st-hero--unknown { --lc: var(--success); }
.st-hero__light { position: relative; width: 26px; height: 26px; flex: none; border-radius: 50%; background: var(--lc); box-shadow: 0 0 22px var(--lc); }
.st-hero__light::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 2px solid var(--lc); animation: light-ping 2.4s ease-out infinite; }
.st-hero h1 { margin: 0; font-size: 26px; color: var(--text-strong); letter-spacing: -.3px; }
.st-hero__meta { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.st-hero__state { display: flex; align-items: center; gap: 10px; margin: 8px 0 0; font-size: 15px; color: var(--text); flex-wrap: wrap; }

.st-filter input { width: 100%; max-width: 360px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font: inherit; }
.st-filter input:focus { outline: none; border-color: var(--accent); box-shadow: var(--ring); }
.st-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.st-card { --lc: var(--success); display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); color: inherit; transition: border-color .15s, transform .15s; }
.st-card[hidden] { display: none; }
.st-card:hover, .st-card:focus-visible { color: inherit; border-color: var(--accent-border); transform: translateY(-2px); outline: none; }
.st-card:focus-visible { box-shadow: var(--ring); }
.st-card--yellow { --lc: var(--warning); border-color: rgba(255, 181, 71, .45); }
.st-card--red { --lc: var(--danger); border-color: rgba(234, 84, 85, .55); }
.st-card--maint { --lc: var(--info); }
.st-card__head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.st-card__id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.st-card__id .sys-icon { flex: none; border-radius: 9px; }
.st-logo { object-fit: contain; background: #fff; padding: 3px; }
.st-hero__logo { position: relative; flex: none; display: grid; }
.st-hero__logo .sys-icon { border-radius: 14px; box-shadow: 0 6px 20px rgba(0, 0, 0, .35); }
.st-hero__logo .st-hero__light { position: absolute; right: -6px; bottom: -6px; width: 20px; height: 20px; border: 3px solid var(--surface); }
.st-hero__logo .st-hero__light::after { inset: -6px; }
/* Relatar problema — destaque vermelho */
.st-ask--alert { border-color: rgba(234, 84, 85, .45); background: linear-gradient(180deg, rgba(234, 84, 85, .10), var(--surface) 65%); }
.st-ask__icon { width: 56px; height: 56px; margin: 0 auto 12px; border-radius: 16px; display: grid; place-items: center; color: #fff; background: var(--danger); box-shadow: 0 8px 26px rgba(234, 84, 85, .45); }
.st-ask__icon .ico { width: 28px; height: 28px; }
.st-big--danger { background: var(--danger); color: #fff; border-color: transparent; box-shadow: 0 10px 28px rgba(234, 84, 85, .38); }
.st-big--danger:hover, .st-big--danger:focus-visible { background: #f06061; color: #fff; outline: none; transform: translateY(-1px); }
.st-big--danger:focus-visible { box-shadow: 0 0 0 3px rgba(234, 84, 85, .35); }
.st-ask--alert .st-cat__icon { background: rgba(234, 84, 85, .16); color: var(--danger); }
.st-ask--alert .st-cat:hover, .st-ask--alert .st-cat:focus-visible { border-color: var(--danger); background: rgba(234, 84, 85, .12); }
.st-ask--alert .st-ask__count { color: var(--danger); font-weight: 600; }
.st-card__name { font-weight: 700; color: var(--text-strong); font-size: 15px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.st-card__text { font-size: 13px; color: var(--muted); min-height: 20px; }
.st-mini { display: flex; align-items: flex-end; gap: 2px; height: 28px; }
.st-mini span { flex: 1; border-radius: 2px 2px 0 0; background: var(--surface-3); }
.st-mini span.has { background: color-mix(in srgb, var(--lc) 75%, transparent); }
.st-card--green .st-mini span.has, .st-card--unknown .st-mini span.has { background: var(--accent-2); }
.st-card__foot { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; color: var(--muted-2); }
.st-card__cta { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; background: rgba(234, 84, 85, .14); color: var(--danger); font-weight: 700; border: 1px solid rgba(234, 84, 85, .35); }
.st-card:hover .st-card__cta { background: var(--danger); color: #fff; }
.st-empty { text-align: center; color: var(--muted); }

.st-ask { padding: 28px; text-align: center; }
.st-ask__step[hidden] { display: none; }
.st-ask h2 { margin: 0 0 8px; font-size: 21px; color: var(--text-strong); }
.st-ask .muted { max-width: 560px; margin: 0 auto 18px; }
.st-big { font-size: 16px; padding: 14px 26px; border-radius: 12px; }
.st-big .ico { width: 20px; height: 20px; }
.st-ask__count { margin: 14px 0 0; font-size: 13px; color: var(--warning); }
.st-cats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 16px 0; }
.st-cat { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 12px; border-radius: 12px; border: 1px solid var(--border); background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; transition: border-color .15s, background .15s, transform .15s; }
.st-cat:hover, .st-cat:focus-visible { border-color: var(--accent); background: var(--accent-soft); transform: translateY(-2px); outline: none; }
.st-cat__icon { width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-2); }
.st-cat__icon .ico { width: 22px; height: 22px; }
.st-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.st-spinner { width: 42px; height: 42px; margin: 10px auto 14px; border-radius: 50%; border: 3px solid var(--surface-3); border-top-color: var(--accent-2); animation: st-spin .8s linear infinite; }
@keyframes st-spin { to { transform: rotate(360deg); } }
.st-done-icon { width: 54px; height: 54px; margin: 0 auto 12px; border-radius: 50%; display: grid; place-items: center; background: var(--success-soft); color: var(--success); }
.st-done-icon .ico { width: 28px; height: 28px; }
.st-details { display: flex; flex-direction: column; gap: 10px; max-width: 560px; margin: 18px auto 0; text-align: left; }
.st-details[hidden] { display: none; }
.st-details textarea { padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text); font: inherit; resize: vertical; }
.st-details textarea:focus { outline: none; border-color: var(--accent-border); box-shadow: var(--ring); }
.st-details .btn { align-self: flex-start; }
.st-details__ok { color: var(--success); margin: 0; }
.st-login-hint { margin-top: 14px !important; }

.st-panel { padding: 18px 20px; }
.st-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 12px; }
.st-panel__head h2 { margin: 0; font-size: 15px; color: var(--text-strong); }
.st-panel__head .muted { font-size: 12.5px; }
.st-chart { position: relative; }
.st-chart svg { display: block; width: 100%; height: 150px; }
.st-chart__grid { stroke: var(--border-soft); stroke-width: 1; stroke-dasharray: 3 4; vector-effect: non-scaling-stroke; }
.st-chart__base { stroke: var(--border); stroke-width: 1; vector-effect: non-scaling-stroke; }
.st-chart__bar { fill: var(--accent-2); }
.st-chart__bar.is-peak { fill: var(--danger); }
.st-chart__hit { fill: transparent; }
.st-chart__hit:hover { fill: rgba(112, 153, 249, .08); }
.st-chart__axis { position: relative; height: 18px; font-size: 11px; color: var(--muted-2); }
.st-chart__axis span { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.st-chart__axis span:first-child { transform: none; }
.st-chart__axis span:last-child { transform: translateX(-100%); }
.st-chart__scale { position: absolute; left: 0; top: 0; height: 128px; display: flex; flex-direction: column; justify-content: space-between; font-size: 10.5px; color: var(--muted-2); padding-top: 6px; }
.st-two { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.st-top { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.st-top li { display: grid; grid-template-columns: 46px 1fr; grid-template-rows: auto auto; column-gap: 10px; row-gap: 4px; align-items: center; }
.st-top__pct { grid-row: 1 / 3; font-size: 18px; font-weight: 700; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.st-top__label { font-size: 13px; color: var(--text); }
.st-top__bar { height: 5px; border-radius: 3px; background: var(--surface-3); overflow: hidden; }
.st-top__bar span { display: block; height: 100%; background: var(--accent-2); border-radius: 3px; }
.st-days { display: grid; grid-template-columns: repeat(90, 1fr); gap: 2px; height: 34px; }
.st-day { display: inline-block; border-radius: 2px; background: var(--success); min-width: 2px; }
.st-day--yellow { background: var(--warning); } .st-day--red { background: var(--danger); } .st-day--maint { background: var(--info); }
.st-days__legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 11.5px; color: var(--muted); }
.st-days__legend .st-day { width: 10px; height: 10px; vertical-align: -1px; margin-right: 4px; }

@media (max-width: 760px) {
    .status-top { padding: 12px 16px; }
    .status-top__brand span { display: none; }
    .status-main { padding: 18px 16px 32px; }
    .st-hero { padding: 20px; gap: 14px; }
    .st-hero h1 { font-size: 21px; }
    .st-two { grid-template-columns: 1fr; }
    .st-ask { padding: 22px 16px; }
    .st-cats { grid-template-columns: 1fr 1fr; }
    .st-days { gap: 1px; }
    .st-axis-minor { display: none; }
}
@media (prefers-reduced-motion: reduce) { .light__dot::after, .st-hero__light::after, .st-spinner { animation: none !important; } }

/* Status no DEV Control (aba do sistema / monitor / dashboard) */
.mon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mon-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: inherit; }
.mon-card:hover { color: inherit; border-color: var(--accent-border); }
.mon-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.mon-card__name { font-weight: 700; color: var(--text-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mon-card__reason { font-size: 12.5px; color: var(--muted); min-height: 18px; }
.mon-card__meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--muted-2); }
.mon-card__meta strong { color: var(--text); font-weight: 600; }
.copy-row { display: flex; gap: 8px; align-items: stretch; }
.mon-now { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 14px 16px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); }
.mon-now__main { display: flex; align-items: center; gap: 14px; }
.mon-now__label { font-weight: 600; color: var(--text-strong); }
.mon-now__stats { display: flex; gap: 18px; flex-wrap: wrap; font-size: 12.5px; color: var(--muted); }
.mon-now__stats strong { display: block; font-size: 16px; color: var(--text-strong); font-variant-numeric: tabular-nums; }
.field[data-show-for][hidden] { display: none; }
.copy-row input, .copy-row textarea { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12px; }
.copy-row textarea { min-height: 64px; }
.dash-status-strip { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dash-status-strip a { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2); color: var(--text); font-size: 12px; }
.dash-status-strip a:hover { border-color: var(--accent-border); color: var(--text); }

/* Chamado sem login (/status/ajuda) */
.help-card { margin-top: 18px; }
.help-card .form-actions { justify-content: flex-end; margin-top: 14px; }
.help-note { margin-top: 14px; font-size: 13px; }
.help-done, [data-confirm-done] { text-align: center; }
.help-title { margin: 0 0 14px; font-size: 22px; color: var(--text-strong); }
.st-hero__cta { margin-top: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 640px) { .help-card .form-grid { grid-template-columns: 1fr; } }

/* Mini App do Telegram: sem cabeçalho/rodapé do site (o Telegram já mostra o título e o "voltar") */
.in-telegram .status-top__nav, .in-telegram .status-foot, .in-telegram .st-back { display: none; }
.in-telegram .status-main { padding-top: 8px; }