/* ============================================================
   jmnoti-web — CSS único (tema claro + dark mode)
   Serve status.html, login.html, fragments/cards.html e
   fragments/detalle.html. Nada de <style> inline nos templates:
   qualquer cor nova passe por uma variável daqui.
   ============================================================ */

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ---------- Tema claro (padrão) ---------- */
:root {
    --vermelho: #ad132d;
    --vermelho-2: #c91e3a;
    --vinho: #5f0b19;
    --vinho-meio: #7c1122;
    --cinza-aux: #9e9e9e;
    --cinza-2: #979797;
    --borda-suave: #ededed;
    --borda-2: #e8e8e8;
    --amarelo-pend: #ffe082;
    --amarelo-pend-2: #e6c022;
    --amarelo-borde: #d4a017;

    /* superfícies e texto */
    --fundo-app: #fafafa;
    --fundo-painel: #f6f4f0;
    --footer-fundo: #f5f5f5;
    --superficie: #ffffff;
    --superficie-2: #fafafa;
    --superficie-3: #f6f4f0;
    --texto: #2b2b2b;
    --texto-suave: #555555;
    --texto-fraco: #7a7a7a;
    --vinho-texto: #5f0b19;
    --hover-1: #f6f5f3;
    --hover-2: #f1efec;
    --linha-par: #fcfcfc;

    /* componentes */
    --aba-fundo: #f0efed;
    --aba-hover: #e2e0dd;
    --aba-limpo-fundo: #cfcfcf;
    --aba-limpo-texto: #3a3a3a;
    --chip-neutro-fundo: #f0efed;
    --chip-neutro-texto: #555555;
    --chip-azul-fundo: #eef2ff;
    --chip-azul-texto: #28477f;
    --logo-fundo: #ffffff;
    --logo-texto: #ad132d;

    /* estados */
    --erro-fundo: #ffd9d9;
    --erro-texto: #b4232f;
    --cel-erro-fundo: #ffc9c9;
    --aviso-fundo: #ffec8a;
    --pend-fundo: #ffe082;
    --pend-texto: #6b4b00;
    --pend-num-texto: #8a6d00;
    --ok-texto: #2e7d32;
    --ok-fundo: #dff5e1;
    --man-texto: #c56600;
    --laranja-texto: #c56600;
    --link: #1565c0;

    /* cards */
    --card-erro-fundo: #fdeaea;
    --card-erro-banner: #f8d0d0;
    --card-erro-texto: #8f1622;
    --card-erro-borda: #f3b8b8;
    --card-pend-fundo: #fff8e1;
    --card-pend-banner: #ffecb3;
    --card-pend-texto: #6b4b00;
    --card-pend-borda: #f0dc9a;
    --card-erro-fundo-tc: #fde3e3;
    --card-pend-fundo-tc: #fff6d9;

    /* modal de detalhe */
    --msg-fundo: #fff6f0;
    --msg-borda: #f3d9c2;
    --msg-texto: #6b3a2a;

    /* toast */
    --toast-texto: #555555;
    --toast-b: #2b2b2b;
    --toast-fechar: #9a9a9a;

    /* sombras */
    --sombra-card: rgba(0, 0, 0, .06);
    --sombra-forte: rgba(0, 0, 0, .12);
    --sombra-tabela: rgba(0, 0, 0, .08);
    --sombra-toast: rgba(0, 0, 0, .22);
    --backdrop: rgba(20, 12, 30, .55);
}

