/* ==========================================================================
   TEMA ENFERMERA ONLINE — Sistema de diseño (paleta celeste + verde caña)
   Única fuente de verdad de color, espaciado, radios y tipografía del panel.
   Se carga DESPUÉS de adminlte.min.css y reescribe sus componentes.
   Regla: ningún hex ni px suelto fuera de este archivo.
   ========================================================================== */

/* ==========================================================================
   1. PALETA
   ========================================================================== */
:root {
    /* --- Acento: celeste de marca --- */
    --color-accent: #00aec9;
    --a-100: #e8f7fa;
    --a-200: #c6ecf3;
    --a-300: #7ed7e6;
    --a-500: #12bcd6;
    --a-600: #067f94;
    --a-700: #05606f;

    /* --- Secundario: verde caña de marca (positivo / activo) --- */
    --color-verde: #bcd500;
    --v-100: #f2f8d6;
    --v-200: #e3ef9f;
    --v-300: #cfe25c;
    --v-500: #bcd500;
    --v-600: #7f9000;
    --v-700: #5f6d00;

    /* --- Superficies --- */
    --color-bg: #f4f8f9;
    --color-surface: #ffffff;
    --color-surface-2: #fbfdfd;
    --color-text: #101d21;
    --color-divider: #e3eaec;

    /* --- Neutrales (tinte frío) --- */
    --n-100: #f7fafb;
    --n-200: #eef2f4;
    --n-300: #dde3e6;
    --n-400: #b8c2c6;
    --n-500: #94a2a8;
    --n-600: #6b787e;
    --n-700: #4b585d;
    --n-800: #333e42;
    --n-900: #1f282b;

    /* --- Sidebar (tinta celeste, igual en claro y oscuro) --- */
    --side-bg: #0b262c;
    --side-bg-2: #0f2f36;
    --side-text: #a6c3c9;
    --side-text-fuerte: #ffffff;
    --side-divider: #17414a;

    /* --- Semánticos --- */
    --rojo: #dc2626;
    --rojo-100: #fdeaea;
    --rojo-700: #991b1b;
    --amb-100: #fef3c7;
    --amb-600: #b45309;
    --amb-700: #92400e;

    /* --- Tipografía --- */
    --font: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, Consolas, monospace;

    /* Iconos incrustados. Viven aquí para no clavar un hex en el componente. */
    --caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b787e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    --lupa: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a2a8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    --equis: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b787e' stroke-width='2.6' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");

    /* --- Espaciado --- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-6: 24px;
    --space-8: 32px;

    /* --- Forma --- */
    --radius: 14px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --radius-pill: 999px;

    /* --- Sombras --- */
    --shadow-sm: 0 1px 2px rgba(16, 29, 33, .05);
    --shadow-md: 0 8px 24px rgba(16, 29, 33, .10);
    --shadow-lg: 0 18px 48px rgba(16, 29, 33, .16);
}

/* ==========================================================================
   2. TEMA OSCURO — mismos tokens, celeste oscuro + verde caña como realce
   ========================================================================== */
html[data-tema="oscuro"] {
    --color-accent: #0e97b0;
    --a-100: #10303a;
    --a-200: #17434f;
    --a-300: #4dc3da;
    --a-500: #22b7d1;
    --a-600: #63d5e8;
    --a-700: #96e5f2;

    --color-verde: #bcd500;
    --v-100: #232c06;
    --v-200: #35410c;
    --v-300: #9cb418;
    --v-500: #bcd500;
    --v-600: #cbe22e;
    --v-700: #dcee6b;

    --color-bg: #08161a;
    --color-surface: #0f2126;
    --color-surface-2: #132a30;
    --color-text: #e7f2f4;
    --color-divider: #1d3840;

    --n-100: #132a30;
    --n-200: #1a343b;
    --n-300: #24444c;
    --n-400: #3d5c65;
    --n-500: #7f959c;
    --n-600: #9bafb5;
    --n-700: #bccbcf;
    --n-800: #d5e2e5;
    --n-900: #eef6f7;

    --side-bg: #0b1e23;
    --side-bg-2: #10282e;
    --side-text: #93b0b7;
    --side-divider: #1d3b43;

    --rojo: #f87171;
    --rojo-100: #33191b;
    --rojo-700: #fca5a5;
    --amb-100: #33280a;
    --amb-600: #fbbf24;
    --amb-700: #fcd34d;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow-md: 0 8px 24px rgba(0, 0, 0, .45);
    --shadow-lg: 0 18px 48px rgba(0, 0, 0, .55);

    --caret: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239bafb5' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    --lupa: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237f959c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><circle cx='11' cy='11' r='7'/><line x1='21' y1='21' x2='16.65' y2='16.65'/></svg>");
    --equis: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239bafb5' stroke-width='2.6' stroke-linecap='round'><line x1='18' y1='6' x2='6' y2='18'/><line x1='6' y1='6' x2='18' y2='18'/></svg>");

    color-scheme: dark;
}

/* ==========================================================================
   3. BASE Y TIPOGRAFÍA
   ========================================================================== */
body,
body * {
    font-family: var(--font);
}

code,
pre,
kbd,
samp,
.text-mono {
    font-family: var(--font-mono);
}

body {
    background-color: var(--color-bg) !important;
    color: var(--color-text);
    font-size: 13.5px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

.wrapper {
    background-color: var(--color-bg);
}

::selection {
    background: var(--a-200);
    color: var(--a-700);
}

a {
    color: var(--a-600);
}

a:hover {
    color: var(--a-700);
}

hr {
    border-top: 1px solid var(--color-divider);
}

/* Foco propio del sistema — nunca el azul del navegador */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    box-shadow: none !important;
}

/* Jerarquía */
.content-header h1,
.content h1,
h1.m-0 {
    font-size: 20px !important;
    font-weight: 800 !important;
    letter-spacing: -.015em;
    color: var(--color-text);
    margin: 0 0 var(--space-1) !important;
}

h2 {
    font-size: 17px;
    font-weight: 800;
    letter-spacing: -.01em;
}

h3,
h4,
h5 {
    font-size: 15px;
    font-weight: 800;
    color: var(--color-text);
}

.text-muted,
small,
.text-sm {
    color: var(--n-500) !important;
}

.eo-lema {
    font-size: 12.5px;
    color: var(--n-500);
    margin: 0;
}

/* Kicker: rótulo de sección en mayúsculas */
.eo-kicker {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--n-500);
    margin: 0 0 var(--space-2);
}

