/* ===== Identidade Apotec =====
   Mesma paleta do site (apotec.com.br) e do login do Sherlock web:
   azul-petróleo #2c5f7c + cinzas neutros. Fontes do sistema — a unidade
   roda sem internet, então nada de fonte externa.

   Todas as cores do sistema saem destas variáveis. O modo noturno
   (html[data-theme="dark"], escolhido pelo usuário no topo — ver tema.js)
   só redefine os valores. */
:root {
    --ap-primaria:       #2c5f7c;   /* fundo de botão */
    --ap-primaria-hover: #224a61;
    --ap-acento:         #2c5f7c;   /* texto/ícone em destaque (aba ativa etc.) */
    --ap-foco:           rgba(44, 95, 124, 0.22);
    --ap-claro:          #8fbad2;
    --ap-claro-2:        #9fd4ee;

    --ap-fundo:          #e9eaeb;
    --ap-cartao:         #ffffff;
    --ap-cartao-2:       #f4f5f6;   /* cabeçalho de cartão */
    --ap-superficie:     #e2e4e6;
    --ap-linha:          #a3a7ab;   /* contorno de cartão */
    --ap-linha-suave:    #c9cccf;   /* divisórias internas */
    --ap-borda:          #8c9196;   /* contorno de campo e botão */

    --ap-texto:          #1f1f1f;
    --ap-cinza:          #3f3f3f;   /* texto secundário */
    --ap-cinza-2:        #555555;   /* texto terciário (dicas, canal) */
    --ap-apagado:        #8c8c8c;   /* desabilitado */

    --ap-topo:           #1f2326;
    --ap-tinta:          #14181b;

    --ap-ok:             #15803d;
    --ap-ok-fundo:       #e3f2e8;
    --ap-alerta:         #b42318;
    --ap-alerta-hover:   #912018;
    --ap-alerta-fundo:   #fdf1f0;
    --ap-alerta-linha:   #e6a9a3;
    --ap-auto-fundo:     #fbe9c4;
    --ap-auto-texto:     #7a4f00;
    --ap-aviso:          #a14b05;

    --ap-sombra:         0 0 2px rgba(0, 0, 0, 0.08);   /* simétrica: não pesa mais embaixo */
    --ap-fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color-scheme: light;
}

html[data-theme="dark"] {
    --ap-primaria:       #2f6a8c;
    --ap-primaria-hover: #3a7da3;
    --ap-acento:         #8fc1dc;
    --ap-foco:           rgba(143, 193, 220, 0.3);

    --ap-fundo:          #111416;
    --ap-cartao:         #1a1e21;
    --ap-cartao-2:       #20252a;
    --ap-superficie:     #2a3035;
    --ap-linha:          #444c53;
    --ap-linha-suave:    #30373d;
    --ap-borda:          #5a646c;

    --ap-texto:          #eef0f2;
    --ap-cinza:          #cfd4d9;
    --ap-cinza-2:        #b3bac1;
    --ap-apagado:        #7d868e;

    --ap-topo:           #0b0d0f;

    --ap-ok:             #4ade80;
    --ap-ok-fundo:       #14301f;
    --ap-alerta:         #f87171;
    --ap-alerta-hover:   #fb8f8f;
    --ap-alerta-fundo:   #2c1716;
    --ap-alerta-linha:   #7a2f29;
    --ap-auto-fundo:     #3d2f0f;
    --ap-auto-texto:     #f6cd72;
    --ap-aviso:          #f6b26b;

    --ap-sombra:         0 1px 2px rgba(0, 0, 0, 0.4);
    color-scheme: dark;
}

body {
    background-color: var(--ap-fundo);
    color: var(--ap-texto);
    font-family: var(--ap-fonte);
}

/* ===== Tela de login ===== */
.login-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 40px 16px;
    overflow-y: auto;
    color: var(--ap-texto);
}

.login-fundo {
    position: fixed;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    background: var(--ap-tinta);
}
.login-brilho {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 70% 60% at 50% 45%, rgba(44, 95, 124, 0.35), transparent 70%);
}
#login-rede {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}
.login-vinheta {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 40%, rgba(10, 12, 14, 0.65) 100%);
}

.login-conteudo {
    position: relative;
    width: 100%;
    max-width: 384px;
    margin: auto;
}

.login-marca {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 32px;
}
.login-logo {
    height: 24px;
    width: auto;
    filter: invert(1);
}
.login-produto {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ap-claro);
}

.login-cartao {
    background: var(--ap-cartao);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 24px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.4);
}

.login-titulo {
    font-size: 1.125rem;
    font-weight: 600;
    margin: 0 0 20px;
}
.login-texto {
    font-size: 0.875rem;
    color: var(--ap-cinza);
    margin-bottom: 16px;
}
/* "Esqueci a senha": atendimento só pelo WhatsApp */
.login-aviso-whats {
    margin: -8px 0 16px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--ap-auto-fundo);
    color: var(--ap-auto-texto);
    font-size: 0.82rem;
}
.login-rotulo {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 6px;
}

.login-input {
    display: block;
    width: 100%;
    height: 44px;
    padding: 0 12px;
    border: 1px solid var(--ap-borda);
    border-radius: 6px;
    background: var(--ap-cartao);
    color: var(--ap-texto);
    font-size: 1rem;
}
.login-input::placeholder { color: var(--ap-apagado); }
.login-input:focus {
    outline: none;
    border-color: var(--ap-acento);
    box-shadow: 0 0 0 3px var(--ap-foco);
}

.login-campo-senha { position: relative; }
.login-campo-senha .login-input { padding-right: 44px; }
.login-olho {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--ap-cinza);
    border-radius: 4px;
}
.login-olho:hover { color: var(--ap-texto); }

.login-erro, .login-ok {
    font-size: 0.875rem;
    margin-top: 10px;
}
.login-erro { color: var(--ap-alerta); }
.login-ok   { color: var(--ap-ok); }

.login-btn, .login-btn-sec {
    display: block;
    width: 100%;
    height: 44px;
    margin-top: 20px;
    border-radius: 6px;
    font-weight: 600;
    transition: background-color .15s, color .15s;
}
.login-btn {
    border: 0;
    background: var(--ap-primaria);
    color: #fff;
}
.login-btn:hover { background: var(--ap-primaria-hover); }
.login-btn-sec {
    margin-top: 8px;
    border: 1px solid var(--ap-borda);
    background: var(--ap-cartao);
    color: var(--ap-texto);
}
.login-btn-sec:hover { background: var(--ap-superficie); }
.login-btn:focus-visible, .login-btn-sec:focus-visible, .login-link:focus-visible, .login-olho:focus-visible {
    outline: 2px solid var(--ap-claro-2);
    outline-offset: 2px;
}

