/* ========================== */
/* 1. Importaciones y Fuentes */
/* ========================== */

/* La fuente Roboto se carga con <link> desde base.html (preconnect + css2) */

/* ========================== */
/* 2. Variables CSS */
/* ========================== */

:root {
    /* --- Color --- */
    --color-bg: #f3eff5;            /* fondo de pagina: violeta grisaceo muy claro */
    --color-surface: #ffffff;       /* paneles y tarjetas blancas */
    --color-surface-2: #f5f0ff;     /* fondos suaves: filas, chips, avisos, hover de botones secundarios */
    --color-text: #392340;          /* texto principal sobre superficies claras */
    --color-text-muted: #67566c;    /* texto secundario sobre superficies claras */
    --color-primary: #560d47;       /* violeta oscuro de marca: texto de acciones, bordes de botones, foco */
    --color-primary-soft: #7a4f9e;  /* violeta medio: links, acentos suaves y detalles (AA sobre blanco) */
    --color-accent: #ffd54f;        /* unico amarillo: fondo de la accion primaria (9:1 con --color-primary) */
    --color-accent-hover: #ffe082;  /* amarillo de hover de la accion primaria */
    --color-danger: #a11212;        /* acciones destructivas y errores (AA sobre blanco) */
    --color-success: #1b6e2e;       /* confirmaciones y estados correctos (AA sobre blanco) */
    --color-border: #ad86b6;        /* bordes de inputs, tarjetas y separadores */

    /* --- Radio --- */
    --radius-sm: 6px;               /* chips, inputs chicos, botones compactos */
    --radius-md: 10px;              /* botones, inputs, tarjetas chicas */
    --radius-lg: 14px;              /* paneles, modales, tarjetas grandes */

    /* --- Sombra --- */
    --shadow-sm: 0 2px 8px rgb(56 20 66 / 15%);   /* paneles en reposo */
    --shadow-md: 0 4px 12px rgb(56 20 66 / 25%);  /* menus flotantes, modales, hover */

    /* --- Espaciado --- */
    --space-1: 4px;                 /* separaciones minimas */
    --space-2: 8px;                 /* gap entre elementos de una misma fila */
    --space-3: 12px;                /* padding interno de controles */
    --space-4: 16px;                /* gutter mobile y padding de tarjetas */
    --space-5: 24px;                /* separacion entre bloques */
    --space-6: 32px;                /* separacion entre secciones */

    /* --- Alias historicos (mantenerlos hasta migrar todo el CSS) --- */
    --heading-size: clamp(1.85rem, 3vw, 2.25rem);
    --text-color: var(--color-text);
    --muted-color: var(--color-text-muted);
    --panel-radius: var(--radius-lg);
    --panel-shadow: var(--shadow-sm);
    --action-primary: var(--color-accent);
    --navbar-bg: var(--color-primary);  /* Navbar principal - violeta oscuro */
    --dropdown-bg: #6b1557;         /* Dropdown - violeta medio (más claro que navbar) */
    --dropdown-hover-bg: #7d1e65;   /* Dropdown hover - violeta claro */

    /* Jerarquia de capas: skip-link > carga > modal > dropdown de carrera > menu mobile > banner */
    --z-banner: 900;
    --z-nav: 1300;
    --z-dropdown: 1400;
    --z-modal: 1500;
    --z-overlay: 2000;
    --z-skip: 3000;

    /* Alto de la barra sticky del header (56px mobile / 64px desktop) */
    --header-h: 56px;
}

@media (min-width: 901px) {
    :root { --header-h: 64px; }
}

/* ========================== */
/* 3. Estilos Generales */
/* ========================== */

/* Oculto visualmente pero disponible para lectores de pantalla */
.visually-hidden,
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--color-bg);
    font-family: 'Roboto', sans-serif; /* Fuente Roboto */
    color: var(--color-text);
    margin: 0; /* Evita desbordes horizontales por el margen por defecto */
}