/* ==========================================================================
   4. SHELL — sidebar, topbar, contenido, pie
   ========================================================================== */

/* --- Sidebar --- */
.main-sidebar,
.main-sidebar .sidebar,
aside.main-sidebar.sidebar-dark-primary {
    background-color: var(--side-bg) !important;
    box-shadow: none !important;
    border-right: 1px solid var(--side-divider);
}

.main-sidebar .brand-link {
    border-bottom: 1px solid var(--side-divider) !important;
    background-color: var(--side-bg-2) !important;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.main-sidebar .brand-link .brand-image {
    margin: 0 !important;
    max-height: 32px;
    width: 32px;
    opacity: 1 !important;
    box-shadow: none !important;
    background: #fff;
    padding: 2px;
}

.main-sidebar .brand-link .brand-text {
    display: block;
    color: var(--side-text-fuerte) !important;
    font-size: 13.5px;
    font-weight: 800 !important;
    letter-spacing: -.01em;
    line-height: 1.2;
}

.main-sidebar .brand-link .brand-sub {
    display: block;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--a-300);
}

/* Panel de usuario */
.main-sidebar .user-panel {
    border-bottom: 1px solid var(--side-divider) !important;
    align-items: center;
    gap: var(--space-3);
    padding-bottom: var(--space-3) !important;
}

.main-sidebar .user-panel .eo-avatar {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: 50%;
    background: var(--color-accent);
    color: #fff;
    font-size: 12.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    letter-spacing: .02em;
}

.main-sidebar .user-panel .info {
    padding-left: 0 !important;
    min-width: 0;
}

.main-sidebar .user-panel .info a,
.main-sidebar .user-panel .info span {
    color: var(--side-text-fuerte) !important;
    font-size: 12.5px;
    font-weight: 600;
    padding: 0 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.main-sidebar .user-panel .info .eo-rol {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--a-300) !important;
}

/* Nav */
.nav-sidebar {
    padding: 0 var(--space-2);
}

.nav-sidebar .eo-nav-kicker {
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--n-500);
    padding: var(--space-4) var(--space-3) var(--space-1);
}

.nav-sidebar .nav-link {
    color: var(--side-text) !important;
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-xs);
    padding: var(--space-2) var(--space-3);
    margin-bottom: 2px;
    display: flex;
    align-items: center;
    transition: background-color .12s ease, color .12s ease;
}

.nav-sidebar .nav-link p {
    margin: 0;
    display: flex;
    align-items: center;
    width: 100%;
}

.nav-sidebar .nav-icon {
    width: 20px;
    font-size: 14px !important;
    margin-right: var(--space-2);
    color: inherit;
    opacity: .9;
}

.nav-sidebar .nav-link:hover {
    background-color: var(--side-bg-2) !important;
    color: var(--side-text-fuerte) !important;
}

/* Activo: fondo celeste tenue + texto celeste claro */
.nav-sidebar .nav-link.active,
.nav-sidebar .nav-link.active:hover,
.nav-sidebar > .nav-item > .nav-link.active,
.nav-sidebar .nav-treeview > .nav-item > .nav-link.active {
    background-color: rgba(0, 174, 201, .16) !important;
    color: #7ee2f2 !important;
    font-weight: 800 !important;
    box-shadow: none !important;
}

/* Rama abierta: solo señala, no compite con el activo real */
.nav-sidebar .nav-item.menu-open > .nav-link {
    background-color: var(--side-bg-2) !important;
    color: var(--side-text-fuerte) !important;
}

.nav-sidebar .nav-treeview {
    padding-left: var(--space-3);
    margin-left: var(--space-3);
    border-left: 1px solid var(--side-divider);
}

.nav-sidebar .nav-treeview .nav-link {
    font-size: 12.5px;
    font-weight: 600;
    padding: 6px var(--space-3);
}

.nav-sidebar .nav-treeview .nav-icon {
    font-size: 6px !important;
    width: 14px;
}

.nav-sidebar .nav-link .right {
    font-size: 11px;
    margin-left: auto;
    transition: transform .18s ease;
}

.nav-sidebar .menu-open > .nav-link .right {
    transform: rotate(-90deg);
}

/* Sidebar comprimido: el pie no se oculta, se apila */
.sidebar-collapse .main-sidebar .user-panel {
    flex-direction: column;
    gap: var(--space-1);
}

.sidebar-collapse .main-sidebar .nav-sidebar .eo-nav-kicker {
    display: none;
}

/* --- Topbar --- */
.main-header.navbar {
    background-color: var(--color-surface) !important;
    border-bottom: 1px solid var(--color-divider) !important;
    min-height: 57px;
    padding: 0 var(--space-4);
    box-shadow: none !important;
}