/* ---------- Dark mode ---------- */
html.tema-escuro {
    --fundo-app: #17141a;
    --fundo-painel: #1c191f;
    --footer-fundo: #1c1920;
    --superficie: #232028;
    --superficie-2: #2a2731;
    --superficie-3: #1f1c24;
    --texto: #e8e4ea;
    --texto-suave: #b9b3bd;
    --texto-fraco: #8d8794;
    --vinho-texto: #ff9aa8;
    --borda-suave: #34303c;
    --borda-2: #3a3542;
    --hover-1: #2b2733;
    --hover-2: #2e2a36;
    --linha-par: #262330;
    --aba-fundo: #2e2a36;
    --aba-hover: #3a3542;
    --aba-limpo-fundo: #4a4552;
    --aba-limpo-texto: #d5d0da;
    --chip-neutro-fundo: #2e2a36;
    --chip-neutro-texto: #c5c0c9;
    --chip-azul-fundo: #26314d;
    --chip-azul-texto: #9db4e8;
    --logo-fundo: #ffffff;
    --logo-texto: #ad132d;
    --erro-fundo: #4a1d24;
    --erro-texto: #ff9aa4;
    --cel-erro-fundo: #4a1d24;
    --aviso-fundo: #4d3f14;
    --pend-fundo: #4d3f14;
    --pend-texto: #ffd76a;
    --pend-num-texto: #ffd76a;
    --ok-texto: #7ed68b;
    --ok-fundo: #1e3524;
    --man-texto: #ffb74d;
    --laranja-texto: #ffb74d;
    --link: #7fb3ff;
    --card-erro-fundo: #3a1d22;
    --card-erro-banner: #4a222a;
    --card-erro-texto: #ffb3bb;
    --card-erro-borda: #5c2a33;
    --card-pend-fundo: #383016;
    --card-pend-banner: #443a1c;
    --card-pend-texto: #ffdf8f;
    --card-pend-borda: #57491f;
    --card-erro-fundo-tc: #341a1f;
    --card-pend-fundo-tc: #332b15;
    --msg-fundo: #32261f;
    --msg-borda: #4d3a2c;
    --msg-texto: #e8b8a0;
    --toast-texto: #b9b3bd;
    --toast-b: #e8e4ea;
    --toast-fechar: #8d8794;
    --cinza-aux: #9a94a0;
    --cinza-2: #8d8794;
    --sombra-card: rgba(0, 0, 0, .4);
    --sombra-forte: rgba(0, 0, 0, .55);
    --sombra-tabela: rgba(0, 0, 0, .5);
    --sombra-toast: rgba(0, 0, 0, .6);
    --backdrop: rgba(0, 0, 0, .7);
    color-scheme: dark;
}

body {
    font-family: 'Open Sans', 'Inter', sans-serif;
    background: var(--fundo-app);
    color: var(--texto);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ============================================================
   LOGIN (login.html)
   ============================================================ */

.login-body {
    background: linear-gradient(145deg, var(--vinho) 0%, var(--vermelho) 55%, #c91e3a 100%);
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.login-body::before,
.login-body::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(circle at 20% 20%, rgba(255, 255, 255, .06), transparent 40%),
        radial-gradient(circle at 80% 80%, rgba(255, 255, 255, .05), transparent 40%);
    pointer-events: none;
}

.login-card {
    background: var(--superficie);
    border-radius: 28px;
    padding: 38px 36px;
    width: 380px;
    max-width: 92vw;
    box-shadow: 0 24px 60px rgba(0, 0, 0, .35);
    text-align: center;
    color: var(--texto);
}

.login-card .logo {
    width: 64px;
    height: 64px;
    margin: 0 auto 14px;
    border-radius: 18px;
    background: linear-gradient(135deg, var(--vermelho), var(--vermelho-2));
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-size: 26px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.login-card h1 {
    font-family: 'Inter', sans-serif;
    font-size: 24px;
    color: var(--vinho-texto);
    font-weight: 700;
}

.login-card .sub {
    color: var(--cinza-aux);
    font-size: 13.5px;
    margin: 2px 0 26px;
    letter-spacing: .2px;
}

.login-card label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--texto-suave);
    margin: 0 0 4px;
    text-align: left;
}

.login-card input {
    width: 100%;
    padding: 13px 14px;
    font-size: 15px;
    font-family: 'Inter', sans-serif;
    color: var(--texto);
    border: 1.5px solid var(--borda-suave);
    border-radius: 12px;
    background: var(--superficie-2);
    transition: border-color .15s, box-shadow .15s, background .15s;
    margin-top: 4px;
}

.login-card input:focus {
    outline: none;
    border-color: var(--vermelho);
    background: var(--superficie);
    box-shadow: 0 0 0 3px rgba(173, 19, 45, .18);
}

.login-card button {
    width: 100%;
    margin-top: 22px;
    padding: 14px;
    font-family: 'Lato', sans-serif;
    font-size: 16px;
    font-weight: 800;
    letter-spacing: .4px;
    background: linear-gradient(135deg, var(--vermelho), var(--vermelho-2));
    color: #fff;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 6px 16px rgba(173, 19, 45, .35);
    transition: transform .12s, box-shadow .15s, filter .15s;
}

.login-card button:hover {
    transform: translateY(-1px);
    filter: brightness(1.06);
    box-shadow: 0 10px 22px rgba(173, 19, 45, .42);
}

.login-card button:active {
    transform: translateY(1px) scale(.98);
}

.login-card .erro {
    background: var(--erro-fundo);
    color: var(--erro-texto);
    padding: 10px 14px;
    border-radius: 12px;
    font-size: 13.5px;
    margin-top: 16px;
    border: 1.5px solid var(--card-erro-borda);
    display: flex;
    align-items: center;
    gap: 8px;
}

.login-card .erro::before {
    content: '⚠';
    font-size: 15px;
}

.login-card .foot {
    color: var(--cinza-aux);
    font-size: 11.5px;
    margin-top: 22px;
}

/* ============================================================
   CABEÇALHO (status.html)
   ============================================================ */

header {
    background: linear-gradient(135deg, var(--vinho) 0%, var(--vinho-meio) 45%, var(--vermelho) 100%);
    color: #fff;
    padding: 0 22px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    box-shadow: 0 3px 14px rgba(95, 11, 25, .35);
    border-bottom: 2px solid var(--vermelho-2);
}

.brand {
    display: flex;
    align-items: center;
    gap: 12px;
}

.brand .logo {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--logo-fundo);
    color: var(--logo-texto);
    font-family: 'Lato', sans-serif;
    font-weight: 800;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}