.login-rodape-link {
    margin-top: 24px;
    text-align: center;
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.78);
}
/* Fora do "Entrar" o link vira redundante — o cartão já tem o Voltar/Cancelar */
.login-conteudo:has(#view-login.d-none) .login-rodape-link { display: none; }
/* Primeiro acesso e recuperação têm mais texto: cartão um pouco mais largo */
.login-conteudo:has(#view-login.d-none) { max-width: 460px; }

/* Aviso antes da senha (unidade em primeiro acesso, senhas ilegíveis) */
.login-aviso {
    font-size: 0.875rem;
    border-left: 3px solid var(--ap-primaria);
    background: var(--ap-cartao-2);
    padding: 8px 12px;
    border-radius: 4px;
    margin-bottom: 16px;
}
.login-aviso.erro { border-left-color: var(--ap-alerta); }

/* Primeiro acesso: o que cada senha pode fazer, antes dos campos dela */
.login-papel {
    font-size: 0.8125rem;
    color: var(--ap-cinza);
    background: var(--ap-cartao-2);
    border: 1px solid var(--ap-linha-suave);
    border-radius: 6px;
    padding: 10px 12px;
    margin: 4px 0 12px;
}
.login-papel strong { color: var(--ap-texto); }
.login-papel ul { margin: 6px 0 0; padding-left: 18px; }
.login-dica {
    font-size: 0.8125rem;
    color: var(--ap-cinza-2);
    margin: 6px 0 0;
}
.login-secao { margin-top: 18px; }

/* Recuperação: código grande, fácil de ler em voz alta */
.login-codigo {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 1.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-align: center;
    padding: 10px 8px;
    margin: 4px 0 6px;
    border: 1px dashed var(--ap-borda);
    border-radius: 6px;
    background: var(--ap-cartao-2);
    user-select: all;
}
.login-unidade { text-align: center; font-size: 0.875rem; color: var(--ap-cinza); }
.login-link {
    border: 0;
    background: none;
    padding: 0;
    font-weight: 500;
    color: var(--ap-claro-2);
    text-decoration: underline;
    text-underline-offset: 4px;
}
.login-link:hover { color: #fff; }

.login-rodape {
    margin-top: 32px;
    text-align: center;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.68);
}

/* =====================================================================
   Sistema (depois do login)
   ===================================================================== */

/* ----- Ajustes do Bootstrap para a paleta Apotec ----- */
.btn { border-radius: 6px; font-weight: 500; }
.btn-primary, .btn-success {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--ap-primaria);
    --bs-btn-border-color: var(--ap-primaria);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ap-primaria-hover);
    --bs-btn-hover-border-color: var(--ap-primaria-hover);
    --bs-btn-active-bg: var(--ap-primaria-hover);
    --bs-btn-active-border-color: var(--ap-primaria-hover);
    --bs-btn-disabled-bg: var(--ap-primaria);
    --bs-btn-disabled-border-color: var(--ap-primaria);
}
.btn-outline-secondary, .btn-outline-warning, .btn-light {
    --bs-btn-color: var(--ap-texto);
    --bs-btn-bg: var(--ap-cartao);
    --bs-btn-border-color: var(--ap-borda);
    --bs-btn-hover-color: var(--ap-texto);
    --bs-btn-hover-bg: var(--ap-superficie);
    --bs-btn-hover-border-color: var(--ap-borda);
    --bs-btn-active-color: var(--ap-texto);
    --bs-btn-active-bg: var(--ap-superficie);
    --bs-btn-active-border-color: var(--ap-borda);
    --bs-btn-disabled-color: var(--ap-apagado);
    --bs-btn-disabled-border-color: var(--ap-linha);
    background: var(--ap-cartao);
}
.btn-danger {
    --bs-btn-bg: var(--ap-alerta);
    --bs-btn-border-color: var(--ap-alerta);
    --bs-btn-hover-bg: var(--ap-alerta-hover);
    --bs-btn-hover-border-color: var(--ap-alerta-hover);
    --bs-btn-disabled-bg: var(--ap-alerta);
    --bs-btn-disabled-border-color: var(--ap-alerta);
}
.btn-outline-danger {
    --bs-btn-color: var(--ap-alerta);
    --bs-btn-border-color: var(--ap-alerta-linha);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--ap-alerta);
    --bs-btn-hover-border-color: var(--ap-alerta);
}
.form-control, .form-select {
    border-color: var(--ap-borda);
    border-radius: 6px;
    background-color: var(--ap-cartao);
    color: var(--ap-texto);
}
.form-control::placeholder { color: var(--ap-apagado); }
.form-control:focus, .form-select:focus, .form-check-input:focus {
    border-color: var(--ap-acento);
    box-shadow: 0 0 0 3px var(--ap-foco);
    background-color: var(--ap-cartao);
    color: var(--ap-texto);
}
.form-check-input { border-color: var(--ap-borda); }
.form-check-input:checked { background-color: var(--ap-primaria); border-color: var(--ap-primaria); }
.form-label, .col-form-label { font-size: 0.875rem; font-weight: 500; }
.text-muted   { color: var(--ap-cinza-2) !important; }
.text-danger  { color: var(--ap-alerta) !important; }
.text-success { color: var(--ap-ok) !important; }
.badge { font-weight: 600; border-radius: 4px; }
.badge.bg-primary { background-color: var(--ap-primaria) !important; }
.badge.bg-danger  { background-color: var(--ap-alerta) !important; color: #fff; }
.badge.bg-success { background-color: var(--ap-ok) !important; }
html[data-theme="dark"] .badge.bg-danger,
html[data-theme="dark"] .badge.bg-success { color: #111 !important; }
.progress { background-color: var(--ap-superficie); }
.progress-bar.bg-success { background-color: var(--ap-primaria) !important; }
code { color: var(--ap-alerta); }

/* ----- Topo: marca, local e status ----- */
.topo {
    position: sticky;
    top: 0;
    z-index: 1020;
    background: var(--ap-cartao);
    border-bottom: 1px solid var(--ap-linha);
}
.topo-linha {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 10px 20px;
    background: var(--ap-topo);
    color: #f4f4f4;
}
.topo-marca { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.topo-logo  { height: 16px; width: auto; filter: invert(1); }
.topo-produto {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--ap-claro);
    padding-left: 12px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}
.topo-local {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-weight: 600;
    font-size: 0.95rem;
}
.topo-local svg { color: var(--ap-claro); flex-shrink: 0; }
#local-nome { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topo-status { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.pilula-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.16);
    font-size: 0.72rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.9);
}

/* Hora não confiável (T13): discreta, mas na cor de aviso */
.pilula-hora { color: #f6b26b; border-color: rgba(246, 178, 107, 0.45); cursor: help; }

/* Botão de modo claro/noturno */
.btn-tema {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.16);
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
    padding: 0;
}
.btn-tema:hover { background: rgba(255, 255, 255, 0.16); color: #fff; }
.btn-tema:focus-visible { outline: 2px solid var(--ap-claro-2); outline-offset: 2px; }
.btn-tema .icone-sol  { display: none; }
html[data-theme="dark"] .btn-tema .icone-sol  { display: block; }
html[data-theme="dark"] .btn-tema .icone-lua  { display: none; }

/* LEDs de conexão e de gravação no pendrive */
@keyframes led-pulso {
    0%, 100% { background-color: #22a05a; box-shadow: 0 0 6px #22a05a; }
    50%       { background-color: #a3d9b8; box-shadow: 0 0 2px #22a05a; }
}
#led-conexao, #led-db {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    display: inline-block;
    background-color: #7a7f84;
}
#led-conexao.led-ativo, #led-db.led-ativo { animation: led-pulso 1s ease-in-out infinite; }
#led-conexao.led-erro, #led-db.led-erro {
    animation: none;
    background-color: #e5484d;
    box-shadow: 0 0 6px #e5484d;
}

/* ----- Abas principais + desbloqueio ----- */
.topo-abas {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 20px;
}
.abas { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
.abas .nav-link {
    position: relative;
    padding: 14px 14px 12px;
    color: var(--ap-cinza);
    font-weight: 500;
    white-space: nowrap;
    border: 0;
    background: none;
}
.abas .nav-link:hover { color: var(--ap-texto); }
.abas .nav-link.active { color: var(--ap-acento); font-weight: 600; }
.abas .nav-link.active::after {
    content: "";
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 2px;
    background: var(--ap-acento);
}
.abas .nav-link:disabled { color: var(--ap-apagado); }

.desbloqueio { padding: 8px 0; }
.desbloqueio-grupo {
    display: flex;
    align-items: center;
    border: 1px solid var(--ap-borda);
    border-radius: 6px;
    background: var(--ap-cartao);
    overflow: hidden;
}
.desbloqueio-grupo svg { margin: 0 4px 0 10px; color: var(--ap-cinza); flex-shrink: 0; }
.desbloqueio-grupo input {
    border: 0;
    outline: none;
    padding: 6px 8px;
    width: 170px;
    font-size: 0.875rem;
    background: transparent;
    color: var(--ap-texto);
}
.desbloqueio-grupo input::placeholder { color: var(--ap-cinza-2); }
.desbloqueio-grupo:focus-within { border-color: var(--ap-acento); box-shadow: 0 0 0 3px var(--ap-foco); }
.desbloqueio-grupo button {
    border: 0;
    border-left: 1px solid var(--ap-borda);
    background: var(--ap-superficie);
    color: var(--ap-texto);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 6px 12px;
}
.desbloqueio-grupo button:hover { background: var(--ap-linha-suave); }
.desbloqueio-erro { font-size: 0.8rem; color: var(--ap-alerta); margin-top: 4px; text-align: right; }

/* Quando o logica.js esconde o desbloqueio (auth_ok), entra o selo */
.comandos-liberados { display: none; }
#auth-section.d-none + .comandos-liberados {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    background: var(--ap-ok-fundo);
    color: var(--ap-ok);
    font-size: 0.8rem;
    font-weight: 600;
    white-space: nowrap;
}

/* ----- Área de conteúdo ----- */
.conteudo {
    max-width: 1600px;
    margin: 0 auto;
    padding: 16px 20px 32px;
}

.secao { margin-bottom: 28px; }
.secao-cabeca {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    min-height: 22px;
    margin-bottom: 8px;
}
.secao-titulo {
    margin: 0;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ap-cinza);
}
.secao-dica { font-size: 0.82rem; color: var(--ap-cinza-2); }
body:has(#auth-section.d-none) .secao-dica { display: none; }

/* ----- Monitor: painel de status ----- */
.painel-status {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 12px 20px;
    padding: 12px 18px;
    margin-bottom: 14px;
    background: var(--ap-cartao);
    border: 1px solid var(--ap-linha);
    border-left: 4px solid var(--ap-apagado);
    border-radius: 8px;
    box-shadow: var(--ap-sombra);
}
.painel-principal { display: flex; align-items: center; gap: 14px; min-width: 0; }
.painel-icone {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--ap-superficie);
    color: var(--ap-cinza);
}
.painel-icone svg { display: none; }
.painel-titulo { font-size: 1.1rem; font-weight: 700; line-height: 1.25; }
.painel-sub    { font-size: 0.85rem; color: var(--ap-cinza); margin-top: 2px; }

