:root {
    --cea-bg: #f4f7fb;
    --cea-surface: #ffffff;
    --cea-surface-soft: #f8fafc;
    --cea-border: #e5e7eb;
    --cea-text: #111827;
    --cea-muted: #6b7280;
    --cea-primary: #2563eb;
    --cea-primary-dark: #1d4ed8;
    --cea-success: #16a34a;
    --cea-warning: #f59e0b;
    --cea-danger: #dc2626;
    --cea-radius: 16px;
    --cea-shadow: 0 12px 30px rgba(15, 23, 42, 0.08);


    /* CEA DESIGN SYSTEM V2 - TOKENS */

    /* Superficies */
    --cea-surface-raised: #ffffff;
    --cea-surface-muted: #f8fafc;
    --cea-surface-hover: #f1f5f9;

    /* Texto */
    --cea-text-soft: #334155;
    --cea-text-subtle: #64748b;

    /* Bordes */
    --cea-border-soft: #edf2f7;
    --cea-border-strong: #d8e0ea;

    /* Marca y estados */
    --cea-primary-soft: rgba(37, 99, 235, 0.10);
    --cea-success-soft: rgba(22, 163, 74, 0.10);
    --cea-warning-soft: rgba(245, 158, 11, 0.12);
    --cea-danger-soft: rgba(220, 38, 38, 0.10);
    --cea-info: #0284c7;
    --cea-info-soft: rgba(2, 132, 199, 0.10);

    /* Radios */
    --cea-radius-sm: 10px;
    --cea-radius-md: 14px;
    --cea-radius-lg: 18px;
    --cea-radius-xl: 22px;
    --cea-radius-pill: 999px;

    /* Sombras */
    --cea-shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
    --cea-shadow-sm: 0 6px 18px rgba(15, 23, 42, 0.06);
    --cea-shadow-md: 0 14px 36px rgba(15, 23, 42, 0.08);

    /* Controles */
    --cea-control-sm: 34px;
    --cea-control-md: 42px;
    --cea-control-lg: 48px;

    /* Layout */
    --cea-sidebar-width: 260px;
    --cea-topbar-height: 66px;

    /* Movimiento */
    --cea-transition-fast: 160ms ease;
    --cea-transition: 220ms ease;
}

body {
    background: var(--cea-bg);
    color: var(--cea-text);
    font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

.main-content,
.content,
.container-fluid {
    background: transparent;
}

.card,
.cea-card,
.dashboard-card,
.panel,
.table-container {
    border: 1px solid var(--cea-border) !important;
    border-radius: var(--cea-radius) !important;
    box-shadow: var(--cea-shadow);
    background: var(--cea-surface);
}

.card-header,
.cea-card-header {
    background: var(--cea-surface) !important;
    border-bottom: 1px solid var(--cea-border) !important;
    font-weight: 700;
}

h1, h2, h3, h4, h5 {
    color: var(--cea-text);
    font-weight: 800;
    letter-spacing: -0.025em;
}

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

.btn {
    border-radius: 12px !important;
    font-weight: 700;
    padding: 0.55rem 0.9rem;
}

.btn-primary {
    background: var(--cea-primary) !important;
    border-color: var(--cea-primary) !important;
}

.btn-primary:hover {
    background: var(--cea-primary-dark) !important;
    border-color: var(--cea-primary-dark) !important;
}

.form-control,
.form-select {
    border-radius: 12px !important;
    border-color: var(--cea-border) !important;
    min-height: 42px;
}

.form-control:focus,
.form-select:focus {
    border-color: var(--cea-primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(37, 99, 235, 0.14) !important;
}

.table {
    vertical-align: middle;
}

.table thead th {
    background: var(--cea-surface-soft) !important;
    color: var(--cea-muted);
    font-size: 0.78rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    border-bottom: 1px solid var(--cea-border) !important;
}

.table tbody td {
    border-color: #eef2f7 !important;
}

.badge {
    border-radius: 999px;
    padding: 0.45rem 0.65rem;
    font-weight: 700;
}

.alert {
    border-radius: 14px;
    border: 1px solid var(--cea-border);
}

.modal-content {
    border-radius: 18px;
    border: 1px solid var(--cea-border);
    box-shadow: var(--cea-shadow);
}

.sidebar,
.sidebar-container {
    box-shadow: 8px 0 24px rgba(15, 23, 42, 0.06);
}

.sidebar-link {
    border-radius: 12px;
    margin: 3px 10px;
    font-weight: 650;
}

.sidebar-link.active {
    background: rgba(37, 99, 235, 0.12) !important;
    color: var(--cea-primary) !important;
}

.cea-page-header {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.2rem;
}

.cea-page-title {
    margin: 0;
    font-size: 1.65rem;
}

.cea-page-subtitle {
    color: var(--cea-muted);
    margin: 0.25rem 0 0;
}

.cea-empty-state {
    border: 1px dashed var(--cea-border);
    border-radius: 18px;
    background: var(--cea-surface);
    padding: 2rem;
    text-align: center;
    color: var(--cea-muted);
}

@media (max-width: 768px) {
    .cea-page-header {
        align-items: flex-start;
        flex-direction: column;
    }

    .table-responsive {
        border-radius: 16px;
        border: 1px solid var(--cea-border);
    }

    .btn {
        width: auto;
    }
}



/* =====================================================
   UI/UX V2 - Pulido visual preproducción
   ===================================================== */

/* Fondo general más premium */
body {
    background:
        radial-gradient(circle at top left, rgba(37, 99, 235, 0.08), transparent 30%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

/* Topbar / encabezados */
.topbar,
.navbar,
.header,
.app-header {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--cea-border) !important;
}

/* Sidebar más premium */
.sidebar {
    background: rgba(255, 255, 255, 0.96) !important;
    border-right: 1px solid var(--cea-border) !important;
}

.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar .brand,
.sidebar .logo,
.sidebar a:first-child {
    letter-spacing: -0.03em;
}

.sidebar-link {
    color: #334155 !important;
    transition: all 0.18s ease;
}

.sidebar-link:hover {
    background: rgba(37, 99, 235, 0.08) !important;
    color: var(--cea-primary) !important;
    transform: translateX(2px);
}

.sidebar-link.active {
    box-shadow: inset 4px 0 0 var(--cea-primary);
}

/* Tarjetas con hover sutil */
.card,
.cea-card,
.dashboard-card,
.panel,
.table-container {
    transition: transform 0.18s ease, box-shadow 0.18s ease;
}

.card:hover,
.cea-card:hover,
.dashboard-card:hover,
.panel:hover,
.table-container:hover {
    box-shadow: 0 16px 38px rgba(15, 23, 42, 0.10);
}

/* Métricas principales */
.card h2,
.card h3,
.card .amount,
.dashboard-card h2,
.dashboard-card h3 {
    letter-spacing: -0.04em;
}

/* Tarjeta azul saldo final más elegante */
.bg-primary,
.card.bg-primary,
.dashboard-card.bg-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
    box-shadow: 0 16px 35px rgba(37, 99, 235, 0.28) !important;
}

/* Botones */
.btn {
    box-shadow: none !important;
}

.btn-primary {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%) !important;
}

.btn-danger,
.btn-outline-danger {
    border-radius: 12px !important;
}

.btn-dark,
.btn-secondary,
button[class*="dark"] {
    background: #0f172a !important;
    border-color: #0f172a !important;
}

/* Botón cierre de caja menos tosco */
button,
a.btn {
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

button:hover,
a.btn:hover {
    transform: translateY(-1px);
}

/* Inputs más limpios */
.form-control,
.form-select {
    background-color: #ffffff !important;
}

.form-control::placeholder {
    color: #94a3b8;
}

/* Tablas */
.table {
    margin-bottom: 0;
}

.table tbody tr {
    transition: background 0.15s ease;
}

.table tbody tr:hover {
    background: #f8fafc;
}

.table thead th {
    white-space: nowrap;
}

/* Badges de estado */
.badge.bg-secondary,
.badge.bg-light {
    background: #f1f5f9 !important;
    color: #475569 !important;
}

.badge.bg-success {
    background: rgba(22, 163, 74, 0.12) !important;
    color: #15803d !important;
}

.badge.bg-danger {
    background: rgba(220, 38, 38, 0.12) !important;
    color: #b91c1c !important;
}

.badge.bg-warning {
    background: rgba(245, 158, 11, 0.16) !important;
    color: #92400e !important;
}

/* Estados anulados / tachados */
.text-decoration-line-through,
del,
s {
    color: #94a3b8 !important;
}

/* Login premium */
body:has(form[action="/login"]),
body.login-page {
    min-height: 100vh;
}

.login-card,
.auth-card {
    box-shadow: 0 24px 70px rgba(15, 23, 42, 0.16) !important;
}

/* Para el panel azul del login */
.login-left,
.auth-left,
.welcome-panel,
[class*="login"] .bg-primary,
[class*="auth"] .bg-primary {
    background: linear-gradient(145deg, #1d4ed8 0%, #2563eb 45%, #0f172a 130%) !important;
    color: #ffffff !important;
}

.login-left *,
.auth-left *,
.welcome-panel *,
[class*="login"] .bg-primary *,
[class*="auth"] .bg-primary * {
    color: #ffffff !important;
}

.login-left p,
.auth-left p,
.welcome-panel p,
[class*="login"] .bg-primary p,
[class*="auth"] .bg-primary p {
    color: rgba(255,255,255,0.88) !important;
}

.login-left small,
.auth-left small,
.welcome-panel small,
[class*="login"] .bg-primary small,
[class*="auth"] .bg-primary small {
    color: rgba(255,255,255,0.62) !important;
}

/* Espaciado de páginas */
.main-content,
.content {
    padding-top: 1rem;
}

/* Cards de formulario */
form .card,
form.card {
    border-radius: 18px !important;
}

/* Empty states */
td[colspan],
.table td.text-center {
    color: #64748b !important;
}

/* Scrollbar suave */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: #eef2f7;
}

::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* Responsive */
@media (max-width: 992px) {
    .sidebar {
        box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
    }

    .card,
    .cea-card,
    .dashboard-card,
    .panel,
    .table-container {
        border-radius: 14px !important;
    }
}



/* =====================================================
   UI/UX CONTROLADO V1 - Login / Sidebar / Master
   ===================================================== */

/* Login: marca más clara y profesional */
.login-page {
    background:
        radial-gradient(circle at 20% 15%, rgba(37,99,235,.10), transparent 26%),
        radial-gradient(circle at 80% 80%, rgba(14,165,233,.08), transparent 24%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%) !important;
}

.login-container {
    border-radius: 22px !important;
    overflow: hidden;
    box-shadow: 0 28px 80px rgba(15, 23, 42, 0.14) !important;
    border: 1px solid rgba(226, 232, 240, 0.9);
}

.login-brand {
    position: relative;
    isolation: isolate;
    background:
        radial-gradient(circle at 20% 20%, rgba(255,255,255,.18), transparent 26%),
        linear-gradient(145deg, #1d4ed8 0%, #2563eb 48%, #0f172a 135%) !important;
    color: #fff !important;
}

.login-brand::after {
    content: "";
    position: absolute;
    inset: auto -80px -120px auto;
    width: 260px;
    height: 260px;
    background: rgba(255,255,255,.10);
    border-radius: 999px;
    z-index: -1;
}

.login-brand h1 {
    color: #ffffff !important;
    font-size: 2.15rem;
    line-height: 1.05;
    letter-spacing: -0.055em;
    margin-bottom: 1rem;
}

.login-brand p {
    color: rgba(255,255,255,.90) !important;
    font-size: .98rem;
    line-height: 1.65;
    max-width: 330px;
}

.login-brand small,
.login-brand .opacity-75 {
    color: rgba(255,255,255,.72) !important;
    opacity: 1 !important;
}

.login-product-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .45rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.14);
    border: 1px solid rgba(255,255,255,.20);
    color: rgba(255,255,255,.92);
    font-size: .78rem;
    font-weight: 800;
    margin-bottom: 1.2rem;
}

.login-form h4 {
    color: #0f172a !important;
    font-size: 1.45rem;
    letter-spacing: -0.035em;
}

.login-form p {
    color: #64748b !important;
}

/* Sidebar premium */
#sidebar {
    background: rgba(255,255,255,.98) !important;
    border-right: 1px solid #e5e7eb;
}

.sidebar-header {
    padding: 1.15rem 1.1rem !important;
}

.cea-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .75rem;
}

.cea-sidebar-logo {
    width: 38px;
    height: 38px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 10px 24px rgba(37,99,235,.25);
}

.cea-sidebar-title {
    font-size: .95rem;
    font-weight: 900;
    letter-spacing: -0.035em;
    color: #0f172a;
    line-height: 1.1;
}

.cea-sidebar-subtitle {
    font-size: .68rem;
    color: #64748b;
    font-weight: 700;
    margin-top: .15rem;
}

.cea-sidebar-section {
    display: block;
    padding: 1rem 1rem .35rem;
    font-size: .67rem;
    text-transform: uppercase;
    letter-spacing: .12em;
    color: #94a3b8;
    font-weight: 900;
}

.sidebar-link {
    display: flex !important;
    align-items: center;
    gap: .65rem;
    padding: .68rem .85rem !important;
    margin: .18rem .55rem !important;
    border-radius: 14px !important;
    color: #334155 !important;
    text-decoration: none !important;
    font-size: .88rem;
    font-weight: 750;
}

.sidebar-link .nav-ico {
    width: 24px;
    text-align: center;
    opacity: .78;
}

.sidebar-link:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.sidebar-link.active {
    background: linear-gradient(135deg, rgba(37,99,235,.14), rgba(37,99,235,.08)) !important;
    color: #1d4ed8 !important;
    box-shadow: inset 4px 0 0 #2563eb;
}

.cea-sidebar-logout {
    border-radius: 14px !important;
    background: #fff1f2 !important;
    color: #be123c !important;
    border: 1px solid #ffe4e6 !important;
}

.cea-sidebar-logout:hover {
    background: #ffe4e6 !important;
}

/* Master SaaS KPIs */
.saas-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.25rem;
}

.saas-kpi-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1.05rem 1.1rem;
    box-shadow: 0 12px 30px rgba(15,23,42,.07);
}

.saas-kpi-label {
    color: #64748b;
    font-size: .73rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .45rem;
}

.saas-kpi-value {
    color: #0f172a;
    font-size: 1.7rem;
    line-height: 1;
    font-weight: 900;
    letter-spacing: -.05em;
}

.saas-kpi-hint {
    color: #94a3b8;
    font-size: .78rem;
    margin-top: .35rem;
    font-weight: 650;
}

.saas-kpi-card.primary {
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    border-color: transparent;
}

.saas-kpi-card.primary .saas-kpi-label,
.saas-kpi-card.primary .saas-kpi-value,
.saas-kpi-card.primary .saas-kpi-hint {
    color: #fff;
}

.saas-master-page .table-container {
    padding: 1.25rem !important;
    border-radius: 20px !important;
}

.saas-master-page .table tbody tr {
    height: 58px;
}

@media (max-width: 992px) {
    .saas-kpi-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .saas-kpi-grid {
        grid-template-columns: 1fr;
    }
}



/* =====================================================
   UI/UX OPERACION V1 - Nuevo Alumno / Historial / Cartera
   ===================================================== */