.skip-link {
    position: fixed;
    top: 8px;
    left: 8px;
    z-index: var(--z-skip);
    padding: 12px 18px;
    border: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    background-color: #ffffff;
    color: var(--color-primary);
    font-weight: 700;
    text-decoration: none;
    transform: translateY(calc(-100% - 16px));
}

.skip-link:focus {
    transform: translateY(0);
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.main-content {
    flex: 1 0 auto;
    width: 90%;
    margin: 0 auto;
    box-sizing: border-box;
}

.main-content:focus-visible {
    outline: 3px solid var(--color-accent);
    outline-offset: 3px;
}

/* La barra sticky no debe tapar el foco programatico (main y titulos de los wizards) */
#contenido-principal,
h2[tabindex="-1"] {
    scroll-margin-top: calc(var(--header-h) + 16px);
}

/* ========================== */
/* 4. Navbar y Menú */
/* ========================== */

.navbar {
    width: 100%;
    box-sizing: border-box;
    height: var(--header-h);
    padding: 0 12px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.navbar-menu {
    display: flex;
    list-style: none;
    gap: 4px;
    align-items: center;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

.dropdown {
    position: relative;
}

.dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 8px;
    background-color: var(--dropdown-bg);
    list-style: none;
    margin-left: 0;
    margin-right: 0;
    margin-bottom: 0;
    padding: 0;
    z-index: 1000;
    text-align: center;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    min-width: 200px;
}

/* Pseudo-elemento invisible para cubrir el gap y mantener el hover */
.dropdown-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 15px;
    white-space: nowrap;
    color: white;
    transition: background-color 0.2s ease;
}

.dropdown-menu li:first-child a {
    border-radius: 6px 6px 0 0;
}

.dropdown-menu li:last-child a {
    border-radius: 0 0 6px 6px;
}

.dropdown-menu li a:hover {
    background-color: var(--dropdown-hover-bg);
}

.dropdown:hover .dropdown-menu {
    display: block;
    animation: dropdown-fade 0.25s ease-out forwards;
}

.dropdown-menu.show {
    display: block;
    animation: dropdown-fade 0.25s ease-out forwards;
}

@keyframes dropdown-fade {
    from {
        opacity: 0;
        transform: translateX(-50%) translateY(-5px);
    }
    to {
        opacity: 1;
        transform: translateX(-50%) translateY(0);
    }
}

.nav-link {
    color: rgba(255, 255, 255, 0.9);
    text-decoration: none;
    margin: 0;
    padding: 10px 8px;
    display: flex;
    align-items: center;
    min-height: 44px;
    box-sizing: border-box;
    font-size: 13px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: color 0.2s;
}

.nav-link.disabled-link {
    opacity: 0.6;
    cursor: not-allowed;
    color: #e0d7ee;
}

.disabled-link {
    opacity: 0.6;
    cursor: not-allowed;
    color: #b0b0b0;
}

.nav-link:hover {
    color: #ffffff;
}

.nav-link--current,
.nav-link--section-current {
    color: #ffffff;
    font-weight: 700;
    box-shadow: inset 0 -3px 0 var(--color-accent);
}

.nav-link--current::before {
    content: none;
    margin-right: 0.4em;
    color: var(--color-accent);
    font-size: 0.65em;
    vertical-align: middle;
}

/* Items secundarios (Colaborar, Sugerencias, Ingresar/usuario): sin color de acento.
   El unico acento de la navbar es el subrayado del item actual. */
.nav-secondary--mobile {
    display: none;
}

.user-menu {
    position: relative;
}

.user-profile-link {
    max-width: 230px;
    white-space: normal;
    overflow-wrap: anywhere;
}

.user-menu-toggle {
    background: none;
    border: none;
    color: white;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.user-menu-toggle::after {
    content: '▾';
    font-size: 12px;
}

.user-menu-dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    background-color: #ffffff;
    color: #1f1f1f;
    border-radius: var(--radius-md);
    min-width: 180px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.15);
    padding: 8px;
    display: none;
    z-index: 1200;
}