.painel-status[data-estado="aguardando"] .ic-off { display: block; }
.painel-status[data-estado="ok"] { border-left-color: var(--ap-ok); }
.painel-status[data-estado="ok"] .painel-icone { background: var(--ap-ok-fundo); color: var(--ap-ok); }
.painel-status[data-estado="ok"] .ic-ok { display: block; }
.painel-status[data-estado="atencao"] { border-left-color: var(--ap-alerta); }
.painel-status[data-estado="atencao"] .painel-icone { background: var(--ap-alerta); color: #fff; }
.painel-status[data-estado="atencao"] .painel-titulo { color: var(--ap-alerta); }
.painel-status[data-estado="atencao"] .ic-atencao { display: block; }
.painel-status[data-estado="sem-dados"] { border-left-color: var(--ap-alerta); background: var(--ap-alerta-fundo); }
.painel-status[data-estado="sem-dados"] .painel-icone { background: var(--ap-alerta); color: #fff; }
.painel-status[data-estado="sem-dados"] .ic-off { display: block; }
html[data-theme="dark"] .painel-status[data-estado="atencao"] .painel-icone,
html[data-theme="dark"] .painel-status[data-estado="sem-dados"] .painel-icone { color: #1a0d0c; }

.painel-alarmes { justify-self: end; }
.painel-lista {
    grid-column: 1 / -1;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.painel-lista:empty { display: none; }
.painel-item {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--ap-alerta-linha);
    background: var(--ap-alerta-fundo);
    color: var(--ap-texto);
    font-size: 0.85rem;
    text-align: left;
}
.painel-item span { color: var(--ap-alerta); font-weight: 600; }
.painel-item:hover { border-color: var(--ap-alerta); }

.chave-alarme {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px 6px 46px;
    background: var(--ap-cartao-2);
    border: 1px solid var(--ap-linha);
    border-radius: 6px;
}
.chave-alarme .form-check-label { font-weight: 600; font-size: 0.875rem; white-space: nowrap; }
/* Estado dos avisos no painel do Monitor; clicar pausa ou religa */
.avisos-estado {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 12px;
    border-radius: 6px;
    border: 1px solid var(--ap-linha);
    background: var(--ap-cartao-2);
    color: inherit;
    font: inherit;
    font-size: 0.85rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
}
.avisos-estado:hover { border-color: var(--ap-acento); }
.avisos-estado:focus-visible { outline: 2px solid var(--ap-foco); outline-offset: 2px; }
.avisos-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--ap-ok); }
.avisos-estado[data-estado="pausado"] { border-color: var(--ap-aviso); color: var(--ap-aviso); background: var(--ap-auto-fundo); }
.avisos-estado[data-estado="pausado"] .avisos-ponto { background: var(--ap-aviso); }
/* Só aparece com a senha de comandos liberada */
.so-liberado { display: none; }
body:has(#auth-section.d-none) .so-liberado { display: inline-block; }

.cfg-avisos {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    padding: 10px 12px;
    margin-bottom: 14px;
    border: 1px solid var(--ap-linha-suave);
    border-radius: 6px;
    background: var(--ap-cartao-2);
}

/* A contagem aparece na faixa de pausa — aqui ficaria repetida */
.alarme-timer { display: none !important; }

.faixa-pausa {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    border: 1px solid var(--ap-aviso);
    background: var(--ap-auto-fundo);
    color: var(--ap-auto-texto);
    font-size: 0.9rem;
}
.faixa-pausa > span { flex: 1; }
.faixa-pendrive {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 16px;
    margin-bottom: 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    border: 1px solid var(--ap-aviso);
    background: var(--ap-auto-fundo);
    color: var(--ap-auto-texto);
}
.faixa-pendrive[data-nivel="alerta"] { border-color: var(--ap-alerta); background: var(--ap-alerta-fundo); color: var(--ap-alerta); }
.faixa-pendrive > span { flex: 1; }
.faixa-pendrive svg { flex-shrink: 0; }
.faixa-pausa svg { flex-shrink: 0; }

/* Cartões genéricos (Histórico, Configuração) */
.card {
    --bs-card-bg: var(--ap-cartao);
    --bs-card-color: var(--ap-texto);
    border: 1px solid var(--ap-linha);
    border-radius: 8px;
    background: var(--ap-cartao);
    color: var(--ap-texto);
    box-shadow: var(--ap-sombra);
}
.card-header {
    background: var(--ap-cartao-2);
    border-bottom: 1px solid var(--ap-linha-suave);
    padding: 12px 16px;
    font-weight: 600;
    color: var(--ap-texto);
}
.card-header:first-child { border-radius: 8px 8px 0 0; }
.card-perigo { border-color: var(--ap-alerta-linha); }
.card-header-perigo { background: var(--ap-alerta-fundo); color: var(--ap-alerta); border-bottom-color: var(--ap-alerta-linha); }
.table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--ap-texto);
    --bs-table-border-color: var(--ap-linha-suave);
    --bs-table-hover-bg: var(--ap-cartao-2);
    --bs-table-hover-color: var(--ap-texto);
}
.table > thead th {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ap-cinza);
    background: var(--ap-cartao-2);
}
.table > :not(caption) > * > * { padding: 8px 12px; vertical-align: middle; }

/* ----- Monitor: sensores ----- */
/* 4 colunas fixas: S1-S4 na linha de cima, S5-S8 na de baixo. */
.sensors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.sensor-card {
    background: var(--ap-cartao);
    border: 1px solid var(--ap-linha);
    border-left: 3px solid var(--ap-acento);
    border-radius: 8px;
    padding: 10px 14px;
    min-width: 0;
    box-shadow: var(--ap-sombra);
    transition: border-color .2s, background-color .2s;
}
/* Ponto de atenção (fora da faixa normal ou digital no estado negativo) — monitor.js */
.sensor-card.em-atencao {
    border-color: var(--ap-alerta-linha);
    border-left-color: var(--ap-alerta);
    background: var(--ap-alerta-fundo);
}
.sensor-card.binario:not(.em-atencao) { border-left-color: var(--ap-ok); }
@keyframes destacar {
    0%, 60% { box-shadow: 0 0 0 4px var(--ap-foco); }
    100%    { box-shadow: var(--ap-sombra); }
}
.sensor-card.destacar { animation: destacar 1.6s ease-out; }
.sensor-topo { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Selo Normal / Acima / Abaixo */
.sensor-selo {
    margin-left: auto;
    flex-shrink: 0;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 1px 8px;
    white-space: nowrap;
}
.sensor-selo:empty { display: none; }
.selo-normal { background: var(--ap-ok-fundo); color: var(--ap-ok); }
.selo-acima, .selo-abaixo { background: var(--ap-alerta); color: #fff; }
html[data-theme="dark"] .selo-acima, html[data-theme="dark"] .selo-abaixo { color: #1a0d0c; }

/* Régua: escala do sensor, faixa normal e marcador da leitura */
.sensor-regua { margin-top: 8px; }
.regua-trilho {
    position: relative;
    height: 6px;
    border-radius: 999px;
    background: var(--ap-superficie);
}
.regua-normal {
    position: absolute;
    top: 0;
    bottom: 0;
    border-radius: 999px;
    background: var(--ap-ok);
    opacity: 0.35;
}
.regua-marca {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-left: -6px;
    border-radius: 50%;
    transform: translateY(-50%);
    background: var(--ap-acento);
    border: 2px solid var(--ap-cartao);
    box-shadow: 0 0 0 1px var(--ap-acento);
    transition: left .4s ease;
}
.em-atencao .regua-marca { background: var(--ap-alerta); box-shadow: 0 0 0 1px var(--ap-alerta); }
.em-atencao .regua-marca { border-color: var(--ap-alerta-fundo); }
.regua-legenda {
    display: flex;
    justify-content: space-between;
    gap: 6px;
    margin-top: 4px;
    font-size: 0.72rem;
    color: var(--ap-cinza-2);
    font-variant-numeric: tabular-nums;
}
.regua-legenda span:nth-child(2) { text-align: center; font-weight: 600; color: var(--ap-cinza); }

/* Sem leitura recente: nada na tela pode parecer ao vivo */
.dados-antigos .sensor-value,
.dados-antigos .sensor-unit,
.dados-antigos .sensor-regua,
.dados-antigos .sensor-selo,
.dados-antigos .rele-estado { opacity: 0.35; }
.dados-antigos .sensor-card,
.dados-antigos .sensor-card.binario:not(.em-atencao) { border-left-color: var(--ap-apagado); }
.sensor-canal {
    flex-shrink: 0;
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--ap-cinza-2);
    background: var(--ap-superficie);
    border-radius: 4px;
    padding: 1px 5px;
}
.sensor-name {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--ap-texto);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sensor-leitura {
    display: flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 6px;
    min-width: 0;
}
.sensor-value {
    /* Acompanha a largura da tela: com 4 colunas fixas o card estreita, e um
       tamanho fixo cortava valores longos (ex.: -1234.56) em telas menores. */
    font-size: clamp(22px, 1.9vw, 30px);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--ap-texto);
    width: 100%;
    min-width: 0;
    field-sizing: content;
    border: none;
    background: transparent;
    padding: 0;
    line-height: 1.1;
}
.sensor-value:focus { outline: none; box-shadow: none; }
.sensor-unit {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--ap-cinza);
    white-space: nowrap;
}

