/* força ocultar mesmo com display:flex */
[hidden], .is-hidden { display: none !important; }

*{box-sizing:border-box;}
html,body{
    max-width:100%;
    overflow-x:hidden;
}
body{
    background:#050816;
    color:white;
    font-family:Arial, Helvetica, sans-serif;
    margin:0;
    padding:10px;
    padding-bottom:24px;
    -webkit-text-size-adjust:100%;
}
h1{
    text-align:center;
    margin:8px 0 12px;
    font-size:clamp(16px, 4vw, 28px);
    letter-spacing:0.5px;
}
.toolbar{
    display:flex;
    flex-wrap:wrap;
    gap:10px;
    align-items:center;
    justify-content:space-between;
    margin:0 0 12px 0;
    padding:10px 14px;
    background:#111827;
    border:1px solid #1f2937;
    border-radius:8px;
}
.toolbar-left{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    justify-content:flex-start;
}
.toolbar label{
    font-size:13px;
    color:#9ca3af;
}
.toolbar select{
    background:#1f2937;
    color:white;
    border:1px solid #374151;
    border-radius:6px;
    padding:8px 12px;
    font-size:14px;
    min-width:140px;
    max-width:100%;
}
.card-update{
    background:#0f172a;
    border:1px solid #1e3a5f;
    border-radius:8px;
    padding:8px 14px;
    font-size:12px;
    color:#93c5fd;
    white-space:nowrap;
}
.card-update strong{
    color:#e5e7eb;
    font-size:13px;
}
.btn-chamado{
    background:linear-gradient(180deg, #dc2626 0%, #b91c1c 100%);
    color:#fff;
    border:1px solid #991b1b;
    border-radius:8px;
    padding:8px 14px;
    font-size:13px;
    font-weight:bold;
    cursor:pointer;
    white-space:nowrap;
    transition:filter 0.15s, transform 0.1s;
}
.btn-chamado:hover{ filter:brightness(1.12); }
.btn-chamado:active{ transform:scale(0.98); }
.btn-chamado-sec{
    background:#1f2937;
    color:#e5e7eb;
    border:1px solid #374151;
    border-radius:8px;
    padding:8px 14px;
    font-size:13px;
    font-weight:bold;
    cursor:pointer;
}
.btn-chamado-sec:hover{ background:#374151; }
.btn-gerar{
    background:linear-gradient(180deg, #16a34a 0%, #15803d 100%);
    color:#fff;
    border:1px solid #166534;
    border-radius:8px;
    padding:10px 18px;
    font-size:14px;
    font-weight:bold;
    cursor:pointer;
    width:100%;
}
.btn-gerar:hover{ filter:brightness(1.1); }
.btn-gerar:disabled{
    opacity:0.45;
    cursor:not-allowed;
    filter:none;
}
#modalChamado{
    display:none;
    position:fixed;
    inset:0;
    z-index:10000;
    background:rgba(0,0,0,0.65);
    align-items:center;
    justify-content:center;
    padding:16px;
}
#modalChamado.open{ display:flex; }
.modal-chamado-box{
    background:#0b1220;
    border:1px solid #1e3a5f;
    border-radius:12px;
    width:100%;
    max-width:520px;
    max-height:min(86vh, 640px);
    display:flex;
    flex-direction:column;
    box-shadow:0 16px 40px rgba(0,0,0,0.55);
}
.modal-chamado-header{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    padding:14px 16px;
    border-bottom:1px solid #1f2937;
}
.modal-chamado-header h2{
    margin:0;
    font-size:16px;
    color:#f1f5f9;
}
.modal-close{
    background:transparent;
    border:none;
    color:#94a3b8;
    font-size:22px;
    line-height:1;
    cursor:pointer;
    padding:0 4px;
}
.modal-close:hover{ color:#fff; }
.modal-chamado-body{
    overflow-y:auto;
    padding:10px 12px;
    flex:1;
}
.modal-chamado-actions{
    display:flex;
    flex-direction:column;
    gap:8px;
    padding:12px 16px 16px;
    border-top:1px solid #1f2937;
}
.modal-toolbar-row{
    display:flex;
    gap:8px;
    margin-bottom:10px;
    flex-wrap:wrap;
}
.chamado-item{
    display:flex;
    gap:10px;
    align-items:flex-start;
    padding:10px 10px;
    border:1px solid #1f2937;
    border-radius:8px;
    margin-bottom:8px;
    background:#0f172a;
    cursor:pointer;
}
.chamado-item:hover{ border-color:#334155; }
.chamado-item input[type="checkbox"]{
    margin-top:3px;
    width:16px;
    height:16px;
    accent-color:#dc2626;
    flex-shrink:0;
}
.chamado-item .info{ flex:1; min-width:0; }
.chamado-item .nome-swap{
    font-size:13px;
    font-weight:bold;
    color:#e5e7eb;
    margin-bottom:4px;
    word-break:break-word;
}
.chamado-item .boxes-prob{
    font-size:12px;
    color:#fca5a5;
    line-height:1.35;
}
.chamado-vazio{
    text-align:center;
    color:#94a3b8;
    padding:24px 12px;
    font-size:14px;
}
#total{
    font-size:12px;
    color:#9ca3af;
    margin:0 0 10px;
    text-align:center;
    line-height:1.4;
}
.stats-grid{
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:8px;
    margin:0 auto 14px;
    max-width:1100px;
}
.stat-card{
    background:linear-gradient(180deg, #0f172a 0%, #111827 100%);
    border:1px solid #1e3a5f;
    border-radius:10px;
    padding:6px 8px;
    text-align:center;
    min-height:52px;
    width:110px;
    flex:0 0 110px;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
}
.stat-card .label{
    font-size:10px;
    color:#94a3b8;
    line-height:1.15;
}
.stat-card .value{
    font-size:16px;
    font-weight:bold;
    color:#e5e7eb;
    letter-spacing:0.2px;
}
.stat-card.warn .value{ color:#fbbf24; }
.stat-card.danger .value{ color:#f87171; }
.stat-card.ok .value{ color:#34d399; }
.stat-card.info .value{ color:#60a5fa; }

/* Desktop: tabela clássica */
#painel, .table-wrap{
    width:100%;
    overflow-x:auto;
    -webkit-overflow-scrolling:touch;
    border-radius:8px;
    border:1px solid #1f2937;
}
table#tabelaSwaps{
    width:100%;
    border-collapse:collapse;
    min-width:980px;
}
table#tabelaSwaps th{
    background:#1f2937;
    padding:6px 4px;
    font-size:10px;
    position:sticky;
    top:0;
    z-index:2;
    white-space:nowrap;
}
table#tabelaSwaps td{
    padding:3px 2px;
    text-align:center;
    border-bottom:1px solid #222;
    vertical-align:middle;
}
table#tabelaSwaps .nome{
    text-align:left;
    min-width:220px;
    max-width:300px;
    font-size:12px;
    font-weight:bold;
    white-space:nowrap;
    padding-left:6px;
}
table#tabelaSwaps .box{
    position:relative;
    width:90px;
    height:40px;
    margin:0 auto;
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    color:white;
    font-size:7px;
    line-height:9px;
    border-radius:4px;
    padding:2px;
    overflow:hidden;
}
table#tabelaSwaps .alerta{
    position:absolute;
    top:1px;
    right:2px;
    font-size:10px;
    color:#ff0000;
    font-weight:bold;
    z-index:3;
}
.col-alerta{
    font-weight:bold;
    font-size:10px;
    white-space:nowrap;
    position:relative;
    cursor:default;
}
table#tabelaSwaps .col-inop,
table#tabelaSwaps .col-status{
    font-weight:bold;
    font-size:8px;
    white-space:nowrap;
    width:32px;
}