.user-menu-dropdown.show {
    display: block;
}

.user-menu-item {
    display: block;
    width: 100%;
    padding: 10px 12px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    color: #1f1f1f;
    font-weight: 500;
    text-align: left;
}

.user-menu-item:hover {
    background-color: #f3e8ff;
    color: #5e3a75;
}

.logout-button {
    background-color: #f5f0ff;
}

.logout-button:hover {
    background-color: #eadffd;
}

/* Mensajes flash */
.flashes {
    list-style: none;
    padding: 0;
    margin: 20px auto;
    max-width: 440px;
}

.flash-message {
    margin: 8px 0;
    padding: 12px 14px;
    border-radius: var(--radius-sm);
    font-weight: 500;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.flash-success {
    background-color: #e8f7ec;
    color: #1b5e20;
    border: 1px solid #b6dfc2;
}

.flash-success::before {
    content: '✔';
    font-weight: 700;
}

.flash-error {
    background-color: #ffdddd;
    color: #c00;
    border: 1px solid #f5b5b5;
}

.flash-error::before {
    content: '⚠';
    font-weight: 700;
}

/* Botón del menú hamburguesa (solo ícono) */
.navbar-toggle {
    display: none;
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    width: 44px;
    height: 44px;
    padding: 0;
    align-items: center;
    justify-content: center;
    flex: none;
}

.navbar-toggle-icon {
    font-size: 26px;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* ========================== */
/* 4. Header */
/* ========================== */

/* Una sola barra sticky: logo, selector de carrera y navegacion */
.header-container {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    background-color: var(--color-primary);
    width: 100%;
    box-sizing: border-box;
}

/* En mobile se recorta el logo para mostrar solo el isotipo */
.header-logo {
    display: block;
    flex: none;
    width: 32px;
    height: 32px;
    overflow: hidden;
    border-radius: 8px;
}

.header-image {
    display: block;
    height: 32px;
    width: auto;
    max-width: none;
    margin-left: -16px;
}

/* Selector de carrera: pill compacta */
/* z-index propio: el dropdown queda por encima del menu desplegable */
.career-banner-container {
    position: relative;
    z-index: var(--z-dropdown);
    flex: 1;
    display: flex;
    justify-content: center;
    min-width: 0;
}

.career-banner {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    max-width: 100%;
    padding: 0 14px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.12);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.4);
    border-radius: 999px;
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.career-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.career-banner:hover {
    background: rgba(255, 255, 255, 0.22);
}

.career-arrow {
    flex: none;
    transition: transform 0.2s ease;
}

.career-banner[aria-expanded="true"] .career-arrow {
    transform: rotate(180deg);
}

.career-dropdown {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%);
    width: 280px;
    max-width: calc(100vw - 24px);
    box-sizing: border-box;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    padding: 4px;
    z-index: 1000;
}

.career-dropdown.show {
    display: block;
}

.career-option {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 12px;
    box-sizing: border-box;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-sm);
    font-family: 'Roboto', sans-serif;
    font-weight: 500;
    font-size: 15px;
}

.career-option:hover {
    background: var(--color-surface-2);
}

.career-option[aria-current="true"] {
    color: var(--color-primary);
    font-weight: 700;
    background: var(--color-surface-2);
}

.career-option[aria-current="true"]::before {
    content: "✓";
    margin-right: 8px;
    color: var(--color-primary);
    font-weight: 900;
}

/* Tablet: mas aire, logo completo */
@media (min-width: 768px) {
    .navbar {
        padding: 0 24px;
        gap: 16px;
    }

    .header-logo {
        width: auto;
        height: 36px;
    }

    .header-image {
        height: 36px;
        margin-left: 0;
    }
}

/* Banner informativo */
.info-banner {
    background-color: #FFF3CD;
    color: #8A6D3B;
    text-align: center;
    padding: 10px;
    margin: 15px 0;
    border: 1px solid #F0C36D;
    border-radius: 4px;
}