/* ----- Monitor: relés ----- */
/* Card compacto: cabeçalho (canal · nome · Auto/Manual) e, embaixo, estado à
   esquerda e botões à direita — cabe em 2 colunas ao lado dos sensores. */
.reles-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}
.rele-card {
    background: var(--ap-cartao);
    border: 1px solid var(--ap-linha);
    border-radius: 8px;
    min-width: 0;
    overflow: hidden;
    box-shadow: var(--ap-sombra);
}
.rele-topo {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    background: var(--ap-cartao-2);
    border-bottom: 1px solid var(--ap-linha-suave);
}
.rele-topo .sensor-canal { background: var(--ap-cartao); border: 1px solid var(--ap-linha-suave); }
.rele-topo .badge { flex-shrink: 0; }
.rele-topo .badge.bg-warning   { background: var(--ap-auto-fundo) !important; color: var(--ap-auto-texto) !important; }
.rele-topo .badge.bg-secondary { background: var(--ap-superficie) !important; color: var(--ap-cinza) !important; }
.rele-nome {
    flex: 1;
    min-width: 0;
    border: 0;
    padding: 0;
    background: transparent;
    font-weight: 600;
    font-size: 0.88rem;
    color: var(--ap-texto);
    text-overflow: ellipsis;
}
.rele-nome:focus { outline: none; }
.rele-corpo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    min-height: 44px;
    padding: 8px 10px;
}
.rele-estado {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--ap-cinza);
    white-space: nowrap;
}
.status-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}
.status-off { background-color: var(--ap-apagado); }
.status-on  { background-color: #22a05a; box-shadow: 0 0 0 3px rgba(34, 160, 90, 0.2); }
.rele-estado:has(.status-on) { color: var(--ap-ok); font-weight: 700; }
/* Relé ligado: o quadrado inteiro ganha a borda verde */
.rele-card:has(.status-on) { border-color: var(--ap-ok); box-shadow: 0 0 0 1px var(--ap-ok); }

.rele-botoes {
    display: flex;
    flex-shrink: 0;
    border: 1px solid var(--ap-borda);
    border-radius: 6px;
    overflow: hidden;
}
.rele-btn {
    border: 0;
    background: var(--ap-cartao);
    color: var(--ap-texto);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 5px 10px;
}
.rele-btn + .rele-btn { border-left: 1px solid var(--ap-borda); }
.rele-btn:hover:not(:disabled) { background: var(--ap-primaria); color: #fff; }
.rele-btn:disabled { color: var(--ap-apagado); background: var(--ap-cartao-2); cursor: not-allowed; }
.rele-btn.enviado { background: var(--ap-ok-fundo); color: var(--ap-ok); }
/* Travado, os botões não fazem nada — some a fileira (a dica no cabeçalho da
   seção explica como liberar). Liberado, só aparecem os que valem para o tipo
   do relé (pulsado → Pulsar; toggle → Ligar/Desligar). */
body:not(:has(#auth-section.d-none)) .rele-botoes { display: none; }
body:has(#auth-section.d-none) .rele-btn:disabled { display: none; }
body:has(#auth-section.d-none) .rele-btn:disabled + .rele-btn { border-left: 0; }

/* Por que o relé está em automático — uma linha, texto inteiro no title */
.rele-motivo {
    padding: 5px 10px;
    border-top: 1px solid var(--ap-linha-suave);
    background: var(--ap-auto-fundo);
    color: var(--ap-auto-texto);
    font-size: 0.74rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----- Monitor: tudo à vista ----- */
.monitor-grade .secao { margin-bottom: 20px; }
@media (min-width: 1200px) {
    /* Computador: sensores (4 × 2) à esquerda, relés (2 × 4) à direita */
    .monitor-grade {
        display: grid;
        grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
        gap: 20px;
        align-items: start;
    }
    .monitor-grade .secao { margin-bottom: 0; }
    .secao-reles .reles-grid { grid-template-columns: repeat(2, 1fr); }
    /* Sensores crescem até a altura da coluna de relés: sem buraco embaixo,
       e o valor ganha destaque */
    .monitor-grade { align-items: stretch; }
    .secao-sensores { display: flex; flex-direction: column; }
    .secao-sensores .sensors-grid { flex: 1; grid-auto-rows: 1fr; }
    .secao-sensores .sensor-card { display: flex; flex-direction: column; }
    .secao-sensores .sensor-leitura { flex: 1; align-items: center; }
    .secao-sensores .sensor-value { font-size: clamp(26px, 2.3vw, 38px); }
}

/* ----- Confirmação de comando ----- */
.dlg-comando {
    width: min(420px, calc(100vw - 32px));
    padding: 22px 22px 18px;
    border: 1px solid var(--ap-linha);
    border-radius: 10px;
    background: var(--ap-cartao);
    color: var(--ap-texto);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.dlg-comando::backdrop { background: rgba(8, 10, 12, 0.6); }
.dlg-cabeca { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.dlg-cabeca h2 { margin: 0; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ap-cinza); }
.dlg-canal {
    font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--ap-cinza);
    background: var(--ap-superficie);
    border-radius: 4px;
    padding: 2px 6px;
}
.dlg-pergunta { font-size: 1.3rem; line-height: 1.3; margin: 0 0 6px; }
.dlg-pergunta #dlg-acao { font-weight: 700; color: var(--ap-acento); }
.dlg-estado { font-size: 0.9rem; color: var(--ap-cinza); margin-bottom: 14px; }
.dlg-aviso {
    margin-bottom: 14px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--ap-auto-fundo);
    color: var(--ap-auto-texto);
    font-size: 0.85rem;
}
.dlg-aviso-erro { background: var(--ap-alerta-fundo); color: var(--ap-alerta); }
.dlg-botoes { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.dlg-botoes .btn { min-width: 120px; padding: 9px 16px; font-weight: 600; }
.dlg-botoes .btn:disabled { opacity: 0.5; }

/* Duração da pausa dos avisos (janela "Pausar avisos") */
.pausa-tempos { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
.pausa-tempos label { position: relative; cursor: pointer; }
.pausa-tempos input { position: absolute; opacity: 0; pointer-events: none; }
.pausa-tempos span {
    display: block; padding: 7px 0; text-align: center;
    border: 1px solid var(--ap-borda); border-radius: 6px;
    font-size: 0.85rem; font-weight: 600; color: var(--ap-texto); background: var(--ap-cartao);
}
.pausa-tempos label:hover span { border-color: var(--ap-acento); }
.pausa-tempos input:checked + span { background: var(--ap-primaria); border-color: var(--ap-primaria); color: #fff; }
.pausa-tempos input:focus-visible + span { outline: 2px solid var(--ap-acento); outline-offset: 2px; }
@media (max-width: 420px) { .pausa-tempos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ----- Configuração rápida do sensor (monitor-config.js) ----- */
.sensor-engrenagem {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    margin-left: 2px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    color: var(--ap-cinza-2);
    cursor: pointer;
}
.sensor-selo:empty + .sensor-engrenagem { margin-left: auto; }
.sensor-engrenagem:hover { color: var(--ap-acento); border-color: var(--ap-linha); background: var(--ap-cartao-2); }
.sensor-engrenagem:focus-visible { outline: 2px solid var(--ap-acento); outline-offset: 1px; }

.dlg-cfg { width: min(640px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; }
.dlg-cfg .dlg-pergunta { margin-bottom: 4px; }
.cfgr-carregando { color: var(--ap-cinza); margin: 12px 0; }
.cfgr-leitura { font-size: 0.9rem; color: var(--ap-cinza); margin-bottom: 12px; }
.cfgr-leitura strong { color: var(--ap-texto); font-variant-numeric: tabular-nums; }
.cfgr-bloqueio {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px;
    margin-bottom: 12px; padding: 10px 12px;
    border: 1px solid var(--ap-linha); border-radius: 6px; background: var(--ap-cartao-2);
    font-size: 0.875rem;
}
.cfgr-bloqueio-campo { display: flex; gap: 6px; flex: 1 1 220px; }
.cfgr-erro {
    margin-bottom: 12px; padding: 8px 10px; border-radius: 6px;
    background: var(--ap-alerta-fundo); color: var(--ap-alerta); font-size: 0.875rem;
}
.cfgr-secao { border-top: 1px solid var(--ap-linha-suave); padding-top: 12px; margin-bottom: 12px; }
.cfgr-secao h3 {
    margin: 0 0 10px; font-size: 0.75rem; font-weight: 700;
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--ap-cinza);
}
.cfgr-uso { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; margin-bottom: 10px; cursor: pointer; }
.cfgr-uso .form-check-input { margin-top: 3px; flex-shrink: 0; }
.cfgr-grade { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 10px; }
.cfgr-grade label { display: flex; flex-direction: column; gap: 3px; font-size: 0.78rem; font-weight: 600; color: var(--ap-cinza); min-width: 0; }
.cfgr-grade .cfgr-c2 { grid-column: span 2; }
.cfgr-dica { margin: 6px 0 0; font-size: 0.78rem; color: var(--ap-cinza-2); }
.cfgr-cond { padding: 10px 12px; border: 1px solid var(--ap-linha-suave); border-radius: 6px; margin-bottom: 8px; }
.cfgr-se { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 0.875rem; margin-bottom: 8px; }
.cfgr-campo { display: inline-flex; align-items: center; gap: 4px; }
.cfgr-campo input { width: 84px; }
.cfgr-campo .cfgr-leituras { width: 64px; }
.cfgr-reles { display: flex; flex-direction: column; gap: 6px; margin-bottom: 8px; }
.cfgr-rele { display: grid; grid-template-columns: minmax(0, 1fr) 120px 30px; gap: 6px; align-items: center; }
.cfgr-rele:has(select:disabled) { grid-template-columns: minmax(0, 1fr) 120px; }
.cfgr-remover {
    width: 30px; height: 30px; padding: 0; border: 1px solid var(--ap-linha); border-radius: 6px;
    background: transparent; color: var(--ap-cinza); font-size: 1.1rem; line-height: 1; cursor: pointer;
}
.cfgr-remover:hover { color: var(--ap-alerta); border-color: var(--ap-alerta); }
.cfgr-nenhum { margin: 0; font-size: 0.85rem; color: var(--ap-cinza-2); }
.cfgr-botoes { align-items: center; flex-wrap: wrap; }
.cfgr-botoes .cfgr-completa { margin-right: auto; min-width: 0; padding-left: 0; color: var(--ap-acento); }
@media (max-width: 560px) {
    .cfgr-grade { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cfgr-rele { grid-template-columns: minmax(0, 1fr) 100px 30px; }
}

/* ----- Histórico ----- */
.hist-barra {
    background: var(--ap-cartao);
    border: 1px solid var(--ap-linha);
    border-radius: 8px;
    box-shadow: var(--ap-sombra);
    padding: 12px 16px;
    margin-bottom: 12px;
}
.hist-linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 24px;
}
.hist-linha-sensores {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ap-linha-suave);
    gap: 10px 12px;
}
.hist-grupo { display: flex; align-items: center; gap: 8px; }
.hist-livre .form-control { width: auto; min-width: 190px; }
.hist-exportar { margin-left: auto; }
.hist-rotulo {
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ap-cinza);
    margin: 0;
    white-space: nowrap;
}
.hist-presets {
    display: inline-flex;
    padding: 3px;
    gap: 2px;
    background: var(--ap-superficie);
    border-radius: 8px;
}
.hist-preset {
    border: 0;
    background: transparent;
    color: var(--ap-cinza);
    font-size: 0.85rem;
    font-weight: 600;
    padding: 5px 14px;
    border-radius: 6px;
}
.hist-preset:hover { color: var(--ap-texto); }
.hist-preset.ativo { background: var(--ap-cartao); color: var(--ap-acento); box-shadow: var(--ap-sombra); }

.hist-sensores { display: flex; flex-wrap: wrap; gap: 6px; }
.hist-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 4px 11px 4px 8px;
    border: 1px solid var(--ap-linha);
    border-radius: 6px;
    background: var(--ap-cartao);
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ap-texto);
    cursor: pointer;
    user-select: none;
}
.hist-chip input { position: absolute; opacity: 0; pointer-events: none; }
.hist-chip:has(input:focus-visible) { outline: 2px solid var(--ap-acento); outline-offset: 2px; }
/* Não escolhido: legível, contorno simples. Escolhido: fundo destacado e borda forte */
.hist-chip:not(:has(input:checked)) { color: var(--ap-cinza); font-weight: 500; }
.hist-chip:not(:has(input:checked)):hover { border-color: var(--ap-acento); color: var(--ap-texto); }
/* Borda única de 2 px: borda + sombra interna engrossava só em cima e embaixo
   (nas curvas o navegador suaviza), e as laterais pareciam mais claras */
.hist-chip:has(input:checked) {
    background: var(--ap-superficie);
    border: 2px solid var(--ap-acento);
    padding: 3px 10px 3px 7px;
}
.hist-chip-cor {
    width: 10px;
    height: 10px;
    border-radius: 3px;
    flex-shrink: 0;
}
.hist-link {
    border: 0;
    background: none;
    padding: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--ap-acento);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.hist-progresso { height: 4px; margin-bottom: 10px; }

.hist-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 16px;
    margin: 4px 2px 10px;
    font-size: 0.85rem;
    color: var(--ap-cinza);
}
.hist-resumo strong { color: var(--ap-texto); }
.hist-dica { font-size: 0.78rem; color: var(--ap-cinza-2); }

.hist-graficos {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    transition: opacity .2s;
}
.hist-graficos.carregando { opacity: 0.45; pointer-events: none; }
@media (min-width: 1200px) {
    .hist-graficos { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    /* Um gráfico só: usa a largura toda */
    .hist-graficos > .hist-card:only-child { grid-column: 1 / -1; }
    .hist-graficos > .hist-card:only-child .hist-canvas { height: 260px; }
}
/* Gráfico "cru" antes de escolher o sensor: moldura com grade e a mensagem no meio */
.hist-placeholder {
    grid-column: 1 / -1;
    position: relative;
    height: 300px;
    background: var(--ap-cartao);
    border: 1px solid var(--ap-linha);
    border-radius: 8px;
    box-shadow: var(--ap-sombra);
    overflow: hidden;
}
.hist-placeholder-grade {
    position: absolute;
    inset: 24px 24px 36px 56px;
    border-left: 1px solid var(--ap-linha);
    border-bottom: 1px solid var(--ap-linha);
    background-image:
        repeating-linear-gradient(to bottom, var(--ap-linha-suave) 0 1px, transparent 1px 25%),
        repeating-linear-gradient(to right,  var(--ap-linha-suave) 0 1px, transparent 1px 16.66%);
    opacity: 0.8;
}
.hist-placeholder-texto {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 16px;
    text-align: center;
    color: var(--ap-cinza);
}
.hist-placeholder-texto svg { color: var(--ap-acento); margin-bottom: 4px; }
.hist-placeholder-texto strong {
    font-size: 1.1rem;
    color: var(--ap-texto);
    background: var(--ap-cartao);
    padding: 0 8px;
}
.hist-placeholder-texto span {
    font-size: 0.88rem;
    background: var(--ap-cartao);
    padding: 0 8px;
}

.hist-vazio {
    grid-column: 1 / -1;
    padding: 48px 16px;
    text-align: center;
    color: var(--ap-cinza);
    background: var(--ap-cartao);
    border: 1px dashed var(--ap-linha);
    border-radius: 8px;
}
.hist-vazio strong { display: block; color: var(--ap-texto); margin-bottom: 4px; }

.hist-card {
    background: var(--ap-cartao);
    border: 1px solid var(--ap-linha);
    border-radius: 8px;
    box-shadow: var(--ap-sombra);
    padding: 10px 14px 8px;
    min-width: 0;
}
.hist-card-cabeca { display: flex; align-items: center; gap: 8px; min-width: 0; }
.hist-card-cabeca h3 {
    margin: 0;
    font-size: 0.92rem;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.hist-unidade { font-size: 0.8rem; color: var(--ap-cinza-2); font-weight: 600; }
.hist-zoom {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    font-size: 0.78rem;
    color: var(--ap-cinza);
    white-space: nowrap;
}
.hist-zoom[hidden] { display: none; }
.hist-fechar {
    flex-shrink: 0;
    margin-left: auto;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 6px;
    background: transparent;
    color: var(--ap-cinza);
}
.hist-zoom:not([hidden]) + .hist-fechar { margin-left: 4px; }

/* Comparar com outro sensor (historico.js) */
.hist-card-cabeca { flex-wrap: wrap; row-gap: 6px; }
.hist-comparar {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 10px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ap-cinza);
    white-space: nowrap;
}
.hist-comparar select { width: auto; min-width: 150px; max-width: 220px; padding-top: 2px; padding-bottom: 2px; font-size: 0.8rem; }
.hist-legenda { display: flex; flex-wrap: wrap; gap: 4px 16px; margin: 6px 0 2px; font-size: 0.8rem; color: var(--ap-cinza); }
.hist-legenda[hidden] { display: none; }
.hist-leg-item { display: inline-flex; align-items: center; gap: 6px; }
.hist-leg-item em { font-style: normal; color: var(--ap-cinza-2); }
.hist-leg-linha { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.hist-leg-tracejada { background: repeating-linear-gradient(90deg, currentColor 0 6px, transparent 6px 9px) !important; }
@media (max-width: 640px) { .hist-comparar { margin-left: 0; order: 10; } }
.hist-fechar:hover { background: var(--ap-superficie); color: var(--ap-texto); }

.hist-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 18px;
    margin: 8px 0 4px;
}
.hist-stats div { display: flex; align-items: baseline; gap: 6px; font-size: 0.82rem; }
.hist-stats span { color: var(--ap-cinza-2); }
.hist-stats strong { font-variant-numeric: tabular-nums; }
.hist-stats .stat-alerta strong, .hist-stats .stat-alerta span { color: var(--ap-alerta); }
.hist-stats .stat-ok strong { color: var(--ap-ok); }
.hist-stats .stat-buraco { cursor: help; }
.hist-stats .stat-buraco strong { color: var(--ap-cinza); }
.hist-stats .stat-hora { cursor: help; }
.hist-stats .stat-hora span, .hist-stats .stat-hora strong { color: var(--ap-aviso); }
.hist-marca-hora {
    display: inline-block; width: 8px; height: 8px; align-self: center;
    background: var(--ap-aviso); transform: rotate(45deg);
}
.hist-sem { color: var(--ap-cinza-2); font-size: 0.85rem; }

.hist-canvas { position: relative; height: 170px; }
.hist-canvas.vazio { display: none; }
.hist-canvas canvas { cursor: crosshair; }

@media (max-width: 768px) {
    .hist-livre { display: grid; grid-template-columns: auto 1fr; gap: 8px; width: 100%; }
    .hist-livre .form-control { min-width: 0; width: 100%; }
    .hist-livre .btn { grid-column: 1 / -1; }
    .hist-exportar { margin-left: 0; }
    .hist-dica { display: none; }
}

/* ----- Configuração ----- */
.subabas {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 3px;
    background: var(--ap-superficie);
    border-radius: 8px;
}
.subabas .nav-link {
    border: 0;
    border-radius: 6px;
    padding: 6px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--ap-cinza);
    background: transparent;
}
.subabas .nav-link:hover { color: var(--ap-texto); }
.subabas .nav-link.active {
    background: var(--ap-cartao);
    color: var(--ap-acento);
    font-weight: 600;
    box-shadow: var(--ap-sombra);
}
.log-terminal {
    background: #1f2326;
    color: #e6e6e6;
    border-radius: 6px;
    padding: 10px 12px;
    max-height: 280px;
    overflow: auto;
    white-space: pre-wrap;
}
/* Os cards de Ações são montados pelo logica.js com bg-dark no cabeçalho */
#acoes-cards .card-header.bg-dark { background: var(--ap-cartao-2) !important; color: var(--ap-texto) !important; }
#acoes-cards .card-header[role="button"] { cursor: pointer; }
#acoes-cards .card-header[role="button"]:hover { background: var(--ap-superficie) !important; }
#acoes-cards .card-header[aria-expanded="true"] { border-bottom: 1px solid var(--ap-linha-suave); }
#acoes-cards .card-header:not([aria-expanded="true"]) { border-bottom: 0; border-radius: 8px; }
#acoes-cards .border { border-color: var(--ap-linha-suave) !important; }

/* ----- Eventos ----- */
.ev-barra { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 12px; }
.ev-lista {
    list-style: none;
    margin: 0;
    padding: 0;
    background: var(--ap-cartao);
    border: 1px solid var(--ap-linha);
    border-radius: 8px;
    box-shadow: var(--ap-sombra);
    overflow: hidden;
}
.ev-item {
    display: grid;
    grid-template-columns: 12px 150px 150px minmax(0, 1fr);
    align-items: baseline;
    gap: 4px 12px;
    padding: 9px 14px;
    border-bottom: 1px solid var(--ap-linha-suave);
    font-size: 0.9rem;
}
.ev-item:last-child { border-bottom: 0; }
.ev-ponto { width: 9px; height: 9px; border-radius: 50%; background: var(--ap-apagado); align-self: center; }
.ev-quando { font-variant-numeric: tabular-nums; color: var(--ap-cinza-2); font-size: 0.82rem; }
.ev-tipo { font-weight: 600; color: var(--ap-cinza); }
.ev-texto { min-width: 0; overflow-wrap: anywhere; }
.ev-alerta { background: var(--ap-alerta-fundo); }
.ev-alerta .ev-ponto { background: var(--ap-alerta); }
.ev-alerta .ev-tipo { color: var(--ap-alerta); }
.ev-aviso .ev-ponto { background: var(--ap-aviso); }
.ev-aviso .ev-tipo { color: var(--ap-aviso); }
@media (max-width: 700px) {
    .ev-item { grid-template-columns: 12px minmax(0, 1fr); }
    .ev-tipo, .ev-texto { grid-column: 2; }
}
.abas-contador {
    display: inline-block;
    min-width: 18px;
    padding: 0 5px;
    margin-left: 4px;
    border-radius: 9px;
    background: var(--ap-alerta);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}
html[data-theme="dark"] .abas-contador { color: #1a0d0c; }
.abas-contador[hidden] { display: none; }
.faixa-pendrive[data-nivel="ok"] { border-color: var(--ap-ok); background: var(--ap-ok-fundo); color: var(--ap-ok); }
.sensor-card.sem-sinal .sensor-value { color: var(--ap-alerta); }

/* ----- Entrada fora de uso (sem sensor ligado) ----- */
.sensor-card.sensor-inativo {
    border-left-color: var(--ap-linha) !important;
    border-style: dashed;
    background: transparent !important;
    box-shadow: none;
}
.sensor-card.sensor-inativo .sensor-leitura,
.sensor-card.sensor-inativo .sensor-regua,
.sensor-card.sensor-inativo .sensor-selo { display: none !important; }
.sensor-card.sensor-inativo .sensor-name { color: var(--ap-cinza-2); font-weight: 500; }
.sensor-card.sensor-inativo::after {
    content: "Entrada não usada";
    display: block;
    margin-top: 10px;
    font-size: 0.85rem;
    color: var(--ap-cinza-2);
}
.cfg-linha-sensor:has(.cfg-ativo:not(:checked)) td:not(:first-child) { opacity: 0.45; }
.cfg-ativo { width: 1.2em; height: 1.2em; cursor: pointer; }

/* ----- Configuração: Geral ----- */
.cfg-dica { font-size: 0.8rem; color: var(--ap-cinza-2); margin-top: 6px; }
.cfg-local { max-width: 560px; }
.cfg-explica {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 0.85rem;
    color: var(--ap-cinza);
    background: var(--ap-cartao-2);
    border-bottom: 1px solid var(--ap-linha-suave);
    padding: 10px 16px;
}
.cfg-explica strong { color: var(--ap-texto); }

.cfg-tabela th { white-space: nowrap; }
.cfg-tabela td { padding-top: 6px; padding-bottom: 6px; }
.cfg-tabela .cfg-grupos th { border-bottom: 0; padding-bottom: 0; background: var(--ap-cartao-2); }
.cfg-tabela .cfg-grupo {
    text-align: center;
    color: var(--ap-acento);
    border-bottom: 2px solid var(--ap-acento) !important;
}
.cfg-tabela .cfg-grupo-normal { color: var(--ap-ok); border-bottom-color: var(--ap-ok) !important; }
.cfg-tabela .cfg-nome { min-width: 170px; }
.cfg-tabela .cfg-num  { width: 90px; min-width: 80px; }
.cfg-tabela .cfg-unid { width: 80px; min-width: 70px; }
.cfg-tabela .cfg-modo { min-width: 300px; }
#config-sensores-lista .form-select { min-width: 210px; }

/* Lista "Quem recebe os avisos": tabela de linhas com divisória (config.js).
   As colunas Bootstrap das linhas (logica.js) viram células de uma grade. */
.cfg-usuarios-cabeca,
#usuarios-lista .usuario-row {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1.2fr) minmax(0, 1.8fr) auto;
    gap: 6px 10px;
    align-items: center;
    margin: 0;
}
.cfg-usuarios-cabeca {
    padding: 0 10px 6px;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--ap-cinza);
    border-bottom: 1px solid var(--ap-linha);
}
#usuarios-lista .usuario-row {
    padding: 8px 10px;
    border-bottom: 1px solid var(--ap-linha-suave);
}
#usuarios-lista .usuario-row:hover { background: var(--ap-cartao-2); }
#usuarios-lista .usuario-row > [class*="col-"] { width: auto; max-width: none; padding: 0; flex: none; }
#usuarios-lista .usuario-row > .col-12 { grid-column: 1 / -1; }
#usuarios-lista .usuario-row.oculta-busca { display: none; }
#usuarios-lista.com-rolagem {
    max-height: 290px;   /* ~5 linhas */
    overflow-y: auto;
    border-bottom: 1px solid var(--ap-linha);
}
#usuarios-lista .u-acoes { display: flex; justify-content: flex-end; gap: 4px; }
#usuarios-lista .u-testar,
#usuarios-lista .u-remover {
    display: inline-flex; align-items: center; justify-content: center; gap: 5px;
    height: 31px; border: 1px solid var(--ap-borda); background: var(--ap-cartao);
    color: var(--ap-texto); font-size: 0.8rem; font-weight: 600; white-space: nowrap;
}
#usuarios-lista .u-testar { min-width: 92px; padding: 0 10px; }
#usuarios-lista .u-testar:hover:not(:disabled) { border-color: var(--ap-acento); color: var(--ap-acento); }
#usuarios-lista .u-testar:disabled { opacity: 0.4; }
#usuarios-lista .u-testar.enviado { border-color: var(--ap-ok); color: var(--ap-ok); opacity: 1; }
#usuarios-lista .u-remover { width: 31px; padding: 0; color: var(--ap-cinza); border-color: transparent; background: transparent; }
#usuarios-lista .u-remover:hover { color: var(--ap-alerta); border-color: var(--ap-alerta); }
.cfg-teste-pessoa { font-size: 0.8rem; font-weight: 600; color: var(--ap-ok); }
.cfg-teste-pessoa.erro { color: var(--ap-alerta); }
.cfg-teste-pessoa[hidden] { display: none; }
#usuarios-lista .form-control.is-invalid { border-color: var(--ap-alerta) !important; background-image: none; }
.cfg-erro-pessoa { font-size: 0.8rem; font-weight: 600; color: var(--ap-alerta); }
.cfg-erro-pessoa[hidden] { display: none; }
.cfg-pessoas-busca {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
    padding: 0 10px; border: 1px solid var(--ap-borda); border-radius: 6px; background: var(--ap-cartao);
    color: var(--ap-cinza);
}
.cfg-pessoas-busca[hidden] { display: none; }
.cfg-pessoas-busca .form-control { border: 0; box-shadow: none; background: transparent; padding-left: 0; }
.cfg-pessoas-busca:focus-within { border-color: var(--ap-acento); box-shadow: 0 0 0 3px var(--ap-foco); }
.cfg-busca-contagem { flex-shrink: 0; font-size: 0.78rem; font-weight: 600; }
.cfg-busca-vazia { padding: 14px 10px; font-size: 0.875rem; color: var(--ap-cinza); }
.cfg-busca-vazia[hidden] { display: none; }
@media (max-width: 575px) {
    .cfg-usuarios-cabeca { display: none; }
    #usuarios-lista .usuario-row { grid-template-columns: minmax(0, 1fr) auto; }
    #usuarios-lista .usuario-row > .col-sm-4:first-child { grid-column: 1 / -1; }
    #usuarios-lista .usuario-row > .col-sm-3 { grid-column: 1 / -1; }
    #usuarios-lista .u-acoes { grid-column: 1 / -1; }
}

.cfg-senha { position: relative; }
.cfg-senha .form-control { padding-right: 42px; }
.cfg-olho {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-radius: 4px;
    background: transparent;
    color: var(--ap-cinza);
}
.cfg-olho:hover { color: var(--ap-texto); background: var(--ap-superficie); }

/* ----- Configuração: Ações em forma de frase ----- */
.acao-cabeca { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.acao-titulo { display: inline-flex; align-items: center; gap: 8px; font-weight: 700; }
.acao-cabeca .badge { white-space: normal; text-align: right; font-weight: 600; line-height: 1.35; }
.acao-cond {
    border: 1px solid var(--ap-linha-suave);
    border-left: 4px solid var(--ap-alerta);
    border-radius: 6px;
    background: var(--ap-cartao-2);
    padding: 12px 14px;
    margin-bottom: 12px;
}
.acao-cond:last-child { margin-bottom: 0; }
.acao-cond-menor { border-left-color: var(--ap-acento); }
.acao-se {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 0.92rem;
    margin-bottom: 12px;
}
.acao-sinal { font-weight: 700; color: var(--ap-alerta); }
.acao-cond-menor .acao-sinal { color: var(--ap-acento); }
.acao-campo { display: inline-flex; align-items: center; gap: 6px; }
.acao-campo .acao-limiar { width: 100px; }
.acao-campo .acao-leituras-num { width: 70px; }
.acao-un { font-weight: 600; color: var(--ap-cinza); }
.acao-segundos { color: var(--ap-cinza-2); }
.acao-reles {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}
@media (max-width: 1100px) { .acao-reles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .acao-reles { grid-template-columns: 1fr; } }
.acao-rele {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 8px;
    border: 1px solid var(--ap-linha-suave);
    border-radius: 6px;
    background: var(--ap-cartao);
    min-width: 0;
}
.acao-rele-nome {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 600;
    min-width: 0;
}
.acao-rele-nome span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Relé que a regra aciona (qualquer ação diferente de "Não aciona") */
.acao-rele.acao-ativa { border-color: var(--ap-acento); box-shadow: inset 0 0 0 1px var(--ap-acento); }
.acao-rele.acao-ativa .acao-rele-sel { color: var(--ap-acento); font-weight: 700; border-color: var(--ap-acento); }
.acao-vazio { font-size: 0.76rem; color: var(--ap-cinza-2); margin-top: 8px; }

/* ----- Configuração: o que foi alterado e ainda não salvo ----- */
.form-control.cfg-alterado, .form-select.cfg-alterado {
    background-color: #fff3c4 !important;
    border-color: #c99a06 !important;
    color: #1f1f1f !important;
}
html[data-theme="dark"] .form-control.cfg-alterado,
html[data-theme="dark"] .form-select.cfg-alterado {
    background-color: #4a3b0c !important;
    border-color: #e0b33c !important;
    color: #fff6dc !important;
}
.card.cfg-alterado { border-left: 4px solid #d9a907; }
.subabas .nav-link.cfg-alterado::after {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-radius: 50%;
    background: #d9a907;
    vertical-align: middle;
}
.cfg-removidas {
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 4px;
    font-size: 0.82rem;
    font-weight: 600;
    background: #fff3c4;
    color: #6b5100;
}
html[data-theme="dark"] .cfg-removidas { background: #4a3b0c; color: #fff6dc; }
.cfg-removidas[hidden] { display: none; }

/* ----- Configuração: barra fixa de salvar ----- */
.cfg-barra {
    position: sticky;
    bottom: 0;
    z-index: 1010;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin-top: 16px;
    padding: 12px 16px;
    background: var(--ap-cartao);
    border: 1px solid var(--ap-linha);
    border-radius: 8px 8px 0 0;
    box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.08);
}
.cfg-barra[hidden] { display: none; }
.cfg-barra-estado { margin-right: auto; font-size: 0.9rem; color: var(--ap-cinza); }
.cfg-barra[data-estado="alterado"] { border-color: var(--ap-aviso); border-left: 4px solid var(--ap-aviso); }
.cfg-barra[data-estado="alterado"] .cfg-barra-estado { color: var(--ap-aviso); font-weight: 700; }
.cfg-barra[data-estado="salvo"] .cfg-barra-estado { color: var(--ap-ok); font-weight: 700; }
.cfg-barra .btn:disabled { opacity: 0.45; }
@media (max-width: 575px) {
    .cfg-barra { flex-wrap: wrap; }
    .cfg-barra-estado { flex-basis: 100%; }
    .cfg-barra .btn { flex: 1; }
}

/* Info / Wi-Fi / Rede vêm em iframe e se integram à página: fundo
   transparente, sem moldura, altura do conteúdo (tema.js). */
#iframe-info, #iframe-wifi, #iframe-rede {
    display: block;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent;
    min-height: 200px;
}

/* ----- Telas menores ----- */
@media (max-width: 900px) {
    .reles-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
    .reles-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
    .sensors-grid { grid-template-columns: repeat(2, 1fr); }
    /* Card estreito: canal e selo na primeira linha, nome inteiro na segunda */
    .sensor-topo { flex-wrap: wrap; row-gap: 6px; }
    .sensor-name { order: 3; flex-basis: 100%; }
    .painel-status { grid-template-columns: 1fr; padding: 14px 16px; }
    .painel-alarmes { justify-self: start; }
    .faixa-pausa, .faixa-pendrive { flex-wrap: wrap; }
    .topo { position: static; }
    .topo-linha { flex-wrap: wrap; padding: 10px 16px; row-gap: 8px; }
    .topo-local { order: 3; flex-basis: 100%; justify-content: flex-start; }
    .topo-status { margin-left: auto; }
    .topo-abas { flex-wrap: wrap; padding: 0 16px; }
    .abas { width: 100%; }
    .desbloqueio { padding-top: 0; padding-bottom: 10px; width: 100%; }
    .desbloqueio-grupo input { flex: 1; width: auto; }
    #auth-section.d-none + .comandos-liberados { margin-bottom: 10px; }
    .conteudo { padding: 12px 12px 24px; }
}
@media (max-width: 420px) {
    .topo-produto { display: none; }
    .topo-linha { gap: 8px; }
    .topo-logo { height: 13px; }
    .topo-status { gap: 6px; }
    .pilula-status { padding: 3px 8px; font-size: 0.68rem; }
}

/* ===== Tamanho dos cartões do Monitor (botão ao lado do tema — tema.js) ===== */
.layout-menu { position: relative; display: inline-flex; }
.painel-layout {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 1050;
    width: 290px;
    padding: 12px;
    border: 1px solid var(--ap-linha);
    border-radius: 8px;
    background: var(--ap-cartao);
    color: var(--ap-texto);
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.45);
}
.painel-layout[hidden] { display: none; }
.painel-layout-titulo {
    margin-bottom: 8px;
    font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ap-cinza);
}
.layout-opcoes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.layout-opcoes label { position: relative; cursor: pointer; }
.layout-opcoes input { position: absolute; opacity: 0; pointer-events: none; }
.layout-opcoes label > span:last-child {
    display: block; margin-top: 4px; text-align: center; font-size: 0.8rem; font-weight: 600;
}
.layout-amostra {
    display: grid; gap: 3px; height: 46px; padding: 6px;
    border: 1px solid var(--ap-borda); border-radius: 6px; background: var(--ap-cartao-2);
}
.layout-amostra i { display: block; border-radius: 2px; background: var(--ap-linha); }
.amostra-compacto { grid-template-columns: repeat(3, 1fr); }
.amostra-normal   { grid-template-columns: repeat(2, 1fr); }
.amostra-grande   { grid-template-columns: 1fr; }
.layout-opcoes label:hover .layout-amostra { border-color: var(--ap-acento); }
.layout-opcoes input:checked + .layout-amostra { border-color: var(--ap-primaria); box-shadow: 0 0 0 2px var(--ap-primaria); }
.layout-opcoes input:checked + .layout-amostra i { background: var(--ap-acento); }
.layout-opcoes input:focus-visible + .layout-amostra { outline: 2px solid var(--ap-acento); outline-offset: 2px; }
.painel-layout-dica { margin: 10px 0 0; font-size: 0.78rem; color: var(--ap-cinza-2); }