.brand h1 {
    font-family: 'Inter', sans-serif;
    font-size: 19px;
    font-weight: 700;
}

.brand .tag {
    font-size: 11.5px;
    color: rgba(255, 255, 255, .75);
    font-weight: 600;
    letter-spacing: .3px;
}

header nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.nav-item {
    padding: 8px 14px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 13.5px;
    font-weight: 600;
    color: rgba(255, 255, 255, .85);
    text-decoration: none;
    border-bottom: 3px solid transparent;
    transition: background .15s, color .15s, border-bottom .15s;
}

.nav-item:hover,
.nav-item.activo {
    color: #fff;
    border-bottom: 3px solid var(--vermelho-2);
    background: rgba(255, 255, 255, .06);
}

.nav-item.activo {
    background: rgba(201, 30, 58, .18);
}

.user-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 600;
}

.user-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .16);
    color: #fff;
    font-family: 'Lato', sans-serif;
    font-weight: 800;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.logout {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 30px;
    background: rgba(255, 255, 255, .12);
    color: #fff;
    text-decoration: none;
    font-family: 'Lato', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .3px;
    border: 1px solid rgba(255, 255, 255, .35);
    transition: background .15s, transform .12s;
}

.logout:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-1px);
}

/* Botão de tela cheia / tema no header */
.btn-tela-cheia {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, .35);
    background: rgba(255, 255, 255, .10);
    color: #fff;
    font-family: 'Inter', 'Open Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}

.btn-tela-cheia:hover {
    background: rgba(255, 255, 255, .20);
    border-color: rgba(255, 255, 255, .6);
}

.btn-tela-cheia:active {
    transform: translateY(1px);
}

.btn-tela-cheia[aria-pressed="true"] {
    border-bottom: 3px solid var(--vermelho-2);
    color: #fff;
    background: rgba(201, 30, 58, .18);
}

@media (max-width: 420px) {
    .btn-tela-cheia span:last-child {
        display: none;
    }
}

/* ============================================================
   TOTALIZADORES + FILTROS (status.html)
   ============================================================ */

.totalizadores {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 12px;
}

.tot {
    flex: 1;
    min-width: 130px;
    background: var(--superficie);
    border: 1px solid var(--borda-2);
    border-radius: 14px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px var(--sombra-card);
    cursor: pointer;
    border-left: 5px solid var(--borda-2);
    transition: box-shadow .15s, transform .12s;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    color: var(--texto);
}

.tot:hover {
    box-shadow: 0 4px 14px var(--sombra-forte);
    transform: translateY(-1px);
}

.tot[data-activa="true"] {
    outline: 2px solid var(--vermelho-2);
    outline-offset: 1px;
}

.tot-ico {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    flex-shrink: 0;
}

.tot-n {
    font-family: 'Inter', sans-serif;
    font-size: 21px;
    font-weight: 800;
    line-height: 1;
}

