/* Tipografía de marca (27/09): Plus Jakarta Sans (títulos) + Inter (texto). Inter usa los mismos woff2 que HostedFonts (public/fonts/studio/inter): una sola descarga por peso aunque la página declare las dos @font-face. */
/* Fuentes servidas desde Acatudy (05/10/2026), no desde Google Fonts: sin la petición encadenada que bloqueaba
   la primera pintura (PageSpeed). Solo latino y latino extendido. Outfit: títulos de la web pública y del panel. */
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/studio/inter/inter-latin-ext-wght-normal.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('../fonts/studio/inter/inter-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/outfit-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Outfit'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('../fonts/outfit-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 600 800; font-display: swap; src: url('../fonts/plus-jakarta-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
/* ==========================================================================
   ACATUDY DESIGN SYSTEM
   --------------------------------------------------------------------------
   Sistema de diseño propio de Acatudy. Sin framework CSS ni build step:
   tokens (--u-*) + componentes (u-*) servidos tal cual desde public/css.

   - El COLOR DE MARCA lo fija el tenant via --brand-primary / --brand-*
     (BrandingService); aquí solo hay fallbacks neutros.
   - MODO CLARO, suave y colorido por defecto (fondos pastel, tarjetas con
     color). Modo oscuro con <html data-u-theme="dark"> o
     prefers-color-scheme en <html data-u-theme="auto">.
   - Tipografía: stack de sistema (sin fuentes externas).
   ========================================================================== */

:root {
    /* ACATUDY root palette: every platform surface derives from these tokens. */
    --acat-primary-dark: #10172A;
    --acat-secondary: #2563EC;
    --acat-accent: #07B6D5;
    --acat-light: #F9FAFC;
    --acat-primary-dark-rgb: 16, 23, 42;
    --acat-secondary-rgb: 37, 99, 236;
    --acat-accent-rgb: 7, 182, 213;

    /* Superficies (claro por defecto: fondos suaves, tarjetas blancas) */
    --u-bg: var(--acat-light);
    --u-surface: #ffffff;
    --u-surface-2: #F1F5F9;
    --u-line: #E2E8F0;

    /* Texto */
    --u-text: var(--acat-primary-dark);
    --u-text-dim: #64748B;

    /* Marca (el tenant la pisa con --brand-primary) */
    --u-primary: var(--brand-primary, var(--acat-secondary));
    --u-primary-strong: var(--brand-primary-dark, var(--acat-primary-dark));
    --u-primary-soft: rgba(var(--acat-accent-rgb), 0.16);
    --u-on-primary: var(--brand-on-primary, #ffffff);

    /* Estado (vivos pero suaves) */
    --u-success: #15803d; /* BUG-014: tonos 700, ≥ 4,5:1 como texto sobre blanco */
    --u-danger: #b91c1c;
    --u-warning: #b45309;
    --u-info: var(--acat-secondary);

    /* Radios */
    --u-radius-sm: 8px;
    --u-radius: 12px;
    --u-radius-lg: 18px;

    /* Sombras suaves */
    --u-shadow-sm: 0 1px 3px rgba(var(--acat-primary-dark-rgb), 0.07);
    --u-shadow: 0 10px 24px rgba(var(--acat-primary-dark-rgb), 0.10);
    --u-shadow-lg: 0 24px 48px rgba(var(--acat-primary-dark-rgb), 0.14);

    /* Tipografía (stack de sistema, cero dependencias) */
    --u-font-display: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --u-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    --u-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

    /* Espaciado */
    --u-space-1: 4px;
    --u-space-2: 8px;
    --u-space-3: 12px;
    --u-space-4: 16px;
    --u-space-5: 24px;
    --u-space-6: 32px;
    --u-space-7: 48px;
    --u-space-8: 64px;

    /* Métricas de layout */
    --u-topbar-h: 60px;
    --u-sidebar-w: 250px;
    --u-container: 1120px;
}

/* Modo oscuro explícito */
html[data-u-theme="dark"] {
    --u-bg: var(--acat-primary-dark);
    --u-surface: #17213A;
    --u-surface-2: #22304E;
    --u-line: #34476B;
    --u-text: var(--acat-light);
    --u-text-dim: #CBD5E1;
    --u-primary: var(--brand-primary, var(--acat-secondary));
    --u-primary-strong: var(--brand-primary-dark, var(--acat-primary-dark));
    --u-primary-soft: rgba(var(--acat-accent-rgb), 0.18);
    --u-on-primary: var(--brand-on-primary, #ffffff);
    --u-success: #34d399;
    --u-danger: #f87171;
    --u-warning: #fbbf24;
    --u-info: #60a5fa;
    --u-shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.4);
    --u-shadow: 0 10px 30px rgba(2, 6, 23, 0.45);
    --u-shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.55);
}

/* Modo oscuro automático */
@media (prefers-color-scheme: dark) {
    html[data-u-theme="auto"] {
        --u-bg: var(--acat-primary-dark);
        --u-surface: #17213A;
        --u-surface-2: #22304E;
        --u-line: #34476B;
        --u-text: var(--acat-light);
        --u-text-dim: #CBD5E1;
        --u-primary: var(--brand-primary, var(--acat-secondary));
        --u-primary-strong: var(--brand-primary-dark, var(--acat-primary-dark));
        --u-primary-soft: rgba(var(--acat-accent-rgb), 0.18);
        --u-on-primary: var(--brand-on-primary, #ffffff);
        --u-success: #34d399;
        --u-danger: #f87171;
        --u-warning: #fbbf24;
        --u-info: #60a5fa;
        --u-shadow-sm: 0 1px 3px rgba(2, 6, 23, 0.4);
        --u-shadow: 0 10px 30px rgba(2, 6, 23, 0.45);
        --u-shadow-lg: 0 24px 60px rgba(2, 6, 23, 0.55);
    }
}

/* --------------------------------------------------------------------------
   Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

.u-body {
    margin: 0;
    background: var(--u-bg);
    /* Fondo suave y colorido: veladuras pastel fijas (sin fotos) */
    background-image:
        radial-gradient(60vw 60vw at 85% -10%, rgba(var(--acat-secondary-rgb), 0.10), transparent 60%),
        radial-gradient(50vw 50vw at -10% 40%, rgba(var(--acat-accent-rgb), 0.10), transparent 60%),
        radial-gradient(45vw 45vw at 70% 110%, rgba(var(--acat-secondary-rgb), 0.06), transparent 60%);
    background-attachment: fixed;
    color: var(--u-text);
    font-family: var(--u-font-body);
    font-size: 15px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    min-height: 100vh;
}
html[data-u-theme="dark"] .u-body { background-image: none; }
@media (prefers-color-scheme: dark) {
    html[data-u-theme="auto"] .u-body { background-image: none; }
}

.u-body h1, .u-body h2, .u-body h3, .u-body h4 {
    font-family: var(--u-font-display);
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin: 0 0 var(--u-space-3);
}

/* Enlaces con la marca legible sobre claro (--brand-primary-text la calcula el
   layout del tenant con BrandingService; sin tenant, el color de marca). */
.u-body :where(a) { color: var(--brand-primary-text, var(--u-primary)); text-decoration: none; }
.u-body a:hover { text-decoration: underline; }
.u-body img { max-width: 100%; }

.u-container { max-width: var(--u-container); margin: 0 auto; padding: 0 var(--u-space-5); }
.u-container-sm { max-width: 460px; margin: 0 auto; padding: 0 var(--u-space-5); }

.u-text-dim { color: var(--u-text-dim); }
.u-text-center { text-align: center; }
.u-mt-4 { margin-top: var(--u-space-4); }
.u-mt-5 { margin-top: var(--u-space-5); }
.u-mt-6 { margin-top: var(--u-space-6); }
.u-mb-4 { margin-bottom: var(--u-space-4); }
.u-mb-5 { margin-bottom: var(--u-space-5); }

/* Grid de tarjetas responsiva */
.u-grid { display: grid; gap: var(--u-space-5); }
.u-grid-2 { grid-template-columns: 1fr; }
.u-grid-3 { grid-template-columns: 1fr; }
.u-grid-4 { grid-template-columns: 1fr; }
/* Revisión visual (2026-10-04): rejillas de campos de formulario: el espacio
   vertical lo da el margen de cada .u-field (16 px), también al apilarse en
   móvil; antes se sumaba el hueco de la rejilla (40 px entre unos campos y
   16 entre otros). */
.u-grid:has(> .u-field) { row-gap: 0; }
@media (min-width: 720px) {
    .u-grid-2 { grid-template-columns: repeat(2, 1fr); }
    .u-grid-3 { grid-template-columns: repeat(3, 1fr); }
    .u-grid-4 { grid-template-columns: repeat(4, 1fr); }
}

.u-flex { display: flex; align-items: center; gap: var(--u-space-3); }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--u-space-3); }
.u-flex-wrap { flex-wrap: wrap; }

