:root {
    --naranja: #f7931a;
    --naranja-oscuro: #c96f00;
    --fondo: #f4f6f9;
    --superficie: #ffffff;
    --texto: #1c2430;
    --texto-suave: #5d6b7d;
    --borde: #e2e7ee;
    --lateral: #121a26;
    --lateral-texto: #c4cedb;
}

@media (prefers-color-scheme: dark) {
    :root {
        --fondo: #0d131c;
        --superficie: #161f2b;
        --texto: #e6ebf2;
        --texto-suave: #93a1b3;
        --borde: #263244;
        --lateral: #0a0f16;
    }
}

body {
    background: var(--fondo);
    color: var(--texto);
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

a { color: var(--naranja-oscuro); }
.text-suave { color: var(--texto-suave) !important; }
.btn-naranja { background: var(--naranja); border-color: var(--naranja); color: #111; font-weight: 600; }
.btn-naranja:hover { background: var(--naranja-oscuro); border-color: var(--naranja-oscuro); color: #fff; }

/* ---------- Panel ---------- */
.lateral {
    width: 240px; min-height: 100vh; background: var(--lateral); position: fixed; top: 0; left: 0;
    padding: 1.25rem 0.75rem; z-index: 1030; transition: transform .2s;
}
.lateral .marca { color: #fff; font-weight: 700; font-size: 1.15rem; padding: 0 .75rem 1.25rem; display: block; text-decoration: none; }
.lateral .marca i { color: var(--naranja); }
.lateral .seccion { color: #6c7a8d; font-size: .7rem; text-transform: uppercase; letter-spacing: .08em; padding: 1rem .75rem .4rem; }
.lateral a.item { display: flex; gap: .6rem; align-items: center; color: var(--lateral-texto); text-decoration: none; padding: .5rem .75rem; border-radius: .5rem; font-size: .93rem; }
.lateral a.item:hover { background: #1c2636; color: #fff; }
.lateral a.item.activo { background: var(--naranja); color: #111; font-weight: 600; }
.contenido { margin-left: 240px; padding: 1.5rem; }
.barra-superior { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.25rem; gap: 1rem; }
.barra-superior h1 { font-size: 1.4rem; margin: 0; font-weight: 700; }

.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: .75rem; padding: 1.1rem 1.25rem; height: 100%; }
.tarjeta .etiqueta { color: var(--texto-suave); font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; }
.tarjeta .valor { font-size: 1.45rem; font-weight: 700; margin-top: .2rem; font-variant-numeric: tabular-nums; }
.tarjeta .nota { color: var(--texto-suave); font-size: .82rem; }

.table { --bs-table-bg: transparent; --bs-table-color: var(--texto); --bs-table-border-color: var(--borde); }
.table thead th { color: var(--texto-suave); font-size: .78rem; text-transform: uppercase; font-weight: 600; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
code.dato { background: var(--fondo); color: var(--texto); padding: .15rem .4rem; border-radius: .3rem; border: 1px solid var(--borde); }
.form-control, .form-select { background: var(--superficie); color: var(--texto); border-color: var(--borde); }
.form-control:focus { background: var(--superficie); color: var(--texto); }

.boton-menu { display: none; }
@media (max-width: 900px) {
    .lateral { transform: translateX(-100%); }
    .lateral.abierto { transform: none; }
    .contenido { margin-left: 0; padding: 1rem; }
    .boton-menu { display: inline-block; }
}

/* ---------- Acceso ---------- */
.acceso { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 1rem; }
.acceso .tarjeta { max-width: 420px; width: 100%; padding: 2rem; height: auto; }

/* ---------- Auditoría ---------- */
.col-detalle { min-width: 320px; }
.cambios pre { white-space: pre-wrap; word-break: break-word; max-height: 260px; overflow: auto; background: var(--fondo); border: 1px solid var(--borde); padding: .5rem; border-radius: .4rem; color: var(--texto); }

/* ---------- Equipos en tarjetas ---------- */
.equipo-tarjeta { border-top: 3px solid var(--borde); }
.equipo-tarjeta.equipo-normal { border-top-color: #198754; }
.equipo-tarjeta.equipo-bajo { border-top-color: #ffc107; }
.equipo-tarjeta.equipo-caido { border-top-color: #dc3545; }
.progress { background: var(--fondo); }

/* ---------- Aviso de inactividad ---------- */
.aviso-sesion {
    position: fixed; right: 16px; bottom: 16px; z-index: 1080; max-width: 340px;
    background: var(--superficie); color: var(--texto); border: 2px solid var(--naranja);
    border-radius: .75rem; padding: 1rem 1.1rem; box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
}
@media (max-width: 575px) { .aviso-sesion { left: 16px; max-width: none; } }

/* Configuración: un bloque por proveedor de pool. */
.bloque-proveedor { border: 1px solid var(--borde); border-radius: .6rem; padding: .9rem 1rem; }