.main-header .navbar-nav .nav-link {
    color: var(--n-600) !important;
    font-size: 13px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.main-header .navbar-nav .nav-link:hover {
    color: var(--color-text) !important;
}

.eo-topbar-titulo {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.eo-topbar-titulo .eo-t {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--color-text);
    white-space: nowrap;
}

.eo-topbar-titulo .eo-sep {
    width: 1px;
    height: 18px;
    background: var(--color-divider);
    flex: 0 0 1px;
}

.eo-topbar-titulo .eo-l {
    font-size: 12px;
    color: var(--n-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Botón de icono de la topbar */
.btn-icono {
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-xs);
    border: 1px solid var(--color-divider);
    background: var(--color-surface);
    color: var(--n-600);
    font-size: 14px;
    padding: 0;
    transition: border-color .12s ease, color .12s ease, background-color .12s ease;
}

.btn-icono:hover {
    border-color: var(--n-400);
    color: var(--color-text);
    background: var(--n-100);
    text-decoration: none;
}

.eo-tema-oscuro-only {
    display: none;
}

html[data-tema="oscuro"] .eo-tema-claro-only {
    display: none;
}

html[data-tema="oscuro"] .eo-tema-oscuro-only {
    display: inline-flex;
}

/* Salir: rojo solo al hover */
.eo-salir:hover {
    color: var(--rojo) !important;
    border-color: var(--rojo) !important;
    background: var(--rojo-100) !important;
}

/* --- Contenido --- */
.content-wrapper {
    background-color: var(--color-bg) !important;
    padding: 0;
}

.content-wrapper > .plantilla {
    max-width: 1600px;
}

.content-header {
    padding: var(--space-6) var(--space-6) 0;
}

.content {
    padding: var(--space-4) var(--space-6) var(--space-8);
}

.content-header + .content {
    padding-top: var(--space-4);
}

/* --- Pie --- */
.main-footer {
    background-color: var(--color-surface) !important;
    border-top: 1px solid var(--color-divider) !important;
    color: var(--n-500);
    font-size: 12px;
    padding: var(--space-4) var(--space-6);
}

.main-footer a {
    color: var(--a-600);
}

/* ==========================================================================
   5. PANELES (.card)
   ========================================================================== */
.card {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-divider) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    margin-bottom: var(--space-4);
}

.card-header {
    background-color: transparent !important;
    border-bottom: 1px solid var(--color-divider) !important;
    padding: var(--space-4);
    border-radius: var(--radius) var(--radius) 0 0 !important;
}

.card-header.border-0 {
    border-bottom: 0 !important;
    padding-bottom: 0;
}

.card-title {
    font-size: 13.5px !important;
    font-weight: 800 !important;
    color: var(--color-text);
    letter-spacing: -.01em;
    float: none;
    margin: 0;
}

.card-body {
    padding: var(--space-4);
}

.card-footer {
    background-color: var(--color-surface-2) !important;
    border-top: 1px solid var(--color-divider) !important;
    border-radius: 0 0 var(--radius) var(--radius) !important;
    padding: var(--space-3) var(--space-4);
}

.card-outline.card-primary,
.card-primary:not(.card-outline) > .card-header {
    border-top: 3px solid var(--color-accent) !important;
    background-color: transparent !important;
    color: var(--color-text) !important;
}

.card.collapsed-card .card-body {
    display: none;
}

/* Cabecera rica: icono en caja + título + ayuda */
.eo-panel-head {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
}

.eo-panel-head .eo-ico {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--radius-xs);
    background: var(--a-100);
    color: var(--a-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
}

.eo-panel-head .eo-tt {
    font-size: 13.5px;
    font-weight: 800;
    color: var(--color-text);
    margin: 0;
}

.eo-panel-head .eo-ay {
    font-size: 11.5px;
    color: var(--n-500);
    margin: 2px 0 0;
}

/* ==========================================================================
   6. BOTONES
   ========================================================================== */
.btn {
    font-family: var(--font);
    font-size: 13px;
    font-weight: 600;
    border-radius: var(--radius-sm) !important;
    padding: 9px var(--space-4);
    border: 1px solid transparent;
    box-shadow: none !important;
    transition: background-color .12s ease, border-color .12s ease, color .12s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    line-height: 1.2;
}

.btn i,
.btn .fa,
.btn .fas,
.btn .far {
    font-size: 13px;
}

.btn:hover,
.btn:focus,
.btn.focus {
    box-shadow: none !important;
    text-decoration: none;
}

.btn:disabled,
.btn.disabled {
    opacity: .45;
    cursor: not-allowed;
}

/* --- Primario: acción #1 de la pantalla (bg-info / btn-primary / btn-info) --- */
.btn.bg-info,
.btn.btn-info,
.btn.btn-primary,
.btn.bg-primary,
.btn-color {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #fff !important;
    font-weight: 800 !important;
}

.btn.bg-info:hover,
.btn.btn-info:hover,
.btn.btn-primary:hover,
.btn.bg-primary:hover,
.btn-color:hover {
    background-color: var(--a-600) !important;
    border-color: var(--a-600) !important;
    color: #fff !important;
}

/* --- Secundario: navegar / editar (bg-warning, btn-secondary, btn-default) --- */
.btn.bg-warning,
.btn.btn-warning,
.btn.btn-secondary,
.btn.btn-default,
.btn.btn-light {
    background-color: var(--color-surface) !important;
    border-color: var(--n-300) !important;
    color: var(--n-700) !important;
    font-weight: 600 !important;
}

.btn.bg-warning:hover,
.btn.btn-warning:hover,
.btn.btn-secondary:hover,
.btn.btn-default:hover,
.btn.btn-light:hover {
    background-color: var(--n-100) !important;
    border-color: var(--n-500) !important;
    color: var(--color-text) !important;
}

/* --- Positivo: verde caña (estado habilitado / activar) --- */
.btn.bg-success,
.btn.btn-success {
    background-color: var(--v-100) !important;
    border-color: var(--v-300) !important;
    color: var(--v-700) !important;
    font-weight: 800 !important;
}

.btn.bg-success:hover,
.btn.btn-success:hover {
    background-color: var(--v-200) !important;
    border-color: var(--v-500) !important;
    color: var(--v-700) !important;
}

/* --- Destructivo: fantasma, nunca relleno rojo --- */
.btn.bg-danger,
.btn.btn-danger,
.btn.btn-rojo {
    background-color: transparent !important;
    border-color: var(--rojo) !important;
    color: var(--rojo) !important;
    font-weight: 600 !important;
}

.btn.bg-danger:hover,
.btn.btn-danger:hover,
.btn.btn-rojo:hover {
    background-color: var(--rojo-100) !important;
    border-color: var(--rojo) !important;
    color: var(--rojo-700) !important;
}

.btn.btn-outline-primary {
    background: transparent !important;
    border-color: var(--color-accent) !important;
    color: var(--a-600) !important;
}

.btn.btn-outline-primary:hover {
    background: var(--a-100) !important;
}

/* Tamaños */
.btn-sm,
.btn-xs,
.btn-group-sm > .btn {
    font-size: 11.5px !important;
    padding: 5px var(--space-3) !important;
    border-radius: var(--radius-xs) !important;
}

.btn-lg {
    font-size: 14px;
    padding: 12px var(--space-6);
}

.btn-block {
    width: 100%;
}

/* Botón mini para filas de tabla */
.tabla-acciones .btn,
.table td .btn:not(.btn-lg) {
    font-size: 11.5px !important;
    padding: 5px var(--space-3) !important;
    border-radius: var(--radius-xs) !important;
    margin: 2px 2px 2px 0;
}

/* ==========================================================================
   7. FORMULARIOS
   ========================================================================== */
label,
.col-form-label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--n-600);
    margin-bottom: var(--space-1);
}

.form-group {
    margin-bottom: var(--space-4);
}

.form-text,
.eo-ayuda {
    font-size: 11.5px;
    color: var(--n-500);
    text-transform: none;
    letter-spacing: 0;
    font-weight: 400;
    margin-top: var(--space-1);
}