.tot-rot {
    font-size: 11.5px;
    color: var(--cinza-aux);
    font-weight: 600;
    margin-top: 2px;
}

.tot--todos .tot-ico { background: var(--chip-neutro-fundo); color: var(--vinho-texto); }
.tot--todos .tot-n { color: var(--vinho-texto); }
.tot--ok .tot-ico { background: var(--ok-fundo); color: var(--ok-texto); }
.tot--ok .tot-n { color: var(--ok-texto); }
.tot--erro .tot-ico { background: var(--erro-fundo); color: var(--erro-texto); }
.tot--erro .tot-n { color: var(--erro-texto); }
.tot--pend .tot-ico { background: var(--pend-fundo); color: var(--pend-texto); }
.tot--pend .tot-n { color: var(--pend-num-texto); }
.tot--man .tot-ico { background: linear-gradient(135deg, #ffb74d, #ff9800); color: #5b3200; }
.tot--man .tot-n { color: var(--man-texto); }

.barra-filtros {
    background: var(--superficie);
    border: 1px solid var(--borda-2);
    border-radius: 14px;
    padding: 10px 16px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px var(--sombra-card);
}

.busca {
    flex: 1;
    min-width: 200px;
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--borda-2);
    border-radius: 10px;
    padding: 7px 12px;
    background: var(--superficie-2);
}

.busca:focus-within {
    border-color: var(--vermelho-2);
    background: var(--superficie);
}

.busca input {
    border: none;
    outline: none;
    background: transparent;
    font-family: 'Open Sans', sans-serif;
    font-size: 13px;
    width: 100%;
    color: var(--texto);
}

.busca-limpar {
    border: none;
    background: transparent;
    color: var(--cinza-aux);
    font-size: 15px;
    cursor: pointer;
    display: none;
    padding: 0 2px;
    line-height: 1;
}

.busca-limpar:hover { color: var(--vermelho); }

.btn-ordenar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 10px;
    border: 1px solid var(--borda-2);
    background: var(--aba-fundo);
    color: var(--texto-suave);
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
    white-space: nowrap;
}

.btn-ordenar:hover { background: var(--aba-hover); }

.btn-ordenar[data-activa="true"] {
    background: var(--vinho);
    color: #fff;
    border-color: var(--vermelho);
}

.sem-resultados {
    padding: 26px 18px;
    text-align: center;
    color: var(--cinza-aux);
    font-size: 13.5px;
}

/* ============================================================
   LEGENDA (status.html)
   ============================================================ */

.legend {
    background: var(--superficie);
    border: 1px solid var(--borda-2);
    border-radius: 14px;
    padding: 10px 16px;
    font-size: 12.5px;
    color: var(--texto-suave);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    box-shadow: 0 2px 8px var(--sombra-card);
}

.legend b {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--vinho-texto);
}

.chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: 20px;
    padding: 2px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
}

.chip .muestra-borde {
    width: 18px;
    height: 14px;
    border-radius: 5px;
    border: 2px solid var(--borda-2);
    flex-shrink: 0;
    background: var(--superficie);
}

.chip .muestra-borde.rojo {
    border-color: var(--vermelho);
}

.chip .muestra-azul {
    background: var(--chip-azul-fundo);
    border-color: transparent;
}

/* ============================================================
   CONTEÚDO PRINCIPAL / TABELA (status.html)
   ============================================================ */

main {
    padding: 18px 22px;
    flex: 1;
}

.legend-holder {
    margin-bottom: 16px;
}

.card-table {
    background: var(--superficie);
    border: 1px solid var(--borda-2);
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 4px 18px var(--sombra-tabela);
}

.tabla-scroll {
    overflow-x: auto;
}

table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
}

thead th {
    background: var(--vinho);
    color: #fff;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 11px 14px;
    text-align: left;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: .2px;
    border-bottom: 2px solid var(--vermelho-2);
    white-space: nowrap;
}

tbody td {
    padding: 9px 14px;
    border-bottom: 1px solid var(--borda-2);
    white-space: nowrap;
    color: var(--texto);
}

tbody tr {
    transition: background .12s;
}

tbody tr:hover td {
    background: var(--hover-1);
}

tbody tr:nth-child(even) td {
    background: var(--linha-par);
}

tbody tr:hover td {
    background: var(--hover-2);
}