/* Layout operativo */
.page-aspirantes #content,
.page-historial #content,
.page-cartera #content {
    background:
        radial-gradient(circle at 10% 0%, rgba(37, 99, 235, 0.06), transparent 25%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

/* Topbar operativo */
.page-aspirantes .topbar,
.page-historial .topbar,
.page-cartera .topbar {
    min-height: 66px;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(10px);
}

.page-aspirantes .topbar h6,
.page-historial .topbar h6,
.page-cartera .topbar h6 {
    letter-spacing: -0.025em;
    color: #0f172a !important;
}

/* Nuevo Alumno */
.page-aspirantes .form-card {
    max-width: 1040px !important;
    border-radius: 22px !important;
    padding: 2rem 2.2rem !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 22px 60px rgba(15,23,42,.08) !important;
}

.cea-form-hero {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding-bottom: 1.15rem;
    margin-bottom: 1.15rem;
    border-bottom: 1px solid #e5e7eb;
}

.cea-eyebrow {
    color: #2563eb;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .11em;
}

.cea-form-hero h5 {
    font-size: 1.45rem;
    letter-spacing: -0.04em;
    color: #0f172a;
}

.cea-form-hero-badge {
    width: 48px;
    height: 48px;
    border-radius: 18px;
    display: grid;
    place-items: center;
    color: #fff;
    font-weight: 900;
    background: linear-gradient(135deg, #2563eb, #1d4ed8);
    box-shadow: 0 12px 28px rgba(37,99,235,.28);
}

.page-aspirantes .section-header {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin-top: 1.4rem !important;
    padding-bottom: .7rem !important;
    color: #334155 !important;
    font-size: .78rem !important;
    letter-spacing: .08em;
}

.page-aspirantes .section-header::before {
    content: "";
    width: 9px;
    height: 9px;
    border-radius: 999px;
    background: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,.12);
}

.page-aspirantes .form-floating > label {
    color: #64748b;
    font-weight: 650;
}

.page-aspirantes .border.p-3.rounded {
    border-radius: 16px !important;
    border-color: #e5e7eb !important;
    background: #f8fafc;
}

.page-aspirantes #valor_curso,
.page-aspirantes #abono_inicial {
    font-size: 1.08rem !important;
}

.page-aspirantes button[type="submit"] {
    border-radius: 14px !important;
    min-width: 240px;
    box-shadow: 0 14px 30px rgba(37,99,235,.22) !important;
}

/* Historial Alumnos */
.page-historial .table-container {
    border-radius: 22px !important;
    padding: 1.25rem !important;
    box-shadow: 0 18px 45px rgba(15,23,42,.07) !important;
}

.page-historial .table-container[style*="border-top"] {
    border-top: 0 !important;
    box-shadow: 0 16px 40px rgba(37,99,235,.08) !important;
}

.page-historial #buscadorTexto,
.page-historial #filtroEstado {
    min-height: 46px;
}

.page-historial #tablaAlumnos tbody tr {
    height: 72px;
}

.page-historial #tablaAlumnos td {
    color: #334155 !important;
}

.page-historial #tablaAlumnos td:nth-child(3) {
    font-weight: 850;
    color: #0f172a !important;
}

.page-historial .estado-badge {
    width: auto !important;
    min-width: 112px;
    border-radius: 999px !important;
    padding: .48rem .75rem !important;
}

.page-historial .gestion-academica-historial {
    gap: .45rem !important;
}

.page-historial .gestion-academica-historial .form-select {
    width: 128px !important;
    border-radius: 999px !important;
    font-size: .78rem;
}

.page-historial .gestion-academica-historial .btn {
    border-radius: 999px !important;
    padding: .42rem .72rem !important;
    font-size: .78rem;
}

.page-historial .btn-recibos-alumno-safe {
    background: #eff6ff !important;
}

/* Cartera */
.page-cartera .topbar {
    gap: .75rem;
}

.page-cartera .topbar .text-end.mb-3 {
    margin-bottom: 0 !important;
    display: flex;
    align-items: center;
    gap: .55rem;
}

.page-cartera .topbar .btn {
    border-radius: 999px !important;
    padding: .55rem .95rem !important;
}

.page-cartera .accordion-item,
.page-cartera .table-container,
.page-cartera .card {
    border-radius: 20px !important;
    overflow: hidden;
}

.page-cartera .accordion-button {
    font-weight: 850;
    color: #0f172a;
    background: #fff;
}

.page-cartera .accordion-button:not(.collapsed) {
    background: #f8fafc;
    color: #0f172a;
    box-shadow: none;
}

.page-cartera .badge,
.page-cartera .rounded-pill {
    font-weight: 850;
}

.page-cartera .table-custom thead th,
.page-cartera .table thead th {
    color: #64748b !important;
}

.page-cartera .table-custom td,
.page-cartera .table td {
    color: #334155;
}

.page-cartera .table-custom td:first-child,
.page-cartera .table td:first-child {
    color: #0f172a;
    font-weight: 850;
}

/* Responsive */
@media (max-width: 992px) {
    .page-aspirantes .form-card {
        padding: 1.35rem !important;
    }

    .cea-form-hero {
        align-items: flex-start;
        flex-direction: column;
    }

    .page-historial #tablaAlumnos tbody tr {
        height: auto;
    }
}



/* =====================================================
   UI/UX MASTER V2 - Buscador / Filtros / Tabla SaaS
   ===================================================== */

.saas-master-page .container-fluid {
    max-width: 1680px;
}

.saas-master-titlebar {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    margin-bottom: 1.1rem;
}

.saas-master-titlebar h5 {
    font-size: 1.35rem;
    letter-spacing: -0.045em;
}

.saas-master-titlebar p {
    max-width: 620px;
}

.saas-master-actions {
    display: flex;
    align-items: center;
    gap: .65rem;
    flex-wrap: wrap;
}

.saas-master-toolbar {
    display: grid;
    grid-template-columns: minmax(260px, 1fr) 220px;
    gap: .75rem;
    margin-bottom: 1rem;
}

.saas-master-search,
.saas-master-filter {
    min-height: 46px !important;
    border-radius: 15px !important;
    background: #fff !important;
}

.saas-master-search-wrap {
    position: relative;
}

.saas-master-search-wrap::before {
    content: "⌕";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-weight: 900;
    z-index: 2;
}

.saas-master-search {
    padding-left: 2.4rem !important;
}

.saas-tenant-name {
    display: flex;
    flex-direction: column;
    gap: .18rem;
}

.saas-tenant-name strong {
    color: #0f172a;
    font-weight: 900;
    letter-spacing: -0.015em;
}

.saas-tenant-name small {
    color: #94a3b8;
    font-weight: 700;
}

.saas-license-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    padding: .38rem .7rem;
    border-radius: 999px;
    font-weight: 850;
    font-size: .78rem;
}

.saas-license-pill.active {
    color: #15803d;
    background: rgba(22, 163, 74, .10);
    border: 1px solid rgba(22, 163, 74, .18);
}

.saas-license-pill.suspended {
    color: #be123c;
    background: rgba(225, 29, 72, .10);
    border: 1px solid rgba(225, 29, 72, .18);
}

.saas-license-dot {
    width: 7px;
    height: 7px;
    border-radius: 999px;
    background: currentColor;
}

.saas-master-page .table thead th {
    padding-top: .95rem !important;
    padding-bottom: .95rem !important;
}

.saas-master-page .table tbody td {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
}

.saas-master-page .table tbody tr:hover {
    background: #f8fafc !important;
}

.saas-master-page .badge.rounded-pill {
    min-width: 42px;
    justify-content: center;
}

.saas-no-results {
    padding: 2rem !important;
    color: #64748b !important;
    background: #f8fafc;
}

.saas-no-results strong {
    display: block;
    color: #0f172a;
    margin-bottom: .2rem;
}

@media (max-width: 992px) {
    .saas-master-titlebar {
        align-items: flex-start;
        flex-direction: column;
    }

    .saas-master-toolbar {
        grid-template-columns: 1fr;
    }

    .saas-master-actions {
        width: 100%;
    }

    .saas-master-actions .btn {
        width: 100%;
    }
}



/* =====================================================
   UI/UX CARTERA V2 - KPIs financieros
   ===================================================== */

.cartera-summary-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    margin-bottom: 1.2rem;
}

.cartera-summary-card {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 20px;
    padding: 1.1rem 1.15rem;
    box-shadow: 0 18px 44px rgba(15, 23, 42, .07);
}

.cartera-summary-card::after {
    content: "";
    position: absolute;
    right: -38px;
    bottom: -42px;
    width: 115px;
    height: 115px;
    border-radius: 999px;
    background: rgba(37, 99, 235, .08);
}

.cartera-summary-label {
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .09em;
    margin-bottom: .55rem;
}

.cartera-summary-value {
    color: #0f172a;
    font-size: 1.55rem;
    line-height: 1;
    font-weight: 950;
    letter-spacing: -.055em;
}

.cartera-summary-hint {
    color: #94a3b8;
    font-size: .78rem;
    margin-top: .48rem;
    font-weight: 700;
}

.cartera-summary-card.danger {
    background: linear-gradient(135deg, #ef4444, #dc2626);
    border-color: transparent;
}

.cartera-summary-card.danger .cartera-summary-label,
.cartera-summary-card.danger .cartera-summary-value,
.cartera-summary-card.danger .cartera-summary-hint {
    color: #ffffff;
}

.cartera-summary-card.danger::after {
    background: rgba(255,255,255,.15);
}

.cartera-summary-card.success::after {
    background: rgba(22, 163, 74, .10);
}

.cartera-summary-card.warning::after {
    background: rgba(245, 158, 11, .13);
}

.page-cartera .accordion-item {
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

.page-cartera .accordion-button {
    min-height: 58px;
}

.page-cartera .accordion-button .badge {
    box-shadow: 0 8px 18px rgba(239, 68, 68, .10);
}

@media (max-width: 1200px) {
    .cartera-summary-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 576px) {
    .cartera-summary-grid {
        grid-template-columns: 1fr;
    }
}



/* =====================================================
   FIX CAJA - Legibilidad "Registrado por"
   ===================================================== */

.page-caja .badge.bg-primary,
.page-caja .badge.text-bg-primary,
.page-caja .badge[class*="primary"] {
    background: #e0ecff !important;
    color: #1e3a8a !important;
    border: 1px solid #bfdbfe !important;
    font-weight: 800 !important;
    font-size: 0.72rem !important;
    line-height: 1.2 !important;
    padding: 0.38rem 0.62rem !important;
    max-width: 260px;
    white-space: normal !important;
    text-align: left;
}

/* Si el texto viene dentro del historial de ingresos */
.page-caja .table td .badge,
.page-caja #historialIngresos .badge,
.page-caja .historial-ingresos .badge {
    vertical-align: middle;
}

/* Mejor lectura de conceptos dentro de historial */
.page-caja .table td small,
.page-caja .table td .small {
    color: #64748b !important;
    font-weight: 650;
}

.page-caja .table td .text-muted {
    color: #64748b !important;
}

/* Evitar pills demasiado apagadas en filas anuladas */
.page-caja .table tr .badge {
    opacity: 1 !important;
}



/* =====================================================
   UI/UX FLOTA + TRAMITADORES V1
   ===================================================== */

/* Fondo operativo */
.page-flota #content,
.page-tramitadores #content {
    background:
        radial-gradient(circle at 12% 0%, rgba(37,99,235,.06), transparent 26%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

/* Topbar */
.page-flota .topbar,
.page-tramitadores .topbar {
    min-height: 66px;
    background: rgba(255,255,255,.94) !important;
    backdrop-filter: blur(10px);
}

.page-flota .topbar h6,
.page-tramitadores .topbar h6 {
    color: #0f172a !important;
    letter-spacing: -0.025em;
}

/* =====================================================
   FLOTA
   ===================================================== */

.page-flota .card,
.page-flota .panel,
.page-flota .table-container,
.page-flota .accordion-item {
    border-radius: 20px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 16px 42px rgba(15,23,42,.07) !important;
    background: #fff !important;
}

.page-flota .card-header,
.page-flota .panel-header {
    border-bottom: 1px solid #e5e7eb !important;
    background: #fff !important;
}

.page-flota .text-uppercase,
.page-flota [class*="subtitle"],
.page-flota small.text-muted {
    letter-spacing: .06em;
}

.page-flota .btn {
    border-radius: 13px !important;
    font-weight: 850 !important;
}

.page-flota .btn-outline-primary,
.page-flota .btn-outline-secondary,
.page-flota .btn-outline-dark {
    background: #fff !important;
}

.page-flota .btn-outline-primary:hover {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
}

.page-flota .nav-tabs {
    border-bottom: 1px solid #dbe3ef !important;
    gap: .35rem;
}

.page-flota .nav-tabs .nav-link {
    border: 0 !important;
    color: #64748b !important;
    font-weight: 850;
    border-radius: 999px !important;
    padding: .65rem 1rem !important;
}

.page-flota .nav-tabs .nav-link.active {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    box-shadow: inset 0 -3px 0 #2563eb;
}

.page-flota table {
    border-collapse: separate;
    border-spacing: 0;
}

.page-flota table thead th {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
}

.page-flota table tbody tr {
    height: 54px;
}

.page-flota table tbody tr:hover {
    background: #f8fafc !important;
}

.page-flota table td:first-child {
    font-weight: 900;
    color: #0f172a !important;
}

/* Estados de flota */
.page-flota .badge,
.page-flota .rounded-pill {
    font-weight: 900 !important;
    letter-spacing: .02em;
}

.page-flota .badge.bg-success,
.page-flota .text-bg-success,
.page-flota .badge-success {
    background: rgba(22,163,74,.12) !important;
    color: #15803d !important;
    border: 1px solid rgba(22,163,74,.18) !important;
}

.page-flota .badge.bg-danger,
.page-flota .text-bg-danger,
.page-flota .badge-danger {
    background: rgba(220,38,38,.12) !important;
    color: #b91c1c !important;
    border: 1px solid rgba(220,38,38,.18) !important;
}

.page-flota .badge.bg-warning,
.page-flota .text-bg-warning,
.page-flota .badge-warning {
    background: rgba(245,158,11,.16) !important;
    color: #92400e !important;
    border: 1px solid rgba(245,158,11,.22) !important;
}

.page-flota .badge.bg-info,
.page-flota .text-bg-info {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    border: 1px solid #bfdbfe !important;
}

/* Bloques superiores de flota: compactos y premium */
.page-flota .container-fluid > .card,
.page-flota .container-fluid > .panel,
.page-flota .container-fluid > div[class*="card"] {
    margin-bottom: 1rem;
}

.page-flota h5,
.page-flota h6 {
    letter-spacing: -0.035em;
}

/* =====================================================
   TRAMITADORES
   ===================================================== */

.page-tramitadores .container-fluid,
.page-tramitadores .content,
.page-tramitadores #content {
    padding-top: 1.4rem;
}

/* El texto superior "Superadmin..." se suaviza */
.page-tramitadores #content > p,
.page-tramitadores #content > div:first-child:not(.row):not(.card) {
    color: #64748b;
    font-weight: 750;
    margin-bottom: 1rem;
}

.page-tramitadores .card,
.page-tramitadores .table-container,
.page-tramitadores form,
.page-tramitadores .panel {
    border-radius: 20px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.07) !important;
    background: #ffffff !important;
}

.page-tramitadores .card h5,
.page-tramitadores .card h6,
.page-tramitadores .table-container h5,
.page-tramitadores .table-container h6 {
    color: #0f172a !important;
    letter-spacing: -0.035em;
}

.page-tramitadores .form-control,
.page-tramitadores .form-select {
    min-height: 50px;
    border-radius: 14px !important;
}

.page-tramitadores .btn-primary,
.page-tramitadores button[type="submit"] {
    min-height: 50px;
    border-radius: 14px !important;
    font-weight: 900 !important;
    box-shadow: 0 14px 30px rgba(37,99,235,.20) !important;
}

.page-tramitadores .btn-dark,
.page-tramitadores .btn-secondary {
    border-radius: 13px !important;
    background: #0f172a !important;
    border-color: #0f172a !important;
}

.page-tramitadores .btn-outline-secondary,
.page-tramitadores .btn-outline-dark {
    border-radius: 13px !important;
    background: #fff !important;
}

.page-tramitadores table thead th {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
}

.page-tramitadores table tbody tr {
    height: 56px;
}

.page-tramitadores table tbody tr:hover {
    background: #f8fafc !important;
}

.page-tramitadores table td:nth-child(2) {
    font-weight: 900;
    color: #0f172a !important;
}

.page-tramitadores .badge,
.page-tramitadores .rounded-pill {
    font-weight: 900 !important;
}

.page-tramitadores .badge.bg-primary,
.page-tramitadores .text-bg-primary {
    background: #2563eb !important;
    color: #fff !important;
    box-shadow: 0 10px 22px rgba(37,99,235,.22);
}

/* Formulario lateral más respirado */
.page-tramitadores form .form-control {
    margin-bottom: .75rem;
}