/* --------------------------------------------------------------------------
   Botones
   -------------------------------------------------------------------------- */
.u-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--u-space-2);
    padding: 10px 20px;
    border-radius: var(--u-radius);
    border: 1px solid transparent;
    background: var(--u-surface-2);
    color: var(--u-text);
    font-family: var(--u-font-body);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.3;
    cursor: pointer;
    text-decoration: none;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.u-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: var(--u-shadow-sm); }
.u-btn:active { transform: translateY(0); }

.u-btn-primary { background: var(--u-primary); color: var(--u-on-primary); }
.u-btn-primary:hover { background: var(--u-primary-strong); color: var(--u-on-primary); }

.u-btn-outline { background: transparent; border-color: var(--u-line); color: var(--u-text); }
.u-btn-outline:hover { border-color: var(--u-text-dim); }

.u-btn-ghost { background: transparent; color: var(--u-text-dim); }
.u-btn-ghost:hover { color: var(--u-text); box-shadow: none; }

.u-btn-danger { background: var(--u-danger); color: #1a0505; }

.u-btn-sm { padding: 6px 14px; font-size: 13px; border-radius: var(--u-radius-sm); }
.u-btn-lg { padding: 14px 28px; font-size: 16px; }
.u-btn-block { width: 100%; }

/* --------------------------------------------------------------------------
   Tarjetas
   -------------------------------------------------------------------------- */
.u-card {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    padding: var(--u-space-5);
    box-shadow: var(--u-shadow-sm);
}
.u-card-hover { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.u-card-hover:hover { transform: translateY(-2px); box-shadow: var(--u-shadow); border-color: var(--u-primary); }
.u-card-highlight { border-color: var(--u-primary); box-shadow: 0 0 0 1px var(--u-primary), var(--u-shadow); }

/* --------------------------------------------------------------------------
   Formularios
   -------------------------------------------------------------------------- */
.u-field { margin-bottom: var(--u-space-4); }
.u-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--u-text-dim);
    margin-bottom: var(--u-space-2);
}

.u-input, .u-select, .u-textarea {
    width: 100%;
    background: var(--u-bg);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    padding: 11px 14px;
    color: var(--u-text);
    font-family: var(--u-font-body);
    font-size: 14px;
    outline: none;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.u-input::placeholder, .u-textarea::placeholder { color: var(--u-text-dim); opacity: 0.7; }
.u-input:focus, .u-select:focus, .u-textarea:focus {
    border-color: var(--u-primary);
    box-shadow: 0 0 0 3px var(--u-primary-soft);
}

.u-input-group { display: flex; align-items: stretch; }
.u-input-group .u-input { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.u-input-addon {
    display: inline-flex;
    align-items: center;
    padding: 0 14px;
    background: var(--u-surface-2);
    border: 1px solid var(--u-line);
    border-left: 0;
    border-top-right-radius: var(--u-radius);
    border-bottom-right-radius: var(--u-radius);
    color: var(--u-text-dim);
    font-size: 13px;
    white-space: nowrap;
}

.u-check { display: flex; align-items: center; gap: var(--u-space-2); font-size: 14px; color: var(--u-text-dim); }
.u-check input { accent-color: var(--u-primary); width: 16px; height: 16px; }

.u-error { color: var(--u-danger); font-size: 12px; margin-top: var(--u-space-1); }

/* --------------------------------------------------------------------------
   Alertas y badges
   -------------------------------------------------------------------------- */
.u-alert {
    border-radius: var(--u-radius);
    padding: var(--u-space-3) var(--u-space-4);
    font-size: 14px;
    border: 1px solid transparent;
    margin-bottom: var(--u-space-4);
}
.u-alert ul { margin: 0; padding-left: 18px; }
.u-alert-success { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.35); color: var(--u-success); }
.u-alert-danger { background: rgba(248, 113, 113, 0.12); border-color: rgba(248, 113, 113, 0.35); color: var(--u-danger); }
.u-alert-info { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.35); color: var(--u-info); }
.u-alert-warning { background: rgba(251, 191, 36, 0.12); border-color: rgba(251, 191, 36, 0.35); color: var(--u-warning); }

.u-badge {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
    background: var(--u-surface-2);
    color: var(--u-text-dim);
    border: 1px solid var(--u-line);
}
/* WCAG 1.4.3: sobre el gris del fondo de la insignia, el texto atenuado daba 4,3:1. */
html:not([data-u-theme="dark"]) .u-badge:not([class*="u-badge-"]) { color: #475569; }
.u-badge-primary { background: var(--u-primary-soft); color: var(--u-primary); border-color: transparent; }
.u-badge-success { background: rgba(52, 211, 153, 0.15); color: var(--u-success); border-color: transparent; }
.u-badge-danger { background: rgba(248, 113, 113, 0.15); color: var(--u-danger); border-color: transparent; }
.u-badge-warning { background: rgba(251, 191, 36, 0.15); color: var(--u-warning); border-color: transparent; }

/* --------------------------------------------------------------------------
   Tablas
   -------------------------------------------------------------------------- */
.u-table-wrap { position: relative; /* contiene los .sr-only absolutos: si no, ensanchan la página en móvil */ overflow-x: auto; border: 1px solid var(--u-line); border-radius: var(--u-radius-lg); background: var(--u-surface); }
.u-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.u-table th {
    text-align: left;
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--u-text-dim);
    padding: var(--u-space-3) var(--u-space-4);
    border-bottom: 1px solid var(--u-line);
    background: var(--u-surface-2);
}
.u-table td { padding: var(--u-space-3) var(--u-space-4); border-bottom: 1px solid var(--u-line); }
.u-table tr:last-child td { border-bottom: 0; }
.u-table tbody tr { transition: background-color .15s ease; }
.u-table tbody tr:nth-child(even) { background: color-mix(in srgb, var(--u-surface-2) 45%, transparent); }
.u-table tbody tr:hover { background: var(--u-surface-2); }