/* Tooltip de alertas em bloco (hover) */
.col-alerta .alerta-tip{
    display:none;
    position:absolute;
    left:0;
    top:100%;
    z-index:50;
    min-width:280px;
    max-width:420px;
    background:#0b1220;
    border:1px solid #334155;
    border-radius:8px;
    padding:8px;
    box-shadow:0 8px 24px rgba(0,0,0,0.45);
    text-align:left;
    white-space:normal;
}
.col-alerta:hover .alerta-tip{
    display:flex;
    flex-direction:column;
    gap:4px;
}
.alerta-tip .alert-block{
    background:#111827;
    border-left:3px solid #f87171;
    border-radius:4px;
    padding:6px 8px;
    font-size:11px;
    line-height:1.35;
    color:#e5e7eb;
}
.alerta-tip .alert-block.warn{ border-left-color:#fbbf24; }
.alerta-tip .alert-block.ok{ border-left-color:#34d399; }
.alerta-tip .alert-code{ font-weight:bold; margin-right:6px; }
.alerta-tip .alert-date{ color:#94a3b8; font-size:10px; margin-left:6px; }

/* Cards (só mobile) — escondidos no desktop */
.station-list{ display:none; }

/* ---- Mobile real (telefone) ---- */
@media (max-width: 640px){
    #statsCards{ display:none !important; }
    body{ padding:8px; }
    h1{ margin:6px 0 10px; font-size:18px; }
    .toolbar{
        flex-direction:column;
        align-items:stretch;
        gap:8px;
        padding:10px;
        justify-content:flex-start;
    }
    .toolbar-left{ width:100%; justify-content:flex-start; }
    .toolbar select{ width:100%; min-width:0; font-size:16px; }
    .btn-chamado{ width:100%; text-align:center; padding:10px 14px; font-size:14px; }
    .card-update{ width:100%; text-align:center; white-space:normal; }
    .modal-chamado-box{ max-height:90vh; }
    .stats-grid{ gap:6px; margin-bottom:10px; }
    .stat-card{
        width:calc(33.333% - 6px);
        flex:0 0 calc(33.333% - 6px);
        min-height:48px;
        padding:5px 4px;
        border-radius:8px;
    }
    .stat-card .label{ font-size:9px; }
    .stat-card .value{ font-size:14px; }
    #total{ font-size:11px; text-align:left; }

    /* Esconde tabela, mostra cards */
    #painel table#tabelaSwaps{ display:none; }
    .station-list{
        display:flex;
        flex-direction:column;
        gap:8px;
        width:100%;
    }
    #painel, .table-wrap{
        overflow:visible;
        border:none;
    }
    .station-card{
        background:#0b1220;
        border:1px solid #1f2937;
        border-radius:8px;
        padding:8px;
        width:100%;
    }
    .station-header{
        display:flex;
        flex-wrap:wrap;
        align-items:center;
        gap:6px 10px;
        margin-bottom:6px;
        padding-bottom:6px;
        border-bottom:1px solid #1f2937;
    }
    .station-card .nome{
        text-align:left;
        font-size:12px;
        font-weight:bold;
        flex:1 1 100%;
        color:#e5e7eb;
        word-break:break-word;
    }
    .station-boxes{
        display:grid;
        grid-template-columns:repeat(3, minmax(0, 1fr));
        gap:6px;
        width:100%;
    }
    .station-card .box{
        position:relative;
        width:100%;
        min-height:56px;
        font-size:9px;
        line-height:1.2;
        padding:4px 3px;
        border-radius:4px;
        display:flex;
        flex-direction:column;
        justify-content:center;
        align-items:center;
        overflow:hidden;
        text-align:center;
    }
    .box-label{ display:block; font-size:10px; color:#64748b; margin-bottom:3px; text-align:center; }
    .col-alerta{ font-size:11px; font-weight:bold; white-space:nowrap; }
    .col-inop, .col-status{ font-size:9px; font-weight:bold; white-space:nowrap; }
    /* No mobile o detalhe abre só no clique (popup) */
    .col-alerta .alerta-tip{ display:none !important; }
}

@media (max-width: 400px){
    .stat-card{
        width:calc(50% - 5px);
        flex:0 0 calc(50% - 5px);
    }
}


/* Popup flutuante de alerta (clique no ⚠ ou no texto ALERTA) */
#alertaFloat{
    display:none;
    position:fixed;
    z-index:9999;
    min-width:260px;
    max-width:min(420px, 92vw);
    background:#0b1220;
    border:1px solid #334155;
    border-radius:8px;
    padding:8px;
    box-shadow:0 10px 28px rgba(0,0,0,0.55);
    text-align:left;
}
#alertaFloat.open{ display:flex; flex-direction:column; gap:4px; }
#alertaFloat .alert-block{
    background:#111827;
    border-left:3px solid #f87171;
    border-radius:4px;
    padding:6px 8px;
    font-size:11px;
    line-height:1.35;
    color:#e5e7eb;
}
#alertaFloat .alert-block.warn{ border-left-color:#fbbf24; }
#alertaFloat .alert-code{ font-weight:bold; margin-right:6px; }
#alertaFloat .alert-date{ color:#94a3b8; font-size:10px; margin-left:6px; }
.alerta{
    cursor:pointer;
}


.btn-gerar-pdf{
    background:#1d4ed8;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:10px 16px;
    font-size:13px;
    font-weight:bold;
    cursor:pointer;
    width:100%;
    margin-top:8px;
}
.btn-gerar-pdf:hover{ filter:brightness(1.1); }
.btn-gerar-pdf:disabled{
    opacity:0.45;
    cursor:not-allowed;
}

/* ===== Login ===== */
.login-screen{
    min-height:100vh;
    display:flex;
    align-items:center;
    justify-content:center;
    background:radial-gradient(ellipse at top, #0f172a 0%, #050816 60%);
    padding:16px;
}
.login-card{
    width:100%;
    max-width:360px;
    background:#0b1220;
    border:1px solid #1e3a5f;
    border-radius:14px;
    padding:28px 24px;
    display:flex;
    flex-direction:column;
    gap:12px;
}
.login-brand{
    text-align:center;
    font-size:22px;
    font-weight:bold;
    letter-spacing:1px;
}
.login-sub{
    text-align:center;
    color:#94a3b8;
    font-size:13px;
    margin-bottom:8px;
}
.login-label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:12px;
    color:#9ca3af;
}
.login-label input{
    background:#111827;
    border:1px solid #374151;
    border-radius:8px;
    color:#fff;
    padding:10px 12px;
    font-size:14px;
}
.btn-login{
    margin-top:8px;
    background:#2563eb;
    color:#fff;
    border:none;
    border-radius:8px;
    padding:12px;
    font-weight:bold;
    cursor:pointer;
}
.btn-login:hover{ filter:brightness(1.1); }
.btn-login:disabled{ opacity:0.6; cursor:wait; }
.login-error{
    color:#f87171;
    font-size:13px;
    text-align:center;
    margin:0;
}

/* ===== App shell / sidebar ===== */
.app-shell{
    display:flex;
    min-height:100vh;
    background:#050816;
}
.sidebar{
    width:240px;
    background:#0b1220;
    border-right:1px solid #1f2937;
    display:flex;
    flex-direction:column;
    transition:width 0.2s ease, margin 0.2s ease;
    flex-shrink:0;
    z-index:20;
}
.app-shell.sidebar-collapsed .sidebar{ width:64px; }
.app-shell.sidebar-collapsed .sidebar-title,
.app-shell.sidebar-collapsed .nav-item,
.app-shell.sidebar-collapsed .nav-group span:first-child,
.app-shell.sidebar-collapsed .nav-group .chev,
.app-shell.sidebar-collapsed .user-chip,
.app-shell.sidebar-collapsed .btn-logout{
    display:none;
}
.sidebar-top{
    display:flex;
    align-items:center;
    gap:8px;
    padding:12px;
    border-bottom:1px solid #1f2937;
}
.sidebar-title{
    font-weight:bold;
    font-size:14px;
    letter-spacing:0.5px;
}

.sidebar-nav{
    flex:1;
    padding:10px 8px;
    overflow-y:auto;
}
.nav-item{
    display:block;
    padding:10px 12px;
    color:#cbd5e1;
    text-decoration:none;
    border-radius:8px;
    font-size:13px;
    margin-bottom:4px;
}
.nav-item:hover{ background:#111827; color:#fff; }
.nav-item.active{ background:#1e3a5f; color:#93c5fd; }
.nav-item.sub{ padding-left:22px; font-size:12px; }
.nav-group{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    background:transparent;
    border:none;
    color:#94a3b8;
    padding:10px 12px;
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:0.4px;
    cursor:pointer;
}
.nav-sub{ display:none; }
.nav-sub.open{ display:block; }
.sidebar-foot{
    padding:12px;
    border-top:1px solid #1f2937;
    display:flex;
    flex-direction:column;
    gap:8px;
}
.user-chip{
    font-size:12px;
    color:#9ca3af;
    word-break:break-all;
}
.btn-logout{
    background:#7f1d1d;
    color:#fecaca;
    border:none;
    border-radius:8px;
    padding:8px;
    cursor:pointer;
    font-size:12px;
}
.main-area{
    flex:1;
    min-width:0;
    display:flex;
    flex-direction:column;
}
.topbar{
    display:flex;
    align-items:center;
    gap:12px;
    padding:12px 16px;
    border-bottom:1px solid #1f2937;
    background:#0b1220;
}
.topbar h1{
    margin:0;
    font-size:16px;
    font-weight:bold;
    flex:1;
    text-align:left;
}
.topbar-right{ margin-left:auto; }
.db-badge{
    font-size:11px;
    padding:4px 10px;
    border-radius:999px;
    background:#1f2937;
    color:#9ca3af;
}
.db-badge.ok{ background:#064e3b; color:#6ee7b7; }
.db-badge.warn{ background:#78350f; color:#fcd34d; }
.content{
    flex:1;
    padding:12px 16px 24px;
    overflow:auto;
}
.page{ animation: fadeIn 0.15s ease; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.home-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(260px, 1fr));
    gap:14px;
}
.home-card{
    background:#0b1220;
    border:1px solid #1f2937;
    border-radius:12px;
    padding:18px;
}
.home-card h2{ margin:0 0 8px; font-size:16px; }
.home-card p{ margin:0; color:#94a3b8; font-size:13px; line-height:1.45; }
.link-card{
    text-decoration:none;
    color:inherit;
    transition:border-color 0.15s;
}
.link-card:hover{ border-color:#3b82f6; }
.mobile-only{ display:none; }

@media (max-width: 900px){
    .mobile-only{ display:inline-flex; }
    .sidebar{
        position:fixed;
        left:0; top:0; bottom:0;
        transform:translateX(-100%);
        width:260px !important;
    }
    .app-shell.sidebar-open .sidebar{ transform:translateX(0); }
    .app-shell.sidebar-collapsed .sidebar{ width:260px !important; }
    .app-shell.sidebar-collapsed .sidebar-title,
    .app-shell.sidebar-collapsed .nav-item,
    .app-shell.sidebar-collapsed .nav-group span:first-child,
    .app-shell.sidebar-collapsed .nav-group .chev,
    .app-shell.sidebar-collapsed .user-chip,
    .app-shell.sidebar-collapsed .btn-logout{
        display:initial;
    }
}

/* Fullscreen / apresentação */
.btn-fullscreen{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:36px;
    height:36px;
    border-radius:10px;
    border:1px solid #1e3a5f;
    background:#0f172a;
    color:#93c5fd;
    cursor:pointer;
}
.btn-fullscreen:hover{ background:#1e3a5f; color:#fff; }
.app-shell.presentation-mode .sidebar{ display:none !important; }
.app-shell.presentation-mode .topbar{ padding:8px 12px; }
.app-shell.presentation-mode .content{ padding:8px; }

/* Avatar / perfil */
.user-chip-link{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:inherit;
}
.avatar-sm{
    width:32px;
    height:32px;
    border-radius:50%;
    object-fit:cover;
    border:1px solid #334155;
}
.user-chip strong{
    display:block;
    font-size:11px;
    color:#94a3b8;
    font-weight:normal;
}
.user-chip span{
    display:block;
    font-size:12px;
    color:#e5e7eb;
}
.profile-layout{
    max-width:560px;
}
.profile-card{
    background:#0b1220;
    border:1px solid #1f2937;
    border-radius:14px;
    padding:20px;
}
.profile-header{
    display:flex;
    align-items:center;
    gap:16px;
    margin-bottom:18px;
}
.avatar-wrap{
    position:relative;
    width:72px;
    height:72px;
}
.avatar-lg{
    width:72px;
    height:72px;
    border-radius:50%;
    object-fit:cover;
    border:2px solid #1e3a5f;
}
.avatar-fallback{
    width:72px;
    height:72px;
    border-radius:50%;
    background:#1e3a5f;
    color:#93c5fd;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:28px;
    font-weight:bold;
}
.profile-form{
    display:flex;
    flex-direction:column;
    gap:12px;
}
.profile-form label{
    display:flex;
    flex-direction:column;
    gap:6px;
    font-size:12px;
    color:#9ca3af;
}
.profile-form input{
    background:#111827;
    border:1px solid #374151;
    border-radius:8px;
    color:#fff;
    padding:10px 12px;
    font-size:14px;
}
.profile-form input:disabled{
    opacity:0.7;
    cursor:not-allowed;
}
.profile-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:8px;
}
.profile-msg{
    font-size:13px;
    margin:0;
}
.profile-msg.ok{ color:#34d399; }
.profile-msg.err{ color:#f87171; }
.muted{ color:#94a3b8; font-size:12px; }

/* Topbar user */
.topbar-user{
    display:flex;
    align-items:center;
    gap:8px;
    text-decoration:none;
    color:inherit;
    padding:4px 8px 4px 4px;
    border-radius:999px;
    border:1px solid #1f2937;
    background:#0f172a;
    max-width:220px;
}
.topbar-user:hover{ border-color:#334155; }
.topbar-user-text{
    display:flex;
    flex-direction:column;
    line-height:1.15;
    min-width:0;
}
.topbar-greet{
    font-size:10px;
    color:#94a3b8;
}
.topbar-user-text strong{
    font-size:12px;
    color:#e5e7eb;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
}
.avatar-sm-fallback{
    width:32px;
    height:32px;
    border-radius:50%;
    background:#1e3a5f;
    color:#93c5fd;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:13px;
    font-weight:bold;
    flex-shrink:0;
}
.busca-label{ font-size:12px; color:#9ca3af; }
.busca-swap{
    background:#111827;
    border:1px solid #374151;
    border-radius:8px;
    color:#fff;
    padding:8px 10px;
    font-size:13px;
    min-width:160px;
    max-width:220px;
}
.busca-swap:focus{
    outline:none;
    border-color:#3b82f6;
}
@media (max-width: 900px){
    .topbar-user-text{ display:none; }
    .busca-swap{ min-width:120px; max-width:150px; }
    .busca-label{ display:none; }
}

.topbar-title-block{
    display:flex;
    flex-direction:column;
    gap:2px;
    flex:1;
    min-width:0;
}
.topbar-greet-line{
    display:flex;
    align-items:center;
    gap:8px;
    font-size:12px;
    color:#94a3b8;
}
.topbar-greet-line strong{
    color:#e5e7eb;
    font-size:13px;
}
.topbar-title-block h1{
    margin:0;
    font-size:16px;
}
.login-switch{
    text-align:center;
    font-size:13px;
    color:#94a3b8;
    margin:4px 0 0;
}
.login-switch a{ color:#93c5fd; }
.users-table{
    width:100%;
    border-collapse:collapse;
    font-size:13px;
}
.users-table th,.users-table td{
    border-bottom:1px solid #1f2937;
    padding:8px 10px;
    text-align:left;
}
.users-table th{ background:#111827; color:#94a3b8; font-size:11px; }
.users-toolbar{ margin-bottom:12px; }
.check-row{
    flex-direction:row !important;
    align-items:center;
    gap:8px !important;
}
.profile-form select{
    background:#111827;
    border:1px solid #374151;
    border-radius:8px;
    color:#fff;
    padding:10px 12px;
}
.col-alerta{ font-size:9px !important; }


/* Menu lateral em overlay (não empurra o conteúdo) */
.app-shell{
    display:block;
    min-height:100vh;
    background:#050816;
    position:relative;
}
.sidebar-backdrop{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:40;
}
.app-shell.sidebar-open .sidebar-backdrop{ display:block; }
.sidebar{
    position:fixed !important;
    top:0; left:0; bottom:0;
    width:260px !important;
    max-width:85vw;
    background:#0b1220;
    border-right:1px solid #1f2937;
    display:flex;
    flex-direction:column;
    z-index:50;
    transform:translateX(-105%);
    transition:transform 0.22s ease;
    box-shadow:none;
}
.app-shell.sidebar-open .sidebar{
    transform:translateX(0);
    box-shadow:8px 0 28px rgba(0,0,0,0.35);
}
.main-area{
    width:100%;
    min-width:0;
    display:flex;
    flex-direction:column;
    min-height:100vh;
}
.sidebar-top{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
}
.user-actions{
    display:flex;
    flex-wrap:wrap;
    gap:4px;
}
.user-actions button{
    font-size:11px;
    padding:6px 8px;
    width:auto;
}
.modal-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.55);
    z-index:80;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:16px;
}
.modal-overlay.is-hidden{ display:none !important; }

.section-title{
    margin:16px 0 8px;
    font-size:14px;
    color:#93c5fd;
    font-weight:600;
}
.manut-tables{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
    margin-top:8px;
}
@media (max-width: 900px){
    .manut-tables{ grid-template-columns:1fr; }
}

/* --- Manutenções charts --- */
.manut-charts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 24px;
}
@media (max-width: 900px) {
  .manut-charts { grid-template-columns: 1fr; }
}
.chart-card {
  background: rgba(15, 23, 42, 0.55);
  border: 1px solid rgba(148, 163, 184, 0.15);
  border-radius: 12px;
  padding: 14px 16px 18px;
}
.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 6px;
  min-height: 140px;
  padding-top: 8px;
  overflow-x: auto;
}
.chart-bar-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 28px;
  flex: 1;
  max-width: 48px;
}
.chart-bar {
  width: 100%;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #38bdf8 0%, #2563eb 100%);
  min-height: 2px;
  transition: height 0.25s ease;
}
.chart-bar.warn { background: linear-gradient(180deg, #fbbf24 0%, #d97706 100%); }
.chart-bar-val {
  font-size: 0.7rem;
  color: #e2e8f0;
  margin-bottom: 4px;
}
.chart-bar-lbl {
  font-size: 0.62rem;
  color: #94a3b8;
  margin-top: 4px;
  text-align: center;
  line-height: 1.15;
  word-break: break-all;
}

.manut-charts.charts-4 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin: 16px 0 24px;
}
@media (min-width: 1200px) {
  .manut-charts.charts-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (max-width: 700px) {
  .manut-charts.charts-4 { grid-template-columns: 1fr; }
}

.manut-charts.charts-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 16px 0 12px;
}
.manut-charts.charts-1 {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin: 0 0 24px;
}
@media (max-width: 900px) {
  .manut-charts.charts-3 { grid-template-columns: 1fr; }
}

.manut-charts.charts-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 16px 0 12px;
}
@media (max-width: 900px) {
  .manut-charts.charts-2 { grid-template-columns: 1fr; }
}
.chart-bars-wide {
  min-height: 160px;
}
.chart-bars-wide .chart-bar-wrap {
  max-width: 36px;
  min-width: 22px;
}

.chart-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}
.chart-card-head .section-title { margin: 0; }
.chart-filter {
  background: rgba(15, 23, 42, 0.8);
  border: 1px solid rgba(148, 163, 184, 0.25);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
  font-size: 0.78rem;
  max-width: 200px;
}

/* Estoque */
.estoque-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.btn-tab {
  background: rgba(30,41,59,0.8);
  border: 1px solid rgba(148,163,184,0.2);
  color: #cbd5e1;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 0.8rem;
  cursor: pointer;
}
.btn-tab.active {
  background: linear-gradient(135deg, #2563eb, #1d4ed8);
  color: #fff;
  border-color: transparent;
}
.etab-panel.is-hidden { display: none !important; }
.form-card {
  background: rgba(15,23,42,0.55);
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
}
.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  margin-bottom: 12px;
}
.form-grid label, .barcode-scan-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 0.8rem;
  color: #94a3b8;
}
.form-grid input, .form-grid select, .barcode-input, .input-search, #invImportJson {
  background: rgba(15,23,42,0.9);
  border: 1px solid rgba(148,163,184,0.25);
  color: #e2e8f0;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 0.9rem;
}
.barcode-input { font-size: 1.1rem; letter-spacing: 0.04em; }
.form-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.hint { color: #94a3b8; font-size: 0.85rem; }
.barcode-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin: 16px 0;
}
.barcode-card {
  background: #fff;
  color: #0f172a;
  border-radius: 8px;
  padding: 12px;
  text-align: center;
}
.barcode-card .bc-name { font-size: 0.75rem; margin-bottom: 6px; }
.row-warn { background: rgba(239,68,68,0.12); }
@media print {
  body * { visibility: hidden; }
  #barcodePrintArea, #barcodePrintArea * { visibility: visible; }
  #barcodePrintArea { position: absolute; left: 0; top: 0; width: 100%; }
}

.scan-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
  margin-bottom: 12px;
}
.scan-row .barcode-scan-label { flex: 1 1 220px; min-width: 180px; }
.scan-row label { flex: 0 0 100px; }
.scan-row input { width: 100%; }
.inv-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 900px) {
  .inv-layout { grid-template-columns: 1fr; }
}
.inv-col {
  background: rgba(15,23,42,0.4);
  border: 1px solid rgba(148,163,184,0.12);
  border-radius: 10px;
  padding: 12px;
}
.inv-col h4 { margin: 0 0 10px; font-size: 0.9rem; color: #e2e8f0; }
#invFile { color: #cbd5e1; font-size: 0.85rem; max-width: 100%; }

.chamado-grupo{
  font-size:0.78rem;
  font-weight:700;
  color:#93c5fd;
  text-transform:uppercase;
  letter-spacing:0.04em;
  margin:12px 0 6px;
  padding:6px 8px;
  background:rgba(37,99,235,0.15);
  border-left:3px solid #3b82f6;
  border-radius:4px;
}
.topbar-right{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}
.btn-fullscreen{
  flex-shrink:0;
}

.est-charts-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .est-charts-row { grid-template-columns: 1fr; }
}
.chart-abc {
  width: 100%;
  height: 220px;
  position: relative;
}
.chart-abc svg { width: 100%; height: 100%; display: block; }
.abc-legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 0.8rem;
  color: #cbd5e1;
  margin-top: 8px;
}
.abc-legend span { display: inline-flex; align-items: center; gap: 6px; }
.abc-legend i {
  width: 10px; height: 10px; border-radius: 2px; display: inline-block;
}

.bar-row{ display:flex; align-items:center; gap:8px; margin:4px 0; font-size:0.78rem; }
.bar-label{ width:90px; flex-shrink:0; color:#94a3b8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bar-track{ flex:1; height:8px; background:rgba(148,163,184,0.15); border-radius:4px; overflow:hidden; }
.bar-fill{ height:100%; background:linear-gradient(90deg,#2563eb,#38bdf8); border-radius:4px; }
.bar-val{ width:42px; text-align:right; color:#e2e8f0; font-variant-numeric:tabular-nums; }
.chart-title{ margin:0 0 8px; font-size:0.95rem; color:#e2e8f0; }
.chart-card{
  background:rgba(15,23,42,0.55);
  border:1px solid rgba(148,163,184,0.12);
  border-radius:12px;
  padding:12px 14px;
}

#estoqueMsg {
  position: fixed;
  top: 72px;
  right: 20px;
  z-index: 9999;
  max-width: min(420px, 90vw);
  padding: 12px 16px;
  border-radius: 10px;
  font-size: 0.9rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
#estoqueMsg.toast-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
#estoqueMsg.ok {
  background: #14532d;
  color: #dcfce7;
  border: 1px solid #22c55e;
}
#estoqueMsg.err {
  background: #7f1d1d;
  color: #fee2e2;
  border: 1px solid #ef4444;
}

/* Ações em ícone — listas do estoque */
.acoes-ico {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-wrap: nowrap;
}
.btn-ico {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 8px;
  border: 1px solid rgba(148, 163, 184, 0.3);
  background: rgba(30, 41, 59, 0.9);
  color: #e2e8f0;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.btn-ico:hover {
  background: rgba(56, 189, 248, 0.18);
  border-color: #38bdf8;
  color: #7dd3fc;
  transform: translateY(-1px) scale(1.06);
  box-shadow: 0 4px 12px rgba(56, 189, 248, 0.25);
}
.btn-ico:active {
  transform: scale(0.96);
  box-shadow: none;
}
.btn-ico.ico-danger {
  color: #fca5a5;
}
.btn-ico.ico-danger:hover {
  background: rgba(239, 68, 68, 0.2);
  border-color: #ef4444;
  color: #fecaca;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.25);
}
.btn-ico.ico-warn {
  color: #fcd34d;
}
.btn-ico.ico-warn:hover {
  background: rgba(245, 158, 11, 0.2);
  border-color: #f59e0b;
  color: #fde68a;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.25);
}
.btn-ico.ico-ok {
  color: #86efac;
}
.btn-ico.ico-ok:hover {
  background: rgba(34, 197, 94, 0.2);
  border-color: #22c55e;
  color: #bbf7d0;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.25);
}
.btn-ico svg {
  pointer-events: none;
  display: block;
}
.users-table td:last-child {
  white-space: nowrap;
  width: 1%;
}

#estoqueMsg.estoque-toast,
.estoque-toast {
  position: fixed !important;
  top: 72px !important;
  right: 20px !important;
  left: auto !important;
  z-index: 10000 !important;
  max-width: min(420px, 90vw);
  padding: 12px 16px !important;
  border-radius: 10px !important;
  font-size: 0.92rem !important;
  box-shadow: 0 8px 28px rgba(0,0,0,0.4) !important;
  cursor: pointer;
  transition: opacity 0.25s ease, transform 0.25s ease;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
}
#estoqueMsg.estoque-toast.toast-show,
.estoque-toast.toast-show {
  opacity: 1 !important;
  transform: translateY(0) !important;
  pointer-events: auto;
}
#estoqueMsg.estoque-toast.ok,
.estoque-toast.ok {
  background: #14532d !important;
  color: #dcfce7 !important;
  border: 1px solid #22c55e !important;
}
#estoqueMsg.estoque-toast.err,
.estoque-toast.err {
  background: #7f1d1d !important;
  color: #fee2e2 !important;
  border: 1px solid #ef4444 !important;
}

#boxFloat{
  display:none;
  position:fixed;
  z-index:10050;
  background:rgba(15,23,42,0.97);
  border:1px solid rgba(56,189,248,0.35);
  border-radius:12px;
  padding:12px 14px;
  box-shadow:0 12px 32px rgba(0,0,0,0.45);
  color:#e2e8f0;
  font-size:0.82rem;
  max-height:min(70vh, 420px);
  overflow:auto;
  pointer-events:auto;
}
#boxFloat.open{ display:block; }
#boxFloat .box-float-title{
  font-weight:700;
  font-size:0.9rem;
  color:#7dd3fc;
  margin-bottom:10px;
  padding-bottom:6px;
  border-bottom:1px solid rgba(148,163,184,0.25);
}
#boxFloat .box-float-grid{ display:flex; flex-direction:column; gap:5px; }
#boxFloat .box-float-row{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:3px 0;
  border-bottom:1px solid rgba(51,65,85,0.5);
}
#boxFloat .box-float-k{ color:#94a3b8; flex-shrink:0; }
#boxFloat .box-float-v{ color:#f1f5f9; font-weight:600; text-align:right; word-break:break-all; }
.box[data-box-info]{ cursor:pointer; }
.box[data-box-info]:hover{ outline:2px solid rgba(56,189,248,0.55); outline-offset:1px; }

/* Botões do menu lateral / topbar */
#btnToggleSidebar,
#btnCloseSidebar,
.topbar .btn-icon,
.sidebar-top .btn-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 10px;
  border: 1px solid rgba(148, 163, 184, 0.35);
  background: rgba(30, 41, 59, 0.95) !important;
  color: #e2e8f0 !important;
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.12s;
}
#btnToggleSidebar:hover,
#btnCloseSidebar:hover,
.topbar .btn-icon:hover,
.sidebar-top .btn-icon:hover {
  background: rgba(56, 189, 248, 0.2) !important;
  border-color: #38bdf8;
  color: #7dd3fc !important;
  transform: scale(1.05);
}
#btnToggleSidebar:active,
#btnCloseSidebar:active {
  transform: scale(0.96);
}