/* Responsive */
@media (max-width: 992px) {
    .page-tramitadores .row {
        gap: 1rem;
    }

    .page-flota table tbody tr,
    .page-tramitadores table tbody tr {
        height: auto;
    }
}



/* =====================================================
   FLOTA BOTONERA COMPACTA V1
   ===================================================== */

.page-flota .flota-action-toolbar {
    border-radius: 20px !important;
    box-shadow: 0 18px 45px rgba(15, 23, 42, .07) !important;
}

.page-flota .flota-action-toolbar h6 {
    letter-spacing: -0.035em;
}

.page-flota .flota-action-buttons .btn {
    min-height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .82rem;
}

/* Las tarjetas superiores antiguas quedan como contenedores técnicos:
   no muestran cabecera, pero sí muestran el panel cuando una acción lo abre. */
.page-flota .flota-hidden-toolbox {
    margin-bottom: .55rem !important;
    padding: 0 !important;
    border: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
}

.page-flota .flota-hidden-toolbox > .d-flex:first-child {
    display: none !important;
}

.page-flota .flota-hidden-toolbox > div[id] {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: 1rem;
    margin-bottom: .8rem;
    box-shadow: 0 14px 34px rgba(15, 23, 42, .06);
}

/* Si el panel interno está cerrado, no debe dejar espacio */
.page-flota .flota-hidden-toolbox > .d-none {
    display: none !important;
}

.page-flota .flota-hidden-toolbox form .form-control,
.page-flota .flota-hidden-toolbox form .form-select {
    min-height: 44px;
    border-radius: 14px !important;
}

.page-flota .flota-hidden-toolbox form label {
    color: #64748b !important;
    letter-spacing: .04em;
}

.page-flota #flotaTabs {
    margin-top: .85rem;
}

@media (max-width: 992px) {
    .page-flota .flota-action-toolbar .d-flex {
        align-items: flex-start !important;
    }

    .page-flota .flota-action-buttons {
        width: 100%;
        justify-content: flex-start !important;
    }

    .page-flota .flota-action-buttons .btn {
        flex: 1 1 140px;
    }
}



/* =====================================================
   UI/UX ADMINISTRACION V1
   Usuarios + Configuración + Auditoría
   ===================================================== */

.page-usuarios #content,
.page-configuracion #content,
.page-auditoria #content {
    background:
        radial-gradient(circle at 14% 0%, rgba(37,99,235,.055), transparent 26%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.page-usuarios .topbar,
.page-configuracion .topbar,
.page-auditoria .topbar {
    min-height: 66px;
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid #e5e7eb !important;
    backdrop-filter: blur(10px);
}

.admin-page-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
    max-width: 1640px;
    margin-left: auto;
    margin-right: auto;
}

.admin-page-heading-centered {
    max-width: 1120px;
}

.admin-eyebrow {
    color: #2563eb;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.fw-black {
    font-weight: 950 !important;
    letter-spacing: -.05em;
    color: #0f172a;
}

.admin-mini-kpis {
    display: flex;
    gap: .75rem;
}

.admin-mini-kpi {
    min-width: 150px;
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    padding: .9rem 1rem;
    box-shadow: 0 12px 32px rgba(15,23,42,.06);
}

.admin-mini-kpi span {
    display: block;
    color: #64748b;
    font-size: .72rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}

.admin-mini-kpi strong {
    display: block;
    color: #0f172a;
    font-size: 1.35rem;
    font-weight: 950;
    line-height: 1.1;
}

.admin-table-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
}

.admin-search-wrap {
    position: relative;
    width: 100%;
}

.admin-search-wrap::before {
    content: "⌕";
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: #94a3b8;
    font-weight: 900;
    z-index: 2;
}

.admin-search-wrap .form-control {
    padding-left: 2.35rem !important;
    min-height: 44px;
    border-radius: 15px !important;
}

/* =====================================================
   Usuarios
   ===================================================== */

.page-usuarios .container-fluid {
    max-width: 1640px;
}

.page-usuarios .table-container,
.page-usuarios .form-card {
    border-radius: 22px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.07) !important;
}

.page-usuarios .form-card-header {
    font-weight: 950 !important;
    letter-spacing: -.025em;
}

.page-usuarios .form-card-body {
    background: #f8fafc !important;
}

.page-usuarios .form-control,
.page-usuarios .form-select {
    min-height: 52px;
    border-radius: 15px !important;
}

.page-usuarios .btn-primary {
    border-radius: 15px !important;
    box-shadow: 0 14px 34px rgba(37,99,235,.20) !important;
}

.page-usuarios table thead th {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
}

.page-usuarios table tbody tr {
    height: 56px;
}

.page-usuarios table tbody tr:hover {
    background: #f8fafc !important;
}

.page-usuarios table td:nth-child(2) {
    font-weight: 950 !important;
}

.page-usuarios .badge {
    font-weight: 900 !important;
    letter-spacing: .035em;
}

/* =====================================================
   Configuración
   ===================================================== */

.page-configuracion .form-card {
    max-width: 1120px !important;
    border-radius: 24px !important;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 22px 56px rgba(15,23,42,.08) !important;
    overflow: hidden;
}

.page-configuracion .form-card-header {
    padding: 1.25rem 1.6rem !important;
    background: #fff !important;
    font-weight: 950 !important;
    letter-spacing: -.035em;
}

.page-configuracion .form-card-body {
    padding: 1.8rem !important;
}

.page-configuracion .nav-tabs {
    background: #f8fafc !important;
    border-bottom: 1px solid #e5e7eb !important;
    gap: .35rem;
}

.page-configuracion .nav-tabs .nav-link {
    border: 0 !important;
    border-radius: 999px !important;
    margin-bottom: .75rem;
    color: #64748b !important;
    font-weight: 850 !important;
}

.page-configuracion .nav-tabs .nav-link.active {
    background: #eff6ff !important;
    color: #1d4ed8 !important;
    box-shadow: inset 0 -3px 0 #2563eb;
}

.page-configuracion .section-title {
    color: #2563eb !important;
    border-bottom: 1px solid #e5e7eb !important;
    letter-spacing: .1em !important;
}

.page-configuracion .bg-light-box {
    border-radius: 18px !important;
    background: #f8fafc !important;
    border: 1px solid #e5e7eb !important;
}

.page-configuracion .form-control,
.page-configuracion .form-select,
.page-configuracion .input-group-text {
    min-height: 44px;
    border-radius: 14px !important;
}

.page-configuracion .input-group .input-group-text {
    border-top-right-radius: 0 !important;
    border-bottom-right-radius: 0 !important;
}

.page-configuracion .input-group .form-control {
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

.page-configuracion .btnGuardarConfig,
.page-configuracion button[type="submit"] {
    border-radius: 15px !important;
    min-height: 46px;
    box-shadow: 0 14px 34px rgba(37,99,235,.18) !important;
}

/* Documentos institucionales insertados por JS */
.page-configuracion .card.rounded-4 {
    max-width: 1120px;
    margin-left: auto;
    margin-right: auto;
    border: 1px solid #e5e7eb !important;
    box-shadow: 0 18px 46px rgba(15,23,42,.07) !important;
}

/* =====================================================
   Auditoría
   ===================================================== */

.page-auditoria .container-fluid {
    max-width: 1680px;
}

.page-auditoria .card,
.page-auditoria .table-container,
.page-auditoria .bg-white,
.page-auditoria .shadow-sm {
    border-radius: 22px !important;
}

.page-auditoria .table-responsive,
.page-auditoria table {
    border-radius: 18px !important;
    overflow: hidden;
}

.page-auditoria table thead th {
    padding-top: .9rem !important;
    padding-bottom: .9rem !important;
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: .72rem !important;
    letter-spacing: .08em !important;
}

.page-auditoria table tbody tr {
    height: 48px;
}

.page-auditoria table tbody tr:hover {
    background: #f8fafc !important;
}

.page-auditoria .form-control,
.page-auditoria .form-select {
    min-height: 42px;
    border-radius: 14px !important;
}

.page-auditoria .btn {
    border-radius: 14px !important;
    font-weight: 850 !important;
}

.page-auditoria .btn-warning,
.page-auditoria .btn[style*="ffc107"],
.page-auditoria button.btn-warning {
    min-height: 46px !important;
    padding: .75rem 1.1rem !important;
    border-radius: 16px !important;
    background: #f59e0b !important;
    border-color: #f59e0b !important;
    color: #111827 !important;
    box-shadow: 0 12px 28px rgba(245,158,11,.22) !important;
}

.page-auditoria .badge {
    font-weight: 900 !important;
    letter-spacing: .02em;
}

.page-auditoria .badge.bg-primary,
.page-auditoria .text-bg-primary {
    background: #2563eb !important;
}

.page-auditoria .badge.bg-warning,
.page-auditoria .text-bg-warning {
    background: rgba(245,158,11,.16) !important;
    color: #92400e !important;
    border: 1px solid rgba(245,158,11,.22);
}

.page-auditoria .badge.bg-success,
.page-auditoria .text-bg-success {
    background: rgba(22,163,74,.12) !important;
    color: #15803d !important;
    border: 1px solid rgba(22,163,74,.18);
}

.page-auditoria td:nth-child(4),
.page-auditoria td:nth-child(6) {
    font-weight: 850;
    color: #0f172a;
}

@media (max-width: 992px) {
    .admin-page-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .admin-mini-kpis {
        width: 100%;
    }

    .admin-mini-kpi {
        width: 100%;
    }

    .page-configuracion .form-card {
        max-width: 100% !important;
    }
}



/* =====================================================
   UI/UX ANALITICA V2
   ===================================================== */

.page-analitica #content {
    background:
        radial-gradient(circle at 14% 0%, rgba(37,99,235,.06), transparent 28%),
        linear-gradient(180deg, #f8fafc 0%, #eef2f7 100%);
}

.page-analitica .topbar {
    min-height: 66px;
    background: rgba(255,255,255,.94) !important;
    border-bottom: 1px solid #e5e7eb !important;
    backdrop-filter: blur(10px);
}

.page-analitica .analitica-dashboard {
    max-width: 1680px;
    margin: 0 auto;
}

.analytics-heading {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1rem;
}

.analytics-eyebrow {
    color: #2563eb;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .12em;
}

.analytics-kpi {
    position: relative;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid #e5e7eb;
    border-radius: 22px;
    padding: 1.25rem 1.3rem;
    min-height: 124px;
    box-shadow: 0 18px 46px rgba(15,23,42,.07);
}

.analytics-kpi::after {
    content: "";
    position: absolute;
    right: -28px;
    bottom: -34px;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    background: rgba(37,99,235,.08);
}

.analytics-kpi span {
    display: block;
    color: #64748b;
    font-size: .74rem;
    font-weight: 950;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: .55rem;
}

.analytics-kpi strong {
    display: block;
    color: #0f172a;
    font-size: 1.85rem;
    font-weight: 950;
    letter-spacing: -.05em;
    line-height: 1;
    margin-bottom: .65rem;
}

.analytics-kpi small {
    color: #64748b;
    font-weight: 800;
}

.analytics-kpi-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: #fff;
    border: 0;
}

.analytics-kpi-danger span,
.analytics-kpi-danger strong,
.analytics-kpi-danger small {
    color: #fff;
}

.analytics-kpi-danger::after {
    background: rgba(255,255,255,.18);
}

.analytics-kpi-warning::after {
    background: rgba(245,158,11,.15);
}

.analytics-kpi-blue::after {
    background: rgba(37,99,235,.12);
}

.analytics-card {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 24px;
    padding: 1.35rem;
    box-shadow: 0 18px 46px rgba(15,23,42,.07);
    height: 100%;
}

.analytics-card-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    padding-bottom: 1rem;
    margin-bottom: 1rem;
    border-bottom: 1px solid #e5e7eb;
}

.analytics-card-header h6 {
    color: #0f172a;
    font-weight: 950;
    letter-spacing: -.035em;
    margin-bottom: .2rem;
}

.analytics-card-header p {
    color: #64748b;
    margin-bottom: 0;
    font-size: .88rem;
}

.analytics-chart-wrap {
    position: relative;
    min-height: 330px;
    max-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.analytics-chart-large {
    min-height: 360px;
}

.analytics-chart-wrap canvas {
    max-height: 340px !important;
}

.analytics-alert-card {
    border-top: 4px solid #ef4444;
}

.analytics-alert-header {
    align-items: center;
}

.analytics-alert-badge {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
    border-radius: 999px;
    padding: .5rem .85rem;
    font-weight: 950;
    font-size: .78rem;
}

.analytics-table thead th {
    background: #f8fafc !important;
    color: #64748b !important;
    font-size: .72rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    padding: .9rem 1rem !important;
}

.analytics-table tbody td {
    padding: .9rem 1rem !important;
    border-color: #edf2f7 !important;
}

.analytics-table tbody tr:hover {
    background: #f8fafc;
}

@media (max-width: 992px) {
    .analytics-heading {
        align-items: flex-start;
        flex-direction: column;
    }

    .analytics-chart-wrap,
    .analytics-chart-large {
        min-height: 280px;
    }
}



/* =========================================================
   CEA SHELL V2 - TOPBAR
   ========================================================= */

.cea-topbar {
    min-height: var(--cea-topbar-height);
    height: var(--cea-topbar-height);
    padding: 0 1.35rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    background: var(--cea-surface);
    border-bottom: 1px solid var(--cea-border);
    box-shadow: var(--cea-shadow-xs);
    position: relative;
    z-index: 20;
}

.cea-topbar-left,
.cea-topbar-right,
.cea-user-identity {
    display: flex;
    align-items: center;
}

.cea-topbar-left {
    gap: .85rem;
    min-width: 0;
}

.cea-topbar-right {
    gap: .9rem;
    flex-shrink: 0;
}

.cea-user-identity {
    gap: .7rem;
}

.cea-topbar-title {
    margin: 0;
    color: var(--cea-text);
    font-size: .92rem;
    font-weight: 850;
    letter-spacing: .015em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cea-topbar-menu,
.cea-theme-toggle {
    width: var(--cea-control-md);
    height: var(--cea-control-md);
    min-width: var(--cea-control-md);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid var(--cea-border);
    border-radius: var(--cea-radius-md);
    background: var(--cea-surface);
    color: var(--cea-text);
    box-shadow: var(--cea-shadow-xs);
    transition:
        background var(--cea-transition-fast),
        border-color var(--cea-transition-fast),
        box-shadow var(--cea-transition-fast),
        transform var(--cea-transition-fast);
}

.cea-topbar-menu:hover,
.cea-theme-toggle:hover {
    background: var(--cea-surface-hover);
    border-color: var(--cea-border-strong);
    box-shadow: var(--cea-shadow-sm);
    transform: translateY(-1px);
}

.cea-topbar-menu:focus-visible,
.cea-theme-toggle:focus-visible {
    outline: 3px solid var(--cea-primary-soft);
    outline-offset: 2px;
}

.cea-topbar-menu span,
.cea-theme-toggle span {
    font-size: 1.05rem;
    line-height: 1;
}

.cea-user-name {
    max-width: 260px;
    color: var(--cea-text);
    font-size: .84rem;
    font-weight: 800;
    letter-spacing: .015em;
    text-transform: uppercase;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cea-user-avatar {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--cea-radius-pill);
    background: var(--cea-primary);
    color: #ffffff;
    font-size: .78rem;
    font-weight: 850;
    box-shadow: var(--cea-shadow-sm);
}

@media (max-width: 768px) {
    .cea-topbar {
        padding: 0 .85rem;
    }

    .cea-user-name {
        display: none;
    }

    .cea-topbar-title {
        font-size: .82rem;
    }
}


/* =========================================================
   CEA SIDEBAR V2 - OFFICIAL
   ========================================================= */

#sidebar {
    width: var(--cea-sidebar-width);
    min-width: var(--cea-sidebar-width);
    height: 100vh;
    min-height: 100vh;

    display: flex;
    flex-direction: column;

    background: var(--cea-surface) !important;
    border-right: 1px solid var(--cea-border);
    box-shadow: none;

    overflow: hidden;
}

#sidebar .sidebar-header {
    min-height: var(--cea-topbar-height);
    padding: .9rem 1rem !important;

    display: flex;
    align-items: center;

    background: var(--cea-surface);
    border-bottom: 1px solid var(--cea-border) !important;
}