.form-control,
.custom-select,
select.form-control,
textarea.form-control,
.select2-container--default .select2-selection--single {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--n-300) !important;
    border-radius: var(--radius-sm) !important;
    color: var(--color-text) !important;
    font-size: 13px;
    padding: 9px var(--space-3);
    height: auto;
    box-shadow: none !important;
    transition: border-color .12s ease;
}

textarea.form-control {
    min-height: 90px;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px var(--a-100) !important;
    outline: none;
}

.form-control::placeholder {
    color: var(--n-400);
}

.form-control:disabled,
.form-control[readonly] {
    background-color: var(--n-100) !important;
    opacity: .7;
}

.form-control.is-invalid,
.is-invalid .form-control {
    border-color: var(--rojo) !important;
}

.invalid-feedback,
.error-message,
.eo-error {
    color: var(--rojo);
    font-size: 11.5px;
    font-weight: 600;
}

.custom-file-label,
.custom-file-input {
    border-radius: var(--radius-sm) !important;
    border-color: var(--n-300) !important;
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    height: auto;
    padding: 9px var(--space-3);
    font-size: 13px;
}

.custom-file-label::after {
    background-color: var(--n-200) !important;
    color: var(--n-700) !important;
    border-left: 1px solid var(--n-300);
    height: auto;
    padding: 9px var(--space-3);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.input-group-text {
    background-color: var(--n-200) !important;
    border-color: var(--n-300) !important;
    color: var(--n-600) !important;
    border-radius: var(--radius-sm);
    font-size: 12.5px;
}

.custom-control-label {
    text-transform: none;
    letter-spacing: 0;
    font-size: 13px;
    font-weight: 400;
    color: var(--color-text);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
}

/* --- Desplegable nativo: flecha propia en vez de la del navegador --- */
select.form-control:not([multiple]):not([size]),
select.custom-select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: var(--caret);
    background-repeat: no-repeat;
    background-position: right var(--space-3) center;
    background-size: 16px 16px;
    padding-right: calc(var(--space-3) * 2 + 16px);
}

/* ==========================================================================
   7 bis. SELECT2 — el plugin trae su propio CSS; aquí se alinea con el sistema
   ========================================================================== */
.select2-container {
    width: 100% !important;
    font-family: var(--font);
}

/* --- Selección simple: idéntica a un .form-control --- */
.select2-container--default .select2-selection--single {
    height: auto !important;
    min-height: 40px;
    background-color: var(--color-surface) !important;
    border: 1px solid var(--n-300) !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px var(--space-3);
    display: flex;
    align-items: center;
    transition: border-color .12s ease;
}

.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--color-text) !important;
    font-size: 13px;
    line-height: 1.5 !important;
    padding: 0 calc(var(--space-6) + var(--space-2)) 0 0 !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--n-400) !important;
}

/* Flecha: se sustituye el triángulo por el mismo caret de los select nativos */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    top: 0 !important;
    right: var(--space-3) !important;
    width: 16px !important;
    background-image: var(--caret);
    background-repeat: no-repeat;
    background-position: center;
    background-size: 16px 16px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important;
}

/* La × de limpiar */
.select2-container--default .select2-selection--single .select2-selection__clear {
    color: var(--n-500) !important;
    font-size: 16px;
    font-weight: 400;
    margin-right: var(--space-4);
    line-height: 1.4;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: var(--rojo) !important;
}

/* Abierto o enfocado: mismo tratamiento que el foco de un campo */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--multiple,
.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px var(--a-100) !important;
}

/* --- Selección múltiple: cada valor es un chip --- */
.select2-container--default .select2-selection--multiple {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--n-300) !important;
    border-radius: var(--radius-sm) !important;
    min-height: 40px;
    padding: 4px var(--space-2);
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    padding: 0;
    margin: 0;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--a-100) !important;
    border: 1px solid var(--a-200) !important;
    border-radius: var(--radius-pill) !important;
    color: var(--a-700) !important;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px var(--space-3) !important;
    margin: 2px 0 !important;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--a-600) !important;
    font-weight: 400;
    font-size: 14px;
    margin: 0 !important;
    order: 2;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--rojo) !important;
}

.select2-container--default .select2-search--inline .select2-search__field {
    font-size: 13px;
    color: var(--color-text);
    margin: 2px 0 !important;
    height: 24px;
}

.select2-container--default .select2-selection--multiple .select2-selection__placeholder {
    color: var(--n-400) !important;
    font-size: 13px;
    line-height: 26px;
}

/* --- Desplegable --- */
.select2-dropdown {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-divider) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-md) !important;
    overflow: hidden;
}

.select2-container--default .select2-search--dropdown {
    padding: var(--space-2);
    border-bottom: 1px solid var(--color-divider);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--n-200) !important;
    border: 1px solid transparent !important;
    border-radius: var(--radius-xs) !important;
    color: var(--color-text) !important;
    font-size: 13px;
    padding: 7px var(--space-3);
}

.select2-container--default .select2-search--dropdown .select2-search__field:focus {
    background-color: var(--color-surface) !important;
    border-color: var(--color-accent) !important;
    outline: none;
}

.select2-results__options {
    max-height: 260px !important;
    padding: var(--space-1);
}

.select2-container--default .select2-results__option {
    color: var(--color-text);
    font-size: 13px;
    padding: 9px var(--space-3);
    border-radius: var(--radius-xs);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--n-100) !important;
    color: var(--color-text) !important;
}

.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background-color: var(--a-100) !important;
    color: var(--a-700) !important;
    font-weight: 600;
}

.select2-container--default .select2-results__message {
    color: var(--n-500);
    font-size: 12.5px;
    padding: var(--space-3);
}

/* Dentro de un modal el desplegable tiene que quedar por encima */
.select2-container--open {
    z-index: 1060;
}

/* ==========================================================================
   8. TABLAS
   ========================================================================== */
.table {
    color: var(--color-text);
    font-size: 13px;
    margin-bottom: 0;
    border-collapse: separate;
    border-spacing: 0;
}

.table thead th {
    background-color: var(--n-100) !important;
    color: var(--n-500) !important;
    font-size: 10px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .07em;
    border: 0 !important;
    border-bottom: 1px solid var(--color-divider) !important;
    padding: var(--space-3) var(--space-3);
    white-space: nowrap;
    vertical-align: middle;
}

.table tbody td {
    border: 0 !important;
    border-bottom: 1px solid var(--n-200) !important;
    padding: var(--space-3);
    vertical-align: middle;
    color: var(--color-text);
}