/* Banner de éxito */
.success-banner {
    background-color: #D4EDDA;
    color: #155724;
    text-align: center;
    padding: 10px;
    margin: 15px 0;
    border: 1px solid #C3E6CB;
    border-radius: 4px;
}

/* ========================== */
/* 5. Home Container */
/* ========================== */

.home-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
    background-color: #f4f4f4;
    margin: 30px auto;
    max-width: 960px;
    border-radius: var(--panel-radius);
    box-shadow: var(--panel-shadow);
    box-sizing: border-box;
}

/* Home y home de carrera: la card se centra verticalmente dentro de <main> */
.main-content--centered {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.main-content--centered > .home-container {
    width: 100%;
    max-width: 720px;
    margin: 24px 0;
}

/* Tarjetas de la home: todo el bloque es un solo link */
.home-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-3);
    width: 100%;
    margin: var(--space-3) 0 0;
    text-align: left;
}

.home-card {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-4);
    box-sizing: border-box;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-text);
    text-decoration: none;
    transition: border-color 0.2s ease;
}

a.home-card:hover {
    border-color: var(--color-primary);
}

.home-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.25;
    color: var(--color-primary);
}

.home-card-desc {
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--color-text-muted);
}

.home-card-cta {
    margin-top: auto;
    padding-top: var(--space-2);
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-primary);
}

.home-card--disabled {
    border-top-color: var(--color-border);
    opacity: 0.65;
    cursor: not-allowed;
}

/* ========================== */
/* 6. Títulos y Textos */
/* ========================== */

.title {
    font-size: var(--heading-size);
    color: var(--text-color);
    line-height: 1.15;
    margin-top: 0;
    margin-bottom: 10px;
}

.subtitle {
    font-size: 1rem;
    color: #555;
    margin-bottom: 20px;
}

/* ========================== */
/* 7. Botones de Navegación */
/* ========================== */

.navigation-buttons {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    width: 100%;
    gap: 15px;
    margin: 20px 0;
}

.navigation-buttons .btn {
    width: 100%;
}

/* Sistema unico de botones: .btn (base) + una variante.
   Alto 44px en mobile / 40px en desktop, mismo radio y tipografia. */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    box-sizing: border-box;
    min-height: 44px;
    padding: 8px 18px;
    border: 2px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-primary);
    font-family: inherit;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

@media (min-width: 769px) {
    .btn {
        min-height: 40px;
    }
}

/* display de .btn pisaria al atributo hidden */
.btn[hidden] {
    display: none;
}

.btn:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