#sidebar .cea-sidebar-brand {
    display: flex;
    align-items: center;
    gap: .72rem;

    min-width: 0;
}

#sidebar .cea-sidebar-logo {
    width: 36px;
    height: 36px;
    min-width: 36px;

    display: grid;
    place-items: center;

    border-radius: 12px;
    background: var(--cea-primary);
    color: #fff;

    font-size: .82rem;
    font-weight: 900;

    box-shadow: var(--cea-shadow-sm);
}

#sidebar .cea-sidebar-title {
    max-width: 165px;

    color: var(--cea-text);
    font-size: .89rem;
    font-weight: 850;
    line-height: 1.15;

    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

#sidebar .cea-sidebar-subtitle {
    margin-top: .15rem;

    color: var(--cea-text-subtle);
    font-size: .64rem;
    font-weight: 650;
    line-height: 1.2;
}

#sidebar > .py-3.d-flex.flex-column.h-100 {
    flex: 1 1 auto;
    min-height: 0;

    padding-top: .55rem !important;
    padding-bottom: .75rem !important;

    overflow-y: auto;
    overflow-x: hidden;

    scrollbar-width: thin;
    scrollbar-color: var(--cea-border-strong) transparent;
}

#sidebar > .py-3.d-flex.flex-column.h-100::-webkit-scrollbar {
    width: 5px;
}

#sidebar > .py-3.d-flex.flex-column.h-100::-webkit-scrollbar-track {
    background: transparent;
}

#sidebar > .py-3.d-flex.flex-column.h-100::-webkit-scrollbar-thumb {
    background: var(--cea-border-strong);
    border-radius: var(--cea-radius-pill);
}

#sidebar .cea-sidebar-section,
#sidebar .sidebar-section-title {
    display: block;

    margin: 0;
    padding: .95rem 1rem .35rem;

    color: #94a3b8;
    font-size: .61rem;
    font-weight: 900;
    letter-spacing: .115em;
    line-height: 1.2;
    text-transform: uppercase;
}

#sidebar .sidebar-link {
    min-height: 40px;

    display: flex !important;
    align-items: center;
    gap: .7rem;

    margin: .1rem .55rem !important;
    padding: .56rem .72rem !important;

    border: 1px solid transparent;
    border-radius: var(--cea-radius-md) !important;

    background: transparent;
    color: var(--cea-text-soft) !important;

    font-size: .78rem;
    font-weight: 650;
    line-height: 1.25;
    text-decoration: none !important;

    box-shadow: none;

    transition:
        background var(--cea-transition-fast),
        color var(--cea-transition-fast),
        border-color var(--cea-transition-fast),
        transform var(--cea-transition-fast);
}

#sidebar .sidebar-link .nav-ico,
#sidebar .sidebar-link > span:first-child:not(:last-child) {
    width: 22px;
    min-width: 22px;
    height: 22px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border-radius: 7px;

    color: var(--cea-text-subtle);

    font-size: .73rem;
    line-height: 1;

    opacity: .9;

    transition:
        background var(--cea-transition-fast),
        color var(--cea-transition-fast);
}

#sidebar .sidebar-link:hover {
    background: var(--cea-surface-hover) !important;
    border-color: var(--cea-border-soft);

    color: var(--cea-text) !important;

    transform: translateX(2px);
}

#sidebar .sidebar-link:hover .nav-ico,
#sidebar .sidebar-link:hover > span:first-child:not(:last-child) {
    background: var(--cea-primary-soft);
    color: var(--cea-primary);
}

#sidebar .sidebar-link.active {
    background: var(--cea-primary-soft) !important;
    border-color: rgba(37, 99, 235, .10);

    color: var(--cea-primary-dark) !important;

    box-shadow: inset 3px 0 0 var(--cea-primary);
}

#sidebar .sidebar-link.active .nav-ico,
#sidebar .sidebar-link.active > span:first-child:not(:last-child) {
    background: var(--cea-primary);
    color: #fff;
}

#sidebar .mt-auto.px-3.pb-4 {
    margin-top: auto !important;
    padding: .8rem .7rem .25rem !important;

    background: var(--cea-surface);
}

#sidebar .cea-sidebar-logout {
    width: 100% !important;
    min-height: 40px !important;

    display: flex !important;
    align-items: center;
    justify-content: center;

    margin: 0 !important;
    padding: .6rem .85rem !important;

    border: 1px solid rgba(220, 38, 38, .14) !important;
    border-radius: var(--cea-radius-md) !important;

    background: var(--cea-danger-soft) !important;
    color: var(--cea-danger) !important;

    font-size: .76rem;
    font-weight: 800;

    box-shadow: none !important;

    transition:
        background var(--cea-transition-fast),
        border-color var(--cea-transition-fast),
        transform var(--cea-transition-fast);
}

#sidebar .cea-sidebar-logout:hover {
    background: rgba(220, 38, 38, .15) !important;
    border-color: rgba(220, 38, 38, .25) !important;

    color: var(--cea-danger) !important;

    transform: translateY(-1px);
}

#sidebar #alertasPendientesBadge {
    margin-left: auto !important;
    border-radius: var(--cea-radius-pill);
    font-size: .6rem;
}


/* =========================================================
   CEA SIDEBAR V2.1 - READABILITY
   ========================================================= */

#sidebar .cea-sidebar-section,
#sidebar .sidebar-section-title {
    font-size: .65rem;
    padding-top: 1rem;
}

#sidebar .sidebar-link {
    min-height: 42px;
    padding: .6rem .75rem !important;

    font-size: .81rem;
    font-weight: 675;
}

#sidebar .sidebar-link .nav-ico,
#sidebar .sidebar-link > span:first-child:not(:last-child) {
    width: 23px;
    min-width: 23px;
    height: 23px;
}

#sidebar .cea-sidebar-logout {
    min-height: 42px !important;

    background: rgba(220, 38, 38, .08) !important;
    border-color: rgba(220, 38, 38, .20) !important;

    color: #c81e1e !important;

    font-size: .79rem;
    font-weight: 850;
}

#sidebar .cea-sidebar-logout:hover {
    background: rgba(220, 38, 38, .14) !important;
}


/* =========================================================
   CEA SHELL LAYOUT V1 - OFFICIAL
   Layout global opt-in del SaaS.
   ========================================================= */

.cea-shell {
    width: 100%;
    min-height: 100vh;

    display: flex;
    align-items: stretch;

    overflow-x: hidden;
}

/* Sidebar como columna estructural del shell */
.cea-shell > #sidebar {
    flex: 0 0 var(--cea-sidebar-width);

    width: var(--cea-sidebar-width);
    min-width: var(--cea-sidebar-width);
    max-width: var(--cea-sidebar-width);

    transition:
        margin-left var(--cea-transition),
        transform var(--cea-transition);
}

/* Area principal: ocupa TODO el espacio restante */
.cea-shell > #content {
    flex: 1 1 auto;

    width: auto;
    min-width: 0;
    min-height: 100vh;

    margin-left: 0;

    transition:
        width var(--cea-transition),
        margin var(--cea-transition);
}

/* Colapso de escritorio */
.cea-shell > #sidebar.collapsed {
    margin-left: calc(var(--cea-sidebar-width) * -1);
}

/* Evita que tablas o contenidos anchos expandan todo el shell */
.cea-shell > #content > * {
    min-width: 0;
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 768px) {

    .cea-shell {
        position: relative;
    }

    .cea-shell > #sidebar {
        position: fixed;
        top: 0;
        left: 0;

        height: 100vh;

        margin-left: calc(var(--cea-sidebar-width) * -1);

        z-index: 1100;

        box-shadow: var(--cea-shadow-md);
    }

    .cea-shell > #sidebar.active {
        margin-left: 0;
    }

    .cea-shell > #sidebar.collapsed {
        margin-left: calc(var(--cea-sidebar-width) * -1);
    }

    .cea-shell > #content {
        width: 100%;
        flex-basis: 100%;
    }
}


/* =========================================================
   CEA DARK TOKENS V1 - OFFICIAL
   ========================================================= */

html[data-theme="dark"] {
    color-scheme: dark;

    /* Superficies */
    --cea-bg: #0b1220;
    --cea-surface: #111827;
    --cea-surface-raised: #162033;
    --cea-surface-soft: #172033;
    --cea-surface-muted: #172033;
    --cea-surface-hover: #1e293b;

    /* Texto */
    --cea-text: #f8fafc;
    --cea-text-soft: #dbe4f0;
    --cea-text-subtle: #94a3b8;
    --cea-muted: #94a3b8;

    /* Bordes */
    --cea-border: #273449;
    --cea-border-soft: #1f2b3d;
    --cea-border-strong: #3a4961;

    /* Marca */
    --cea-primary: #3b82f6;
    --cea-primary-dark: #60a5fa;
    --cea-primary-soft: rgba(59, 130, 246, .15);

    /* Estados */
    --cea-success: #22c55e;
    --cea-success-soft: rgba(34, 197, 94, .13);

    --cea-warning: #fbbf24;
    --cea-warning-soft: rgba(251, 191, 36, .14);

    --cea-danger: #f87171;
    --cea-danger-soft: rgba(248, 113, 113, .13);

    --cea-info: #38bdf8;
    --cea-info-soft: rgba(56, 189, 248, .13);

    /* Sombras */
    --cea-shadow-xs: 0 1px 2px rgba(0, 0, 0, .18);
    --cea-shadow-sm: 0 8px 20px rgba(0, 0, 0, .20);
    --cea-shadow-md: 0 18px 42px rgba(0, 0, 0, .28);
}


/* =========================================================
   CEA DARK SHELL V1 - OFFICIAL
   Shell, Topbar y Sidebar globales
   ========================================================= */

html[data-theme="dark"] body {
    background: var(--cea-bg) !important;
    color: var(--cea-text);
}

/* =========================================================
   SHELL
   ========================================================= */

html[data-theme="dark"] .cea-shell {
    background: var(--cea-bg);
}

html[data-theme="dark"] .cea-shell > #content {
    background: var(--cea-bg) !important;
    color: var(--cea-text);
}


/* =========================================================
   TOPBAR
   ========================================================= */

html[data-theme="dark"] .topbar,
html[data-theme="dark"] .cea-topbar {
    background: rgba(17, 24, 39, .96) !important;

    border-bottom-color: var(--cea-border) !important;

    color: var(--cea-text) !important;

    box-shadow:
        0 1px 0 rgba(255,255,255,.02),
        var(--cea-shadow-xs);
}

html[data-theme="dark"] .cea-topbar-title,
html[data-theme="dark"] .cea-user-name {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .cea-topbar-menu,
html[data-theme="dark"] .cea-theme-toggle {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;

    color: var(--cea-text) !important;

    box-shadow: none;
}

html[data-theme="dark"] .cea-topbar-menu:hover,
html[data-theme="dark"] .cea-theme-toggle:hover {
    background: var(--cea-surface-hover) !important;
    border-color: var(--cea-border-strong) !important;

    color: var(--cea-text) !important;

    box-shadow: var(--cea-shadow-sm);
}


/* =========================================================
   SIDEBAR
   ========================================================= */

html[data-theme="dark"] #sidebar {
    background: var(--cea-surface) !important;

    border-right-color: var(--cea-border) !important;

    color: var(--cea-text);
}

html[data-theme="dark"] #sidebar .sidebar-header {
    background: var(--cea-surface) !important;

    border-bottom-color: var(--cea-border) !important;
}

html[data-theme="dark"] #sidebar .cea-sidebar-title {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] #sidebar .cea-sidebar-subtitle {
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"] #sidebar .cea-sidebar-section,
html[data-theme="dark"] #sidebar .sidebar-section-title {
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"] #sidebar .sidebar-link {
    background: transparent !important;
    border-color: transparent;

    color: var(--cea-text-soft) !important;
}

html[data-theme="dark"] #sidebar .sidebar-link .nav-ico,
html[data-theme="dark"]
#sidebar .sidebar-link > span:first-child:not(:last-child) {
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"] #sidebar .sidebar-link:hover {
    background: var(--cea-surface-hover) !important;
    border-color: var(--cea-border-soft);

    color: var(--cea-text) !important;
}

html[data-theme="dark"] #sidebar .sidebar-link:hover .nav-ico,
html[data-theme="dark"]
#sidebar .sidebar-link:hover > span:first-child:not(:last-child) {
    background: var(--cea-primary-soft) !important;
    color: var(--cea-primary) !important;
}

html[data-theme="dark"] #sidebar .sidebar-link.active {
    background: var(--cea-primary-soft) !important;

    border-color: rgba(59, 130, 246, .20) !important;

    color: var(--cea-primary-dark) !important;

    box-shadow:
        inset 3px 0 0 var(--cea-primary);
}

html[data-theme="dark"] #sidebar .sidebar-link.active .nav-ico,
html[data-theme="dark"]
#sidebar .sidebar-link.active > span:first-child:not(:last-child) {
    background: var(--cea-primary) !important;
    color: #ffffff !important;
}

html[data-theme="dark"] #sidebar .mt-auto.px-3.pb-4 {
    background: var(--cea-surface) !important;
}

html[data-theme="dark"] #sidebar .cea-sidebar-logout {
    background: var(--cea-danger-soft) !important;
    border-color: rgba(248, 113, 113, .20) !important;

    color: var(--cea-danger) !important;
}

html[data-theme="dark"] #sidebar .cea-sidebar-logout:hover {
    background: rgba(248, 113, 113, .18) !important;

    border-color: rgba(248, 113, 113, .30) !important;

    color: #fca5a5 !important;
}


/* =========================================================
   CEA DARK CONTROLS V1 - OFFICIAL
   Formularios y tablas neutrales
   ========================================================= */

/* ---------------------------------------------------------
   FORMULARIOS
   --------------------------------------------------------- */

html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea,
html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-select {
    background-color: var(--cea-surface) !important;
    border-color: var(--cea-border-strong) !important;

    color: var(--cea-text) !important;

    box-shadow: none !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder,
html[data-theme="dark"] .form-control::placeholder {
    color: var(--cea-text-subtle) !important;
    opacity: 1;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--cea-surface-raised) !important;

    border-color: var(--cea-primary) !important;

    color: var(--cea-text) !important;

    box-shadow:
        0 0 0 3px var(--cea-primary-soft) !important;

    outline: none;
}

html[data-theme="dark"] select option {
    background: var(--cea-surface);
    color: var(--cea-text);
}

html[data-theme="dark"] label,
html[data-theme="dark"] .form-label {
    color: var(--cea-text-soft);
}


/* ---------------------------------------------------------
   INPUT GROUPS
   --------------------------------------------------------- */

html[data-theme="dark"] .input-group-text {
    background: var(--cea-surface-raised) !important;

    border-color: var(--cea-border-strong) !important;

    color: var(--cea-text-soft) !important;
}


/* ---------------------------------------------------------
   TABLAS NEUTRALES
   --------------------------------------------------------- */

html[data-theme="dark"] table {
    color: var(--cea-text);
}

html[data-theme="dark"] table > :not(caption) > * > * {
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] table thead,
html[data-theme="dark"] .table thead,
html[data-theme="dark"] thead.table-light {
    background: var(--cea-surface-raised) !important;
}

html[data-theme="dark"] table thead th,
html[data-theme="dark"] .table thead th,
html[data-theme="dark"] thead.table-light th {
    background: var(--cea-surface-raised) !important;

    border-color: var(--cea-border) !important;

    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cea-text);
    --bs-table-border-color: var(--cea-border);
    --bs-table-striped-bg: rgba(255,255,255,.025);
    --bs-table-striped-color: var(--cea-text);
    --bs-table-hover-bg: var(--cea-surface-hover);
    --bs-table-hover-color: var(--cea-text);
}

html[data-theme="dark"] .table tbody td {
    color: var(--cea-text-soft);
}


/* ---------------------------------------------------------
   DROPDOWNS
   --------------------------------------------------------- */

html[data-theme="dark"] .dropdown-menu {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;

    box-shadow: var(--cea-shadow-md);
}

html[data-theme="dark"] .dropdown-item {
    color: var(--cea-text-soft) !important;
}

html[data-theme="dark"] .dropdown-item:hover,
html[data-theme="dark"] .dropdown-item:focus {
    background: var(--cea-surface-hover) !important;
    color: var(--cea-text) !important;
}