.table.table-bordered,
.table.table-bordered th,
.table.table-bordered td {
    border-color: var(--n-200) !important;
}

.table.table-bordered {
    border: 0 !important;
}

.table-hover tbody tr:hover,
.table-hover tbody tr:hover td {
    background-color: var(--n-100) !important;
    color: var(--color-text);
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--color-surface-2);
}

.table tbody tr:last-child td {
    border-bottom: 0 !important;
}

.table img {
    border-radius: var(--radius-xs);
    max-height: 44px;
    width: auto;
}

/* La tabla vive dentro del panel: scroll propio, sin desbordar la página */
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==========================================================================
   9. DATATABLES
   ========================================================================== */
.dataTables_wrapper {
    padding: 0;
}

.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_length {
    margin-bottom: var(--space-3);
}

.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_length label {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--n-600);
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.dataTables_wrapper .dataTables_filter input {
    background-color: var(--n-200) !important;
    background-image: var(--lupa);
    background-repeat: no-repeat;
    background-position: left var(--space-3) center;
    background-size: 15px 15px;
    border: 1px solid transparent !important;
    border-radius: var(--radius-sm) !important;
    padding: 8px var(--space-3) 8px calc(var(--space-3) * 2 + 15px) !important;
    font-size: 13px;
    color: var(--color-text) !important;
    width: 280px;
    max-width: 100%;
    margin-left: 0;
    transition: background-color .12s ease, border-color .12s ease;
}

.dataTables_wrapper .dataTables_filter input:focus {
    background-color: var(--color-surface) !important;
    border-color: var(--color-accent) !important;
    box-shadow: 0 0 0 3px var(--a-100) !important;
    outline: none;
}

/* La × nativa del type=search, alineada con el resto */
.dataTables_wrapper .dataTables_filter input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    height: 14px;
    width: 14px;
    background: var(--equis) no-repeat center;
    background-size: contain;
    opacity: .6;
    cursor: pointer;
}

.dataTables_wrapper .dataTables_filter input::-webkit-search-cancel-button:hover {
    opacity: 1;
}

.dataTables_wrapper .dataTables_length select {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--n-300) !important;
    border-radius: var(--radius-xs) !important;
    color: var(--color-text) !important;
    padding: 5px var(--space-2) !important;
    font-size: 12.5px;
}

.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_empty {
    font-size: 11.5px !important;
    color: var(--n-500) !important;
    padding-top: var(--space-3) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button,
.pagination .page-link {
    background: var(--color-surface) !important;
    border: 1px solid var(--n-300) !important;
    border-radius: var(--radius-xs) !important;
    color: var(--n-700) !important;
    font-size: 12.5px !important;
    font-weight: 600;
    padding: 5px var(--space-3) !important;
    margin: 0 2px !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.pagination .page-link:hover {
    background: var(--n-100) !important;
    border-color: var(--n-500) !important;
    color: var(--color-text) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.pagination .page-item.active .page-link {
    background: var(--a-100) !important;
    border-color: var(--a-300) !important;
    color: var(--a-700) !important;
    font-weight: 800;
}

.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.pagination .page-item.disabled .page-link {
    opacity: .45;
}

.page-item:first-child .page-link,
.page-item:last-child .page-link {
    border-radius: var(--radius-xs) !important;
}

/* Barra de herramientas: buscador a la izquierda, exportar a la derecha */
.eo-tabla-tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding: 0 0 var(--space-4);
}

.eo-tabla-tools .dataTables_filter {
    margin: 0;
    float: none;
    text-align: left;
}

.eo-tabla-tools .dt-buttons {
    float: none;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.eo-tabla-exportar {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

.eo-tabla-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px solid var(--color-divider);
    margin-top: var(--space-3);
}

.eo-tabla-pie .dataTables_paginate {
    margin: 0 !important;
    float: none;
}

.eo-tabla-pie .dataTables_info {
    padding: 0 !important;
}

/* ==========================================================================
   SUBIDA DE ARCHIVOS — el input nativo se oculta y se usa una etiqueta con estilo
   ========================================================================== */
.eo-archivo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
}

.eo-archivo input[type="file"] {
    position: absolute;
    width: 1px;
    height: 1px;
    opacity: 0;
    overflow: hidden;
    /* Visible para el teclado y los lectores de pantalla, no para el ratón */
}

.eo-archivo .eo-btn-archivo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface);
    border: 1px dashed var(--n-400);
    border-radius: var(--radius-sm);
    color: var(--n-700);
    font-size: 13px;
    font-weight: 600;
    padding: 9px var(--space-4);
    cursor: pointer;
    margin: 0;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.eo-archivo .eo-btn-archivo:hover {
    border-color: var(--color-accent);
    background: var(--a-100);
    color: var(--a-700);
}

.eo-archivo input[type="file"]:focus-visible + .eo-btn-archivo {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.eo-archivo .eo-ayuda-archivo {
    font-size: 11.5px;
    color: var(--n-500);
}

/* --- Tabla de comprobantes dentro de una ficha --- */
.eo-vouchers-bloque {
    border-top: 1px solid var(--color-divider);
    padding-top: var(--space-4);
}

.eo-tabla-vouchers {
    margin-bottom: var(--space-3);
}

.eo-tabla-vouchers thead th {
    background-color: transparent !important;
    padding: var(--space-2) var(--space-2);
}

.eo-tabla-vouchers tbody td {
    padding: var(--space-2);
    vertical-align: middle;
    border-bottom: 1px solid var(--n-200) !important;
}

.eo-tabla-vouchers tbody tr:last-child td {
    border-bottom: 0 !important;
}

.eo-tabla-vouchers .form-control {
    padding: 7px var(--space-3);
    font-size: 12.5px;
}

/* Botón de archivo compacto, para vivir dentro de una celda */
.eo-archivo-fila {
    flex-wrap: nowrap;
    gap: var(--space-2);
}

.eo-archivo-fila .eo-btn-archivo {
    padding: 7px var(--space-3);
    font-size: 12px;
    font-weight: 600;
    max-width: 220px;
    overflow: hidden;
}

.eo-archivo-fila .eo-btn-archivo span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eo-quitar-archivo {
    width: 24px;
    height: 24px;
    flex: 0 0 24px;
    border: 0;
    border-radius: 50%;
    background: var(--n-200);
    color: var(--n-600);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    cursor: pointer;
}

.eo-quitar-archivo:hover {
    background: var(--rojo-100);
    color: var(--rojo);
}

/* Pie del bloque: agregar a la izquierda, total a la derecha */
.eo-vouchers-pie {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
}

.eo-total-caja {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
    min-width: 200px;
    background: var(--color-surface-2);
    border: 1px solid var(--color-divider);
    border-right: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    padding: var(--space-2) var(--space-4);
}

.eo-total-caja .eo-k {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--n-500);
}

.eo-total-caja .eo-v {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: -.02em;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   FICHA DE ELEMENTO REPETIBLE (una por curso, por ítem de pedido…)
   Sustituye a las filas de tabla cuando hay que capturar datos + adjuntos.
   ========================================================================== */
.eo-ficha {
    border: 1px solid var(--color-divider);
    border-radius: var(--radius);
    background: var(--color-surface);
    margin-bottom: var(--space-3);
    overflow: hidden;
}

.eo-ficha > .eo-ficha-cab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    background: var(--color-surface-2);
    border-bottom: 1px solid var(--color-divider);
}

.eo-ficha > .eo-ficha-cab .eo-orden {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--n-500);
}