tbody td:nth-child(2) {
    font-family: 'Inter', sans-serif;
    font-weight: 600;
    color: var(--vinho-texto);
}

tbody td:nth-child(3) {
    font-weight: 600;
}

tbody tr:last-child td {
    border-bottom: none;
}

/* Estados */
.atraso {
    background: var(--erro-fundo);
    color: var(--erro-texto);
    font-weight: 700;
    border-radius: 8px;
    padding: 1px 7px;
    display: inline-block;
}

.ok {
    color: var(--ok-texto);
    font-weight: 600;
}

.laranja {
    color: var(--laranja-texto);
    font-weight: 700;
}

.cel-pend {
    background: var(--amarelo-pend);
    color: var(--pend-texto);
    font-weight: 600;
}

.cel-erro {
    background: var(--cel-erro-fundo);
    color: var(--erro-texto);
    font-weight: 700;
}

/* Ícone de pendência (primeira coluna) */
.pend-ico {
    text-align: center;
    width: 34px;
}

.ico-pend {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    transition: transform .12s;
}

.ico-err {
    background: var(--vermelho);
    color: #fff;
}

.ico-aviso {
    background: var(--aviso-fundo);
    color: var(--pend-texto);
}

.ico-ok {
    background: var(--ok-fundo);
    color: var(--ok-texto);
}

.pend-ico .ico-pend:hover {
    transform: scale(1.15);
}

/* Badges coluna M / TAR */
.badge-man {
    background: linear-gradient(135deg, #ffb74d, #ff9800);
    color: #5b3200;
    font-weight: 700;
    border-radius: 12px;
    padding: 1px 9px;
    display: inline-block;
    font-size: 12px;
}

.badge-tar {
    background: var(--chip-azul-fundo);
    color: var(--chip-azul-texto);
    font-weight: 700;
    border-radius: 12px;
    padding: 1px 9px;
    display: inline-block;
    font-size: 12px;
}

a.arq {
    color: var(--link);
    text-decoration: none;
}

a.arq:hover {
    text-decoration: underline;
    color: var(--vermelho);
}

/* Footer */
footer {
    padding: 14px 22px;
    color: var(--cinza-aux);
    font-size: 12px;
    border-top: 1px solid var(--borda-2);
    background: var(--footer-fundo);
    display: flex;
    align-items: center;
    gap: 8px;
}

.pulso {
    color: var(--cinza-2);
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.pulso::before {
    content: '';
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #56c271;
    margin-right: 2px;
}

/* ============================================================
   MODO TELA CHEIA / MONITORAMENTO (status.html)
   ============================================================ */

#tabla-status.tela-cheia {
    position: fixed;
    inset: 0;
    z-index: 900; /* abaixo do modal (1000) e dos toasts (2000) */
    background: var(--fundo-painel);
    overflow-y: auto;
    padding: 12px 16px;
}

#tabla-status.tela-cheia .unit-grid {
    gap: 7px;
}

#tabla-status.tela-cheia .unit-card {
    border-radius: 10px;
    border: 1px solid var(--borda-2);
    box-shadow: 0 1px 3px var(--sombra-card);
    border-top: 4px solid var(--borda-2);
}

/* Mantém o destaque de erro/pendência visível em tela cheia:
   a regra acima (ID no seletor) sobrescreveria as classes do card. */
#tabla-status.tela-cheia .unit-card--erro {
    border: 2px solid var(--vermelho);
    background: var(--card-erro-fundo-tc);
}

#tabla-status.tela-cheia .unit-card--pend {
    border: 2px solid var(--amarelo-borde);
    background: var(--card-pend-fundo-tc);
}

#tabla-status.tela-cheia .unit-motivo {
    font-size: 10px;
    padding: 3px 6px;
}

#tabla-status.tela-cheia .unit-card-head,
#tabla-status.tela-cheia .unit-corpo {
    padding: 6px 8px;
}

#tabla-status.tela-cheia .unit-nome {
    font-size: 13px;
}

#tabla-status.tela-cheia .unit-abas {
    margin-bottom: 8px;
    gap: 6px;
}