/* =========================================================
   CEA DARK FLOATING FORMS V1 - OFFICIAL
   Compatibilidad Bootstrap form-floating
   ========================================================= */

/*
 * Bootstrap usa el placeholder como mecanismo interno para
 * determinar si un floating input esta vacio.
 * Debe existir en HTML, pero no mostrarse visualmente.
 */
html[data-theme="dark"]
.form-floating > .form-control::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}

html[data-theme="dark"]
.form-floating > .form-control:focus::placeholder {
    color: transparent !important;
    opacity: 0 !important;
}


/* Superficie coherente para input/select flotante */
html[data-theme="dark"]
.form-floating > .form-control,
html[data-theme="dark"]
.form-floating > .form-select {
    background-color: var(--cea-surface) !important;
    border-color: var(--cea-border-strong) !important;
    color: var(--cea-text) !important;
}


/* Label base */
html[data-theme="dark"]
.form-floating > label {
    color: var(--cea-text-subtle) !important;
}


/* Label flotado */
html[data-theme="dark"]
.form-floating > .form-control:focus ~ label,
html[data-theme="dark"]
.form-floating > .form-control:not(:placeholder-shown) ~ label,
html[data-theme="dark"]
.form-floating > .form-select ~ label {
    color: var(--cea-text-subtle) !important;
}


/*
 * Bootstrap puede dibujar una superficie detr?s del label
 * usando ::after. La sincronizamos con la superficie dark.
 */
html[data-theme="dark"]
.form-floating > .form-control:focus ~ label::after,
html[data-theme="dark"]
.form-floating > .form-control:not(:placeholder-shown) ~ label::after,
html[data-theme="dark"]
.form-floating > .form-select ~ label::after {
    background-color: var(--cea-surface) !important;
}


/* =========================================================
   CEA DARK SURFACES V1 - OFFICIAL
   Superficies neutrales del Design System
   Piloto: Matr?cula + Flota + Usuarios
   ========================================================= */


/* =========================================================
   WORKSPACE
   ========================================================= */

html[data-theme="dark"] .page-aspirantes,
html[data-theme="dark"] .page-flota,
html[data-theme="dark"] .page-usuarios {
    background: var(--cea-bg) !important;
    color: var(--cea-text);
}

html[data-theme="dark"] .page-aspirantes #content,
html[data-theme="dark"] .page-flota #content,
html[data-theme="dark"] .page-usuarios #content {
    background: var(--cea-bg) !important;
    color: var(--cea-text) !important;
}


/* =========================================================
   NUEVA MATR?CULA
   ========================================================= */

html[data-theme="dark"] .page-aspirantes .form-card {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    box-shadow: var(--cea-shadow-md) !important;
}