/* Compacto: notebook / tela pequena — mais coisa na tela, cartões menores */
html[data-layout="compacto"] .conteudo { padding-top: 10px; }
html[data-layout="compacto"] .painel-status { padding-top: 8px; padding-bottom: 8px; }
html[data-layout="compacto"] .painel-titulo { font-size: 1rem; }
html[data-layout="compacto"] .monitor-grade .secao,
html[data-layout="compacto"] .monitor-grade { gap: 12px; }
html[data-layout="compacto"] .sensors-grid,
html[data-layout="compacto"] .reles-grid { gap: 6px; }
html[data-layout="compacto"] .sensor-card { padding: 6px 10px; }
html[data-layout="compacto"] .sensor-name { font-size: 0.8rem; }
html[data-layout="compacto"] .sensor-leitura { margin-top: 2px; }
html[data-layout="compacto"] .sensor-value,
html[data-layout="compacto"] .secao-sensores .sensor-value { font-size: clamp(18px, 1.5vw, 24px); }
html[data-layout="compacto"] .sensor-unit { font-size: 0.8rem; }
html[data-layout="compacto"] .sensor-regua { margin-top: 4px; }
html[data-layout="compacto"] .regua-legenda { font-size: 0.66rem; }
html[data-layout="compacto"] .rele-topo { padding: 4px 8px; }
html[data-layout="compacto"] .rele-nome { font-size: 0.8rem; }
html[data-layout="compacto"] .rele-corpo { min-height: 34px; padding: 4px 8px; }
html[data-layout="compacto"] .rele-estado { font-size: 0.78rem; }
html[data-layout="compacto"] .rele-btn { font-size: 0.72rem; padding: 3px 8px; }