@media (min-width: 1200px) {
    #tabla-status.tela-cheia .unit-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

@media (min-width: 1600px) {
    #tabla-status.tela-cheia .unit-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    }
}

@media (max-width: 420px) {
    #tabla-status.tela-cheia .unit-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ============================================================
   CARDS DE UNIDADE (fragments/cards.html)
   ============================================================ */

.unit-visor {
    padding: 4px 0;
}

.unit-abas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0 0 16px;
}

.unit-aba {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 20px;
    font-family: 'Inter', 'Open Sans', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--chip-neutro-texto);
    background: var(--aba-fundo);
    border: 1px solid var(--borda-2);
    cursor: pointer;
    transition: background .15s, color .15s, border-color .15s;
}

.unit-aba .unit-aba-n {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 18px;
    height: 18px;
    border-radius: 50%;
    font-size: 11px;
    font-weight: 700;
    background: var(--cinza-aux);
    color: #fff;
}

.unit-aba[data-activa="true"] {
    background: var(--vinho);
    color: #fff;
    border-color: var(--vermelho);
}

.unit-aba[data-activa="true"] .unit-aba-n {
    background: var(--vermelho-2);
}

/* Grupo com pendência: destaque vermelho (só se houver alguma unidade
   com erro/pendência no grupo). A borda vermelha vale nos dois estados. */
.unit-aba--pend {
    background: var(--card-erro-fundo);
    color: var(--erro-texto);
    border-color: var(--vermelho);
}

.unit-aba--pend[data-activa="true"] {
    background: var(--vermelho);
    color: #fff;
    border-color: var(--vermelho-2);
}

.unit-aba--pend[data-activa="true"] .unit-aba-n {
    background: #fff;
    color: var(--vermelho);
}

/* Grupo sem pendência: cinza escuro não selecionado, cinza claro selecionado. */
.unit-aba--limpo[data-activa="true"] {
    background: var(--aba-limpo-fundo);
    color: var(--aba-limpo-texto);
    border-color: var(--borda-2);
}

.unit-aba--limpo[data-activa="true"] .unit-aba-n {
    background: var(--cinza-2);
}

.unit-aba:hover:not([data-activa="true"]) {
    background: var(--aba-hover);
}

/* ---- Grid de cards responsivo ---- */
.unit-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

@media (max-width: 640px) {
    .unit-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ---- Card da unidade ---- */
.unit-card {
    background: var(--superficie);
    border: 1px solid var(--borda-2);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 3px 12px var(--sombra-card);
    border-top: 4px solid var(--borda-2);
    cursor: pointer;
    transition: box-shadow .15s, transform .12s;
}

.unit-card:hover {
    box-shadow: 0 6px 18px var(--sombra-forte);
    transform: translateY(-1px);
}

.unit-card--erro {
    border: 2px solid var(--vermelho);
    background: var(--card-erro-fundo);
}

.unit-card--erro .unit-nome {
    color: var(--erro-texto);
}

.unit-card--pend {
    border: 2px solid var(--amarelo-borde);
    background: var(--card-pend-fundo);
}

.unit-card--ok {
    border-top-color: var(--borda-2);
}

/* Banner do motivo do problema (texto simples para leigos) */
.unit-motivo {
    margin: 0;
    padding: 7px 12px;
    font-size: 11.5px;
    line-height: 1.4;
    font-weight: 600;
    display: flex;
    align-items: flex-start;
    gap: 6px;
}

.unit-motivo::before {
    content: '⚠';
    flex-shrink: 0;
}

.unit-card--erro .unit-motivo {
    background: var(--card-erro-banner);
    color: var(--card-erro-texto);
    border-top: 1px solid var(--card-erro-borda);
}

.unit-card--pend .unit-motivo {
    background: var(--card-pend-banner);
    color: var(--card-pend-texto);
    border-top: 1px solid var(--card-pend-borda);
}

.unit-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}

.unit-titulo {
    min-width: 0;
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    flex: 1;
}