.eo-ficha > .eo-ficha-cab .eo-orden b {
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--a-100);
    color: var(--a-700);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.eo-ficha > .eo-ficha-cuerpo {
    padding: var(--space-4);
}

/* Rejilla de campos: se apila sola en móvil, sin media queries */
.eo-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: var(--space-4);
}

.eo-campos .eo-ancho-total {
    grid-column: 1 / -1;
}

/* Resumen de un formulario largo, pegado antes de las acciones */
.eo-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-4);
    border: 1px solid var(--color-divider);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    padding: var(--space-3) var(--space-4);
}

.eo-resumen .eo-dato {
    display: flex;
    flex-direction: column;
}

.eo-resumen .eo-dato .eo-k {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--n-500);
}

.eo-resumen .eo-dato .eo-v {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--color-text);
}

/* Cabecera de panel de listado: título rico a la izquierda, acción #1 a la derecha */
.eo-cab-listado {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* Celda de persona: avatar + nombre + dato secundario */
.eo-persona {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-width: 0;
}

.eo-persona .eo-av {
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    border-radius: 50%;
    background: var(--a-100);
    color: var(--a-700);
    font-size: 11.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.eo-persona .eo-n {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.eo-persona .eo-m {
    font-size: 11px;
    color: var(--n-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Celda de importe */
.eo-monto {
    font-weight: 800;
    letter-spacing: -.01em;
    color: var(--color-text);
    white-space: nowrap;
}

.eo-monto .eo-mon {
    font-size: 10px;
    font-weight: 800;
    color: var(--n-500);
    margin-left: 2px;
}

/* Identificador discreto */
.eo-id {
    font-family: var(--font-mono);
    font-size: 11px;
    color: var(--n-500);
}

/* Control de expansión de DataTables Responsive con los tokens del sistema */
table.dataTable.dtr-inline.collapsed > tbody > tr > td.dtr-control:before {
    background-color: var(--color-accent) !important;
    border: 0 !important;
    box-shadow: none !important;
    color: #fff !important;
    font-family: var(--font) !important;
    font-weight: 800;
    line-height: 15px;
    height: 16px;
    width: 16px;
    border-radius: 50%;
    top: 50%;
    margin-top: -8px;
}

table.dataTable.dtr-inline.collapsed > tbody > tr.parent > td.dtr-control:before {
    background-color: var(--n-500) !important;
}

table.dataTable > tbody > tr.child ul.dtr-details {
    width: 100%;
}

table.dataTable > tbody > tr.child span.dtr-title {
    font-size: 10px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--n-500);
    min-width: 90px;
}

table.dataTable > tbody > tr.child ul.dtr-details > li {
    border-bottom: 1px solid var(--n-200);
    padding: var(--space-2) 0;
}

/* Botones de exportación: en varias vistas salen como <button class="dt-button">
   sin clase .btn, por eso se estilan ambos. */
.dt-buttons .btn,
.dt-buttons .dt-button,
.dt-button.buttons-html5,
.dt-button.buttons-print,
.dt-button.buttons-collection {
    display: inline-flex !important;
    align-items: center;
    gap: var(--space-2);
    background: var(--color-surface) !important;
    background-image: none !important;
    border: 1px solid var(--n-300) !important;
    border-radius: var(--radius-xs) !important;
    color: var(--n-700) !important;
    font-family: var(--font);
    font-size: 12px !important;
    font-weight: 600 !important;
    line-height: 1.2;
    padding: 7px var(--space-3) !important;
    margin: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    transition: border-color .12s ease, background-color .12s ease, color .12s ease;
}

.dt-buttons .btn:hover,
.dt-buttons .dt-button:hover,
.dt-button.buttons-html5:hover,
.dt-button.buttons-print:hover {
    border-color: var(--color-accent) !important;
    background: var(--a-100) !important;
    color: var(--a-700) !important;
}

.dt-buttons .dt-button:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* Icono según el formato, sin tocar ni una vista */
.dt-button.buttons-excel::before,
.dt-button.buttons-csv::before,
.dt-button.buttons-pdf::before,
.dt-button.buttons-print::before,
.dt-button.buttons-copy::before,
.dt-button.buttons-colvis::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 12px;
    line-height: 1;
    color: var(--n-500);
}

.dt-button.buttons-excel::before { content: "\f1c3"; }   /* file-excel */
.dt-button.buttons-csv::before   { content: "\f6dd"; }   /* file-csv */
.dt-button.buttons-pdf::before   { content: "\f1c1"; }   /* file-pdf */
.dt-button.buttons-print::before { content: "\f02f"; }   /* print */
.dt-button.buttons-copy::before  { content: "\f0c5"; }   /* copy */
.dt-button.buttons-colvis::before { content: "\f0db"; }  /* columns */

.dt-button:hover::before {
    color: var(--a-600);
}

/* Encabezado ordenable: flechas discretas, acento solo en la columna activa */
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    cursor: pointer;
    position: relative;
    padding-right: calc(var(--space-3) + 14px);
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after,
table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    font-size: 9px;
    opacity: 1;
    bottom: auto;
    top: 50%;
    right: var(--space-3);
    left: auto;
    line-height: 1;
    content: "";
}

table.dataTable thead .sorting::after {
    content: "\f0dc";                /* sort */
    transform: translateY(-50%);
    color: var(--n-400);
}

table.dataTable thead .sorting_asc::after {
    content: "\f0de";                /* sort-up */
    transform: translateY(-50%);
    color: var(--a-600);
}

table.dataTable thead .sorting_desc::after {
    content: "\f0dd";                /* sort-down */
    transform: translateY(-50%);
    color: var(--a-600);
}

table.dataTable thead .sorting::before,
table.dataTable thead .sorting_asc::before,
table.dataTable thead .sorting_desc::before {
    display: none;
}

table.dataTable thead th.sorting:hover::after {
    color: var(--a-600);
}

table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
    color: var(--a-700) !important;
}

/* ==========================================================================
   10. CHIPS, BADGES Y ESTADOS
   ========================================================================== */
.badge {
    font-size: 9.5px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    border-radius: var(--radius-xs) !important;
    padding: 4px var(--space-2) !important;
    line-height: 1.4;
}

.badge-success,
.badge.bg-success {
    background-color: var(--v-100) !important;
    color: var(--v-700) !important;
}

.badge-info,
.badge-primary,
.badge.bg-info,
.badge.bg-primary {
    background-color: var(--a-100) !important;
    color: var(--a-700) !important;
}

.badge-warning,
.badge.bg-warning {
    background-color: var(--amb-100) !important;
    color: var(--amb-700) !important;
}

.badge-danger,
.badge.bg-danger {
    background-color: var(--rojo-100) !important;
    color: var(--rojo-700) !important;
}

.badge-secondary,
.badge-light,
.badge-dark {
    background-color: var(--n-200) !important;
    color: var(--n-700) !important;
}

/* Chip de estado con punto */
.chip-estado {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    border-radius: var(--radius-pill);
    padding: 3px 10px;
    font-size: 11.5px;
    font-weight: 600;
}

.chip-estado::before {
    content: "";
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;
}

.chip-estado.ok {
    background: var(--v-100);
    color: var(--v-700);
}

.chip-estado.alerta {
    background: var(--amb-100);
    color: var(--amb-700);
}

.chip-estado.off {
    background: var(--n-200);
    color: var(--n-600);
}

/* ==========================================================================
   11. KPIs — banda de celdas iguales (small-box de AdminLTE)
   ========================================================================== */
/* gap:1px sobre fondo divider = reglas perfectas de 1px entre celdas y ninguna en el borde */
.eo-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
    gap: 1px;
    background: var(--color-divider);
    border: 1px solid var(--color-divider);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--space-4);
}