/* --------------------------------------------------------------------------
   Topbar / navegación
   -------------------------------------------------------------------------- */
.u-topbar {
    position: sticky;
    top: 0;
    z-index: 100;
    height: var(--u-topbar-h);
    display: flex;
    align-items: center;
    gap: var(--u-space-5);
    padding: 0 var(--u-space-5);
    background: var(--u-bg);
    background: color-mix(in srgb, var(--u-bg) 82%, transparent);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--u-line);
}
.u-topbar-brand {
    display: flex;
    align-items: center;
    gap: var(--u-space-3);
    font-family: var(--u-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--u-text);
    letter-spacing: -0.01em;
}
.u-topbar-brand:hover { text-decoration: none; }
.u-topbar-brand img { max-height: 34px; width: auto; }
.u-topbar-spacer { flex: 1; }

.u-nav { display: flex; align-items: center; gap: var(--u-space-1); }
.u-nav-link {
    padding: 8px 14px;
    border-radius: var(--u-radius-sm);
    color: var(--u-text-dim);
    font-size: 14px;
    font-weight: 600;
    transition: color 0.15s ease, background 0.15s ease;
}
.u-nav-link:hover { color: var(--u-text); background: var(--u-surface-2); text-decoration: none; }
.u-nav-link.active { color: var(--u-primary); background: var(--u-primary-soft); }

/* --------------------------------------------------------------------------
   Sidebar (admin)
   -------------------------------------------------------------------------- */
.u-layout { display: flex; min-height: 100vh; }
.u-sidebar {
    width: var(--u-sidebar-w);
    flex-shrink: 0;
    background: var(--u-surface);
    border-right: 1px solid var(--u-line);
    padding: var(--u-space-5) var(--u-space-4);
    position: sticky;
    top: 0;
    height: 100vh;
    overflow-y: auto;
}
.u-sidebar-brand {
    display: flex;
    align-items: center;
    gap: var(--u-space-3);
    font-weight: 800;
    font-size: 17px;
    color: var(--u-text);
    margin-bottom: var(--u-space-6);
    padding: 0 var(--u-space-2);
}
.u-sidebar-brand:hover { text-decoration: none; }
.u-sidebar-brand img { max-height: 30px; width: auto; }
.u-sidebar-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--u-text-dim);
    margin: var(--u-space-5) var(--u-space-2) var(--u-space-2);
}
.u-sidebar-link {
    display: flex;
    align-items: center;
    gap: var(--u-space-3);
    padding: 9px 12px;
    border-radius: var(--u-radius-sm);
    color: var(--u-text-dim);
    font-size: 14px;
    font-weight: 500;
}
.u-sidebar-link:hover { color: var(--u-text); background: var(--u-surface-2); text-decoration: none; }
.u-sidebar-link.active { color: var(--u-primary); background: var(--u-primary-soft); font-weight: 600; }
.u-sidebar-link svg, .u-sidebar-link i { width: 16px; height: 16px; flex-shrink: 0; }

.u-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.u-content { flex: 1; padding: var(--u-space-6); }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.u-footer {
    border-top: 1px solid var(--u-line);
    padding: var(--u-space-6) var(--u-space-5);
    color: var(--u-text-dim);
    font-size: 13px;
}
.u-footer a { color: var(--u-text-dim); }
.u-footer a:hover { color: var(--u-text); }
.u-footer-inner {
    max-width: var(--u-container);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--u-space-4);
    flex-wrap: wrap;
}
.u-footer-links { display: flex; gap: var(--u-space-5); }

/* --------------------------------------------------------------------------
   Auth (guest)
   -------------------------------------------------------------------------- */
.u-auth {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--u-space-6) var(--u-space-4);
    position: relative;
    overflow: hidden;
}
.u-auth::before {
    content: '';
    position: absolute;
    width: 60vw;
    height: 60vw;
    top: -30vw;
    background: radial-gradient(circle, var(--u-primary-soft) 0%, transparent 60%);
    filter: blur(60px);
    pointer-events: none;
}
.u-auth-panel {
    position: relative;
    width: 100%;
    max-width: 420px;
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    padding: var(--u-space-6);
    box-shadow: var(--u-shadow-lg);
}
.u-auth-brand {
    text-align: center;
    font-family: var(--u-font-display);
    font-weight: 800;
    font-size: 20px;
    margin-bottom: var(--u-space-2);
}
.u-auth-brand img { max-height: 44px; margin-bottom: var(--u-space-3); }
/* Logo de Acatudy (display:block): centrado y enlazado a la portada. */
.u-auth-brand .u-brand-logo { margin-inline: auto; }
.u-auth-brand-link { display: inline-block; }
.u-auth-subtitle { text-align: center; color: var(--u-text-dim); font-size: 14px; margin-bottom: var(--u-space-6); }
/* Selector de idioma sobre la tarjeta: alineado con su borde derecho, en
   píldora con contraste y área táctil de 32 px (no se solapa con los zorros,
   que van centrados encima de la tarjeta). */