html[data-theme="dark"] .page-aspirantes .cea-form-hero {
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-aspirantes .cea-form-hero h1,
html[data-theme="dark"] .page-aspirantes .cea-form-hero h2,
html[data-theme="dark"] .page-aspirantes .cea-form-hero h3,
html[data-theme="dark"] .page-aspirantes .cea-form-hero h4,
html[data-theme="dark"] .page-aspirantes .cea-form-hero h5,
html[data-theme="dark"] .page-aspirantes .cea-form-hero h6 {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-aspirantes .section-header {
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-aspirantes .bg-light {
    background: var(--cea-surface-raised) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-aspirantes .readonly-field {
    background: var(--cea-surface-raised) !important;
    color: var(--cea-text-soft) !important;
}

html[data-theme="dark"] .page-aspirantes .border,
html[data-theme="dark"] .page-aspirantes .border-top,
html[data-theme="dark"] .page-aspirantes .border-bottom {
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-aspirantes .text-muted {
    color: var(--cea-text-subtle) !important;
}


/* =========================================================
   GESTI?N DE FLOTA
   ========================================================= */

html[data-theme="dark"] .page-flota .card,
html[data-theme="dark"] .page-flota .panel,
html[data-theme="dark"] .page-flota .table-container,
html[data-theme="dark"] .page-flota .accordion-item,
html[data-theme="dark"] .page-flota .flota-action-toolbar {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"] .page-flota .card-header,
html[data-theme="dark"] .page-flota .panel-header {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"]
.page-flota .flota-hidden-toolbox > div[id] {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"] .page-flota h1,
html[data-theme="dark"] .page-flota h2,
html[data-theme="dark"] .page-flota h3,
html[data-theme="dark"] .page-flota h4,
html[data-theme="dark"] .page-flota h5,
html[data-theme="dark"] .page-flota h6 {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-flota p,
html[data-theme="dark"] .page-flota .text-muted,
html[data-theme="dark"] .page-flota small.text-muted {
    color: var(--cea-text-subtle) !important;
}


/* Tabla Flota */

html[data-theme="dark"] .page-flota table {
    background: transparent !important;
    color: var(--cea-text);
}

html[data-theme="dark"] .page-flota table thead,
html[data-theme="dark"] .page-flota table thead tr,
html[data-theme="dark"] .page-flota table thead th {
    background: var(--cea-surface-raised) !important;
    color: var(--cea-text-subtle) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-flota table tbody,
html[data-theme="dark"] .page-flota table tbody tr,
html[data-theme="dark"] .page-flota table tbody td {
    background: transparent !important;
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-flota table tbody tr:hover {
    background: var(--cea-surface-hover) !important;
}

html[data-theme="dark"] .page-flota table td:first-child {
    color: var(--cea-text) !important;
}


/* =========================================================
   GESTI?N DE USUARIOS
   ========================================================= */

html[data-theme="dark"] .page-usuarios .table-container,
html[data-theme="dark"] .page-usuarios .form-card,
html[data-theme="dark"] .page-usuarios .form-card-header,
html[data-theme="dark"] .page-usuarios .form-card-body,
html[data-theme="dark"] .page-usuarios .admin-mini-kpi {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-usuarios .table-container,
html[data-theme="dark"] .page-usuarios .form-card,
html[data-theme="dark"] .page-usuarios .admin-mini-kpi {
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"] .page-usuarios .form-card-header {
    border-bottom-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-usuarios h1,
html[data-theme="dark"] .page-usuarios h2,
html[data-theme="dark"] .page-usuarios h3,
html[data-theme="dark"] .page-usuarios h4,
html[data-theme="dark"] .page-usuarios h5,
html[data-theme="dark"] .page-usuarios h6,
html[data-theme="dark"] .page-usuarios .text-dark {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-usuarios .text-muted {
    color: var(--cea-text-subtle) !important;
}


/* Tabla Usuarios */

html[data-theme="dark"] .page-usuarios table,
html[data-theme="dark"] .page-usuarios table tbody,
html[data-theme="dark"] .page-usuarios table tbody tr,
html[data-theme="dark"] .page-usuarios table tbody td {
    background: transparent !important;
}

html[data-theme="dark"] .page-usuarios table tbody td {
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-usuarios table td:nth-child(2) {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-usuarios table tbody tr:hover {
    background: var(--cea-surface-hover) !important;
}


/* Mini KPI administraci?n */

html[data-theme="dark"] .page-usuarios .admin-mini-kpi span,
html[data-theme="dark"] .page-usuarios .admin-mini-kpi small {
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"] .page-usuarios .admin-mini-kpi strong {
    color: var(--cea-text) !important;
}


/* =========================================================
   CEA DARK STATES V1 - OFFICIAL
   Tabs, botones, badges, checks y autofill.
   ========================================================= */


/* =========================================================
   BOTONES OUTLINE GLOBALES
   ========================================================= */

html[data-theme="dark"] .btn-outline-primary {
    background: transparent !important;
    color: #60a5fa !important;
    border-color: #3b82f6 !important;
}

html[data-theme="dark"] .btn-outline-primary:hover,
html[data-theme="dark"] .btn-outline-primary:focus {
    background: var(--cea-primary-soft) !important;
    color: #93c5fd !important;
    border-color: #60a5fa !important;
}

html[data-theme="dark"] .btn-outline-secondary,
html[data-theme="dark"] .btn-outline-dark {
    background: transparent !important;
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border-strong) !important;
}

html[data-theme="dark"] .btn-outline-secondary:hover,
html[data-theme="dark"] .btn-outline-secondary:focus,
html[data-theme="dark"] .btn-outline-dark:hover,
html[data-theme="dark"] .btn-outline-dark:focus {
    background: var(--cea-surface-hover) !important;
    color: var(--cea-text) !important;
    border-color: #64748b !important;
}

html[data-theme="dark"] .btn-outline-danger {
    background: transparent !important;
    color: #f87171 !important;
    border-color: #ef4444 !important;
}

html[data-theme="dark"] .btn-outline-danger:hover,
html[data-theme="dark"] .btn-outline-danger:focus {
    background: var(--cea-danger-soft) !important;
    color: #fca5a5 !important;
    border-color: #f87171 !important;
}

html[data-theme="dark"] .btn-outline-success {
    background: transparent !important;
    color: #4ade80 !important;
    border-color: #22c55e !important;
}

html[data-theme="dark"] .btn-outline-success:hover,
html[data-theme="dark"] .btn-outline-success:focus {
    background: var(--cea-success-soft) !important;
    color: #86efac !important;
}


/* =========================================================
   MATR?CULA - CHECKS / OPCIONES
   ========================================================= */

html[data-theme="dark"] .page-aspirantes .form-check {
    color: var(--cea-text-soft) !important;
}

html[data-theme="dark"] .page-aspirantes .form-check-label {
    color: var(--cea-text-soft) !important;
}

/*
 * Los dos bloques "Incluir Examen M?dico" e
 * "Incluir Impresi?n" usan utilidades Bootstrap
 * de fondo/borde claro.
 */
html[data-theme="dark"] .page-aspirantes .form-check.bg-light,
html[data-theme="dark"] .page-aspirantes div.bg-light:has(.form-check-input),
html[data-theme="dark"] .page-aspirantes label.bg-light {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text-soft) !important;
}

html[data-theme="dark"] .page-aspirantes .form-check-input {
    background-color: var(--cea-surface-raised) !important;
    border-color: #64748b !important;
}

html[data-theme="dark"] .page-aspirantes .form-check-input:checked {
    background-color: var(--cea-primary) !important;
    border-color: var(--cea-primary) !important;
}

html[data-theme="dark"] .page-aspirantes .form-check-input:focus {
    border-color: #60a5fa !important;
    box-shadow: 0 0 0 .2rem rgba(59, 130, 246, .15) !important;
}


/* =========================================================
   FLOTA - TABS
   ========================================================= */

html[data-theme="dark"] .page-flota .nav-tabs {
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-flota .nav-tabs .nav-link {
    background: transparent !important;
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"] .page-flota .nav-tabs .nav-link:hover {
    background: var(--cea-surface-hover) !important;
    color: var(--cea-text-soft) !important;
}

html[data-theme="dark"] .page-flota .nav-tabs .nav-link.active {
    background: var(--cea-primary-soft) !important;
    color: #60a5fa !important;
    box-shadow: inset 0 -3px 0 var(--cea-primary) !important;
}


/* =========================================================
   FLOTA - BOTONERA SUPERIOR
   ========================================================= */

html[data-theme="dark"] .page-flota .flota-action-buttons .btn-outline-primary,
html[data-theme="dark"] .page-flota .flota-action-buttons .btn-outline-secondary,
html[data-theme="dark"] .page-flota .flota-action-buttons .btn-outline-dark {
    background: transparent !important;
}

html[data-theme="dark"] .page-flota .flota-action-buttons .btn-outline-primary {
    color: #60a5fa !important;
    border-color: #3b82f6 !important;
}

html[data-theme="dark"] .page-flota .flota-action-buttons .btn-outline-secondary,
html[data-theme="dark"] .page-flota .flota-action-buttons .btn-outline-dark {
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border-strong) !important;
}


/* =========================================================
   FLOTA - BADGES / ESTADOS
   ========================================================= */

html[data-theme="dark"] .page-flota .badge.bg-success,
html[data-theme="dark"] .page-flota .text-bg-success,
html[data-theme="dark"] .page-flota .badge-success {
    background: rgba(34, 197, 94, .15) !important;
    color: #86efac !important;
    border-color: rgba(34, 197, 94, .28) !important;
}

html[data-theme="dark"] .page-flota .badge.bg-warning,
html[data-theme="dark"] .page-flota .text-bg-warning,
html[data-theme="dark"] .page-flota .badge-warning {
    background: rgba(251, 191, 36, .15) !important;
    color: #fde68a !important;
    border-color: rgba(251, 191, 36, .28) !important;
}

html[data-theme="dark"] .page-flota .badge.bg-danger,
html[data-theme="dark"] .page-flota .text-bg-danger,
html[data-theme="dark"] .page-flota .badge-danger {
    background: rgba(248, 113, 113, .15) !important;
    color: #fca5a5 !important;
    border-color: rgba(248, 113, 113, .28) !important;
}

html[data-theme="dark"] .page-flota .badge.bg-info,
html[data-theme="dark"] .page-flota .text-bg-info {
    background: rgba(56, 189, 248, .15) !important;
    color: #7dd3fc !important;
    border-color: rgba(56, 189, 248, .28) !important;
}


/*
 * Chips neutrales de fechas, m?todo y "Sin dato".
 */
html[data-theme="dark"] .page-flota .badge.bg-light,
html[data-theme="dark"] .page-flota .text-bg-light,
html[data-theme="dark"] .page-flota .rounded-pill.bg-light {
    background: var(--cea-surface-raised) !important;
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border-strong) !important;
}


/* =========================================================
   USUARIOS - CABECERA FORMULARIO
   ========================================================= */

html[data-theme="dark"] .page-usuarios .form-card-header,
html[data-theme="dark"] .page-usuarios .form-card-header *,
html[data-theme="dark"] .page-usuarios .form-card-header h1,
html[data-theme="dark"] .page-usuarios .form-card-header h2,
html[data-theme="dark"] .page-usuarios .form-card-header h3,
html[data-theme="dark"] .page-usuarios .form-card-header h4,
html[data-theme="dark"] .page-usuarios .form-card-header h5,
html[data-theme="dark"] .page-usuarios .form-card-header h6 {
    color: var(--cea-text) !important;
}


/* =========================================================
   USUARIOS - BADGES DE ROL
   ========================================================= */

html[data-theme="dark"] .page-usuarios .badge {
    border: 1px solid transparent;
}

html[data-theme="dark"] .page-usuarios .badge.bg-light,
html[data-theme="dark"] .page-usuarios .text-bg-light,
html[data-theme="dark"] .page-usuarios .badge.text-dark {
    background: var(--cea-surface-raised) !important;
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border-strong) !important;
}

html[data-theme="dark"] .page-usuarios .badge.bg-primary,
html[data-theme="dark"] .page-usuarios .text-bg-primary {
    background: var(--cea-primary-soft) !important;
    color: #93c5fd !important;
    border-color: rgba(59, 130, 246, .30) !important;
}


/* =========================================================
   AUTOFILL CHROME / EDGE
   ========================================================= */

html[data-theme="dark"] input:-webkit-autofill,
html[data-theme="dark"] input:-webkit-autofill:hover,
html[data-theme="dark"] input:-webkit-autofill:focus,
html[data-theme="dark"] textarea:-webkit-autofill,
html[data-theme="dark"] select:-webkit-autofill {
    -webkit-text-fill-color: var(--cea-text) !important;
    caret-color: var(--cea-text) !important;

    -webkit-box-shadow:
        0 0 0 1000px var(--cea-surface-raised) inset !important;

    box-shadow:
        0 0 0 1000px var(--cea-surface-raised) inset !important;

    border-color: var(--cea-border-strong) !important;

    transition:
        background-color 9999s ease-out 0s !important;
}


/* =========================================================
   FOCUS PROFESIONAL
   ========================================================= */

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-select:focus {
    background-color: var(--cea-surface-raised) !important;
    color: var(--cea-text) !important;
    border-color: #3b82f6 !important;

    box-shadow:
        0 0 0 .2rem rgba(59, 130, 246, .12) !important;
}


/* =========================================================
   CEA DARK MATRICULA ADDONS V1 - OFFICIAL
   Opciones Examen M?dico / Impresi?n
   ========================================================= */

/*
 * Estos dos bloques usan checkbox HTML nativo:
 *
 * .col-md-6.border.p-3.rounded
 *
 * No utilizan .form-check ni .form-check-input.
 */

html[data-theme="dark"]
.page-aspirantes
.col-md-6.border.p-3.rounded:has(#chk_examen),

html[data-theme="dark"]
.page-aspirantes
.col-md-6.border.p-3.rounded:has(#chk_impresion) {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text-soft) !important;
}


/* Label completo */

html[data-theme="dark"]
.page-aspirantes
label:has(#chk_examen),

html[data-theme="dark"]
.page-aspirantes
label:has(#chk_impresion) {
    color: var(--cea-text-soft) !important;
}


/* Checkbox nativo */

html[data-theme="dark"]
.page-aspirantes #chk_examen,

html[data-theme="dark"]
.page-aspirantes #chk_impresion {
    accent-color: var(--cea-primary);
}


/* Hover muy suave para indicar que es interactivo */

html[data-theme="dark"]
.page-aspirantes
.col-md-6.border.p-3.rounded:has(#chk_examen):hover,

html[data-theme="dark"]
.page-aspirantes
.col-md-6.border.p-3.rounded:has(#chk_impresion):hover {
    background: var(--cea-surface-hover) !important;
    border-color: var(--cea-border-strong) !important;
}


/* =========================================================
   CEA DARK SURFACES V2 - OFFICIAL
   Historial / Tramitadores / Anal?tica / Cartera /
   Cierres / Configuraci?n
   ========================================================= */


/* =========================================================
   BASE DE MODULOS
   ========================================================= */

html[data-theme="dark"] .page-historial #content,
html[data-theme="dark"] .page-tramitadores #content,
html[data-theme="dark"] .page-analitica #content,
html[data-theme="dark"] .page-cartera #content,
html[data-theme="dark"] .page-cierres #content,
html[data-theme="dark"] .page-configuracion #content {
    background: var(--cea-bg) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-tramitadores .container-fluid,
html[data-theme="dark"] .page-analitica .analitica-dashboard,
html[data-theme="dark"] .page-cartera .container-fluid,
html[data-theme="dark"] .page-cierres .cierres-dashboard,
html[data-theme="dark"] .page-configuracion .container-fluid {
    background: transparent !important;
}

html[data-theme="dark"] .page-historial .text-muted,
html[data-theme="dark"] .page-tramitadores .text-muted,
html[data-theme="dark"] .page-analitica .text-muted,
html[data-theme="dark"] .page-cartera .text-muted,
html[data-theme="dark"] .page-cierres .text-muted,
html[data-theme="dark"] .page-configuracion .text-muted {
    color: var(--cea-text-subtle) !important;
}


/* =========================================================
   HISTORIAL DE ALUMNOS
   ========================================================= */

html[data-theme="dark"] .page-historial .table-container {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"] .page-historial .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cea-text);
    --bs-table-border-color: var(--cea-border);
    --bs-table-hover-bg: var(--cea-surface-hover);
    --bs-table-hover-color: var(--cea-text);
}

html[data-theme="dark"] .page-historial #tablaAlumnos tbody td {
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-historial #tablaAlumnos tbody td:nth-child(3) {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-historial #tablaAlumnos tbody tr:hover td {
    background: var(--cea-surface-hover) !important;
}

html[data-theme="dark"] .page-historial #tablaAlumnos thead th {
    background: var(--cea-surface-raised) !important;
    color: #93b5df !important;
    border-color: var(--cea-border) !important;
}


/* =========================================================
   TRAMITADORES
   ========================================================= */

html[data-theme="dark"] .page-tramitadores .table-container,
html[data-theme="dark"] .page-tramitadores .form-card,
html[data-theme="dark"] .page-tramitadores .card,
html[data-theme="dark"] .page-tramitadores .panel,
html[data-theme="dark"] .page-tramitadores .modal-content {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"] .page-tramitadores .form-card-header,
html[data-theme="dark"] .page-tramitadores .modal-header,
html[data-theme="dark"] .page-tramitadores .table-light {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-tramitadores .form-card-body,
html[data-theme="dark"] .page-tramitadores .modal-body,
html[data-theme="dark"] .page-tramitadores .modal-footer {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-tramitadores table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cea-text);
    --bs-table-border-color: var(--cea-border);
    --bs-table-hover-bg: var(--cea-surface-hover);
    --bs-table-hover-color: var(--cea-text);
}

html[data-theme="dark"] .page-tramitadores table thead th {
    background: var(--cea-surface-raised) !important;
    color: #93b5df !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-tramitadores table tbody td {
    background: transparent !important;
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-tramitadores table tbody td:nth-child(2) {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-tramitadores table tbody tr:hover td {
    background: var(--cea-surface-hover) !important;
}

html[data-theme="dark"] .page-tramitadores .form-card h5,
html[data-theme="dark"] .page-tramitadores .form-card h6,
html[data-theme="dark"] .page-tramitadores .table-container h5,
html[data-theme="dark"] .page-tramitadores .table-container h6 {
    color: var(--cea-text) !important;
}


/* =========================================================
   ANALITICA
   ========================================================= */

html[data-theme="dark"] .page-analitica .analytics-card {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    box-shadow: var(--cea-shadow-sm) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"]
.page-analitica
.analytics-kpi:not(.analytics-kpi-danger) {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"] .page-analitica .analytics-card-header {
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-analitica .analytics-card h1,
html[data-theme="dark"] .page-analitica .analytics-card h2,
html[data-theme="dark"] .page-analitica .analytics-card h3,
html[data-theme="dark"] .page-analitica .analytics-card h4,
html[data-theme="dark"] .page-analitica .analytics-card h5,
html[data-theme="dark"] .page-analitica .analytics-card h6,
html[data-theme="dark"]
.page-analitica
.analytics-kpi:not(.analytics-kpi-danger) {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-analitica .analytics-card p,
html[data-theme="dark"] .page-analitica .analytics-card small,
html[data-theme="dark"]
.page-analitica
.analytics-kpi:not(.analytics-kpi-danger) small {
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"] .page-analitica .analytics-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cea-text);
    --bs-table-border-color: var(--cea-border);
    --bs-table-hover-bg: var(--cea-surface-hover);
    --bs-table-hover-color: var(--cea-text);
}

html[data-theme="dark"] .page-analitica .analytics-table thead th {
    background: var(--cea-surface-raised) !important;
    color: #93b5df !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-analitica .analytics-table tbody td {
    background: transparent !important;
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border) !important;
}


/* =========================================================
   CARTERA
   ========================================================= */

html[data-theme="dark"]
.page-cartera
.cartera-summary-card:not(.danger) {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"]
.page-cartera
.cartera-summary-card:not(.danger) * {
    color: inherit;
}

html[data-theme="dark"] .page-cartera .accordion-item,
html[data-theme="dark"] .page-cartera .accordion-body,
html[data-theme="dark"] .page-cartera .table-container,
html[data-theme="dark"] .page-cartera .card {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-cartera .accordion-button {
    background: var(--cea-surface) !important;
    color: var(--cea-text) !important;
    border-color: var(--cea-border) !important;
    box-shadow: none !important;
}

html[data-theme="dark"]
.page-cartera
.accordion-button:not(.collapsed) {
    background: var(--cea-surface-raised) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-cartera .accordion-button::after {
    filter: brightness(0) invert(1);
    opacity: .75;
}

html[data-theme="dark"] .page-cartera .table,
html[data-theme="dark"] .page-cartera .table-custom {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cea-text);
    --bs-table-border-color: var(--cea-border);
    --bs-table-hover-bg: var(--cea-surface-hover);
    --bs-table-hover-color: var(--cea-text);
}

html[data-theme="dark"] .page-cartera table thead th {
    background: var(--cea-surface-raised) !important;
    color: #93b5df !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-cartera table tbody td {
    background: transparent !important;
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border) !important;
}


/* =========================================================
   CIERRES
   ========================================================= */

html[data-theme="dark"]
.page-cierres
.cierres-kpi:not(.cierres-kpi-blue) {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"]
.page-cierres
.cierres-kpi:not(.cierres-kpi-blue) * {
    color: inherit;
}

html[data-theme="dark"] .page-cierres .cierres-card {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"] .page-cierres .cierres-card-header {
    background: transparent !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-cierres .cierres-table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cea-text);
    --bs-table-border-color: var(--cea-border);
    --bs-table-hover-bg: var(--cea-surface-hover);
    --bs-table-hover-color: var(--cea-text);
}

html[data-theme="dark"] .page-cierres .cierres-table thead th {
    background: var(--cea-surface-raised) !important;
    color: #93b5df !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-cierres .cierres-table tbody td {
    background: transparent !important;
    color: var(--cea-text-soft) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-cierres .cierres-table tbody td:first-child {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-cierres .cierres-pagination-wrap {
    border-color: var(--cea-border) !important;
}


/* =========================================================
   CONFIGURACION
   ========================================================= */

html[data-theme="dark"] .page-configuracion .form-card,
html[data-theme="dark"] .page-configuracion .form-card-header,
html[data-theme="dark"] .page-configuracion .form-card-body,
html[data-theme="dark"] .page-configuracion .card.rounded-4 {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-configuracion .form-card {
    box-shadow: var(--cea-shadow-md) !important;
}

html[data-theme="dark"] .page-configuracion .form-card-header {
    border-bottom-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-configuracion .bg-light,
html[data-theme="dark"] .page-configuracion .bg-light-box {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-configuracion .nav-tabs {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-configuracion .nav-tabs .nav-link {
    color: var(--cea-text-subtle) !important;
    border-color: transparent !important;
}

html[data-theme="dark"]
.page-configuracion
.nav-tabs
.nav-link:hover {
    background: var(--cea-surface-hover) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"]
.page-configuracion
.nav-tabs
.nav-link.active {
    background: var(--cea-primary-soft) !important;
    color: #60a5fa !important;
    border-color: var(--cea-border-strong) !important;
}

html[data-theme="dark"] .page-configuracion .section-title {
    color: #60a5fa !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .page-configuracion .form-label {
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"] .page-configuracion hr {
    border-color: var(--cea-border) !important;
    opacity: 1;
}


/* =========================================================
   CEA DARK CONTRAST FINAL V1 - OFFICIAL
   Correcciones finales de jerarquia y contraste.
   ========================================================= */


/* ---------------------------------------------------------
   Titulos principales de modulo
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-analitica
.analytics-heading .fw-black,

html[data-theme="dark"]
.page-cierres
.cierres-heading .fw-black,

html[data-theme="dark"]
.page-configuracion
.admin-page-heading .fw-black {
    color: var(--cea-text) !important;
}


/* ---------------------------------------------------------
   Analitica: contenido KPI
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-analitica
.analytics-kpi:not(.analytics-kpi-danger) span {
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"]
.page-analitica
.analytics-kpi:not(.analytics-kpi-danger) strong {
    color: var(--cea-text) !important;
}

html[data-theme="dark"]
.page-analitica
.analytics-kpi:not(.analytics-kpi-danger) small {
    color: var(--cea-text-subtle) !important;
}


/* ---------------------------------------------------------
   Cierres: fecha principal de cada registro
   No altera importes success/danger.
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-cierres
.cierres-table tbody td:first-child .fw-black {
    color: var(--cea-text) !important;
}


/* =========================================================
   CEA SHELL SIDEBAR AUTHORITY V1 - OFFICIAL

   El shell moderno es propietario del posicionamiento
   del sidebar. Evita conflictos con CSS legacy por modulo.
   ========================================================= */

.cea-shell > #sidebar {
    margin-left: 0 !important;
}

.cea-shell > #sidebar.collapsed {
    margin-left:
        calc(0px - var(--cea-sidebar-width)) !important;
}


/* ---------------------------------------------------------
   MOBILE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    .cea-shell > #sidebar {
        margin-left:
            calc(0px - var(--cea-sidebar-width)) !important;
    }

    .cea-shell > #sidebar.active {
        margin-left: 0 !important;
    }

    .cea-shell > #sidebar.collapsed {
        margin-left:
            calc(0px - var(--cea-sidebar-width)) !important;
    }
}
/* =========================================================
   CEA DARK PRIMITIVES V1 - OFFICIAL

   Componentes globales reutilizables en modo oscuro.
   No activa dark mode por si mismo.
   ========================================================= */


/* ---------------------------------------------------------
   MODALES
   --------------------------------------------------------- */

html[data-theme="dark"] .modal-content {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
    box-shadow: var(--cea-shadow-md) !important;
}

html[data-theme="dark"] .modal-body,
html[data-theme="dark"] .modal-footer {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}


/*
 * Headers neutrales.
 * Los headers semanticos .bg-primary / .bg-dark conservan
 * deliberadamente su identidad visual.
 */

html[data-theme="dark"] .modal-header:not(.bg-primary):not(.bg-dark),
html[data-theme="dark"] .modal-header.bg-light,
html[data-theme="dark"] .modal-header.bg-white {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .modal .modal-title,
html[data-theme="dark"] .modal .text-dark,
html[data-theme="dark"] .modal .text-black {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .modal .text-muted {
    color: var(--cea-text-subtle) !important;
}


/*
 * Un control puede declarar explicitamente .text-muted.
 * Esta regla preserva esa semantica frente a los estilos
 * globales dark de .form-control / .form-select.
 */

html[data-theme="dark"] .modal .form-control.text-muted,
html[data-theme="dark"] .modal .form-select.text-muted,
html[data-theme="dark"] .modal textarea.text-muted {
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"] .modal .bg-light,
html[data-theme="dark"] .modal .bg-white {
    background: var(--cea-surface-raised) !important;
    color: var(--cea-text) !important;
    border-color: var(--cea-border) !important;
}


/* Cierre Bootstrap sin variante btn-close-white. */

html[data-theme="dark"]
.modal
.btn-close:not(.btn-close-white) {
    filter: invert(1) grayscale(100%) brightness(200%);
    opacity: .72;
}

html[data-theme="dark"]
.modal
.btn-close:not(.btn-close-white):hover,
html[data-theme="dark"]
.modal
.btn-close:not(.btn-close-white):focus {
    opacity: 1;
}


/* ---------------------------------------------------------
   FILE INPUT
   --------------------------------------------------------- */

html[data-theme="dark"]
input[type="file"].form-control {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border-strong) !important;
    color: var(--cea-text-soft) !important;
}


/*
 * Boton nativo "Seleccionar archivo".
 * ::file-selector-button es la API moderna.
 */

html[data-theme="dark"]
input[type="file"].form-control::file-selector-button {
    background: var(--cea-surface-raised) !important;
    color: var(--cea-text-soft) !important;
    border: 0 !important;
    border-inline-end:
        1px solid var(--cea-border-strong) !important;
}

html[data-theme="dark"]
input[type="file"].form-control:hover:not(:disabled):not([readonly])::file-selector-button {
    background: var(--cea-surface-hover) !important;
    color: var(--cea-text) !important;
}


/*
 * Compatibilidad Chromium/WebKit.
 */

html[data-theme="dark"]
input[type="file"].form-control::-webkit-file-upload-button {
    background: var(--cea-surface-raised) !important;
    color: var(--cea-text-soft) !important;
    border: 0 !important;
    border-inline-end:
        1px solid var(--cea-border-strong) !important;
}

html[data-theme="dark"]
input[type="file"].form-control:hover:not(:disabled):not([readonly])::-webkit-file-upload-button {
    background: var(--cea-surface-hover) !important;
    color: var(--cea-text) !important;
}
/* =========================================================
   CEA EXPEDIENTE DARK V1 - OFFICIAL

   Tema oscuro especifico del Expediente Digital.
   El light mode original permanece intacto.
   ========================================================= */


/* ---------------------------------------------------------
   PAGE / HERO
   --------------------------------------------------------- */

html[data-theme="dark"] body.page-expediente {
    background:
        radial-gradient(
            circle at 14% 0%,
            var(--cea-primary-soft),
            transparent 28%
        ),
        var(--cea-bg) !important;

    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-expediente #content,
html[data-theme="dark"] .page-expediente .exp-main {
    color: var(--cea-text);
}

html[data-theme="dark"] .page-expediente .exp-eyebrow,
html[data-theme="dark"] .page-expediente .exp-section-title {
    color: var(--cea-primary-dark) !important;
}

html[data-theme="dark"] .page-expediente .exp-hero h2 {
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-expediente .text-muted,
html[data-theme="dark"] .page-expediente .form-text,
html[data-theme="dark"] .page-expediente .exp-date {
    color: var(--cea-text-subtle) !important;
}


/* ---------------------------------------------------------
   KPIs NEUTRALES

   El KPI .exp-kpi-blue conserva deliberadamente
   su gradiente de marca original.
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-expediente
.exp-kpi:not(.exp-kpi-blue) {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"]
.page-expediente
.exp-kpi:not(.exp-kpi-blue)::after {
    background: var(--cea-primary-soft) !important;
}

html[data-theme="dark"]
.page-expediente
.exp-kpi:not(.exp-kpi-blue) span {
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"]
.page-expediente
.exp-kpi:not(.exp-kpi-blue) strong {
    color: var(--cea-text) !important;
}


/* ---------------------------------------------------------
   CARDS
   --------------------------------------------------------- */

html[data-theme="dark"] .page-expediente .exp-card {
    background: var(--cea-surface) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

html[data-theme="dark"] .page-expediente .exp-card-header {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-expediente .exp-card-body {
    background: var(--cea-surface) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-expediente .exp-card h5,
html[data-theme="dark"] .page-expediente .exp-card h6 {
    color: var(--cea-text) !important;
}


/* ---------------------------------------------------------
   FORMULARIOS
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-expediente
.exp-card .form-control,

html[data-theme="dark"]
.page-expediente
.exp-card .form-select {
    background-color: var(--cea-surface) !important;
    border-color: var(--cea-border-strong) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"]
.page-expediente
.exp-card .form-control:focus,

html[data-theme="dark"]
.page-expediente
.exp-card .form-select:focus {
    background-color: var(--cea-surface-raised) !important;
    border-color: var(--cea-primary) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"]
.page-expediente
.exp-card input[type="file"].form-control {
    color: var(--cea-text-soft) !important;
}


/* ---------------------------------------------------------
   UPLOAD
   --------------------------------------------------------- */

html[data-theme="dark"] .page-expediente .exp-upload-box {
    background: var(--cea-surface-soft) !important;
    border-color: var(--cea-border-strong) !important;
    color: var(--cea-text) !important;
}


/* ---------------------------------------------------------
   ARCHIVOS / PLANTILLAS
   --------------------------------------------------------- */

html[data-theme="dark"] .page-expediente .exp-file-item {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-expediente .exp-template-item {
    background: var(--cea-surface-soft) !important;
    border-color: var(--cea-border) !important;
    color: var(--cea-text) !important;
}

html[data-theme="dark"] .page-expediente .exp-badge {
    background: var(--cea-primary-soft) !important;
    border-color: var(--cea-primary) !important;
    color: var(--cea-primary-dark) !important;
}

html[data-theme="dark"] .page-expediente .exp-empty {
    background: var(--cea-surface-soft) !important;
    border-color: var(--cea-border-strong) !important;
    color: var(--cea-text-subtle) !important;
}


/* ---------------------------------------------------------
   CONTRASTE DE CONTENIDO
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-expediente
.exp-file-item .fw-bold,

html[data-theme="dark"]
.page-expediente
.exp-template-item .fw-bold {
    color: var(--cea-text) !important;
}

/* =========================================================
   CEA HISTORIAL RECIBOS SWAL DARK V1 - OFFICIAL
   ========================================================= */

/*
 * SweetAlert especifico de "Recibos del alumno".
 * La clase cea-swal-recibos se asigna mediante customClass
 * para no modificar otros Swal de errores/alertas del SaaS.
 */

html[data-theme="dark"] .swal2-popup.cea-swal-recibos {
    background: var(--cea-surface) !important;
    color: var(--cea-text) !important;
    border: 1px solid var(--cea-border) !important;
    box-shadow: var(--cea-shadow-md) !important;
}


/* Titulo y contenido raiz */

html[data-theme="dark"] .cea-swal-recibos .swal2-title,
html[data-theme="dark"] .cea-swal-recibos .swal2-html-container {
    color: var(--cea-text) !important;
}


/*
 * Textos internos que heredaban directamente
 * el color light de SweetAlert.
 */

html[data-theme="dark"] .cea-swal-recibos .swal2-html-container > .text-start,
html[data-theme="dark"] .cea-swal-recibos .fw-bold,
html[data-theme="dark"] .cea-swal-recibos .fs-6 {
    color: var(--cea-text) !important;
}


/* Texto secundario */

html[data-theme="dark"] .cea-swal-recibos .text-muted {
    color: var(--cea-text-subtle) !important;
}


/*
 * Tarjeta "Recibo consolidado".
 * En HTML usa bg-light + border.
 */

html[data-theme="dark"] .cea-swal-recibos .bg-light,
html[data-theme="dark"] .cea-swal-recibos .bg-white {
    background: var(--cea-surface-soft) !important;
    color: var(--cea-text) !important;
    border-color: var(--cea-border-strong) !important;
}


/* Tabla de pagos */

html[data-theme="dark"] .cea-swal-recibos .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--cea-text-soft);
    --bs-table-border-color: var(--cea-border);
    --bs-table-hover-bg: var(--cea-surface-hover);
    --bs-table-hover-color: var(--cea-text);
    color: var(--cea-text-soft) !important;
}

html[data-theme="dark"] .cea-swal-recibos .table-light,
html[data-theme="dark"] .cea-swal-recibos thead,
html[data-theme="dark"] .cea-swal-recibos thead th {
    background: var(--cea-surface-raised) !important;
    color: var(--cea-text-subtle) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"] .cea-swal-recibos tbody td {
    color: var(--cea-text-soft);
    border-color: var(--cea-border) !important;
}


/*
 * Estado activo.
 * Se conserva semantica verde, pero sin fondo pastel light.
 */

html[data-theme="dark"]
.cea-swal-recibos
.badge.bg-success-subtle.text-success {
    background: rgba(var(--bs-success-rgb), 0.18) !important;
    color: #86efac !important;
    border-color: rgba(var(--bs-success-rgb), 0.38) !important;
}


/*
 * Estado anulado.
 * Se conserva semantica roja.
 */

html[data-theme="dark"]
.cea-swal-recibos
.badge.bg-danger-subtle.text-danger {
    background: rgba(var(--bs-danger-rgb), 0.18) !important;
    color: #fca5a5 !important;
    border-color: rgba(var(--bs-danger-rgb), 0.38) !important;
}


/*
 * Los montos anulados deben seguir siendo secundarios,
 * incluso al combinar fw-bold + text-muted.
 */

html[data-theme="dark"]
.cea-swal-recibos
.text-muted.text-decoration-line-through {
    color: var(--cea-text-subtle) !important;
}

/* ---------------------------------------------------------
   CEA HISTORIAL RECIBOS ACTIVE AMOUNT V1
   --------------------------------------------------------- */

/*
 * Conserva la semantica positiva de montos activos.
 * Debe prevalecer sobre el color general aplicado a fw-bold.
 */
html[data-theme="dark"]
.cea-swal-recibos
td.fw-bold.text-success {
    color: #86efac !important;
}

/* =========================================================
   CEA TRAMITADORES UX V2 - OFFICIAL
   ========================================================= */

/*
 * Redise?o visual aislado.
 * No modifica endpoints, permisos ni controladores JS.
 */


/* ---------------------------------------------------------
   DENSIDAD GENERAL
   --------------------------------------------------------- */

.page-tramitadores .tramitadores-page-body {
    padding: 16px !important;
    padding-top: 16px !important;
}

.page-tramitadores .tramitadores-layout-v2 {
    --bs-gutter-x: 12px;
    --bs-gutter-y: 12px;
}


/* ---------------------------------------------------------
   SUPERFICIES PRINCIPALES
   --------------------------------------------------------- */

.page-tramitadores .tramitadores-directory,
.page-tramitadores .tramitadores-register-disclosure {
    margin: 0 !important;
    overflow: hidden;
    border: 1px solid var(--cea-border, #e5e7eb) !important;
    border-radius: 14px !important;
    background: var(--cea-surface, #ffffff) !important;
    box-shadow: var(--cea-shadow-sm) !important;
}

.page-tramitadores .tramitadores-directory {
    padding: 0 !important;
}


/* ---------------------------------------------------------
   CABECERA DEL DIRECTORIO
   --------------------------------------------------------- */

.page-tramitadores .tramitadores-directory-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 14px 16px;
    border-bottom: 1px solid var(--cea-border, #e5e7eb);
    background: var(--cea-surface-raised, #f8fafc);
}

.page-tramitadores .tramitadores-directory-copy {
    min-width: 0;
}

.page-tramitadores .tramitadores-eyebrow {
    display: block;
    margin-bottom: 3px;
    color: var(--cea-primary, #2563eb);
    font-size: 10px;
    font-weight: 900;
    letter-spacing: .11em;
    line-height: 1.2;
    text-transform: uppercase;
}

.page-tramitadores .tramitadores-directory-header h6 {
    margin: 0;
    font-size: 15px;
    line-height: 1.3;
}

.page-tramitadores .tramitadores-helper {
    color: var(--cea-text-subtle, #64748b);
    font-size: 12px;
    line-height: 1.45;
}

.page-tramitadores .tramitadores-total {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    min-height: 28px;
    padding: 5px 10px;
    border: 1px solid var(--cea-border, #dbe3ef);
    border-radius: 999px;
    background: var(--cea-primary-soft, #dbeafe);
    color: var(--cea-primary-dark, #1d4ed8);
    font-size: 11px;
    font-weight: 900;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   TABLA COMPACTA
   --------------------------------------------------------- */

.page-tramitadores .tramitadores-table-wrap {
    width: 100%;
    overflow-x: auto;
}

.page-tramitadores .tramitadores-table {
    min-width: 760px;
    margin: 0;
    font-size: 12px;
}

.page-tramitadores .tramitadores-table thead th {
    padding: 10px 12px !important;
    font-size: 10px;
    letter-spacing: .06em;
    white-space: nowrap;
}

.page-tramitadores .tramitadores-table tbody tr {
    height: 48px;
}

.page-tramitadores .tramitadores-table tbody td {
    padding: 9px 12px;
    vertical-align: middle;
}

.page-tramitadores .tramitadores-action {
    min-width: 116px;
    padding: 7px 10px !important;
    border-radius: 9px !important;
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}


/* ---------------------------------------------------------
   REGISTRO PLEGABLE
   --------------------------------------------------------- */

.page-tramitadores .tramitadores-register-disclosure {
    width: 100%;
}

.page-tramitadores .tramitadores-register-summary {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 72px;
    padding: 12px 14px !important;
    cursor: pointer;
    list-style: none;
    user-select: none;
    background: var(--cea-surface-raised, #f8fafc);
}

.page-tramitadores
.tramitadores-register-summary::-webkit-details-marker {
    display: none;
}

.page-tramitadores
.tramitadores-register-summary::marker {
    content: "";
}

.page-tramitadores
.tramitadores-register-disclosure[open]
.tramitadores-register-summary {
    border-bottom: 1px solid var(--cea-border, #e5e7eb);
}

.page-tramitadores .tramitadores-register-copy {
    display: block;
    min-width: 0;
}

.page-tramitadores .tramitadores-register-copy strong {
    display: block;
    color: var(--cea-text, #0f172a);
    font-size: 14px;
    line-height: 1.3;
}

.page-tramitadores .tramitadores-register-copy small {
    display: block;
    margin-top: 3px;
    color: var(--cea-text-subtle, #64748b);
    font-size: 11px;
    line-height: 1.35;
}

.page-tramitadores .tramitadores-register-chevron {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--cea-border, #dbe3ef);
    border-radius: 9px;
    background: var(--cea-surface-soft, #f1f5f9);
    color: var(--cea-text-soft, #334155);
    font-size: 17px;
    line-height: 1;
    transition:
        transform 160ms ease,
        background-color 160ms ease;
}

.page-tramitadores
.tramitadores-register-disclosure[open]
.tramitadores-register-chevron {
    transform: rotate(180deg);
}

.page-tramitadores .tramitadores-register-body {
    padding: 14px !important;
}


/* ---------------------------------------------------------
   ELIMINAR SUPERFICIE BLANCA DIRECTA DEL FORM
   --------------------------------------------------------- */

.page-tramitadores form#formTramitador,
.page-tramitadores form#formPagoComision {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
}

.page-tramitadores
#formTramitador
.form-control {
    min-height: 46px;
    margin-bottom: 0 !important;
    border-radius: 10px !important;
}

.page-tramitadores
#formTramitador
.form-floating > label {
    padding-top: 13px;
    font-size: 12px;
}

.page-tramitadores .tramitadores-submit {
    min-height: 44px !important;
    margin-top: 0 !important;
    padding: 10px 14px !important;
    border-radius: 10px !important;
}


/* ---------------------------------------------------------
   DARK MODE
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-tramitadores
.tramitadores-directory-header,

html[data-theme="dark"]
.page-tramitadores
.tramitadores-register-summary {
    background: var(--cea-surface-raised) !important;
    border-color: var(--cea-border) !important;
}

html[data-theme="dark"]
.page-tramitadores
.tramitadores-helper,

html[data-theme="dark"]
.page-tramitadores
.tramitadores-register-copy small {
    color: var(--cea-text-subtle) !important;
}

html[data-theme="dark"]
.page-tramitadores
.tramitadores-register-copy strong {
    color: var(--cea-text) !important;
}

html[data-theme="dark"]
.page-tramitadores
.tramitadores-total {
    border-color: var(--cea-border-strong);
    background: rgba(59, 130, 246, .16);
    color: #bfdbfe;
}

html[data-theme="dark"]
.page-tramitadores
.tramitadores-register-chevron {
    border-color: var(--cea-border);
    background: var(--cea-surface-soft);
    color: var(--cea-text-soft);
}

html[data-theme="dark"]
.page-tramitadores
.tramitadores-action.btn-outline-dark,

html[data-theme="dark"]
.page-tramitadores
.tramitadores-action.btn-outline-secondary {
    border-color: var(--cea-border-strong) !important;
    background: var(--cea-surface-soft) !important;
    color: var(--cea-text-soft) !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 992px) {
    .page-tramitadores .tramitadores-layout-v2 {
        gap: 0 !important;
        row-gap: 12px !important;
    }
}


@media (max-width: 768px) {
    .page-tramitadores .tramitadores-page-body {
        padding: 12px !important;
        padding-top: 12px !important;
    }

    .page-tramitadores .tramitadores-directory-header {
        align-items: flex-start;
        flex-direction: column;
        gap: 9px;
        padding: 12px;
    }

    .page-tramitadores .tramitadores-table {
        min-width: 720px;
    }

    .page-tramitadores .tramitadores-register-summary {
        min-height: 68px;
        padding: 11px 12px !important;
    }

    .page-tramitadores .tramitadores-register-body {
        padding: 12px !important;
    }
}

/* =========================================================
   CEA FLOTA TOOLBAR UX V2 - OFFICIAL
   Toolbar SaaS profesional
   ========================================================= */


/* ---------------------------------------------------------
   CONTENEDOR
   --------------------------------------------------------- */

.page-flota .flota-action-toolbar {
    padding: 18px 20px !important;
    margin-bottom: 0 !important;

    border-radius: 16px !important;

    border:
        1px solid
        var(--cea-border, #e2e8f0) !important;

    box-shadow:
        0 10px 30px
        rgba(15, 23, 42, .055) !important;
}


.page-flota .flota-action-toolbar-inner {
    display: grid;

    grid-template-columns:
        minmax(250px, 1fr)
        auto;

    align-items: center;

    gap: 24px;
}


.page-flota .flota-action-copy {
    min-width: 0;
}


.page-flota .flota-action-eyebrow {
    color: #64748b;

    font-size: .69rem;
    font-weight: 800;

    line-height: 1.2;

    letter-spacing: .09em;
}


.page-flota .flota-action-copy h6 {
    font-size: 1rem;

    line-height: 1.25;
}


/* ---------------------------------------------------------
   GRUPOS
   --------------------------------------------------------- */

.page-flota .flota-action-groups {
    display: flex;

    align-items: center;
    justify-content: flex-end;

    gap: 12px;
}


.page-flota .flota-action-group {
    display: flex;

    align-items: center;

    gap: 7px;
}


.page-flota .flota-action-group-tools {
    padding-left: 12px;

    border-left:
        1px solid
        var(--cea-border, #e2e8f0);
}


/* ---------------------------------------------------------
   BOTONES
   --------------------------------------------------------- */

.page-flota
.flota-action-toolbar
.flota-action-btn {
    min-height: 40px;

    padding:
        8px 13px !important;

    display: inline-flex;

    align-items: center;
    justify-content: center;

    gap: 6px;

    border-radius:
        10px !important;

    font-size: .79rem;
    font-weight: 750;

    line-height: 1.15;

    white-space: nowrap;

    box-shadow:
        none !important;

    transition:
        background-color .15s ease,
        border-color .15s ease,
        color .15s ease,
        transform .15s ease;
}


.page-flota
.flota-action-toolbar
.flota-action-btn:hover {
    transform:
        translateY(-1px);
}


/* Operacion */

.page-flota .flota-action-secondary {
    color:
        #1d4ed8 !important;

    border:
        1px solid
        rgba(37, 99, 235, .25) !important;

    background:
        rgba(37, 99, 235, .055) !important;
}


.page-flota .flota-action-secondary:hover {
    color:
        #1e40af !important;

    border-color:
        rgba(37, 99, 235, .42) !important;

    background:
        rgba(37, 99, 235, .10) !important;
}


/* Herramientas */

.page-flota .flota-action-neutral {
    color:
        #334155 !important;

    border:
        1px solid
        #cbd5e1 !important;

    background:
        #f8fafc !important;
}


.page-flota .flota-action-neutral:hover {
    color:
        #0f172a !important;

    border-color:
        #94a3b8 !important;

    background:
        #f1f5f9 !important;
}


/* Papelera */

.page-flota .flota-action-trash {
    color:
        #b91c1c !important;

    border:
        1px solid
        rgba(220, 38, 38, .22) !important;

    background:
        rgba(220, 38, 38, .05) !important;
}


.page-flota .flota-action-trash:hover {
    color:
        #991b1b !important;

    border-color:
        rgba(220, 38, 38, .36) !important;

    background:
        rgba(220, 38, 38, .10) !important;
}


/* CTA principal */

.page-flota .flota-action-primary {
    padding-inline:
        16px !important;

    font-weight:
        800 !important;

    box-shadow:
        0 8px 20px
        rgba(37, 99, 235, .18) !important;
}


.page-flota .flota-action-primary:hover {
    box-shadow:
        0 10px 24px
        rgba(37, 99, 235, .24) !important;
}


/* ---------------------------------------------------------
   EXPORT MENU
   --------------------------------------------------------- */

.page-flota .flota-export-dropdown {
    position: relative;
}


.page-flota .flota-export-menu {
    min-width: 190px;

    padding: 7px;

    border-radius:
        12px;

    border:
        1px solid
        var(--cea-border, #e2e8f0);

    box-shadow:
        0 16px 38px
        rgba(15, 23, 42, .12);
}


.page-flota
.flota-export-menu
.dropdown-item {
    padding:
        9px 10px;

    border-radius:
        8px;

    font-size:
        .82rem;

    font-weight:
        650;
}


.page-flota
.flota-export-menu
.dropdown-divider {
    margin:
        6px 4px;
}


/* ---------------------------------------------------------
   PANELES FUNCIONALES
   El panel cerrado no debe dejar hueco.
   --------------------------------------------------------- */

.page-flota .flota-hidden-toolbox {
    margin-bottom:
        0 !important;
}


.page-flota
.flota-hidden-toolbox:has(> div[id].d-none) {
    display:
        none !important;
}


.page-flota #flotaTabs {
    margin-top:
        18px !important;
}


/* ---------------------------------------------------------
   DIRECTORIO
   --------------------------------------------------------- */

.page-flota .flota-section-heading {
    display: flex;

    align-items: center;

    min-height: 40px;
}


.page-flota
.flota-section-heading
h5 {
    letter-spacing:
        -.025em;
}


/* =========================================================
   DARK
   ========================================================= */

html[data-theme="dark"]
.page-flota
.flota-action-toolbar {
    background:
        var(--cea-surface) !important;

    border-color:
        var(--cea-border) !important;

    box-shadow:
        var(--cea-shadow-sm) !important;
}


html[data-theme="dark"]
.page-flota
.flota-action-eyebrow {
    color:
        var(--cea-text-subtle) !important;
}


html[data-theme="dark"]
.page-flota
.flota-action-group-tools {
    border-left-color:
        var(--cea-border) !important;
}


html[data-theme="dark"]
.page-flota
.flota-action-secondary {
    color:
        #60a5fa !important;

    border-color:
        rgba(96, 165, 250, .34) !important;

    background:
        rgba(59, 130, 246, .08) !important;
}


html[data-theme="dark"]
.page-flota
.flota-action-secondary:hover {
    color:
        #93c5fd !important;

    border-color:
        rgba(96, 165, 250, .48) !important;

    background:
        rgba(59, 130, 246, .15) !important;
}


html[data-theme="dark"]
.page-flota
.flota-action-neutral {
    color:
        var(--cea-text-soft) !important;

    border-color:
        var(--cea-border-strong) !important;

    background:
        var(--cea-surface-raised) !important;
}


html[data-theme="dark"]
.page-flota
.flota-action-neutral:hover {
    color:
        var(--cea-text) !important;

    background:
        var(--cea-surface-hover) !important;
}


html[data-theme="dark"]
.page-flota
.flota-action-trash {
    color:
        #fca5a5 !important;

    border-color:
        rgba(248, 113, 113, .30) !important;

    background:
        rgba(248, 113, 113, .07) !important;
}


html[data-theme="dark"]
.page-flota
.flota-action-trash:hover {
    color:
        #fecaca !important;

    border-color:
        rgba(248, 113, 113, .44) !important;

    background:
        rgba(248, 113, 113, .13) !important;
}


html[data-theme="dark"]
.page-flota
.flota-action-primary {
    color:
        #ffffff !important;
}


html[data-theme="dark"]
.page-flota
.flota-export-menu {
    background:
        var(--cea-surface-raised) !important;

    border-color:
        var(--cea-border) !important;
}


html[data-theme="dark"]
.page-flota
.flota-export-menu
.dropdown-item {
    color:
        var(--cea-text-soft) !important;

    background:
        transparent !important;
}


html[data-theme="dark"]
.page-flota
.flota-export-menu
.dropdown-item:hover,

html[data-theme="dark"]
.page-flota
.flota-export-menu
.dropdown-item:focus {
    color:
        var(--cea-text) !important;

    background:
        var(--cea-surface-hover) !important;
}


html[data-theme="dark"]
.page-flota
.flota-export-menu
.dropdown-divider {
    border-color:
        var(--cea-border) !important;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1199px) {

    .page-flota
    .flota-action-toolbar-inner {
        grid-template-columns:
            1fr;

        gap:
            14px;
    }


    .page-flota
    .flota-action-groups {
        width:
            100%;

        justify-content:
            space-between;
    }

}


/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 768px) {

    .page-flota
    .flota-action-toolbar {
        padding:
            15px !important;

        border-radius:
            14px !important;
    }


    .page-flota
    .flota-action-toolbar-inner {
        gap:
            12px;
    }


    .page-flota
    .flota-action-groups {
        display:
            grid;

        grid-template-columns:
            1fr;

        gap:
            9px;
    }


    .page-flota
    .flota-action-group {
        width:
            100%;
    }


    .page-flota
    .flota-action-group-operation {
        display:
            grid;

        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );

        gap:
            7px;
    }


    .page-flota
    .flota-action-group-tools {
        display:
            grid;

        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap:
            7px;

        padding-left:
            0;

        padding-top:
            9px;

        border-left:
            0;

        border-top:
            1px solid
            var(--cea-border, #e2e8f0);
    }


    .page-flota
    .flota-export-dropdown {
        width:
            100%;
    }


    .page-flota
    .flota-export-dropdown
    > .btn {
        width:
            100%;
    }


    .page-flota
    .flota-action-primary {
        grid-column:
            1 / -1;

        width:
            100%;
    }


    .page-flota
    .flota-action-toolbar
    .flota-action-btn {
        min-height:
            42px;

        padding-inline:
            9px !important;

        font-size:
            .74rem;
    }


    .page-flota #flotaTabs {
        margin-top:
            14px !important;
    }

}


/* =========================================================
   MOBILE COMPACTO
   ========================================================= */

@media (max-width: 420px) {

    .page-flota
    .flota-action-group-operation {
        grid-template-columns:
            1fr;
    }


    .page-flota
    .flota-action-group-tools {
        grid-template-columns:
            1fr;
    }


    .page-flota
    .flota-action-primary {
        grid-column:
            auto;
    }

}

/* =========================================================
   CEA FLOTA DARK SURFACES FINAL - OFFICIAL
   Estados dinamicos de Alertas y Papelera
   ========================================================= */


/* ---------------------------------------------------------
   ALERTAS DE FLOTA
   Las tarjetas son generadas dinamicamente por JS con
   bg-light / text-dark.
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-flota
#listaAlertasFlotaCompacta
> .d-flex.bg-light {
    background:
        var(--cea-surface-raised) !important;

    color:
        var(--cea-text-soft) !important;

    border-top:
        1px solid
        var(--cea-border) !important;

    border-right:
        1px solid
        var(--cea-border) !important;

    border-bottom:
        1px solid
        var(--cea-border) !important;

    box-shadow:
        0 5px 14px
        rgba(0, 0, 0, .10);
}


html[data-theme="dark"]
.page-flota
#listaAlertasFlotaCompacta
.text-dark {
    color:
        var(--cea-text) !important;
}


html[data-theme="dark"]
.page-flota
#listaAlertasFlotaCompacta
.text-muted {
    color:
        var(--cea-text-subtle) !important;
}


/*
 * Estado sin alertas.
 */

html[data-theme="dark"]
.page-flota
#listaAlertasFlotaCompacta
.alert-success {
    background:
        rgba(34, 197, 94, .10) !important;

    color:
        #86efac !important;

    border-color:
        rgba(34, 197, 94, .24) !important;
}


/*
 * Error cargando alertas.
 */

html[data-theme="dark"]
.page-flota
#listaAlertasFlotaCompacta
.alert-danger {
    background:
        rgba(248, 113, 113, .10) !important;

    color:
        #fca5a5 !important;

    border-color:
        rgba(248, 113, 113, .26) !important;
}


/* ---------------------------------------------------------
   PAPELERA
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-flota
#papeleraVehiculosContenido
.alert-light {
    background:
        var(--cea-surface-raised) !important;

    color:
        var(--cea-text-soft) !important;

    border-color:
        var(--cea-border) !important;

    box-shadow:
        none !important;
}


/*
 * Carga / estado secundario.
 */

html[data-theme="dark"]
.page-flota
#papeleraVehiculosContenido
.text-muted {
    color:
        var(--cea-text-subtle) !important;
}


/*
 * Error de papelera.
 */

html[data-theme="dark"]
.page-flota
#papeleraVehiculosContenido
.alert-danger {
    background:
        rgba(248, 113, 113, .10) !important;

    color:
        #fca5a5 !important;

    border-color:
        rgba(248, 113, 113, .26) !important;
}


/* ---------------------------------------------------------
   PANELES ABIERTOS
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-flota
#detalleAlertasFlota,

html[data-theme="dark"]
.page-flota
#panelDocumentosVehiculo,

html[data-theme="dark"]
.page-flota
#panelGestionVehiculo,

html[data-theme="dark"]
.page-flota
#panelFiltroMantenimientos,

html[data-theme="dark"]
.page-flota
#papeleraVehiculosPanel {
    border-color:
        var(--cea-border) !important;
}


/* ---------------------------------------------------------
   RESPONSIVE
   --------------------------------------------------------- */

@media (max-width: 768px) {

    html[data-theme="dark"]
    .page-flota
    #listaAlertasFlotaCompacta
    > .d-flex.bg-light {
        gap:
            10px !important;
    }


    html[data-theme="dark"]
    .page-flota
    #papeleraVehiculosContenido
    .alert-light {
        padding:
            12px !important;
    }

}

/* =========================================================
   CEA FLOTA SWEETALERT DARK V1 - OFFICIAL
   SweetAlert2 integrado al Design System
   ========================================================= */


/* ---------------------------------------------------------
   POPUP
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-flota
.swal2-popup {
    background:
        var(--cea-surface-raised) !important;

    color:
        var(--cea-text) !important;

    border:
        1px solid
        var(--cea-border) !important;

    border-radius:
        16px !important;

    box-shadow:
        0 24px 70px
        rgba(0, 0, 0, .42) !important;
}


/* ---------------------------------------------------------
   TITULO / CONTENIDO
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-flota
.swal2-title {
    color:
        var(--cea-text) !important;
}


html[data-theme="dark"]
.page-flota
.swal2-html-container {
    color:
        var(--cea-text-subtle) !important;
}


/* ---------------------------------------------------------
   INPUTS
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-flota
.swal2-input,

html[data-theme="dark"]
.page-flota
.swal2-textarea,

html[data-theme="dark"]
.page-flota
.swal2-select {
    background:
        var(--cea-surface) !important;

    color:
        var(--cea-text) !important;

    border:
        1px solid
        var(--cea-border-strong) !important;

    border-radius:
        10px !important;

    box-shadow:
        none !important;
}


html[data-theme="dark"]
.page-flota
.swal2-input:focus,

html[data-theme="dark"]
.page-flota
.swal2-textarea:focus,

html[data-theme="dark"]
.page-flota
.swal2-select:focus {
    border-color:
        var(--cea-primary) !important;

    box-shadow:
        0 0 0 3px
        rgba(59, 130, 246, .14) !important;
}


html[data-theme="dark"]
.page-flota
.swal2-input::placeholder,

html[data-theme="dark"]
.page-flota
.swal2-textarea::placeholder {
    color:
        var(--cea-text-subtle) !important;

    opacity:
        1;
}


/* ---------------------------------------------------------
   BOTONES
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-flota
.swal2-confirm {
    border-radius:
        9px !important;

    font-weight:
        700 !important;

    box-shadow:
        none !important;
}


html[data-theme="dark"]
.page-flota
.swal2-cancel {
    background:
        var(--cea-surface-soft) !important;

    color:
        var(--cea-text-soft) !important;

    border:
        1px solid
        var(--cea-border-strong) !important;

    border-radius:
        9px !important;

    font-weight:
        700 !important;

    box-shadow:
        none !important;
}


html[data-theme="dark"]
.page-flota
.swal2-cancel:hover {
    background:
        var(--cea-surface-hover) !important;

    color:
        var(--cea-text) !important;
}


/* ---------------------------------------------------------
   VALIDACION
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-flota
.swal2-validation-message {
    background:
        rgba(248, 113, 113, .10) !important;

    color:
        #fca5a5 !important;
}


/* ---------------------------------------------------------
   CLOSE
   --------------------------------------------------------- */

html[data-theme="dark"]
.page-flota
.swal2-close {
    color:
        var(--cea-text-subtle) !important;
}


html[data-theme="dark"]
.page-flota
.swal2-close:hover {
    color:
        var(--cea-text) !important;
}
/* =========================================================
   CEA SIDEBAR BOX MODEL V1 - OFFICIAL
   El sidebar global conserva dimensiones identicas
   independientemente del CSS cargado por cada modulo.
   ========================================================= */

.cea-shell > #sidebar,
.cea-shell > #sidebar *,
.cea-shell > #sidebar *::before,
.cea-shell > #sidebar *::after {
    box-sizing: border-box;
}
/* =========================================================
   CEA SIDEBAR SELF-CONTAINED LAYOUT V1 - OFFICIAL
   El sidebar no depende de Bootstrap ni del CSS local
   del modulo para establecer su layout vertical.
   ========================================================= */

#sidebar > .cea-sidebar-body {
    display: flex !important;
    flex-direction: column !important;

    flex: 1 1 auto;
    min-height: 0;

    overflow-x: hidden;
    overflow-y: auto;
}