.eo-stat {
    background: var(--color-surface);
    padding: var(--space-4);
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.eo-stat .eo-ico {
    width: 34px;
    height: 34px;
    flex: 0 0 34px;
    border-radius: var(--radius-xs);
    background: var(--a-100);
    color: var(--a-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
}

.eo-stat.verde .eo-ico {
    background: var(--v-100);
    color: var(--v-700);
}

.eo-stat.ambar .eo-ico {
    background: var(--amb-100);
    color: var(--amb-700);
}

.eo-stat .eo-num {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.1;
    color: var(--color-text);
}

.eo-stat .eo-k {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--n-500);
    margin-top: 2px;
}

.eo-stat .eo-d {
    font-size: 11.5px;
    color: var(--n-500);
    margin-top: var(--space-1);
}

/* AdminLTE small-box: reconvertido a celda sobria */
.small-box {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
    border: 1px solid var(--color-divider);
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-sm) !important;
    padding: var(--space-4);
    margin-bottom: var(--space-4);
}

.small-box.bg-info,
.small-box.bg-success,
.small-box.bg-warning,
.small-box.bg-danger,
.small-box.bg-primary {
    background-color: var(--color-surface) !important;
    color: var(--color-text) !important;
}

.small-box > .inner h3 {
    font-size: 24px !important;
    font-weight: 800 !important;
    letter-spacing: -.02em;
    color: var(--color-text) !important;
    margin: 0;
}

.small-box > .inner p {
    font-size: 10.5px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--n-500);
    margin: var(--space-1) 0 0;
}

.small-box > .icon {
    top: var(--space-4);
    right: var(--space-4);
    font-size: 26px !important;
    color: var(--a-300) !important;
    opacity: 1 !important;
    transition: none !important;
}

.small-box.bg-success > .icon,
.small-box.bg-warning > .icon {
    color: var(--v-300) !important;
}

.small-box:hover > .icon {
    font-size: 26px !important;
}

.small-box .small-box-footer {
    background: transparent !important;
    color: var(--a-600) !important;
    font-size: 11.5px;
    font-weight: 600;
    text-align: left;
    padding: var(--space-3) 0 0;
    border-top: 1px solid var(--color-divider);
    margin-top: var(--space-3);
}

.small-box .small-box-footer:hover {
    color: var(--a-700) !important;
    background: transparent !important;
}

/* ==========================================================================
   12. MODALES, DROPDOWNS, ALERTAS, TABS
   ========================================================================== */
.modal-content {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-divider) !important;
    border-radius: var(--radius) !important;
    box-shadow: var(--shadow-lg) !important;
    color: var(--color-text);
}

.modal-header {
    border-bottom: 1px solid var(--color-divider) !important;
    padding: var(--space-4);
}

.modal-title {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: -.01em;
}

.modal-body {
    padding: var(--space-4);
    font-size: 13.5px;
}

.modal-footer {
    border-top: 1px solid var(--color-divider) !important;
    padding: var(--space-3) var(--space-4);
    gap: var(--space-2);
}

.modal-backdrop.show {
    opacity: .5;
    background: #101d21;
}

.close {
    color: var(--n-500);
    text-shadow: none;
    opacity: 1;
    font-weight: 400;
}

.close:hover {
    color: var(--color-text);
}

.dropdown-menu {
    background-color: var(--color-surface) !important;
    border: 1px solid var(--color-divider) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-md) !important;
    padding: var(--space-1);
    font-size: 13px;
}

.dropdown-item {
    color: var(--color-text) !important;
    border-radius: var(--radius-xs);
    padding: 9px var(--space-3);
    font-size: 13px;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--n-100) !important;
    color: var(--color-text) !important;
}

.dropdown-item.eo-destructivo {
    color: var(--rojo) !important;
}

.dropdown-divider {
    border-color: var(--color-divider);
}

.alert {
    border: 1px solid var(--color-divider);
    border-radius: var(--radius-sm);
    font-size: 13px;
    padding: var(--space-3) var(--space-4);
}