.unit-nome {
    font-family: 'Inter', 'Open Sans', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.unit-sub {
    font-size: 11.5px;
    color: var(--cinza-aux);
    display: flex;
    align-items: center;
    gap: 5px;
}

.unit-versao {
    font-size: 11px;
    color: var(--cinza-2);
    font-family: 'Open Sans', sans-serif;
    font-weight: 600;
    padding: 2px 8px;
    border: 1px solid var(--borda-suave);
    border-radius: 8px;
    white-space: nowrap;
}

.unit-versao-wrap {
    display: inline-flex;
    align-items: center;
    padding: 1px;
    gap: 5px;
}

.unit-chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.unit-chip-man {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    background: linear-gradient(135deg, #ffb74d, #ff9800);
    color: #5b3200;
}

.unit-chip-tar {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 8px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 700;
    background: var(--chip-azul-fundo);
    color: var(--chip-azul-texto);
}

.unit-corpo {
    padding: 9px 12px;
    border-top: 1px solid var(--borda-2);
}

.unit-fila-duo {
    display: flex;
    justify-content: space-between;
    gap: 10px;
    padding: 2px 0;
}

.unit-duo {
    display: inline-flex;
    align-items: baseline;
    gap: 5px;
    min-width: 0;
}

.unit-arq {
    font-size: 10.5px;
    color: var(--cinza-aux);
    font-weight: 700;
    letter-spacing: .5px;
    text-transform: uppercase;
    margin: 5px 0 1px;
}

.unit-rotulo {
    font-size: 11px;
    color: var(--cinza-aux);
    font-weight: 700;
}

.unit-valor {
    font-size: 10px;
    font-weight: 600;
}

.unit-valor--atraso {
    background: var(--erro-fundo);
    color: var(--erro-texto);
    font-weight: 700;
    border-radius: 8px;
    padding: 1px 6px;
}

.unit-valor--vazio {
    color: var(--cinza-2);
    font-weight: 400;
}

.unit-valor--nro {
    font-family: 'Inter', sans-serif;
}

.unit-valor--nro-vermelho {
    color: var(--erro-texto);
    font-weight: 800;
}

/* ============================================================
   MODAL DE DETALHE (fragments/detalle.html + shell em status.html)
   ============================================================ */

.det-modal-root {
    display: none;
}

.det-modal-root.abierto {
    display: block;
}

.det-modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: var(--backdrop);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    backdrop-filter: blur(2px);
}

.det-modal-panel {
    background: var(--superficie);
    border-radius: 16px;
    width: min(760px, 94vw);
    max-height: 86vh;
    overflow: hidden;
    box-shadow: 0 18px 46px var(--sombra-toast);
    border-top: 4px solid var(--vinho);
    display: flex;
    flex-direction: column;
}

.det-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 12px 18px;
    background: var(--superficie-3);
    border-bottom: 1px solid var(--borda-2);
}

.det-modal-title {
    font-family: 'Inter', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--vinho-texto);
}

.det-modal-close {
    border: none;
    background: transparent;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    color: var(--texto-fraco);
    padding: 0 6px;
    border-radius: 6px;
}

.det-modal-close:hover {
    color: var(--vermelho);
}

.det-modal-body {
    padding: 14px 18px;
    overflow-y: auto;
}

/* Bloqueio do scroll de fundo enquanto o modal está aberto */
.det-modal-root.abierto body {
    overflow: hidden;
}

/* ---- Conteúdo do detalhe (fragments/detalle.html) ---- */
.det-modal {
    font-family: 'Open Sans', 'Inter', sans-serif;
    color: var(--texto);
}

.det-cab {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    padding: 12px 6px 0;
}

.det-titulo {
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--vinho-texto);
}

.det-sub {
    font-size: 11.5px;
    color: var(--cinza-aux);
}

.det-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    border-radius: 20px;
    padding: 2px 10px;
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    font-weight: 600;
    background: var(--chip-neutro-fundo);
    color: var(--chip-neutro-texto);
    border: 1px solid var(--borda-2);
}

.det-chip.vermello { background: var(--erro-fundo); color: var(--erro-texto); font-weight: 700; }
.det-chip.amarelo { background: var(--pend-fundo); color: var(--pend-texto); font-weight: 700; }
.det-chip.azul { background: var(--chip-azul-fundo); color: var(--chip-azul-texto); font-weight: 700; }
.det-chip.laranja { background: linear-gradient(135deg, #ffb74d, #ff9800); color: #5b3200; font-weight: 700; }

.det-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    margin: 4px 6px 0;
}

.det-campo {
    background: var(--superficie-2);
    border: 1px solid var(--borda-2);
    border-radius: 10px;
    padding: 7px 10px;
}

.det-campo > .det-rotulo {
    font-size: 10.5px;
    color: var(--cinza-aux);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .4px;
    display: block;
    margin-bottom: 2px;
}

.det-campo > .det-valor {
    font-size: 12.5px;
    font-weight: 600;
}

.det-campo > .det-valor.vermello { color: var(--erro-texto); }
.det-campo > .det-valor.vazio { color: var(--cinza-2); font-weight: 400; }

.det-seccion {
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--vinho-texto);
    text-transform: uppercase;
    letter-spacing: .6px;
    border-bottom: 1px solid var(--borda-2);
    padding: 6px 6px;
    margin-top: 14px;
}