.u-auth-locale { position: relative; z-index: 1; width: 100%; max-width: 420px; display: flex; justify-content: flex-end; margin-bottom: 10px; color: var(--u-text); }
.u-auth-locale .u-locale { padding: 2px; border: 1px solid var(--u-line); border-radius: 999px; background: var(--u-surface); font-size: 13px; line-height: 1; }
.u-auth-locale .u-locale-link { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 32px; padding: 0 10px; border-radius: 999px; color: var(--u-text); }
.u-auth-locale .u-locale-link:hover { background: var(--u-surface-2, rgba(15, 23, 42, .06)); }
.u-auth-locale .u-locale-btn { height: 32px; gap: 6px; font-size: 13px; }
.u-auth-locale .u-locale-btn[aria-expanded="true"] { background: var(--u-surface-2, rgba(15, 23, 42, .06)); }
.u-auth-locale .u-locale-flag { width: 18px; height: 12px; }
/* Sugerencias de dominio del campo email (public/js/email-domain-suggest.js). */
.u-email-suggest {
    position: absolute; z-index: 20; margin: 0; padding: 6px; list-style: none;
    max-height: 240px; overflow-y: auto;
    background: var(--u-surface); color: var(--u-text);
    border: 1px solid var(--u-line); border-radius: var(--u-radius, 12px);
    box-shadow: 0 16px 36px -14px rgba(15, 23, 42, .38);
    font-size: 15px;
}
.u-email-suggest[hidden] { display: none; }
.u-email-suggest-item { padding: 10px 12px; min-height: 40px; box-sizing: border-box; border-radius: 8px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.u-email-suggest-item.is-active, .u-email-suggest-item:hover { background: var(--u-surface-2, #f1f5f9); }
.u-email-suggest-item.is-active { box-shadow: inset 0 0 0 2px var(--u-primary, #2563eb); }
.u-auth-footer { position: relative; margin-top: var(--u-space-6); color: var(--u-text-dim); font-size: 13px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--u-space-2) var(--u-space-5); max-width: 420px; text-align: center; }
/* Cada enlace en una pieza: en móvil salta la línea entera, no la mitad. */
.u-auth-footer > * { white-space: nowrap; }
.u-auth-footer a { color: var(--u-text-dim); }

/* --------------------------------------------------------------------------
   Impersonation banner
   -------------------------------------------------------------------------- */
.u-banner-impersonation {
    background: var(--u-warning);
    color: #3a2a00;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: var(--u-space-2) var(--u-space-4);
}
.u-banner-impersonation a, .u-banner-impersonation button { color: #3a2a00; font-weight: 700; text-decoration: underline; }

/* --------------------------------------------------------------------------
   Paginación (Paginator::useBootstrapFive genera este markup; aquí se
   estila con tokens Acatudy para no depender de Bootstrap CSS)
   -------------------------------------------------------------------------- */
.pagination { display: flex; gap: 4px; list-style: none; padding: 0; margin: 0; flex-wrap: wrap; }
.page-link {
    display: inline-block;
    padding: 7px 13px;
    border-radius: var(--u-radius-sm);
    border: 1px solid var(--u-line);
    background: var(--u-surface);
    color: var(--u-text-dim);
    font-size: 14px;
    text-decoration: none;
}
.page-link:hover { color: var(--u-text); border-color: var(--u-text-dim); }
.page-item.active .page-link { background: var(--u-primary); border-color: var(--u-primary); color: var(--u-on-primary); }
.page-item.disabled .page-link { opacity: 0.45; pointer-events: none; }

/* Utilidad: solo visible en pantallas pequeñas / grandes */
.u-only-mobile { display: none; }
@media (max-width: 900px) {
    .u-sidebar { display: none; }
    .u-only-mobile { display: block; }
}

/* --------------------------------------------------------------------------
   Tarjetas con color (pastel) e iconos emoji — look "básico y colorido"
   -------------------------------------------------------------------------- */
.u-emoji { display: block; font-size: 1.9rem; line-height: 1; margin-bottom: var(--u-space-3); }

.u-card-tint-1 { background: #eef2ff; border-color: #dfe4fb; }
.u-card-tint-2 { background: #ecfdf5; border-color: #d3f3e3; }
.u-card-tint-3 { background: #fffbeb; border-color: #fbeec8; }
.u-card-tint-4 { background: #fdf2f8; border-color: #fbd9ea; }
.u-card-tint-5 { background: #eff6ff; border-color: #d6e6fb; }
.u-card-tint-6 { background: #f5f3ff; border-color: #e6e0fb; }

html[data-u-theme="dark"] .u-card-tint-1 { background: rgba(37, 99, 236, 0.14); border-color: rgba(37, 99, 236, 0.30); }
html[data-u-theme="dark"] .u-card-tint-2 { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.28); }
html[data-u-theme="dark"] .u-card-tint-3 { background: rgba(251, 191, 36, 0.10); border-color: rgba(251, 191, 36, 0.26); }
html[data-u-theme="dark"] .u-card-tint-4 { background: rgba(244, 114, 182, 0.12); border-color: rgba(244, 114, 182, 0.28); }
html[data-u-theme="dark"] .u-card-tint-5 { background: rgba(96, 165, 250, 0.12); border-color: rgba(96, 165, 250, 0.28); }
html[data-u-theme="dark"] .u-card-tint-6 { background: rgba(167, 139, 250, 0.12); border-color: rgba(167, 139, 250, 0.28); }

/* Banda CTA colorida (landing y páginas de marketing) */
.u-cta-band {
    background: linear-gradient(120deg, var(--u-primary), var(--acat-accent));
    color: #ffffff;
    border-radius: var(--u-radius-lg);
    padding: var(--u-space-7) var(--u-space-6);
    text-align: center;
}
.u-cta-band h2 { color: #ffffff; margin-bottom: var(--u-space-3); }
.u-cta-band .u-btn { background: #ffffff; color: var(--u-primary-strong); }
.u-cta-band .u-btn:hover { box-shadow: var(--u-shadow); }

/* Logo de marca Acatudy con variante para modo noche */
.u-brand-logo { height: 30px; width: auto; display: block; }
.u-brand-logo--sm { height: 22px; }
.u-brand-logo--dark { display: none; }
html[data-u-theme="dark"] .u-brand-logo--light { display: none; }
html[data-u-theme="dark"] .u-brand-logo--dark { display: block; }
/* En páginas con tema "auto" (login/register) la variante sigue al sistema */
@media (prefers-color-scheme: dark) {
    html[data-u-theme="auto"] .u-brand-logo--light { display: none; }
    html[data-u-theme="auto"] .u-brand-logo--dark { display: block; }
}

/* Variantes de logo con tema en <body> (admin) y marca pequeña */
.u-brand-mark { height: 26px; width: auto; display: block; }
.u-brand-logo--tag { height: 40px; }
body[data-u-theme="dark"] .u-brand-logo--light { display: none; }
body[data-u-theme="dark"] .u-brand-logo--dark { display: block; }

/* ==========================================================================
   PANEL DE ADMINISTRACIÓN DE ACADEMIA (chrome + componentes de página)
   --------------------------------------------------------------------------
   Rediseño moderno del área admin: sidebar elegante, cabeceras de página,
   paneles, KPIs, timeline y empty states. Todo con tokens --u-* y el color
   de marca del tenant (--brand-primary).
   ========================================================================== */

/* ---------- Sidebar ---------- */
.u-admin .u-sidebar {
    display: flex;
    flex-direction: column;
    padding: 0;
    background: var(--u-surface);
    border-right: 1px solid var(--u-line);
}
.u-admin .u-sidebar-brand {
    padding: var(--u-space-5) var(--u-space-5) var(--u-space-4);
    margin-bottom: 0;
    border-bottom: 1px solid var(--u-line);
    min-height: var(--u-topbar-h);
}
.u-admin .u-sidebar-brand img { max-height: 34px; }
.u-admin .u-sidebar-nav {
    flex: 1;
    overflow-y: auto;
    padding: var(--u-space-4) var(--u-space-3) var(--u-space-5);
    scrollbar-width: thin;
    scrollbar-color: var(--u-line) transparent;
}
.u-admin .u-sidebar-nav::-webkit-scrollbar { width: 6px; }
.u-admin .u-sidebar-nav::-webkit-scrollbar-thumb { background: var(--u-line); border-radius: 999px; }
.u-admin .u-sidebar-label {
    margin: var(--u-space-5) var(--u-space-3) var(--u-space-2);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--u-text-dim);
}
.u-admin .u-sidebar-label:first-child { margin-top: var(--u-space-2); }
.u-admin .u-sidebar-link {
    position: relative;
    gap: var(--u-space-3);
    margin-bottom: 2px;
    padding: 9px 12px;
    border-radius: 10px;
    font-size: 14px;
    transition: background 0.15s ease, color 0.15s ease;
}
.u-admin .u-sidebar-link svg { width: 18px; height: 18px; stroke-width: 1.9; }
.u-admin .u-sidebar-link:hover { background: var(--u-surface-2); color: var(--u-text); }
.u-admin .u-sidebar-link.active {
    background: var(--u-primary-soft);
    color: var(--u-primary);
    font-weight: 600;
}
.u-admin .u-sidebar-link.active::before {
    content: '';
    position: absolute;
    left: -12px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--u-primary);
}

/* ---------- Topbar ---------- */
.u-admin .u-topbar {
    gap: var(--u-space-4);
    background: color-mix(in srgb, var(--u-surface) 88%, transparent);
    border-bottom: 1px solid var(--u-line);
}
.u-topbar-title {
    font-family: var(--u-font-display);
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--u-text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Chip de usuario + dropdown */
.u-userchip {
    display: flex;
    align-items: center;
    gap: var(--u-space-3);
    padding: 5px 10px 5px 5px;
    border-radius: 999px;
    border: 1px solid var(--u-line);
    background: var(--u-surface);
    transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.u-userchip:hover { border-color: var(--u-text-dim); box-shadow: var(--u-shadow-sm); text-decoration: none; }
.u-userchip img {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid var(--u-primary-soft);
}
.u-userchip-name { color: var(--u-text); font-weight: 600; font-size: 14px; }
.u-userchip svg { width: 14px; height: 14px; color: var(--u-text-dim); }

.u-admin .dropdown-menu {
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    box-shadow: var(--u-shadow-lg);
    padding: var(--u-space-2);
    min-width: 220px;
}
.u-admin .dropdown-item {
    display: flex;
    align-items: center;
    gap: var(--u-space-2);
    border-radius: var(--u-radius-sm);
    padding: 9px 12px;
    font-size: 14px;
    font-weight: 500;
    color: var(--u-text);
}
.u-admin .dropdown-item:hover { background: var(--u-surface-2); color: var(--u-primary); }
.u-admin .dropdown-item svg { width: 16px; height: 16px; }
.u-admin .dropdown-item .u-dropdown-danger, .u-admin .dropdown-item.u-dropdown-danger { color: var(--u-danger); }
.u-admin .dropdown-item.u-dropdown-danger:hover { background: rgba(248, 113, 113, 0.12); color: var(--u-danger); }
.u-admin .dropdown-divider { border-color: var(--u-line); margin: var(--u-space-2) 0; }

/* ---------- Cabecera de página ---------- */
.u-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--u-space-4);
    margin-bottom: var(--u-space-6);
}
.u-page-title {
    font-family: var(--u-font-display);
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--u-text);
    margin: 0 0 var(--u-space-1);
    display: flex;
    align-items: center;
    gap: var(--u-space-3);
}
.u-page-title svg { width: 24px; height: 24px; color: var(--u-primary); }
.u-page-sub { margin: 0; color: var(--u-text-dim); font-size: 14px; }
.u-page-actions { display: flex; align-items: center; gap: var(--u-space-2); flex-wrap: wrap; }

/* ---------- Paneles ---------- */
.u-panel {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    box-shadow: var(--u-shadow-sm);
    padding: var(--u-space-5);
    margin-bottom: var(--u-space-5);
}
.u-panel-flush { padding: 0; overflow: hidden; }
.u-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--u-space-3);
    margin-bottom: var(--u-space-4);
}
.u-panel-flush .u-panel-head { padding: var(--u-space-5) var(--u-space-5) 0; }
.u-panel-title { font-size: 16px; font-weight: 700; color: var(--u-text); margin: 0; }
.u-panel-hint {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--u-text-dim);
}
.u-panel-link {
    font-size: 13px;
    font-weight: 600;
    color: var(--u-primary);
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: var(--u-space-1);
}
.u-panel-link:hover { color: var(--u-primary-strong); }
.u-panel-link svg { width: 13px; height: 13px; }

/* Tabla dentro de panel: scroll horizontal en pantallas estrechas */
.u-table-scroll { overflow-x: auto; }
.u-panel-flush .u-table th:first-child, .u-panel-flush .u-table td:first-child { padding-left: var(--u-space-5); }
.u-panel-flush .u-table th:last-child, .u-panel-flush .u-table td:last-child { padding-right: var(--u-space-5); }

/* ---------- Empty state ---------- */
.u-empty {
    text-align: center;
    padding: var(--u-space-7) var(--u-space-5);
    color: var(--u-text-dim);
}
.u-empty-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--u-space-4);
    border-radius: var(--u-radius-lg);
    display: grid;
    place-items: center;
    background: var(--u-primary-soft);
    color: var(--u-primary);
}
.u-empty-icon svg { width: 26px; height: 26px; }
.u-empty-title { font-size: 15px; font-weight: 700; color: var(--u-text); margin: 0 0 var(--u-space-1); }
.u-empty p { margin: 0; font-size: 14px; }

/* ---------- Iconos tintados (KPIs, tiles, acciones) ---------- */
.u-ic {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: grid;
    place-items: center;
    transition: transform 0.15s ease;
}
.u-ic svg { width: 20px; height: 20px; }
.u-ic--sm { width: 38px; height: 38px; border-radius: 12px; }
.u-ic--sm svg { width: 17px; height: 17px; }
.u-ic--brand  { background: var(--u-primary-soft); color: var(--u-primary); }
.u-ic--violet { background: rgba(124, 92, 191, 0.14); color: #7c5cbf; }
.u-ic--teal   { background: rgba(31, 158, 147, 0.14); color: #1f9e93; }
.u-ic--amber  { background: rgba(232, 150, 75, 0.16); color: #d97e2f; }
.u-ic--blue   { background: rgba(46, 159, 181, 0.14); color: #2e9fb5; }
.u-ic--green  { background: rgba(74, 174, 107, 0.15); color: #4aae6b; }
.u-ic--rose   { background: rgba(214, 93, 122, 0.14); color: #d65d7a; }

/* ---------- KPIs del dashboard ---------- */
.u-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--u-space-4); margin-bottom: var(--u-space-5); }
.u-stat {
    display: flex;
    flex-direction: column;
    gap: var(--u-space-3);
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    box-shadow: var(--u-shadow-sm);
    padding: var(--u-space-5);
    color: inherit;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.u-stat:hover { transform: translateY(-2px); box-shadow: var(--u-shadow); border-color: var(--u-primary); text-decoration: none; color: inherit; }
.u-stat-top { display: flex; align-items: center; justify-content: space-between; gap: var(--u-space-3); }
.u-stat-label { font-size: 13px; font-weight: 600; color: var(--u-text-dim); }
.u-stat-value {
    font-family: var(--u-font-display);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--u-text);
}
.u-stat-foot {
    display: inline-flex;
    align-items: center;
    gap: var(--u-space-2);
    font-size: 13px;
    font-weight: 600;
    color: var(--u-primary);
}
.u-stat-foot svg { width: 14px; height: 14px; transition: transform 0.15s ease; }
.u-stat:hover .u-stat-foot svg { transform: translateX(3px); }
.u-stat:hover .u-ic { transform: scale(1.06); }

/* ---------- Hero de acción destacada (degradado de marca) ---------- */
.u-hero {
    display: flex;
    align-items: center;
    gap: var(--u-space-5);
    background: linear-gradient(120deg, var(--u-primary-strong), var(--u-primary));
    color: #fff;
    border-radius: var(--u-radius-lg);
    padding: var(--u-space-5) var(--u-space-6);
    box-shadow: var(--u-shadow-sm);
    position: relative;
    overflow: hidden;
    margin-bottom: var(--u-space-5);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.u-hero:hover { transform: translateY(-2px); box-shadow: var(--u-shadow); color: #fff; text-decoration: none; }
.u-hero::after {
    content: '';
    position: absolute;
    right: -48px;
    top: -48px;
    width: 170px;
    height: 170px;
    border-radius: 50%;
    border: 26px solid rgba(255, 255, 255, 0.07);
    pointer-events: none;
}
.u-hero-icon {
    flex: 0 0 auto;
    width: 54px;
    height: 54px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    background: rgba(255, 255, 255, 0.16);
}
.u-hero-icon svg { width: 24px; height: 24px; }
.u-hero-body { flex: 1 1 auto; position: relative; z-index: 1; min-width: 0; }
.u-hero-body h2 { color: #fff; font-size: 18px; font-weight: 800; margin: 0 0 2px; }
.u-hero-body p { color: #fff; font-size: 14px; opacity: 0.88; margin: 0; }
.u-hero-btn {
    flex: 0 0 auto;
    position: relative;
    z-index: 1;
    white-space: nowrap;
    background: rgba(255, 255, 255, 0.95);
    color: var(--u-primary-strong);
    font-weight: 700;
    font-size: 13px;
    padding: 9px 18px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: var(--u-space-2);
    transition: transform 0.15s ease;
}
.u-hero:hover .u-hero-btn { transform: translateX(3px); }
.u-hero-btn svg { width: 14px; height: 14px; }

/* ---------- Tiles de acceso rápido ---------- */
.u-tiles { display: grid; gap: var(--u-space-3); }
.u-tiles-2 { grid-template-columns: repeat(2, 1fr); }
.u-tiles-4 { grid-template-columns: repeat(4, 1fr); }
.u-tile {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--u-space-3);
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    padding: var(--u-space-4);
    color: var(--u-text);
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease;
}
.u-tile:hover { transform: translateY(-2px); box-shadow: var(--u-shadow-sm); border-color: var(--u-primary); color: var(--u-text); text-decoration: none; }
.u-tile:hover .u-ic { transform: scale(1.06); }
.u-tile-sub { font-size: 12px; font-weight: 500; color: var(--u-text-dim); }
.u-tile--row { flex-direction: row; align-items: center; }

/* ---------- Onboarding (guía de inicio) ---------- */
.u-onb {
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius-lg);
    box-shadow: var(--u-shadow-sm);
    padding: var(--u-space-5) var(--u-space-6);
    margin-bottom: var(--u-space-5);
}
.u-onb-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--u-space-4); }
.u-onb-head h2 { font-size: 17px; font-weight: 800; margin: 0 0 var(--u-space-1); color: var(--u-text); }
.u-onb-head p { font-size: 14px; color: var(--u-text-dim); margin: 0; }
.u-onb-close {
    flex: 0 0 auto;
    border: 1px solid var(--u-line);
    background: transparent;
    color: var(--u-text-dim);
    font-weight: 600;
    font-size: 13px;
    font-family: inherit;
    border-radius: 999px;
    padding: 7px 16px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
}
.u-onb-close:hover { color: var(--u-primary); border-color: var(--u-primary); }
.u-onb-progress { display: flex; align-items: center; gap: var(--u-space-3); margin: var(--u-space-4) 0; }
.u-onb-bar { flex: 1 1 auto; height: 8px; border-radius: 999px; background: var(--u-primary-soft); overflow: hidden; }
.u-onb-bar span {
    display: block;
    height: 100%;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--u-primary-strong), var(--u-primary));
    transition: width 0.3s ease;
}
.u-onb-count { font-size: 13px; font-weight: 800; color: var(--u-primary-strong); white-space: nowrap; }
.u-onb-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--u-space-3); }
.u-onb-step {
    display: flex;
    align-items: center;
    gap: var(--u-space-3);
    border: 1px solid var(--u-line);
    border-radius: var(--u-radius);
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 600;
    color: var(--u-text);
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.u-onb-step:hover { border-color: var(--u-primary); transform: translateY(-1px); color: var(--u-text); text-decoration: none; }
.u-onb-step svg { width: 18px; height: 18px; flex: 0 0 auto; color: var(--u-text-dim); }
.u-onb-step--done svg { color: var(--u-success); }
.u-onb-step--done .u-onb-step-label { color: var(--u-text-dim); text-decoration: line-through; }
.u-onb-optional {
    font-style: normal;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--u-text-dim);
    border: 1px solid var(--u-line);
    border-radius: 999px;
    padding: 2px 10px;
    margin-left: auto;
}
.u-onb-done-msg { display: flex; align-items: center; gap: var(--u-space-2); font-size: 14px; font-weight: 600; color: var(--u-text); margin: 0 0 var(--u-space-4); }
.u-onb-done-msg svg { width: 18px; height: 18px; color: var(--u-success); }
.u-onb-pillform { margin: 0 0 var(--u-space-5); }
.u-onb-pill {
    display: inline-flex;
    align-items: center;
    gap: var(--u-space-2);
    font-size: 13px;
    font-weight: 700;
    font-family: inherit;
    color: var(--u-text-dim);
    background: var(--u-surface);
    border: 1px solid var(--u-line);
    border-radius: 999px;
    padding: 8px 16px;
    cursor: pointer;
    box-shadow: var(--u-shadow-sm);
    transition: color 0.15s ease, border-color 0.15s ease;
}
.u-onb-pill:hover { color: var(--u-primary); border-color: var(--u-primary); }
.u-onb-pill svg { width: 15px; height: 15px; }

/* ---------- Lista de eventos (fecha destacada) ---------- */
.u-events { list-style: none; margin: 0; padding: 0; }
.u-event { display: flex; align-items: center; gap: var(--u-space-4); padding: 12px 0; }
.u-event + .u-event { border-top: 1px solid var(--u-line); }
.u-event-date {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: var(--u-radius);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--u-primary-soft);
    color: var(--u-primary-strong);
    line-height: 1.1;
}
.u-event-date b { font-size: 17px; font-weight: 800; }
.u-event-date small { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; }
.u-event-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.u-event-title { font-size: 14px; font-weight: 700; color: var(--u-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-event-meta { font-size: 12px; color: var(--u-text-dim); }

/* ---------- Timeline de actividad ---------- */
.u-timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.u-timeline::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--u-line);
    border-radius: 2px;
}
.u-timeline-item { position: relative; display: flex; gap: var(--u-space-3); padding: 10px 0 10px 18px; }
.u-timeline-dot {
    position: absolute;
    left: 0;
    top: 16px;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--u-primary);
    box-shadow: 0 0 0 3px var(--u-surface), 0 0 0 4px var(--u-primary-soft);
}
.u-timeline-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.u-timeline-text { font-size: 14px; color: var(--u-text); display: flex; flex-wrap: wrap; align-items: center; gap: var(--u-space-2); }
.u-timeline-action {
    font-size: 12px;
    color: var(--u-primary-strong);
    background: var(--u-primary-soft);
    border-radius: 6px;
    padding: 2px 8px;
    word-break: break-word;
}
.u-timeline-time { font-size: 12px; color: var(--u-text-dim); }

/* ---------- Cabecera de modal con marca ---------- */
.u-modal-head-brand {
    color: #fff;
    background: linear-gradient(120deg, var(--u-primary-strong), var(--u-primary));
    border-radius: var(--u-radius-sm) var(--u-radius-sm) 0 0;
}
.u-modal-head-brand .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }

/* ---------- Grid principal del dashboard ---------- */
.u-dash-grid { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(300px, 1fr); gap: var(--u-space-5); align-items: start; }
.u-dash-col { display: flex; flex-direction: column; min-width: 0; }
.u-dash-col .u-panel, .u-dash-col .u-hero { margin-bottom: var(--u-space-5); }

/* ---------- Footer admin ---------- */
.u-admin .u-footer { padding: var(--u-space-5) var(--u-space-6); font-size: 12px; }

/* ---------- Contenido admin: padding generoso y contenido máximo ---------- */
.u-admin .u-content { padding: var(--u-space-6) var(--u-space-7); max-width: 1400px; width: 100%; margin: 0 auto; }

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
    .u-dash-grid { grid-template-columns: 1fr; }
    .u-tiles-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    /* Revisión visual (2026-10-04): hueco inferior para que el botón flotante
       de ayuda nunca tape el último botón de un formulario. */
    .u-admin .u-content { padding: var(--u-space-4) var(--u-space-4) 88px; }
    .u-page-title { font-size: 20px; }
    .u-onb-steps { grid-template-columns: 1fr; }
    .u-hero { flex-wrap: wrap; padding: var(--u-space-5); }
    .u-stat-value { font-size: 26px; }
    .u-userchip-name { display: none; }
    .u-userchip { padding: 4px; border-color: transparent; background: transparent; }
}
@media (max-width: 480px) {
    .u-tiles-2, .u-tiles-4 { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .u-stat, .u-tile, .u-hero, .u-onb-step, .u-ic, .u-stat-foot svg { transition: none; }
}

/* ========================================================================== 
   TAILADMIN COMPONENT BRIDGE
   --------------------------------------------------------------------------
   These values come from the local TailAdmin source in
   resources/css/tailadmin.css. The bridge keeps existing Blade markup,
   routes, data attributes, and form contracts intact while moving the
   shared admin/platform components onto the same TailAdmin visual system.
   ========================================================================== */
.u-body-admin,
.sa-body {
    --ta-brand-500: #465fff;
    --ta-brand-600: #3641f5;
    --ta-gray-50: #f9fafb;
    --ta-gray-100: #f2f4f7;
    --ta-gray-200: #e4e7ec;
    --ta-gray-300: #d0d5dd;
    --ta-gray-400: #98a2b3;
    --ta-gray-500: #667085;
    --ta-gray-700: #344054;
    --ta-gray-800: #1d2939;
    --ta-shadow-xs: 0 1px 2px 0 rgba(16, 24, 40, .05);
    --ta-shadow-sm: 0 1px 3px 0 rgba(16, 24, 40, .1), 0 1px 2px -1px rgba(16, 24, 40, .06);
    font-family: var(--font-outfit, var(--u-font-body));
}

/* TailAdmin card pattern: rounded-2xl, one-pixel border, no decorative
   gradients or tenant-specific shadows. */
.u-body-admin .card,
.u-body-admin .u-card,
.u-body-admin .ak-panel,
.u-body-admin .ak-onb,
.u-body-admin .ak-kpis,
.sa-body .sa-card {
    border: 1px solid var(--ta-gray-200);
    border-radius: 1rem;
    background: #fff;
    box-shadow: none;
}
.u-body-admin .card-header,
.u-body-admin .ak-panel-head,
.sa-body .sa-card-head {
    border-bottom: 1px solid #f2f4f7;
    background: transparent;
    padding: 1.25rem 1.5rem;
}
.u-body-admin .card-body,
.u-body-admin .ak-panel-body,
.sa-body .sa-card-body { padding: 1.25rem 1.5rem; }
.u-body-admin .card-title,
.u-body-admin .ak-panel-title,
.sa-body .sa-card-title {
    color: var(--ta-gray-800);
    font-size: 1rem;
    font-weight: 600;
}

/* TailAdmin metric-card pattern applied to the existing dashboard KPI data. */
.u-body-admin .ak-kpis {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
    overflow: visible;
    margin-bottom: 1.5rem;
    border: 0;
    background: transparent;
}
.u-body-admin .ak-kpi,
.u-body-admin .ak-kpi + .ak-kpi {
    min-width: 0;
    min-height: 188px;
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem;
    border: 1px solid var(--ta-gray-200);
    border-radius: 1rem;
    background: #fff;
    box-shadow: none;
}
.u-body-admin .ak-kpi + .ak-kpi { border-left: 1px solid var(--ta-gray-200); }
.u-body-admin .ak-kpi:hover { background: #fff; border-color: #cfd7e3; box-shadow: var(--ta-shadow-sm); }
.u-body-admin .ak-kpi-ic {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    background: var(--ta-gray-100);
    color: var(--ta-gray-800);
}
.u-body-admin .ak-kpi-ic svg { width: 1.5rem; height: 1.5rem; }
.u-body-admin .ak-kpi-label { color: var(--ta-gray-500); font-size: .875rem; }
.u-body-admin .ak-kpi-value { color: var(--ta-gray-800); font-size: 2rem; font-weight: 700; }
.u-body-admin .ak-kpi-go { color: var(--ta-brand-500); }

/* TailAdmin button pattern: rounded-lg, 40/44px controls, medium label. */
.u-body-admin .btn,
.sa-body .btn {
    min-height: 2.5rem;
    border-radius: .5rem;
    padding: .625rem 1rem;
    border-width: 1px;
    font-size: .875rem;
    font-weight: 500;
    line-height: 1.25rem;
    box-shadow: var(--ta-shadow-xs);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.u-body-admin .btn-sm,
.sa-body .btn-sm { min-height: 2.25rem; padding: .5rem .75rem; font-size: .75rem; }
.u-body-admin .btn-primary,
.sa-body .btn-primary {
    background: var(--brand-primary, var(--ta-brand-500));
    border-color: var(--brand-primary, var(--ta-brand-500));
    color: var(--brand-on-primary, #fff);
}
.u-body-admin .btn-primary:hover,
.u-body-admin .btn-primary:focus-visible,
.sa-body .btn-primary:hover,
.sa-body .btn-primary:focus-visible {
    background: var(--brand-primary-dark, var(--ta-brand-600));
    border-color: var(--brand-primary-dark, var(--ta-brand-600));
    color: var(--brand-on-primary, #fff);
    box-shadow: 0 0 0 4px rgba(70, 95, 255, .12);
}
.u-body-admin .btn-outline,
.sa-body .btn-outline {
    background: #fff;
    border-color: var(--ta-gray-300);
    color: var(--ta-gray-700);
}
.u-body-admin .btn-outline:hover,
.u-body-admin .btn-outline:focus-visible,
.sa-body .btn-outline:hover,
.sa-body .btn-outline:focus-visible {
    background: var(--ta-gray-50);
    border-color: var(--ta-gray-300);
    color: var(--ta-gray-800);
}

/* TailAdmin form-input pattern: h-11, rounded-lg, gray border and brand
   focus ring. Existing names/IDs and validation hooks are untouched. */
.u-body-admin input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.u-body-admin select,
.u-body-admin textarea,
.sa-body input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.sa-body select,
.sa-body textarea {
    min-height: 2.75rem;
    border: 1px solid var(--ta-gray-300);
    border-radius: .5rem;
    background: #fff;
    color: var(--ta-gray-800);
    font-size: .875rem;
    box-shadow: var(--ta-shadow-xs);
}
.u-body-admin input:not([type="checkbox"]):not([type="radio"]):focus,
.u-body-admin select:focus,
.u-body-admin textarea:focus,
.sa-body input:not([type="checkbox"]):not([type="radio"]):focus,
.sa-body select:focus,
.sa-body textarea:focus {
    border-color: #9cb9ff;
    box-shadow: 0 0 0 3px rgba(70, 95, 255, .12);
    outline: 0;
}
.u-body-admin label,
.sa-body label { color: var(--ta-gray-700); font-size: .875rem; font-weight: 500; }

/* TailAdmin table pattern: border-y header, compact gray metadata, white rows. */
.u-body-admin .u-table-wrap,
.sa-body .u-table-wrap { border: 1px solid var(--ta-gray-200); border-radius: 1rem; background: #fff; }
.u-body-admin .u-table,
.sa-body .u-table { border-collapse: collapse; font-size: .875rem; }
.u-body-admin .u-table thead,
.sa-body .u-table thead { border-top: 1px solid #f2f4f7; border-bottom: 1px solid #f2f4f7; background: #fff; }
.u-body-admin .u-table th,
.sa-body .u-table th {
    padding: .75rem 1.5rem;
    background: transparent;
    color: var(--ta-gray-500);
    font-size: .75rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    white-space: nowrap;
}
.u-body-admin .u-table td,
.sa-body .u-table td { padding: .875rem 1.5rem; border-bottom: 1px solid #f2f4f7; color: var(--ta-gray-700); }
.u-body-admin .u-table tbody tr:nth-child(even),
.sa-body .u-table tbody tr:nth-child(even) { background: #fff; }
.u-body-admin .u-table tbody tr:hover,
.sa-body .u-table tbody tr:hover { background: var(--ta-gray-50); }

/* Alerts/badges/dropdowns/modals follow the corresponding TailAdmin source
   radius and neutral palette. */
.u-body-admin .alert,
.sa-body .alert { border-radius: .75rem; border-width: 1px; box-shadow: none; }
.u-body-admin .badge,
.sa-body .badge { border-radius: 999px; font-size: .75rem; font-weight: 500; }
.u-body-admin .dropdown-menu,
.sa-body .dropdown-menu {
    border: 1px solid var(--ta-gray-200);
    border-radius: 1rem;
    background: #fff;
    box-shadow: 0 12px 24px -4px rgba(16, 24, 40, .08), 0 4px 6px -2px rgba(16, 24, 40, .03);
}
.u-body-admin .modal-content,
.sa-body .modal-content { border: 0; border-radius: 1.5rem; background: #fff; box-shadow: 0 20px 24px -4px rgba(16, 24, 40, .08); }
.u-body-admin .breadcrumbs,
.sa-body .breadcrumbs { display: flex; align-items: center; gap: .375rem; color: var(--ta-gray-500); font-size: .875rem; }

@media (max-width: 1100px) {
    .u-body-admin .ak-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
    .u-body-admin .ak-kpis { grid-template-columns: 1fr; }
    .u-body-admin .ak-kpi,
    .u-body-admin .ak-kpi + .ak-kpi { min-height: 0; }
}

/* BUG-032 (auditoría 2026-09-26): foco de teclado siempre visible. Solo con
   :focus-visible (teclado), así que no aparece al hacer clic con el ratón. */
a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible,
textarea:focus-visible, summary:focus-visible, [tabindex]:focus-visible, [role="tab"]:focus-visible {
    outline: 2px solid var(--u-primary, #2563eb) !important;
    outline-offset: 2px !important;
}

/* BUG-033: enlaces de las páginas de acceso y públicas en modo noche
   (azul de marca sobre la tarjeta oscura daba 3,1:1). */
html[data-u-theme="dark"] .u-body:not(.u-body-admin):not(.public-shell-body) a:not([class]) { color: #8fb0ff; }

/* --------------------------------------------------------------------------
   BUG-029 · Objetivos táctiles de al menos 24×24 px (WCAG 2.5.8)
   Enlaces de texto sueltos (pie, «Volver a…», «Ver calendario», menú y pie
   públicos) crecen en alto sin cambiar su aspecto.
   -------------------------------------------------------------------------- */
.u-footer-links a,
.u-nav-link,
.land-footer-nav a,
a[class$="-back"],
a[class*="-back "],
.ak-panel-link,
.u-dbh-flat-link,
#lrail-upcoming a {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    min-width: 24px;
}
.u-footer-links { row-gap: 4px; flex-wrap: wrap; }
.land-footer-nav a { padding-block: 2px; }
label:has(> input[type="checkbox"]),
label:has(> input[type="radio"]) { cursor: pointer; min-height: 24px; }

/* --------------------------------------------------------------------------
   BUG-030 · Un solo sistema visual en el área de alumno
   Las vistas «tácticas» (tests, exámenes, tareas, perfil) heredaban
   Rajdhani/JetBrains Mono y esquinas a 0. Se alinean con el resto del
   alumno: misma sans del sistema y radio de 8 px. ulearn.css se carga
   después de tactical.min.css, así que los tokens se redefinen aquí.
   -------------------------------------------------------------------------- */
:root {
    --tac-display: var(--f-display, var(--u-font-display));
    --tac-mono: var(--f-body, var(--u-font-body));
}
html body .tactical-scope #exam .card,
html body .tac-subtopic,
html body .tactical-scope .accordion-button,
html body .btn-impugnar-custom,
html body #toggleSidebar.tac-btn-toggle { border-radius: 8px !important; }

/* ==========================================================================
   ACCESIBILIDAD (WCAG 2.2 AA, 09/10/2026)
   ========================================================================== */
/* 1.4.3: los textos secundarios de FlyonUI (text-base-content/60 y /70)
   daban 3,3:1 sobre blanco y 4,4:1 en modo noche. Mismo color base, más
   opaco: siguen siendo «secundarios» y pasan de 4,5:1. */
@supports (color: color-mix(in lab, red, red)) {
    .text-base-content\/60 { color: color-mix(in oklab, var(--color-base-content) 76%, transparent); }
    .text-base-content\/70 { color: color-mix(in oklab, var(--color-base-content) 82%, transparent); }
    .text-base-content\/50 { color: color-mix(in oklab, var(--color-base-content) 72%, transparent); }
    /* Insignias y avisos «soft/outline» de FlyonUI: el color de estado como
       texto se mezcla con el del texto (más oscuro en claro, más claro en oscuro). */
    .badge-outline.badge-info, .badge-soft.badge-info, .alert-soft.alert-info { color: color-mix(in oklab, var(--color-info) 42%, var(--color-base-content)); }
    html[data-u-theme="light"] .text-success { color: color-mix(in oklab, var(--color-success) 50%, black); }
    html[data-u-theme="dark"] .alert-soft.alert-secondary { color: var(--color-base-content); }
    .badge-soft.badge-success, .badge-outline.badge-success { color: color-mix(in oklab, var(--color-success) 45%, var(--color-base-content)); }
    .badge-soft.badge-error, .badge-outline.badge-error { color: color-mix(in oklab, var(--color-error) 50%, var(--color-base-content)); }
    .badge.badge-soft:not([class*="badge-primary"]):not([class*="badge-secondary"]):not([class*="badge-accent"]):not([class*="badge-info"]):not([class*="badge-success"]):not([class*="badge-warning"]):not([class*="badge-error"]) { color: var(--color-base-content); }
}

/* 2.3.3 / 2.2.2: quien pide menos movimiento en el sistema no ve
   animaciones ni transiciones largas (el contenido queda en su estado final). */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* 1.4.1: un enlace dentro de un texto no se distingue solo por el color. */
.u-body :is(p, li, dd, td, label, small, .u-text-center, .u-page-sub, .u-check > span) > a:not([class]):not(nav a):not(footer a) {
    text-decoration: underline;
    text-underline-offset: 2px;
}