/* =====================================================================
   Axum · interfaz de la aplicación
   Paleta basada en #3E5FB8 y variantes suaves. Sin build: CSS plano.
   ===================================================================== */
:root {
    --primario: #3E5FB8;
    --primario-hover: #34519f;
    --primario-activo: #2d4789;
    --primario-claro: #EAF0FF;
    --primario-suave: #F4F7FF;
    --fondo: #F7F9FC;
    --superficie: #FFFFFF;
    --texto: #263248;
    --texto-2: #6B7280;
    --texto-3: #9AA3B2;
    --borde: #E5EAF2;
    --borde-fuerte: #D5DCE8;
    --exito: #4CAF7D;
    --exito-claro: #EAF6EF;
    --aviso: #E6A23C;
    --aviso-claro: #FCF3E3;
    --error: #D95C5C;
    --error-claro: #FBEDED;

    --radio: 12px;
    --radio-sm: 8px;
    --sombra-1: 0 1px 2px rgba(38, 50, 72, .04), 0 1px 3px rgba(38, 50, 72, .04);
    --sombra-2: 0 4px 16px rgba(38, 50, 72, .06), 0 1px 3px rgba(38, 50, 72, .04);
    --sombra-3: 0 12px 32px rgba(38, 50, 72, .12);
    --foco: 0 0 0 3px rgba(62, 95, 184, .18);
    --t: 180ms cubic-bezier(.4, 0, .2, 1);

    --sidebar: 256px;
    --sidebar-min: 76px;
    --header: 64px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
    margin: 0;
    background: var(--fondo);
    color: var(--texto);
    font: 400 14px/1.5 "Inter", "Segoe UI", Roboto, system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}
a { color: var(--primario); text-decoration: none; transition: color var(--t); }
a:hover { color: var(--primario-hover); }
h1, h2, h3, h4 { margin: 0; font-weight: 600; letter-spacing: -.01em; }
p { margin: 0; }
img { max-width: 100%; }
[hidden] { display: none !important; }
:focus-visible { outline: none; box-shadow: var(--foco); border-radius: var(--radio-sm); }