.alert-success {
    background: var(--v-100) !important;
    color: var(--v-700) !important;
    border-color: var(--v-200) !important;
}

.alert-danger {
    background: var(--rojo-100) !important;
    color: var(--rojo-700) !important;
    border-color: var(--rojo) !important;
}

.alert-info {
    background: var(--a-100) !important;
    color: var(--a-700) !important;
    border-color: var(--a-200) !important;
}

.alert-warning {
    background: var(--amb-100) !important;
    color: var(--amb-700) !important;
}

.nav-tabs {
    border-bottom: 1px solid var(--color-divider);
}

.nav-tabs .nav-link {
    border: 0;
    border-bottom: 2px solid transparent;
    color: var(--n-600);
    font-size: 13px;
    font-weight: 600;
    padding: var(--space-3) var(--space-4);
}

.nav-tabs .nav-link:hover {
    color: var(--color-text);
    border-color: transparent;
}

.nav-tabs .nav-link.active {
    background: transparent !important;
    color: var(--a-600) !important;
    border-bottom-color: var(--color-accent) !important;
    font-weight: 800;
}

/* Estado vacío */
.eo-vacio {
    text-align: center;
    color: var(--n-500);
    font-size: 13px;
    padding: var(--space-8) var(--space-4);
}

.eo-vacio i {
    font-size: 24px;
    color: var(--n-400);
    display: block;
    margin-bottom: var(--space-3);
}

.eo-vacio b {
    color: var(--color-text);
    display: block;
    font-size: 13.5px;
    margin-bottom: var(--space-1);
}

/* SweetAlert2 con los tokens del sistema */
.swal2-popup {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
    border-radius: var(--radius) !important;
    font-family: var(--font) !important;
    box-shadow: var(--shadow-lg) !important;
}

.swal2-title {
    color: var(--color-text) !important;
    font-size: 17px !important;
    font-weight: 800 !important;
}

.swal2-html-container,
.swal2-content {
    color: var(--n-600) !important;
    font-size: 13.5px !important;
}

.swal2-styled.swal2-confirm {
    background-color: var(--color-accent) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 800 !important;
    font-size: 13px !important;
    box-shadow: none !important;
}

.swal2-styled.swal2-cancel {
    background-color: transparent !important;
    border: 1px solid var(--n-300) !important;
    color: var(--n-700) !important;
    border-radius: var(--radius-sm) !important;
    font-weight: 600 !important;
    font-size: 13px !important;
}

/* Cargando */
.eo-skeleton {
    background: var(--n-200);
    border-radius: var(--radius-xs);
    height: 12px;
    animation: eo-pulso 1.4s ease-in-out infinite;
}

@keyframes eo-pulso {
    0%, 100% { opacity: .6; }
    50% { opacity: 1; }
}

/* ==========================================================================
   13. TEMA OSCURO — piezas que traen color propio de AdminLTE/plugins
   ========================================================================== */
html[data-tema="oscuro"] .content-wrapper,
html[data-tema="oscuro"] body {
    background-color: var(--color-bg) !important;
}

html[data-tema="oscuro"] .table thead th {
    background-color: var(--n-100) !important;
}

html[data-tema="oscuro"] .modal-backdrop.show {
    background: #000;
    opacity: .65;
}

html[data-tema="oscuro"] .brand-link .brand-image {
    background: var(--color-surface);
}

html[data-tema="oscuro"] img.eo-invertible {
    filter: brightness(.92);
}

/* En oscuro el verde caña es el realce vivo del sistema */
html[data-tema="oscuro"] .nav-sidebar .nav-link.active,
html[data-tema="oscuro"] .nav-sidebar .nav-link.active:hover {
    background-color: rgba(188, 213, 0, .14) !important;
    color: var(--v-600) !important;
    box-shadow: inset 2px 0 0 var(--color-verde);
}

html[data-tema="oscuro"] .main-sidebar .user-panel .eo-avatar {
    background: var(--color-verde);
    color: #12200a;
}

html[data-tema="oscuro"] .main-sidebar .brand-link .brand-sub,
html[data-tema="oscuro"] .main-sidebar .user-panel .info .eo-rol {
    color: var(--v-600) !important;
}

html[data-tema="oscuro"] .btn.bg-info,
html[data-tema="oscuro"] .btn.btn-info,
html[data-tema="oscuro"] .btn.btn-primary,
html[data-tema="oscuro"] .btn.bg-primary,
html[data-tema="oscuro"] .btn-color {
    background-color: var(--color-accent) !important;
    border-color: var(--color-accent) !important;
    color: #04222a !important;
}

html[data-tema="oscuro"] .btn.bg-info:hover,
html[data-tema="oscuro"] .btn.btn-info:hover,
html[data-tema="oscuro"] .btn.btn-primary:hover,
html[data-tema="oscuro"] .btn.bg-primary:hover,
html[data-tema="oscuro"] .btn-color:hover {
    background-color: var(--a-300) !important;
    border-color: var(--a-300) !important;
    color: #04222a !important;
}

html[data-tema="oscuro"] .small-box > .icon {
    color: var(--a-500) !important;
}

/* CKEditor y visores PDF: se quedan claros a propósito (documento real) */
html[data-tema="oscuro"] .cke,
html[data-tema="oscuro"] .cke_inner,
html[data-tema="oscuro"] iframe {
    color-scheme: light;
}

/* ==========================================================================
   14. RESPONSIVE
   ========================================================================== */
@media (max-width: 991.98px) {
    .content-header {
        padding: var(--space-4) var(--space-4) 0;
    }

    .content {
        padding: var(--space-3) var(--space-4) var(--space-6);
    }

    .eo-topbar-titulo .eo-sep,
    .eo-topbar-titulo .eo-l {
        display: none;
    }
}

@media (max-width: 860px) {
    .main-header.navbar {
        padding: 0 var(--space-3);
    }

    .main-header .navbar-nav .nav-link span.eo-texto {
        display: none;
    }

    /* Formularios apilados: los col-md-* de las vistas dejan de partir la fila */
    .form-row > [class*="col-"],
    .card-body .row > [class*="col-"] {
        flex: 0 0 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .table {
        min-width: 560px;
    }

    .eo-stats {
        grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
    }

    .dataTables_wrapper .dataTables_filter input {
        min-width: 0;
        width: 100%;
    }
}

/* Alturas de viewport reales en móvil */
.eo-full {
    min-height: 100dvh;
}