#boxFloat .box-val-disable{
  color:#ff1744 !important;
  font-weight:700 !important;
}
#boxFloat .box-val-opened{
  color:#42a5f5 !important;
  font-weight:700 !important;
}


/* ---- Trocas de Baterias ---- */
.trocas-toolbar{display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:flex-end;margin-bottom:16px}
.trocas-filters{display:flex;flex-wrap:wrap;gap:10px;align-items:flex-end}
.trocas-filters label{display:flex;flex-direction:column;font-size:12px;color:#9aa3b5;gap:4px}
.trocas-filters select{background:#0f172a;border:1px solid #334155;color:#e2e8f0;border-radius:8px;padding:6px 10px}
.trocas-meta{font-size:12px;color:#94a3b8;display:flex;flex-direction:column;gap:4px;text-align:right}
.trocas-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:16px}
.trocas-kpi-card{background:linear-gradient(180deg,#0b1224,#0a1020);border:1px solid #1e293b;border-radius:12px;padding:14px 12px;text-align:center}
.trocas-kpi-val{font-size:1.5rem;font-weight:700;color:#f1f5f9}
.trocas-kpi-label{font-size:11px;color:#94a3b8;margin-top:4px;text-transform:uppercase;letter-spacing:.04em}
.trocas-kpi-extra{font-size:12px;color:#38bdf8;margin-top:2px}
.trocas-charts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:16px}
.trocas-chart-card{background:#0b1224;border:1px solid #1e293b;border-radius:12px;padding:12px}
.trocas-chart-card h3{margin:0 0 8px;font-size:13px;color:#cbd5e1;font-weight:600}
.trocas-chart-wide{grid-column:1 / -1}
.trocas-table-wrap{background:#0b1224;border:1px solid #1e293b;border-radius:12px;padding:12px}
.trocas-table-wrap h3{margin:0 0 8px;font-size:13px;color:#cbd5e1}
@media (max-width:800px){
  .trocas-charts{grid-template-columns:1fr}
  .trocas-chart-wide{grid-column:auto}
}

.input-warn{border-color:#f87171!important;box-shadow:0 0 0 2px rgba(248,113,113,.25)}

#btnRefreshVmoto{margin-left:8px}
.refresh-status{margin-left:8px;font-size:12px;color:#94a3b8}

.label-com-btn .input-btn-row{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.label-com-btn .input-btn-row input{flex:1;min-width:140px}
.btn-gerar-cod{white-space:nowrap;flex-shrink:0}

.chamado-inop{color:#f87171;font-weight:700;font-size:0.92em}
.chamado-item .nome-swap{display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}

.badge-sem-base{
  display:inline-block;margin-left:6px;padding:1px 6px;border-radius:4px;
  font-size:10px;font-weight:700;letter-spacing:.03em;
  background:#78350f;color:#fde68a;vertical-align:middle;
}
#tabelaSwaps td.nome .badge-sem-base{white-space:nowrap}

/* Modal Bases */
.modal-overlay[hidden]{display:none!important}
.modal-overlay{
  position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.55);
  display:flex;align-items:center;justify-content:center;padding:16px;
}
.modal-bases-box{
  background:#0f172a;border:1px solid #1e293b;border-radius:12px;
  width:min(960px,96vw);max-height:90vh;display:flex;flex-direction:column;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.modal-bases-toolbar{display:flex;gap:10px;padding:12px 16px;align-items:center;flex-wrap:wrap}
.modal-bases-table{overflow:auto;padding:0 16px 16px;flex:1}
.modal-bases-box .form-card{margin:0 16px 12px}
.modal-confirm-box{
  background:#0f172a;border:1px solid #334155;border-radius:12px;
  padding:20px 24px;max-width:420px;width:92vw;
}
.modal-confirm-box p{margin:0 0 16px;color:#e2e8f0;font-size:1rem;line-height:1.45}
.badge-sem-cad{display:inline-block;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700;background:#78350f;color:#fde68a}
.badge-cadastrado{display:inline-block;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700;background:#14532d;color:#86efac}

.badge-inativa{display:inline-block;padding:2px 6px;border-radius:4px;font-size:10px;font-weight:700;background:#3f3f46;color:#d4d4d8}
.row-inativa td{opacity:.7}
#filtroStatusBases{
  background:#1e293b;color:#e2e8f0;border:1px solid #334155;border-radius:8px;
  padding:8px 10px;font-size:0.9rem;
}

.modal-bases-tabs{display:flex;gap:0;border-bottom:1px solid #1e293b;padding:0 12px}
.tab-base{
  background:transparent;border:none;color:#94a3b8;padding:12px 16px;
  font-weight:600;cursor:pointer;border-bottom:2px solid transparent;
}
.tab-base:hover{color:#e2e8f0}
.tab-base.active{color:#93c5fd;border-bottom-color:#3b82f6}
.tab-base-panel.is-hidden{display:none!important}
.tab-base-panel{display:block;overflow:auto;flex:1;min-height:0}

.ck-grupo{margin:16px 0 24px}
.ck-grupo h4{margin:0 0 8px;color:#93c5fd;font-size:0.95rem}
.ck-table select,.ck-table input{
  background:#1e293b;color:#e2e8f0;border:1px solid #334155;border-radius:6px;padding:4px 6px;
}
.ck-table .mono{font-family:ui-monospace,monospace;font-size:0.85em}
.ck-table tr:has(select.ck-sit option:checked[value="falta"]) td{/* no reliable */}

/* Checklist tabela alinhada */
.ck-grupo{margin:16px 0 24px}
.ck-grupo h4{margin:0 0 8px;color:#93c5fd;font-size:0.95rem}
.ck-table{table-layout:fixed;width:100%}
.ck-table th,.ck-table td{vertical-align:middle}
.ck-col-num,.ck-td-num{width:48px;text-align:center}
.ck-col-peca,.ck-td-peca{width:auto}
.ck-col-cod,.ck-td-cod{width:150px;white-space:nowrap}
.ck-col-sit,.ck-td-sit{width:130px}
.ck-col-acao,.ck-td-acao{width:120px}
.ck-col-qty,.ck-td-qty{width:72px;text-align:center}
.ck-table select,.ck-table input.ck-qty{
  background:#1e293b;color:#e2e8f0;border:1px solid #334155;border-radius:6px;
  padding:6px 8px;width:100%;box-sizing:border-box;font-size:0.9rem;
}
.ck-table input.ck-qty{width:56px;text-align:center}
.ck-table .mono{font-family:ui-monospace,Consolas,monospace;font-size:0.82rem;color:#94a3b8}
.ck-row-falta{background:rgba(239,68,68,.08)}
.ck-row-dan{background:rgba(245,158,11,.08)}
.ck-match-info{margin:0 0 10px;color:#fbbf24}
#ckBuscaPeca{min-width:240px}
@media(max-width:800px){
  .ck-col-cod,.ck-td-cod{width:110px}
  .ck-table .mono{font-size:0.75rem}
}

/* Checklist page layout */
.ck-page{display:flex;flex-direction:column;gap:20px;padding-bottom:24px}
.ck-header{margin-bottom:0}
.ck-toolbar{
  display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;
  padding:14px 16px;background:#0f172a;border:1px solid #1e293b;border-radius:12px;
}
.ck-tool-item{display:flex;flex-direction:column;gap:4px;font-size:0.8rem;color:#94a3b8}
.ck-tool-item select{
  background:#1e293b;color:#e2e8f0;border:1px solid #334155;border-radius:8px;
  padding:8px 12px;min-width:160px;
}
.ck-form{margin:0}
.ck-kpis{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:12px;
}
.ck-kpi-card{
  background:#0f172a;border:1px solid #1e293b;border-radius:12px;
  padding:14px 16px;display:flex;flex-direction:column;gap:6px;
}
.ck-kpi-label{font-size:0.78rem;color:#94a3b8;text-transform:uppercase;letter-spacing:.04em}
.ck-kpi-value{font-size:1.6rem;font-weight:700;color:#e2e8f0;line-height:1.1}
.ck-kpi-card.danger .ck-kpi-value{color:#f87171}
.ck-kpi-card.warn .ck-kpi-value{color:#fbbf24}
.ck-kpi-card.ok .ck-kpi-value{color:#4ade80}
.ck-lista-placas{margin-top:4px}
.modal-ck-wide{width:min(1100px,96vw)!important;max-height:92vh}
.ck-consol-toolbar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px;align-items:center}
#ckModalConsol.is-hidden,#ckModalSolic.is-hidden{display:none!important}

.ck-busca-placa input{
  background:#1e293b;color:#e2e8f0;border:1px solid #334155;border-radius:8px;
  padding:8px 12px;min-width:140px;
}
.ck-acoes-row{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.ck-acoes-row .btn-chamado,.ck-acoes-row .btn-chamado-sec{padding:6px 10px;font-size:0.85rem}

.btn-ico-ck{
  width:34px;height:34px;border-radius:8px;border:1px solid #334155;
  background:#1e293b;color:#e2e8f0;cursor:pointer;font-size:1rem;
  display:inline-flex;align-items:center;justify-content:center;
}
.btn-ico-ck:hover{background:#334155;border-color:#64748b}
.btn-ico-ok{border-color:#166534;background:#14532d}
.btn-ico-ok:hover{background:#166534}
.btn-ico-del{border-color:#7f1d1d;background:#450a0a}
.btn-ico-del:hover{background:#7f1d1d}
.ck-acoes-row{display:flex;gap:6px;align-items:center;justify-content:flex-end;min-width:120px}

.ck-lista-placas table td.ck-td-acoes{
  width:130px;min-width:130px;white-space:nowrap;vertical-align:middle;text-align:right;
}
.ck-acoes-btns{
  display:inline-flex!important;flex-direction:row!important;flex-wrap:nowrap!important;
  align-items:center;justify-content:flex-end;gap:6px;
}
.btn-ico-ck{
  flex:0 0 34px;width:34px;height:34px;padding:0;line-height:1;
}

.btn-ico-rel{border-color:#1e3a5f;background:#0c1e36}
.btn-ico-rel:hover{background:#1e3a5f}
.ck-lista-placas table td.ck-td-acoes{width:160px;min-width:160px}

.ck-rel-actions{
  display:flex;gap:10px;flex-wrap:wrap;padding:12px 16px;border-bottom:1px solid #1e293b;
}
.ck-rel-body{padding:16px;overflow:auto;max-height:70vh}
.ck-rel-body h3{margin:18px 0 8px;color:#93c5fd;font-size:1rem}
.ck-rel-meta{color:#94a3b8;font-size:0.9rem;margin-bottom:12px}
.ck-rel-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-bottom:16px}

#modalProduto.modal-overlay:not([hidden]){
  display:flex!important;align-items:center;justify-content:center;z-index:9500;
}
#modalProduto .modal-chamado-box{max-height:90vh;overflow:auto}
#modalConfirmRiba.modal-overlay:not([hidden]){
  display:flex!important;align-items:center;justify-content:center;z-index:9600;
}

/* Garantia: overlays não bloqueiam clique quando ocultos */
.modal-overlay[hidden],
.modal-overlay.is-hidden,
#modalProduto[hidden],
#modalProduto.is-hidden,
#modalConfirmRiba[hidden],
#modalConfirmRiba.is-hidden,
#modalEditMov[hidden],
#modalDelMov[hidden]{
  display:none!important;
  pointer-events:none!important;
  visibility:hidden!important;
}

#modalEditMov.modal-overlay:not([hidden]),
#modalDelMov.modal-overlay:not([hidden]){
  display:flex!important;align-items:center;justify-content:center;z-index:9550;
}
#modalConfirmRiba.modal-overlay:not([hidden]){
  display:flex!important;align-items:center;justify-content:center;z-index:9700;
}
.btn-ico{cursor:pointer;pointer-events:auto}
.btn-ico svg{pointer-events:none}

/* ===== Rede de Swaps: eliminar espaço vazio ===== */
#page-rede-swaps:not([hidden]){
  display:flex;
  flex-direction:column;
  gap:10px;
  min-height:0;
}
#page-rede-swaps[hidden]{ display:none !important; }
#page-rede-swaps > .toolbar{
  flex:0 0 auto;
  margin-bottom:0;
}
#page-rede-swaps > #statsCards{
  flex:0 0 auto;
  order:0;
  margin:0 0 8px;
}
#page-rede-swaps > #total{
  flex:0 0 auto;
  margin:0 0 6px;
}
#page-rede-swaps > #painel{
  flex:1 1 auto;
  min-height:0;
  margin:0;
}
/* Modais nunca ocupam espaço no fluxo da página */
#page-rede-swaps > #modalChamado,
#page-rede-swaps > #modalBases,
#page-rede-swaps > #alertaFloat,
#page-rede-swaps > #boxFloat{
  position:fixed !important;
}
#page-rede-swaps > #modalChamado:not(.open){
  display:none !important;
  height:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
#page-rede-swaps > #modalBases[hidden],
#page-rede-swaps > #modalBases.is-hidden{
  display:none !important;
  height:0 !important;
  overflow:hidden !important;
  pointer-events:none !important;
}
/* Tabela visível no desktop (notebooks >= 768px) */
@media (min-width: 768px){
  #page-rede-swaps #painel table#tabelaSwaps{ display:table !important; }
  #page-rede-swaps #listaMobile.station-list,
  #page-rede-swaps .station-list{ display:none !important; }
  #page-rede-swaps #statsCards{ display:flex !important; }
}

/* Swap: layout compacto sem buraco */
#page-rede-swaps:not([hidden]){
  display:block;
}
#page-rede-swaps[hidden]{ display:none !important; }
#page-rede-swaps #statsCards{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:8px;
  margin:8px auto 6px;
}
#page-rede-swaps #total{
  margin:4px 0 8px;
}
#page-rede-swaps #painel.table-wrap{
  margin-top:0;
  min-height:unset;
  height:auto;
}
#page-rede-swaps #painel table#tabelaSwaps{
  margin-top:0;
}
#modalChamado:not(.open){
  display:none !important;
}
#modalBases[hidden],
#modalBases.is-hidden{
  display:none !important;
}
#modalBases:not([hidden]){
  display:flex !important;
  position:fixed !important;
  inset:0;
  z-index:9000;
}

/* Floats de alerta/box: nunca ocupam espaço no layout */
#alertaFloat, #boxFloat{
  position:fixed !important;
  height:auto !important;
  max-height:70vh;
  pointer-events:none;
}
#alertaFloat.open, #boxFloat.open{ pointer-events:auto; }
#alertaFloat:not(.open), #boxFloat:not(.open){
  display:none !important;
}
#page-rede-swaps #painel{
  display:block;
  width:100%;
  margin-top:4px !important;
  min-height:0 !important;
  height:auto !important;
}

/* Páginas: hidden deve esconder de verdade */
.page[hidden],
section.page[hidden]{
  display:none !important;
}

/* ===== Páginas: nunca vazar conteúdo com hidden ===== */
.page[hidden],
section.page[hidden],
#page-rede-swaps[hidden],
#page-home[hidden],
#page-manutencoes[hidden],
#page-estoque[hidden],
#page-checklist[hidden],
#page-trocas-baterias[hidden],
#page-perfil[hidden],
#page-usuarios-lista[hidden],
#page-usuarios-criar[hidden],
#page-ativar[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
}