/* Grande: monitor de parede / TV — tela inteira, números para ler de longe */
html[data-layout="grande"] .conteudo { max-width: none; }
html[data-layout="grande"] .painel-titulo { font-size: 1.35rem; }
html[data-layout="grande"] .painel-sub { font-size: 0.95rem; }
html[data-layout="grande"] .secao-titulo { font-size: 0.9rem; }
html[data-layout="grande"] .sensors-grid,
html[data-layout="grande"] .reles-grid { gap: 14px; }
html[data-layout="grande"] .sensor-card { padding: 14px 18px; }
html[data-layout="grande"] .sensor-canal { font-size: 0.78rem; }
html[data-layout="grande"] .sensor-name { font-size: 1.05rem; }
html[data-layout="grande"] .sensor-value,
html[data-layout="grande"] .secao-sensores .sensor-value { font-size: clamp(34px, 3.4vw, 64px); }
html[data-layout="grande"] .sensor-unit { font-size: 1.15rem; }
html[data-layout="grande"] .sensor-selo { font-size: 0.82rem; padding: 2px 10px; }
html[data-layout="grande"] .regua-legenda { font-size: 0.82rem; }
html[data-layout="grande"] .regua-trilho { height: 8px; }
html[data-layout="grande"] .rele-topo { padding: 10px 14px; }
html[data-layout="grande"] .rele-nome { font-size: 1.02rem; }
html[data-layout="grande"] .rele-corpo { min-height: 58px; padding: 10px 14px; }
html[data-layout="grande"] .rele-estado { font-size: 1rem; }
html[data-layout="grande"] .rele-btn { font-size: 0.9rem; padding: 7px 14px; }
html[data-layout="grande"] .rele-motivo { font-size: 0.85rem; }