.icono { width: 20px; height: 20px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.icono.sm { width: 16px; height: 16px; }
.icono.lg { width: 24px; height: 24px; }

/* =====================================================================
   Layout
   ===================================================================== */
.sidebar {
    position: fixed; inset: 0 auto 0 0; z-index: 40;
    width: var(--sidebar); background: var(--superficie); border-right: 1px solid var(--borde);
    display: flex; flex-direction: column;
    transition: width var(--t), transform var(--t);
}
.sidebar-marca {
    height: var(--header); flex: none; display: flex; align-items: center; gap: 12px; padding: 0 20px;
    border-bottom: 1px solid var(--borde); overflow: hidden; white-space: nowrap;
}
.sidebar-marca img { height: 28px; width: auto; flex: none; }
.sidebar-marca .nombre { font-weight: 700; font-size: 16px; color: var(--texto); line-height: 1.1; }
.sidebar-marca .nombre small { display: block; font-weight: 500; font-size: 11.5px; color: var(--texto-2); letter-spacing: .02em; }

.sidebar-nav { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 16px 12px; display: flex; flex-direction: column; gap: 2px; }
.sidebar-grupo {
    font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .08em; color: var(--texto-3);
    padding: 18px 12px 6px; white-space: nowrap; overflow: hidden; transition: opacity var(--t);
}
.sidebar-item {
    position: relative; display: flex; align-items: center; gap: 12px; height: 42px; padding: 0 12px;
    border-radius: 10px; color: var(--texto-2); font-weight: 500; white-space: nowrap;
    transition: background var(--t), color var(--t);
}
.sidebar-item:hover { background: var(--primario-suave); color: var(--texto); }
.sidebar-item.activo { background: var(--primario-claro); color: var(--primario); }
.sidebar-item.activo::before {
    content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px;
    border-radius: 0 3px 3px 0; background: var(--primario);
}
.sidebar-item.deshabilitado { color: var(--texto-3); cursor: default; }
.sidebar-item.deshabilitado:hover { background: none; color: var(--texto-3); }
.sidebar-item .texto { flex: 1; overflow: hidden; text-overflow: ellipsis; text-align: left; transition: opacity var(--t); }
.sidebar-item .pronto {
    font-size: 10.5px; font-weight: 600; color: var(--texto-3); background: var(--fondo);
    border: 1px solid var(--borde); padding: 1px 7px; border-radius: 20px;
}
.sidebar-pie { padding: 12px; border-top: 1px solid var(--borde); }

.contenedor { margin-left: var(--sidebar); min-width: 0; min-height: 100vh; display: flex; flex-direction: column; transition: margin-left var(--t); }

.header {
    position: sticky; top: 0; z-index: 30; height: var(--header); flex: none;
    background: rgba(255, 255, 255, .92); backdrop-filter: saturate(180%) blur(8px);
    border-bottom: 1px solid var(--borde);
    display: flex; align-items: center; gap: 12px; padding: 0 24px;
}
.header-titulo { font-size: 17px; font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.header-acciones { display: flex; align-items: center; gap: 6px; }

.principal { flex: 1; width: 100%; min-width: 0; max-width: 1360px; margin: 0 auto; padding: 28px 24px 48px; display: flex; flex-direction: column; gap: 24px; }

/* Sidebar contraído (desktop/tablet) */
.sidebar-contraido .sidebar { width: var(--sidebar-min); }
.sidebar-contraido .contenedor { margin-left: var(--sidebar-min); }
.sidebar-contraido .sidebar-marca { padding: 0; justify-content: center; }
.sidebar-contraido .sidebar-marca .nombre,
.sidebar-contraido .sidebar-item .texto,
.sidebar-contraido .sidebar-item .pronto { opacity: 0; width: 0; pointer-events: none; }
.sidebar-contraido .sidebar-marca .nombre { display: none; }
.sidebar-contraido .sidebar-item { justify-content: center; padding: 0; gap: 0; }
.sidebar-contraido .sidebar-grupo { opacity: 0; height: 14px; padding: 0; }
.sidebar-contraido .sidebar-item[data-tooltip]:hover::after {
    content: attr(data-tooltip); position: absolute; left: calc(100% + 12px); top: 50%; transform: translateY(-50%);
    background: var(--texto); color: #fff; font-size: 12.5px; font-weight: 500; padding: 6px 10px; border-radius: 6px;
    white-space: nowrap; box-shadow: var(--sombra-2); pointer-events: none; z-index: 60;
}

.velo { position: fixed; inset: 0; z-index: 35; background: rgba(38, 50, 72, .35); opacity: 0; pointer-events: none; transition: opacity var(--t); }
.boton-hamburguesa { display: none; }

/* Tablet: contraído por defecto (lo decide el script de inicio) */
/* Móvil: drawer */
@media (max-width: 767px) {
    .sidebar { transform: translateX(-100%); width: min(var(--sidebar), 84vw); box-shadow: var(--sombra-3); }
    .sidebar-contraido .sidebar { width: min(var(--sidebar), 84vw); }
    .contenedor, .sidebar-contraido .contenedor { margin-left: 0; }
    .sidebar-abierto .sidebar { transform: none; }
    .sidebar-abierto .velo { opacity: 1; pointer-events: auto; }
    .boton-hamburguesa { display: inline-flex; }
    .boton-contraer { display: none; }
    .sidebar-contraido .sidebar-marca { padding: 0 20px; justify-content: flex-start; }
    .sidebar-contraido .sidebar-marca .nombre { display: block; }
    .sidebar-contraido .sidebar-marca .nombre,
    .sidebar-contraido .sidebar-item .texto,
    .sidebar-contraido .sidebar-item .pronto { opacity: 1; width: auto; }
    .sidebar-contraido .sidebar-item { justify-content: flex-start; padding: 0 12px; gap: 12px; }
    .sidebar-contraido .sidebar-grupo { opacity: 1; height: auto; padding: 18px 12px 6px; }
    .sidebar-contraido .sidebar-item[data-tooltip]:hover::after { display: none; }
    .header { padding: 0 12px; }
    .principal { padding: 20px 16px 40px; gap: 18px; }
}
.sin-transicion, .sin-transicion * { transition: none !important; }

/* =====================================================================
   Botones
   ===================================================================== */
.btn {
    --btn-fondo: var(--superficie); --btn-texto: var(--texto); --btn-borde: var(--borde-fuerte);
    position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    height: 40px; padding: 0 16px; border-radius: 10px; border: 1px solid var(--btn-borde);
    background: var(--btn-fondo); color: var(--btn-texto); font: 500 14px/1 inherit; font-family: inherit;
    cursor: pointer; white-space: nowrap; user-select: none; text-decoration: none;
    transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t);
}
.btn:hover { background: var(--primario-suave); border-color: var(--borde-fuerte); color: var(--texto); }
.btn:active { transform: translateY(1px); }
.btn:focus-visible { box-shadow: var(--foco); border-radius: 10px; }
.btn:disabled, .btn.deshabilitado { opacity: .55; cursor: not-allowed; transform: none; pointer-events: none; }
.btn .icono { width: 18px; height: 18px; }
.btn-primario { --btn-fondo: var(--primario); --btn-texto: #fff; --btn-borde: var(--primario); box-shadow: 0 1px 2px rgba(62, 95, 184, .25); }
.btn-primario:hover { background: var(--primario-hover); border-color: var(--primario-hover); color: #fff; }
.btn-primario:active { background: var(--primario-activo); }
.btn-suave { --btn-fondo: var(--primario-claro); --btn-texto: var(--primario); --btn-borde: transparent; }
.btn-suave:hover { background: #dfe7fd; color: var(--primario-hover); border-color: transparent; }
.btn-fantasma { --btn-fondo: transparent; --btn-borde: transparent; --btn-texto: var(--texto-2); }
.btn-fantasma:hover { background: var(--primario-suave); color: var(--texto); border-color: transparent; }
.btn-peligro { --btn-texto: var(--error); }
.btn-peligro:hover { background: var(--error-claro); color: var(--error); border-color: #f2c9c9; }
.btn-peligro-lleno { --btn-fondo: var(--error); --btn-texto: #fff; --btn-borde: var(--error); }
.btn-peligro-lleno:hover { background: #c74d4d; border-color: #c74d4d; color: #fff; }
.btn-sm { height: 34px; padding: 0 12px; font-size: 13px; border-radius: 8px; }
.btn-bloque { width: 100%; }
.btn-icono { width: 40px; padding: 0; }
.btn-icono.btn-sm { width: 34px; }
.btn.cargando { color: transparent !important; pointer-events: none; }
.btn.cargando::after {
    content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid currentColor; border-color: rgba(255, 255, 255, .45); border-top-color: #fff;
    animation: girar .7s linear infinite;
}
.btn:not(.btn-primario):not(.btn-peligro-lleno).cargando::after { border-color: var(--primario-claro); border-top-color: var(--primario); }
@keyframes girar { to { transform: rotate(360deg); } }

.boton-header {
    position: relative; width: 40px; height: 40px; border-radius: 10px; border: 0; background: transparent;
    color: var(--texto-2); display: inline-grid; place-items: center; cursor: pointer; transition: background var(--t), color var(--t);
}
.boton-header:hover { background: var(--primario-suave); color: var(--texto); }
.boton-header .punto { position: absolute; top: 9px; right: 10px; width: 8px; height: 8px; border-radius: 50%; background: var(--error); border: 2px solid #fff; }

/* =====================================================================
   Dropdown y perfil
   ===================================================================== */
.dropdown { position: relative; }
.dropdown-menu {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 50; min-width: 240px;
    background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-3);
    padding: 6px; opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity var(--t), transform var(--t);
}
.dropdown.abierto .dropdown-menu { opacity: 1; transform: none; pointer-events: auto; }
.dropdown-cabecera { padding: 10px 12px 12px; border-bottom: 1px solid var(--borde); margin-bottom: 6px; }
.dropdown-cabecera b { display: block; font-weight: 600; }
.dropdown-cabecera span { color: var(--texto-2); font-size: 13px; }
.dropdown-item {
    width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; border: 0;
    background: none; color: var(--texto); font: inherit; text-align: left; cursor: pointer; transition: background var(--t);
}
.dropdown-item:hover { background: var(--primario-suave); color: var(--texto); }
.dropdown-item .icono { width: 18px; height: 18px; color: var(--texto-2); }
.dropdown-item.peligro, .dropdown-item.peligro .icono { color: var(--error); }
.dropdown-separador { height: 1px; background: var(--borde); margin: 6px 0; }

.perfil {
    display: flex; align-items: center; gap: 10px; padding: 4px 8px 4px 4px; border-radius: 12px; border: 0; background: none;
    cursor: pointer; font: inherit; color: var(--texto); transition: background var(--t);
}
.perfil:hover { background: var(--primario-suave); }
.perfil .datos { display: block; text-align: left; line-height: 1.25; }
.perfil .datos b { display: block; font-weight: 600; font-size: 13.5px; max-width: 180px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.perfil .datos span { display: block; font-size: 12px; color: var(--texto-2); }
.perfil .icono { width: 16px; height: 16px; color: var(--texto-3); }
.avatar {
    width: 36px; height: 36px; border-radius: 10px; flex: none; display: grid; place-items: center;
    background: var(--primario-claro); color: var(--primario); font-weight: 600; font-size: 14px;
}
.avatar.lg { width: 44px; height: 44px; font-size: 16px; border-radius: 12px; }
@media (max-width: 767px) { .perfil .datos, .perfil > .icono { display: none; } }

.notificaciones { width: 340px; padding: 0; }
.notificaciones .dropdown-cabecera { margin: 0; padding: 14px 16px; display: flex; justify-content: space-between; align-items: center; }
@media (max-width: 480px) { .notificaciones { width: calc(100vw - 24px); right: -60px; } }

/* =====================================================================
   Tarjetas
   ===================================================================== */
.card { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra-1); }
.card-cabecera { display: flex; align-items: center; gap: 12px; padding: 18px 20px 0; }
.card-cabecera h3 { font-size: 15px; flex: 1; min-width: 0; }
.card-cabecera .subtitulo { font-size: 13px; color: var(--texto-2); font-weight: 400; margin-top: 2px; }
.card-cuerpo { padding: 18px 20px 20px; }
.card-cuerpo.sin-padding { padding: 0; }
.card-pie { padding: 14px 20px; border-top: 1px solid var(--borde); display: flex; justify-content: flex-end; gap: 8px; }

.grilla { display: grid; gap: 20px; }
.grilla > * { min-width: 0; }
.grilla-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grilla-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grilla-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grilla-2-1 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
@media (max-width: 1199px) { .grilla-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grilla-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 991px) { .grilla-2-1, .grilla-2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 575px) { .grilla-4, .grilla-3 { grid-template-columns: minmax(0, 1fr); } .grilla { gap: 14px; } }

/* Métricas */
.metrica { padding: 20px; display: flex; flex-direction: column; gap: 14px; }
.metrica-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--texto-2); font-weight: 500; font-size: 13.5px; }
.metrica-icono { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--primario-claro); color: var(--primario); }
.metrica-icono.exito { background: var(--exito-claro); color: var(--exito); }
.metrica-icono.aviso { background: var(--aviso-claro); color: var(--aviso); }
.metrica-icono.error { background: var(--error-claro); color: var(--error); }
.metrica-valor { font-size: 28px; font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.metrica-pie { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); min-height: 20px; }
.variacion { display: inline-flex; align-items: center; gap: 2px; font-weight: 600; }
.variacion.sube { color: var(--exito); }
.variacion.baja { color: var(--error); }

/* Encabezado de página */
.pagina-cabecera { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pagina-cabecera h1 { font-size: 24px; }
.pagina-cabecera p { color: var(--texto-2); margin-top: 4px; }
.pagina-cabecera .acciones { display: flex; gap: 8px; flex-wrap: wrap; }
@media (max-width: 575px) {
    .pagina-cabecera h1 { font-size: 20px; }
    .pagina-cabecera .acciones { width: 100%; }
    .pagina-cabecera .acciones .btn { flex: 1; }
}

/* =====================================================================
   Badges, alertas, estados
   ===================================================================== */
.badge {
    display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 20px;
    font-size: 12px; font-weight: 500; white-space: nowrap; background: var(--fondo); color: var(--texto-2); border: 1px solid var(--borde);
}
.badge.punto::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.info { background: var(--primario-claro); color: var(--primario); border-color: transparent; }
.badge.exito { background: var(--exito-claro); color: #3a8f64; border-color: transparent; }
.badge.aviso { background: var(--aviso-claro); color: #b07a24; border-color: transparent; }
.badge.error { background: var(--error-claro); color: #c04848; border-color: transparent; }

.alerta { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border-radius: var(--radio); border: 1px solid; font-size: 13.5px; }
.alerta .icono { margin-top: 1px; }
.alerta b { font-weight: 600; }
.alerta ul { margin: 4px 0 0; padding-left: 18px; }
.alerta.exito { background: var(--exito-claro); border-color: #cfe9da; color: #2f7a55; }
.alerta.error { background: var(--error-claro); border-color: #f2d0d0; color: #a83f3f; }
.alerta.aviso { background: var(--aviso-claro); border-color: #f2dfbd; color: #8f6420; }
.alerta.info { background: var(--primario-suave); border-color: var(--primario-claro); color: var(--primario-activo); }
.alerta .cerrar { margin-left: auto; background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; padding: 0; }
.alerta .cerrar:hover { opacity: 1; }

.vacio { text-align: center; padding: 36px 20px; color: var(--texto-2); }
.vacio .icono-vacio { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 14px; background: var(--primario-suave); color: var(--primario); display: grid; place-items: center; }
.vacio b { display: block; color: var(--texto); font-weight: 600; margin-bottom: 4px; }

/* Skeleton */
.skeleton {
    display: block; border-radius: 6px; min-height: 12px;
    background: linear-gradient(90deg, #eef1f6 0%, #f6f8fb 50%, #eef1f6 100%); background-size: 200% 100%;
    animation: brillo 1.3s ease-in-out infinite;
}
@keyframes brillo { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* =====================================================================
   Formularios
   ===================================================================== */
.form-grilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.form-grilla .ancho { grid-column: 1 / -1; }
@media (max-width: 767px) { .form-grilla { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.campo label, .etiqueta { font-size: 13px; font-weight: 500; color: var(--texto); }
.campo .ayuda { font-size: 12.5px; color: var(--texto-2); }
.campo .error-campo { font-size: 12.5px; color: var(--error); display: flex; align-items: center; gap: 4px; }
.control {
    width: 100%; height: 42px; padding: 0 14px; border: 1px solid var(--borde-fuerte); border-radius: 10px;
    background: var(--superficie); color: var(--texto); font: inherit; outline: none;
    transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
textarea.control { height: auto; min-height: 96px; padding: 10px 14px; resize: vertical; line-height: 1.5; }
select.control {
    appearance: none; padding-right: 38px; cursor: pointer;
    background: var(--superficie) url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2716%27 height=%2716%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27%236B7280%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpath d=%27m6 9 6 6 6-6%27/%3E%3C/svg%3E") no-repeat right 12px center;
}
.contador { font-size: 12px; color: var(--texto-3); text-align: right; }
.control::placeholder { color: var(--texto-3); }
.control:hover { border-color: #c3cddd; }
.control:focus { border-color: var(--primario); box-shadow: var(--foco); }
.control:disabled, .control[readonly] { background: var(--fondo); color: var(--texto-2); }
.control.invalido { border-color: var(--error); }
.control.invalido:focus { box-shadow: 0 0 0 3px rgba(217, 92, 92, .15); }
.control.mono { font-family: "JetBrains Mono", Consolas, monospace; font-size: 13px; }
.grupo-control { position: relative; display: flex; align-items: center; }
.grupo-control .control { padding-right: 44px; }
.grupo-control.dos .control { padding-right: 84px; }
.grupo-control .acciones-control { position: absolute; right: 4px; display: flex; gap: 2px; }
.grupo-control .icono-izq { position: absolute; left: 13px; color: var(--texto-3); pointer-events: none; }
.grupo-control .icono-izq + .control { padding-left: 40px; }
.boton-control {
    width: 36px; height: 34px; border: 0; border-radius: 8px; background: none; color: var(--texto-3);
    display: grid; place-items: center; cursor: pointer; transition: background var(--t), color var(--t);
}
.boton-control:hover { background: var(--primario-suave); color: var(--primario); }
.boton-control.ok { color: var(--exito); }

.check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--texto); user-select: none; }
.check input[type=checkbox] {
    appearance: none; width: 18px; height: 18px; margin: 0; border: 1.5px solid var(--borde-fuerte); border-radius: 5px;
    display: grid; place-items: center; cursor: pointer; transition: background var(--t), border-color var(--t); flex: none;
}
.check input[type=checkbox]::after { content: ""; width: 9px; height: 5px; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(1px, -1px); opacity: 0; }
.check input[type=checkbox]:checked { background: var(--primario); border-color: var(--primario); }
.check input[type=checkbox]:checked::after { opacity: 1; }
.check input:focus-visible { box-shadow: var(--foco); }

.interruptor { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.interruptor input {
    appearance: none; width: 38px; height: 22px; border-radius: 22px; margin: 1px 0 0; flex: none; background: var(--borde-fuerte);
    position: relative; cursor: pointer; transition: background var(--t);
}
.interruptor input::after { content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); transition: transform var(--t); }
.interruptor input:checked { background: var(--primario); }
.interruptor input:checked::after { transform: translateX(16px); }
.interruptor input:focus-visible { box-shadow: var(--foco); }
.interruptor b { display: block; font-weight: 500; font-size: 13.5px; }
.interruptor span { font-size: 12.5px; color: var(--texto-2); }

/* Pestañas */
.pestanas { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); padding: 0 20px; overflow-x: auto; scrollbar-width: none; }
.pestanas button {
    position: relative; display: flex; align-items: center; gap: 8px; height: 48px; padding: 0 12px; border: 0; background: none;
    color: var(--texto-2); font: 500 14px inherit; font-family: inherit; cursor: pointer; white-space: nowrap; transition: color var(--t);
}
.pestanas button:hover { color: var(--texto); }
.pestanas button.activa { color: var(--primario); }
.pestanas button.activa::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; border-radius: 2px; background: var(--primario); }
.pestanas .marca-error { width: 6px; height: 6px; border-radius: 50%; background: var(--error); }

/* =====================================================================
   Tablas
   ===================================================================== */
.tabla-barra { display: flex; align-items: center; gap: 10px; padding: 16px 20px; flex-wrap: wrap; }
.tabla-barra .buscador { width: 280px; max-width: 100%; }
.tabla-barra .separador { flex: 1; }
@media (max-width: 575px) { .tabla-barra .buscador { width: 100%; } }
.tabla-scroll { overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; } /* sin scroll vertical: los menús ocultos de cada fila lo provocaban */
.tabla-pie { display: flex; align-items: center; gap: 4px; padding: 10px 20px; border-top: 1px solid var(--borde); font-size: 13px; }
.tabla-pie .separador { flex: 1; }
.tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.tabla th {
    text-align: left; font-size: 12px; font-weight: 500; color: var(--texto-2); padding: 10px 20px;
    background: var(--primario-suave); border-top: 1px solid var(--borde); border-bottom: 1px solid var(--borde); white-space: nowrap;
}
.tabla th[data-ordenar] { cursor: pointer; user-select: none; transition: color var(--t); }
.tabla th[data-ordenar]:hover { color: var(--texto); }
.tabla th .flecha { margin-left: 4px; color: var(--primario); font-size: 10px; }
.tabla td { padding: 7px 20px; border-bottom: 1px solid var(--borde); vertical-align: middle; white-space: nowrap; height: 46px; }
.tabla .avatar { width: 30px; height: 30px; border-radius: 8px; font-size: 12.5px; }
.tabla tbody tr { transition: background var(--t); }
.tabla tbody tr:hover { background: var(--primario-suave); }
.tabla tbody tr:last-child td { border-bottom: 0; }
.tabla .acciones-fila { display: flex; gap: 2px; justify-content: flex-end; }
.tabla .acciones-col { width: 1%; padding-right: 4px; } /* acciones en la primera columna, bien angosta */
.tabla .acciones-col .acciones-fila { justify-content: flex-start; }
.tabla .acciones-fila .btn.peligro { color: var(--error); }
.tabla .acciones-fila .btn.peligro:hover { background: var(--error-claro); }
.tabla .acciones-fila form { display: contents; }
.tabla .principal-celda { display: flex; align-items: center; gap: 12px; }
.tabla .principal-celda b { font-weight: 600; display: block; }
.tabla .principal-celda span { color: var(--texto-2); font-size: 12.5px; }
.tabla .principal-celda .codigo { font-size: 12px; padding: 2px 7px; border-radius: 6px; background: var(--fondo); border: 1px solid var(--borde); white-space: nowrap; }
.tabla .derecha { text-align: right; }
.mono { font-family: "JetBrains Mono", Consolas, monospace; font-size: 12.5px; }
.texto-2 { color: var(--texto-2); }

/* Lista de datos */
.datos { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: 14px 20px; margin: 0; font-size: 13.5px; }
.datos dt { color: var(--texto-2); }
.datos dd { margin: 0; overflow-wrap: anywhere; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
@media (max-width: 575px) { .datos { grid-template-columns: 1fr; gap: 2px; } .datos dd { margin-bottom: 10px; } }

/* Actividad */
.actividad { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.actividad li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--borde); }
.actividad li:first-child { padding-top: 0; }
.actividad li:last-child { border-bottom: 0; padding-bottom: 0; }
.actividad .marca { width: 34px; height: 34px; border-radius: 10px; flex: none; display: grid; place-items: center; background: var(--primario-claro); color: var(--primario); }
.actividad .marca.exito { background: var(--exito-claro); color: var(--exito); }
.actividad .marca.aviso { background: var(--aviso-claro); color: var(--aviso); }
.actividad .texto { flex: 1; min-width: 0; font-size: 13.5px; }
.actividad .texto span { display: block; color: var(--texto-2); font-size: 12.5px; margin-top: 2px; }

.grafico { position: relative; height: 260px; }
.grafico.chico { height: 220px; }
.grafico .skeleton { position: absolute; inset: 0; }
.leyenda { display: flex; flex-wrap: wrap; gap: 10px 16px; margin-top: 16px; font-size: 13px; color: var(--texto-2); }
.leyenda i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.leyenda b { color: var(--texto); font-weight: 600; margin-left: 4px; }

/* =====================================================================
   Modal
   ===================================================================== */
.modal-fondo {
    position: fixed; inset: 0; z-index: 100; background: rgba(38, 50, 72, .4); display: grid; place-items: center; padding: 16px;
    opacity: 0; pointer-events: none; transition: opacity var(--t);
}
.modal-fondo.abierto { opacity: 1; pointer-events: auto; }
.modal {
    width: min(460px, 100%); background: var(--superficie); border-radius: 16px; box-shadow: var(--sombra-3);
    transform: translateY(8px) scale(.98); transition: transform var(--t);
}
.modal-fondo.abierto .modal { transform: none; }
.modal-cabecera { display: flex; align-items: flex-start; gap: 14px; padding: 22px 22px 0; }
.modal-cabecera h3 { font-size: 16px; }
.modal-cabecera p { color: var(--texto-2); margin-top: 6px; font-size: 13.5px; }
.modal-icono { width: 42px; height: 42px; border-radius: 12px; flex: none; display: grid; place-items: center; background: var(--primario-claro); color: var(--primario); }
.modal-icono.error { background: var(--error-claro); color: var(--error); }
.modal-cuerpo { padding: 16px 22px 0; }
.modal-pie { display: flex; justify-content: flex-end; gap: 8px; padding: 22px; }
@media (max-width: 480px) { .modal-pie .btn { flex: 1; } }

/* =====================================================================
   Ingreso
   ===================================================================== */
.ingreso {
    min-height: 100vh; display: grid; place-items: center; padding: 24px 16px;
    background:
        radial-gradient(1200px 600px at 0% 0%, rgba(62, 95, 184, .09), transparent 60%),
        radial-gradient(900px 500px at 100% 100%, rgba(62, 95, 184, .07), transparent 60%),
        linear-gradient(180deg, #F4F7FF 0%, #F7F9FC 100%);
}
.ingreso-caja { width: 100%; max-width: 420px; }
.ingreso-card { background: var(--superficie); border: 1px solid var(--borde); border-radius: 18px; box-shadow: var(--sombra-2); padding: 40px 36px 32px; }
.ingreso-logo { display: flex; justify-content: center; margin-bottom: 24px; }
.ingreso-logo img { height: 56px; width: auto; }
.ingreso-card h1 { font-size: 21px; text-align: center; }
.ingreso-card .bajada { text-align: center; color: var(--texto-2); margin: 6px 0 28px; }
.ingreso-form { display: flex; flex-direction: column; gap: 18px; }
.ingreso-fila { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13.5px; }
.ingreso-pie { text-align: center; color: var(--texto-3); font-size: 12.5px; margin-top: 20px; }
.ingreso-pie a { color: var(--texto-2); }
.ingreso-pie a:hover { color: var(--primario); }
.etiqueta-area { display: flex; justify-content: center; margin-bottom: 14px; }
.enlace-boton { background: none; border: 0; padding: 0; font: inherit; color: var(--primario); cursor: pointer; }
.enlace-boton:hover { color: var(--primario-hover); text-decoration: underline; }
@media (max-width: 480px) { .ingreso-card { padding: 32px 22px 26px; border-radius: 16px; } }

/* Utilidades */
.fila { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.oculto-movil { }
@media (max-width: 767px) { .oculto-movil { display: none !important; } }
@media print {
    .sidebar, .header, .velo, .pagina-cabecera .acciones, .tabla-barra, .acciones-fila { display: none !important; }
    .contenedor { margin: 0 !important; }
    .card { box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }

/* Detalle de solo lectura en un modal (ver una fila): lista clave: valor */
.detalle { display: flex; flex-direction: column; gap: 0; margin: 0; }
.detalle-fila { display: grid; grid-template-columns: 160px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--borde); }
.detalle-fila:last-child { border-bottom: 0; }
.detalle dt { margin: 0; font-size: 12.5px; color: var(--texto-2); font-weight: 500; word-break: break-word; }
.detalle dd { margin: 0; font-size: 14px; white-space: pre-wrap; word-break: break-word; }
.detalle-resumen { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 14px; padding: 12px 14px; background: var(--fondo); border-radius: var(--radio-sm); }
.detalle-resumen b { display: block; font-size: 11.5px; color: var(--texto-2); font-weight: 600; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 2px; }
.detalle-resumen span { font-size: 13.5px; }