/* Serviços */
.det-svc-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 10px;
    border-bottom: 1px solid var(--borda-suave);
}

.det-svc-fila .det-svc-nome { flex: 1; font-size: 12.5px; font-weight: 600; }
.det-svc-fila .det-svc-dt { font-size: 11px; color: var(--cinza-aux); font-family: 'Open Sans'; }
.det-svc-fila .det-svc-status {
    border-radius: 20px;
    padding: 1px 9px;
    font-size: 11px;
    font-weight: 700;
}
.det-svc-fila .det-svc-status.pend { background: var(--erro-fundo); color: var(--erro-texto); }
.det-svc-fila .det-svc-status.ok { background: var(--ok-fundo); color: var(--ok-texto); }
.det-svc-fila .det-svc-status.nd { background: var(--borda-suave); color: var(--cinza-aux); }

/* Arquivos */
.det-arq-fila {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 5px 10px;
    border-bottom: 1px solid var(--borda-suave);
}
.det-arq-nome { flex: 1; font-family: 'Courier New', monospace; font-size: 11.5px; }
.det-arq-dt { font-size: 11px; color: var(--cinza-aux); font-family: 'Open Sans'; }
.det-arq-backup {
    border-radius: 20px;
    padding: 0 8px;
    font-size: 10px;
    font-weight: 700;
    background: var(--chip-azul-fundo);
    color: var(--chip-azul-texto);
}

/* Texto expandido de pendências */
.det-msg {
    background: var(--msg-fundo);
    border: 1px solid var(--msg-borda);
    border-radius: 10px;
    padding: 8px 12px;
    white-space: pre-wrap;
    word-break: break-word;
    font-family: 'Courier New', monospace;
    font-size: 11.5px;
    color: var(--msg-texto);
}

.det-vacio { color: var(--cinza-aux); font-size: 12px; font-style: italic; padding: 8px 6px; }

/* ============================================================
   TOASTS (status.html)
   ============================================================ */

.toast-root {
    position: fixed;
    top: 70px;
    right: 16px;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: min(320px, 92vw);
    pointer-events: none;
}

.toast {
    pointer-events: auto;
    background: var(--superficie);
    border: 1px solid var(--borda-2);
    border-left: 5px solid var(--vermelho);
    border-radius: 12px;
    padding: 12px 14px;
    box-shadow: 0 8px 24px var(--sombra-toast);
    display: flex;
    flex-direction: column;
    gap: 6px;
    animation: toast-in .25s ease-out;
}

.toast.saindo { animation: toast-out .3s ease-in forwards; }

.toast-titulo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 700;
    color: var(--vinho-texto);
}

.toast-fechar {
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    color: var(--toast-fechar);
    cursor: pointer;
    padding: 0 4px;
    border-radius: 6px;
}

.toast-fechar:hover { color: var(--vermelho); }

.toast-msg {
    font-size: 12px;
    color: var(--toast-texto);
    line-height: 1.45;
}

.toast-msg b { color: var(--toast-b); }

@keyframes toast-in {
    from { opacity: 0; transform: translateX(24px); }
    to { opacity: 1; transform: translateX(0); }
}

@keyframes toast-out {
    from { opacity: 1; transform: translateX(0); }
    to { opacity: 0; transform: translateX(24px); }
}

@media (max-width: 640px) {
    .toast-root {
        right: 10px;
        left: 10px;
        width: auto;
    }
}

/* ============================================================
   RESPONSIVO GERAL
   ============================================================ */

@media (max-width: 760px) {
    header {
        height: auto;
        flex-wrap: wrap;
        padding: 12px 16px;
        gap: 10px;
    }

    .brand h1 {
        font-size: 16px;
    }

    .user-chip span {
        display: none;
    }

    main {
        padding: 14px 12px;
    }

    .card-table {
        border-radius: 14px;
    }
}