.btn[disabled],
.btn[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

/* Accion primaria: una por vista */
.btn-primary {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
    color: var(--color-primary);
}

.btn-primary:hover:not([disabled], [aria-disabled="true"]) {
    background-color: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

.btn-primary:active:not([disabled], [aria-disabled="true"]) {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Accion secundaria: borde violeta, fondo transparente */
.btn-secondary {
    background-color: transparent;
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.btn-secondary:hover:not([disabled], [aria-disabled="true"]) {
    background-color: var(--color-surface-2);
}

.btn-secondary:active:not([disabled], [aria-disabled="true"]) {
    background-color: #eadcf5;
}

/* Accion terciaria: solo texto, subrayado al hover */
.btn-ghost {
    background-color: transparent;
    border-color: transparent;
    color: var(--color-primary);
}

.btn-ghost:hover:not([disabled], [aria-disabled="true"]) {
    text-decoration: underline;
    text-underline-offset: 3px;
}

.btn-ghost:active:not([disabled], [aria-disabled="true"]) {
    background-color: var(--color-surface-2);
}

/* Accion destructiva: borde y texto rojos, nunca fondo solido */
.btn-danger {
    background-color: transparent;
    border-color: var(--color-danger);
    color: var(--color-danger);
}

.btn-danger:hover:not([disabled], [aria-disabled="true"]) {
    background-color: #fdeeee;
}

.btn-danger:active:not([disabled], [aria-disabled="true"]) {
    background-color: #f9dada;
}

.btn-danger:focus-visible {
    outline-color: var(--color-danger);
}

/* Variante compacta (mantiene 44px de target en mobile) */
.btn-sm {
    padding: 4px 12px;
    font-size: 0.875rem;
}

@media (min-width: 769px) {
    .btn-sm {
        min-height: 34px;
    }
}

/* ========================== */
/* 8. Footer */
/* ========================== */

.footer {
    flex-shrink: 0;
    background-color: var(--color-primary);
    color: rgba(255, 255, 255, 0.85);
    padding: 12px 16px 16px;
    text-align: center;
    font-size: 14px;
}

/* Una sola fila de links con separadores "·" generados por CSS */
.footer-nav ul {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 960px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0 22px;
}

.footer-nav li {
    position: relative;
    /* margen negativo: el area de toque (44px) se solapa sin inflar el footer */
    margin: -4px 0;
}

.footer-nav li:not(:last-child)::after {
    content: "·";
    position: absolute;
    right: -13px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
}

.footer-nav a,
.footer-nav .disabled-link {
    display: inline-block;
    padding: 12px 0;
    line-height: 20px;
}

.footer a {
    color: rgba(255, 255, 255, 0.85);
    text-decoration: none;
    transition: color 0.2s;
}

.footer a:hover {
    color: #ffffff;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.footer-bottom {
    margin: 4px 0 0;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
}

/* ========================== */
/* 8.1 Páginas de Error      */
/* ========================== */

.error-container {
    max-width: 480px;
    margin: 48px auto;
    padding: 32px 24px;
    background: var(--color-surface);
    border-radius: 12px;
    text-align: center;
}

.error-code {
    font-size: 3rem;
    line-height: 1;
    margin: 0 0 12px 0;
    color: var(--color-text-muted);
}

.error-title {
    font-size: 1.5rem;
    margin: 0 0 8px 0;
    color: var(--color-text);
}

.error-message {
    font-size: 1rem;
    margin: 0 0 24px 0;
    color: var(--color-text-muted);
}

/* ========================== */
/* 9. Responsividad */
/* ========================== */

/* La navbar necesita más ancho que el resto del layout para mostrar todos sus
   destinos. Con 13px y sin Sugerencias/Colaborar, los 5 links + carrera +
   Ingresar entran desde ~900px; por debajo pasa a hamburguesa (mismo valor en
   NAVBAR_COMPACT_QUERY de scripts.js). Esta variante compacta es
   deliberadamente independiente de los breakpoints mobile de títulos,
   botones, logo, footer y selector de carrera. */
@media (max-width: 900px) {
    .navbar-toggle {
        display: inline-flex;
        margin-right: -8px;
    }

    .navbar-menu {
        display: none;
        flex-direction: column;
        align-items: stretch;
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: calc(100vh - var(--header-h));
        overflow-y: auto;
        background-color: var(--navbar-bg);
        z-index: 1000;
        box-shadow: 0 10px 18px rgba(0, 0, 0, 0.3);
        padding-bottom: 10px;
    }

    .navbar-menu.show {
        display: flex;
    }

    .navbar-menu > li {
        border-bottom: 1px solid rgba(205, 180, 219, 0.3);
    }

    .navbar-menu > li:last-child {
        border-bottom: none;
    }

    .navbar-menu a {
        display: block;
        width: 100%;
        box-sizing: border-box;
        padding: 14px 16px;
        color: white;
    }

    .nav-link,
    .dropdown-toggle {
        margin: 0;
        font-size: 16px;
        line-height: 1.25;
        white-space: normal;
    }

    .nav-link--current,
    .nav-link--section-current {
        border-left: 5px solid var(--color-accent);
        box-shadow: none;
        background-color: rgba(255, 255, 255, 0.1);
    }

    .dropdown-toggle {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }

    .dropdown-menu {
        position: static;
        left: auto;
        transform: none;
        text-align: left;
        z-index: 1200;
        display: none;
        flex-direction: column;
        background-color: var(--dropdown-bg);
        width: 100%;
        box-shadow: none;
        border-radius: 0;
        margin-top: 0;
        animation: none;
    }

    .dropdown-menu::before {
        display: none;
    }

    .dropdown-menu.show {
        display: flex;
        animation: dropdown-fade-mobile 0.25s ease-out forwards;
    }

    .dropdown-menu li a {
        padding-left: 28px;
        font-size: 15px;
        width: 100%;
    }

    @keyframes dropdown-fade-mobile {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }

    .dropdown-toggle::after {
        content: '▸';
        margin-left: 8px;
        display: inline-block;
        transition: transform 0.2s ease;
        font-size: 12px;
    }

    .dropdown.open .dropdown-toggle::after {
        transform: rotate(90deg);
    }

    .dropdown:hover .dropdown-menu {
        display: none;
        /* En touch el :hover queda "pegado" tras el tap y arrastra la
           animacion de escritorio (dropdown-fade termina en translateX(-50%)
           con forwards), corriendo el submenu media pantalla a la izquierda.
           En mobile la apertura la maneja .open/.show, asi que anulamos la
           animacion heredada del hover. */
        animation: none;
    }

    .dropdown.open > .dropdown-menu {
        display: flex;
    }

    /* Grupo secundario al final del menu, separado por una linea y mas chico */
    .navbar-menu > li.nav-secondary {
        border-bottom: none;
    }

    .navbar-menu > li.nav-secondary--first {
        margin-top: 4px;
        border-top: 1px solid rgba(205, 180, 219, 0.5);
        padding-top: 4px;
    }

    .nav-secondary--mobile {
        display: block;
    }

    .nav-secondary .nav-link {
        font-size: 14px;
        padding-top: 10px;
        padding-bottom: 10px;
        color: rgba(255, 255, 255, 0.85);
    }

    .user-menu {
        margin-top: 0;
        padding-top: 0;
    }

    .user-profile-link {
        font-size: 14px;
        opacity: 0.85;
        max-width: none;
        overflow: visible;
        text-overflow: clip;
        white-space: normal;
    }

}

/* Desktop: logo | navegacion al centro | carrera + usuario a la derecha.
   El <ul> pasa a display: contents para ordenar sus <li> junto con el selector. */
@media (min-width: 901px) {
    .navbar {
        padding: 0 16px;
        gap: 4px;
    }

    .header-logo {
        height: 40px;
        margin-right: 12px;
    }

    .header-image {
        height: 40px;
    }

    .navbar-menu {
        display: contents;
    }

    .navbar-menu > li:first-child {
        margin-left: auto;
    }

    .career-banner-container {
        flex: none;
        order: 1;
        margin-left: auto;
    }

    .navbar-menu > li.nav-secondary {
        order: 2;
    }

    .navbar-menu > li.nav-secondary--first .nav-link {
        font-size: 12px;
        color: rgba(255, 255, 255, 0.75);
    }

    /* INGRESAR / nombre de usuario: boton outline chico a la derecha */
    .navbar-menu > li:last-child {
        margin-left: 8px;
    }

    .nav-link--login {
        min-height: 36px;
        padding: 6px 14px;
        border: 1px solid #ffffff;
        border-radius: var(--radius-sm);
    }

    .nav-link--login:hover {
        background: rgba(255, 255, 255, 0.12);
    }

    .user-profile-link {
        max-width: 180px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow-wrap: normal;
    }

    .career-dropdown {
        left: auto;
        right: 0;
        transform: none;
    }
}

/* Entre 901 y 1099px Colaborar queda solo en el footer y el logo se reduce al
   isotipo para que todo entre en una fila */
@media (min-width: 901px) and (max-width: 1099px) {
    .navbar-menu > li.nav-secondary--first {
        display: none;
    }

    .header-logo {
        width: 32px;
        height: 32px;
        margin-right: 8px;
    }

    .header-image {
        height: 32px;
        margin-left: -16px;
    }
}

@media (min-width: 1100px) {
    .navbar {
        padding: 0 32px;
    }

    .nav-link {
        padding-left: 10px;
        padding-right: 10px;
    }
}

.error-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
}

/* Política global de movimiento: conserva los cambios de estado y sus
   transformaciones finales, pero los aplica de inmediato cuando la persona
   pidió reducir movimiento. Los textos de carga/status permanecen visibles. */
@media (prefers-reduced-motion: reduce) {
    html,
    body,
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        transition-delay: 0ms !important;
    }

    .dropdown-menu,
    .career-dropdown,
    .badge-nuevo,
    .spinner,
    .loading-spinner {
        animation: none !important;
    }

    .career-banner:hover,
    .apunte-card:hover,
    .apuntes-navigation a:hover,
    .stat-card:hover,
    .btn-refresh:active,
    .profile-form button:hover,
    .rating-bar:hover,
    .btn:hover,
    .btn:active {
        transform: none !important;
    }

    .rating-bar:hover::before,
    .materia-actions input[type="checkbox"]:checked + label {
        transform: none !important;
    }
}

/* Pantallas pequeñas */
@media (max-width: 768px) {

    /* Títulos */
    .title {
        font-size: 1.5rem;
    }

    .subtitle {
        font-size: 0.9rem;
    }

    /* Botones */
    .navigation-buttons,
    .home-cards {
        grid-template-columns: 1fr;
    }

}
/* Escala compartida: las herramientas conservan sus propios anchos y densidades. */
h1 { font-size: var(--heading-size); line-height: 1.15; }
.secondary-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 24px; }
.secondary-actions a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary); text-underline-offset: 3px; }
.colaborar-container { max-width: 560px; align-items: stretch; text-align: left; }
.colaborar-container .subtitle { font-size: 16px; line-height: 1.65; margin-bottom: 0; color: var(--text-color); }
.colaborar-container .btn-primary { align-self: flex-start; }
.colaborar-suggest { display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; color: var(--color-primary); text-underline-offset: 3px; }
.navbar a:focus-visible, .navbar button:focus-visible, .header-container a:focus-visible,
.career-banner:focus-visible, .footer a:focus-visible { outline: 3px solid var(--color-accent); outline-offset: -3px; }
.home-container a:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 3px; }
@media (max-width: 768px) {
    .home-container { padding: 20px 16px; margin: 20px auto; }
    .title { font-size: var(--heading-size); }
}

/* ==========================================================
   Guia rapida de tokens (respetar en las proximas tareas)
   1. Fondo de pagina: --color-bg. Paneles blancos: --color-surface. Fondos suaves: --color-surface-2.
   2. Texto: --color-text; secundario/ayudas: --color-text-muted (nunca grises sueltos).
   3. Marca: --color-primary para texto de acciones, bordes de botones y foco; --color-primary-soft para links y detalles.
   4. Un solo amarillo, --color-accent, reservado a la accion primaria (.btn-primary); no usarlo de decoracion.
   5. Peligro: --color-danger (borde y texto rojos, nunca fondo solido). Exito: --color-success.
   6. Bordes y separadores: --color-border.
   7. Radios: --radius-sm (chips, inputs), --radius-md (botones, tarjetas chicas), --radius-lg (paneles y modales).
   8. Sombras: --shadow-sm en reposo, --shadow-md en menus flotantes y modales.
   9. Espaciado: --space-1..6 (4, 8, 12, 16, 24, 32); no inventar valores intermedios.
  10. Botones: siempre .btn + .btn-primary | .btn-secondary | .btn-ghost | .btn-danger (+ .btn-sm); no crear botones por pagina.
   ========================================================== */