/* Disposição: relés ao lado (padrão) ou embaixo dos sensores */
.painel-layout-titulo-2 { margin-top: 12px; }
.layout-opcoes-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.amostra-lado    { grid-template-columns: 1.55fr 1fr; }
.amostra-embaixo { grid-template-rows: 1.6fr 1fr; }
.layout-amostra i.r { opacity: 0.55; }
@media (min-width: 1200px) {
    html[data-disposicao="embaixo"] .monitor-grade { display: block; }
    html[data-disposicao="embaixo"] .monitor-grade .secao { margin-bottom: 18px; }
    html[data-disposicao="embaixo"] .secao-reles .reles-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    /* Sensores com a largura toda E a altura da tela: os relés ficam abaixo da
       dobra (rolando a página). O valor acompanha o tamanho do cartão (unidade
       cqw = % da largura do cartão), então cresce o máximo sem cortar números
       longos como -1234.56. Navegador sem cqw fica com o valor em vw. */
    html[data-disposicao="embaixo"] .secao-sensores .sensors-grid {
        min-height: calc(100vh - 215px);
        grid-auto-rows: 1fr;
    }
    html[data-disposicao="embaixo"] .secao-sensores .sensor-card { container-type: inline-size; }
    html[data-disposicao="embaixo"] .secao-sensores .sensor-value {
        font-size: clamp(48px, 5.4vw, 150px);
        font-size: clamp(40px, 27cqw, 200px);
        line-height: 1;
    }
    html[data-disposicao="embaixo"] .secao-sensores .sensor-unit { font-size: clamp(1rem, 5cqw, 2rem); }
    html[data-disposicao="embaixo"] .secao-sensores .sensor-name { font-size: clamp(0.9rem, 4.2cqw, 1.35rem); }
    html[data-disposicao="embaixo"] .secao-sensores .regua-legenda { font-size: clamp(0.72rem, 3cqw, 0.95rem); }
    html[data-disposicao="embaixo"] .secao-sensores .regua-trilho { height: 9px; }
    /* Compacto: sem esticar até a altura da tela, número menor */
    html[data-disposicao="embaixo"][data-layout="compacto"] .secao-sensores .sensors-grid { min-height: 0; grid-auto-rows: auto; }
    html[data-disposicao="embaixo"][data-layout="compacto"] .secao-sensores .sensor-value { font-size: clamp(28px, 12cqw, 64px); }
}

.sem-quebra { white-space: nowrap; }

/* F5 com sessão válida: o cartão de login fica escondido enquanto a tela
   confere a sessão (logica.js, _retomandoNaAbertura) — sem piscar o login. */
html.shh-retomando .login-cartao,
html.shh-retomando .login-rodape-link { visibility: hidden; }