/* ==========================================================
   «SLUSH» EN TODO EL SITIO · ajustes por página
   Se carga después de las hojas de cada página. Reviste las piezas
   existentes (sin tocar su estructura) con el lenguaje del Inicio:
   papel, contorno de 1px, píldoras, pegatinas de color giradas y
   titulares en Bowlby One. Sin sombras, resplandores ni degradados.
   ========================================================== */

/* ---------- Piezas compartidas ---------- */

/* Rótulos «// algo» → píldora con contorno. */
:root :is(.hero-kicker, .home-kicker, .project-kicker, .analytics .analytics-eyebrow, .ab-label, .ab-kicker, .catalog-modal-step-kicker) {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    width: fit-content;
    padding: 7px 13px;
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-pill);
    background: var(--sl-paper);
    color: var(--sl-carbon);
    font-family: var(--sl-sans);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .032em;
    text-shadow: none;
    text-transform: uppercase;
}

/* Botones de acción: píldora negra (principal) o blanca con contorno. */
:root :is(.home-action, .empty-state-action, .project-external-button, .project-back-button, .catalog-modal-start-practice, .ab-button) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    min-height: 46px;
    padding: 10px 20px;
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-pill);
    background: var(--sl-paper);
    color: var(--sl-carbon);
    font-family: var(--sl-sans);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .03em;
    text-shadow: none;
    box-shadow: none;
    backdrop-filter: none;
    transition: transform var(--duration) var(--ease-out), background-color var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}

:root :is(.home-action--primary, .empty-state-action, .project-external-button, .catalog-modal-start-practice, .ab-button--primary) {
    background: var(--sl-carbon);
    color: var(--sl-paper);
}

:root :is(.home-action, .empty-state-action, .project-external-button, .project-back-button, .catalog-modal-start-practice, .ab-button)::before,
:root :is(.home-action, .empty-state-action, .project-external-button, .project-back-button, .catalog-modal-start-practice, .ab-button)::after { display: none; }

@media (hover: hover) and (pointer: fine) {
    :root :is(.home-action, .empty-state-action, .project-external-button, .project-back-button, .catalog-modal-start-practice, .ab-button):hover {
        transform: translateY(-2px) rotate(-1deg);
        border-color: var(--sl-carbon);
        background: var(--sl-sun);
        color: var(--sl-on);
    }
}

/* Barra de ventana «● ● ●  rótulo» compartida por tarjetas y terminales. */
:root :is(.analytics-window-bar, .project-hero-terminal > div) {
    border-bottom: 1px solid var(--sl-carbon);
    background: var(--sl-paper);
    color: var(--sl-carbon);
    font-weight: 600;
}

:root :is(.analytics-dots, .sb-term-dots, .project-hero-terminal > div) i {
    width: 10px;
    height: 10px;
    border: 1px solid var(--sl-carbon);
    border-radius: 50%;
    opacity: 1;
    box-shadow: none;
}

:root :is(.analytics-dots, .sb-term-dots, .project-hero-terminal > div) i:nth-child(1) { background: var(--sl-ember); }
:root :is(.analytics-dots, .sb-term-dots, .project-hero-terminal > div) i:nth-child(2) { background: var(--sl-sun); }
:root :is(.analytics-dots, .sb-term-dots, .project-hero-terminal > div) i:nth-child(3) { background: var(--sl-mint); }

/* Estado vacío. */
.empty-state {
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-xl);
    background: var(--sl-card);
    box-shadow: none;
}

.empty-state-icon {
    border: 1px solid var(--sl-carbon);
    border-radius: 16px;
    background: var(--sl-sun);
    color: var(--sl-on);
    box-shadow: none;
    rotate: -6deg;
}

.empty-state-title { color: var(--sl-carbon); font-family: var(--sl-display); font-weight: 400; text-transform: uppercase; }
.empty-state-text { color: var(--sl-muted); }

/* Paginación. */
.catalog-pagination-summary { color: var(--sl-muted); }
.catalog-pagination-summary strong { color: var(--sl-carbon); }

:root :is(.catalog-pagination-page, .catalog-pagination-direction) {
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-pill);
    background: var(--sl-paper);
    color: var(--sl-carbon);
    box-shadow: none;
}

:root .catalog-pagination-page.is-active { background: var(--sl-carbon); color: var(--sl-paper); }
:root .catalog-pagination-direction.is-disabled { opacity: .4; }
:root :is(a.catalog-pagination-page, a.catalog-pagination-direction):hover { background: var(--sl-sun); color: var(--sl-on); }

/* Teclas. */
:root kbd {
    border: 1px solid var(--sl-carbon);
    border-radius: 6px;
    background: var(--sl-mist);
    color: var(--sl-carbon);
    box-shadow: none;
}

/* Paleta de búsqueda (Ctrl K). */
.command-palette-backdrop { background: rgba(22, 22, 26, .45); backdrop-filter: none; }

.command-palette-dialog {
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-xl);
    background: var(--sl-paper);
    color: var(--sl-carbon);
    box-shadow: none;
}

.command-palette-search { border-bottom: 1px solid var(--sl-carbon); }
.command-palette-prompt { color: var(--sl-violet); }
.command-palette-search input { color: var(--sl-carbon); }
.command-palette-search input::placeholder { color: var(--sl-muted); }
.command-palette-group { color: var(--sl-muted); font-weight: 700; }
.command-palette-option { border: 1px solid transparent; border-radius: var(--radius-pill); color: var(--sl-carbon); }
.command-palette-option i { color: var(--sl-carbon); }
.command-palette-option small { color: var(--sl-muted); }
:root .command-palette-option[aria-selected="true"] { border-color: var(--sl-carbon); background: var(--sl-sky); color: var(--sl-carbon); box-shadow: none; }
:root .command-palette-option[aria-selected="true"] i { color: var(--sl-violet); }
.command-palette-footer { border-top: 1px solid var(--sl-carbon); color: var(--sl-muted); }

/* Menú lateral en móvil: panel con contorno, sin sombra. */
.sidebar-overlay { background: rgba(22, 22, 26, .35); }
:root .sidebar-drawer { box-shadow: none; }

/* Aviso flotante (copiar enlace). */
.catalog-toast { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-carbon); color: var(--sl-paper); box-shadow: none; }

/* Enlace «saltar al contenido». */
.skip-link { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-sun); color: var(--sl-on); }

/* ==========================================================
   SIMULADORES · CATÁLOGO
   ========================================================== */

.sim-page {
    --sim-border: var(--sl-carbon);
    --sim-line: var(--sl-carbon);
    --sim-muted: var(--sl-muted);
    --sim-dim: var(--sl-muted);
}

/* Portada: papel celeste con la cinta; la ilustración, sin sombra ni flotación. */
:root .sim-page .catalog-hero {
    border: 0;
    background: var(--sl-ribbon-img) center / cover no-repeat, var(--sl-sky);
    box-shadow: none;
}

:root .sim-page .catalog-hero-visual img { filter: none; animation: none; }

:root .sim-page .catalog-title {
    max-width: none;
    color: var(--sl-carbon);
    font-family: var(--sl-display);
    font-size: clamp(2.2rem, .8rem + 2.6vw, 3.8rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: .84;
    text-transform: uppercase;
}

:root .sim-page .catalog-title span { display: block; color: var(--sl-carbon); text-shadow: none; }
:root .sim-page .catalog-intro { color: var(--sl-carbon); font-weight: 500; }

/* Barra de filtros: papel con contorno y campos en píldora. */
:root .sim-page .catalog-toolbar {
    border: 1px solid var(--sl-carbon);
    background: var(--sl-card);
    box-shadow: none;
}

:root .sim-page :is(.catalog-search, .catalog-select, .catalog-toolbar .catalog-view-toggle) {
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-pill);
    background: var(--sl-paper);
}

:root .sim-page :is(.catalog-search, .catalog-select):hover { border-color: var(--sl-carbon); background: var(--sl-sky); }
:root .sim-page :is(.catalog-search, .catalog-select):focus-within { border-color: var(--sl-carbon); background: var(--sl-paper); box-shadow: 0 0 0 3px var(--sl-violet); }
:root .sim-page .catalog-search > i { color: var(--sl-carbon); }
:root .sim-page .catalog-search input { color: var(--sl-carbon); font-family: var(--sl-sans); }
:root .sim-page .catalog-search input::placeholder { color: var(--sl-muted); }
:root .sim-page .catalog-search-clear { border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-paper); color: var(--sl-carbon); }
:root .sim-page .catalog-search-clear:hover { background: var(--sl-sun); color: var(--sl-on); }
:root .sim-page .catalog-shortcut { border-color: var(--sl-carbon); background: var(--sl-mist); color: var(--sl-carbon); }

:root .sim-page .catalog-select { padding-left: 8px; }
:root .sim-page .catalog-select-icon { border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-sun); color: var(--sl-on); }
:root .sim-page .catalog-select-label { color: var(--sl-muted); font-family: var(--sl-sans); font-weight: 700; }
:root .sim-page .catalog-select select { color: var(--sl-carbon); font-family: var(--sl-sans); }
:root .sim-page .catalog-select::after,
:root .sim-page .catalog-select:focus-within::after { border-color: var(--sl-carbon); }
:root .sim-page .catalog-select.is-set { border-color: var(--sl-carbon); background: var(--sl-sky); }
:root .sim-page .catalog-select.is-set .catalog-select-icon { border-color: var(--sl-carbon); background: var(--sl-carbon); color: var(--sl-paper); box-shadow: none; }
:root .sim-page .catalog-select.is-set .catalog-select-label { color: var(--sl-carbon); }

:root .sim-page .catalog-toolbar .catalog-view-toggle button { border-radius: var(--radius-pill); color: var(--sl-carbon); }
:root .sim-page .catalog-toolbar .catalog-view-toggle button:hover { background: var(--sl-sky); color: var(--sl-carbon); }
:root .sim-page .catalog-toolbar .catalog-view-toggle button.is-active { background: var(--sl-carbon); color: var(--sl-paper); box-shadow: none; }

/* Cabecera de resultados. */
.sim-results-count { color: var(--sl-muted); font-family: var(--sl-sans); font-weight: 600; }
.sim-results-count b { color: var(--sl-carbon); }
.sim-results-prompt { color: var(--sl-violet); }
.sim-chip { border-color: var(--sl-carbon); background: var(--sl-sky); color: var(--sl-carbon); }
.sim-chip > i:first-child { color: var(--sl-carbon); }
.sim-chip > i:last-child { border: 1px solid var(--sl-carbon); background: var(--sl-paper); }
.sim-chip:hover { border-color: var(--sl-carbon); background: var(--sl-sun); color: var(--sl-on); }
.sim-clear { color: var(--sl-carbon); }
.sim-clear:hover { color: var(--sl-violet); }

/* Fichas → tarjetas de papel de color con contorno, como recortes pegados. */
:root .sim-page .catalog-grid .catalog-card {
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-xl);
    background: var(--sl-sand);
    color: var(--sl-on);
    box-shadow: none;
    transition: rotate var(--duration) var(--ease-out), translate var(--duration) var(--ease-out);
}

:root .sim-page .catalog-grid .catalog-card:nth-child(4n + 2) { background: var(--sl-mint); }
:root .sim-page .catalog-grid .catalog-card:nth-child(4n + 3) { background: var(--sl-blue); }
:root .sim-page .catalog-grid .catalog-card:nth-child(4n + 4) { background: var(--sl-sun); }
:root .sim-page .catalog-grid:not(.is-list) .catalog-card:nth-child(odd) { rotate: -.8deg; }
:root .sim-page .catalog-grid:not(.is-list) .catalog-card:nth-child(even) { rotate: .8deg; }

:root .sim-page .catalog-grid:not(.is-list) .catalog-card-top {
    border-bottom: 1px solid var(--sl-on);
    background: transparent;
}

:root .sim-page .catalog-grid:not(.is-list) .catalog-card-top::before,
:root .sim-page .catalog-grid:not(.is-list) .catalog-card-content::before,
:root .sim-page .catalog-grid:not(.is-list) .catalog-category-tag::before { display: none; }

:root .sim-page .catalog-grid .catalog-category-tag {
    width: fit-content;
    padding: 4px 11px;
    border: 1px solid var(--sl-on);
    border-radius: var(--radius-pill);
    background: #fbfaf6;
    color: #16161a;
    font-family: var(--sl-sans);
    font-weight: 700;
    letter-spacing: .032em;
}

:root .sim-page .catalog-grid .catalog-card-icon {
    border: 1px solid var(--sl-on);
    border-radius: 16px;
    background: #fbfaf6;
    color: #16161a;
    box-shadow: none;
    rotate: -6deg;
}

:root .sim-page .catalog-grid .catalog-card-title {
    color: var(--sl-on);
    font-family: var(--sl-display);
    font-weight: 400;
    line-height: .95;
    text-transform: uppercase;
}

:root .sim-page .catalog-grid .catalog-card-description { color: var(--sl-on); }

:root .sim-page .catalog-grid .catalog-card-meta {
    border-top: 1px dashed var(--sl-on);
    color: var(--sl-on);
    font-family: var(--sl-sans);
    font-weight: 600;
}

:root .sim-page .catalog-grid .catalog-card-meta i { color: var(--sl-on); }
:root .sim-page .catalog-grid.is-list .catalog-card-meta span + span { border-left-color: var(--sl-on); }

:root .sim-page .catalog-start-link {
    border: 1px solid #16161a;
    border-radius: var(--radius-pill);
    background: #16161a;
    color: #fbfaf6;
    box-shadow: none;
}

:root .sim-page .catalog-start-link:hover { background: #16161a; color: var(--sl-sun); box-shadow: none; }

:root .sim-page .catalog-open-button {
    border: 1px solid #16161a;
    border-radius: 50%;
    background: #fbfaf6;
    color: #16161a;
}

:root .sim-page .catalog-open-button:hover { border-color: #16161a; background: var(--sl-sun); color: #16161a; }

/* Celulares (low-power): el catálogo queda quieto. Portada sin la cinta (se
   redibuja a 3× en pantallas densas) y fichas sin aparición, giros ni
   transiciones, para un desplazamiento fluido. */
:root.low-power .sim-page .catalog-hero { background: var(--sl-sky); }

/* Nada se anima en el catálogo del celular: ni transiciones ni efecto al tocar. */
:root.low-power .sim-page *,
:root.low-power .sim-page *::before,
:root.low-power .sim-page *::after { transition: none !important; animation: none !important; }
:root.low-power .sim-page :active { scale: none !important; }

:root.low-power .sim-page .catalog-grid > .catalog-card {
    opacity: 1 !important;
    transform: none !important;
    rotate: none !important;
    transition: none !important;
}

/* Menú «···» de cada ficha. */
:root .catalog-card-menu-button { border-radius: 50%; color: var(--sl-on); }
:root .catalog-card-menu.is-open .catalog-card-menu-button,
:root .catalog-card-menu-button:hover { border-color: var(--sl-on); background: #fbfaf6; color: #16161a; }
:root .catalog-card-menu-panel { border: 1px solid var(--sl-carbon); border-radius: 20px; background: var(--sl-paper); box-shadow: none; }
:root .catalog-card-menu-panel :is(a, button) { border-radius: var(--radius-pill); color: var(--sl-carbon); }
:root .catalog-card-menu-panel :is(a, button):hover { background: var(--sl-sky); color: var(--sl-carbon); }
:root .catalog-card-menu-panel i { color: var(--sl-carbon); }

@media (hover: hover) and (pointer: fine) {
    :root .sim-page .catalog-grid:not(.is-list) .catalog-card:hover { rotate: 0deg; translate: 0 -4px; }
}

/* Ventana «Elige una opción» y configuración de la práctica. */
.catalog-modal-backdrop { background: rgba(22, 22, 26, .45); backdrop-filter: none; }

:root .catalog-modal-dialog {
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-xl);
    background: var(--sl-paper);
    color: var(--sl-carbon);
    box-shadow: none;
}

:root .catalog-modal-close { border: 1px solid var(--sl-carbon); border-radius: 50%; color: var(--sl-carbon); }
:root .catalog-modal-close:hover { border-color: var(--sl-carbon); background: var(--sl-sun); color: var(--sl-on); }
:root .catalog-modal-dialog h2,
:root .catalog-modal-practice-step h3 { color: var(--sl-carbon); font-family: var(--sl-display); font-weight: 400; line-height: .95; text-transform: uppercase; }
:root .catalog-modal-dialog > p:not(.hero-kicker),
:root .catalog-modal-practice-step > p:not(.catalog-modal-step-kicker) { color: var(--sl-muted); }

:root .catalog-modal-action { border: 1px solid var(--sl-carbon); border-radius: 22px; background: var(--sl-card); color: var(--sl-carbon); }
:root .catalog-modal-action--primary { background: var(--sl-mint); color: var(--sl-on); }
:root .catalog-modal-action:hover { border-color: var(--sl-carbon); background: var(--sl-sun); color: var(--sl-on); }
:root .catalog-modal-action > i { color: inherit; }
:root .catalog-modal-action small { color: inherit; opacity: .8; }

:root .catalog-modal-back { color: var(--sl-carbon); }
:root .catalog-modal-back:hover { color: var(--sl-violet); }

:root .catalog-modal-mode { border: 1px solid var(--sl-carbon); border-radius: 22px; background: var(--sl-card); color: var(--sl-carbon); }
:root .catalog-modal-mode:hover { border-color: var(--sl-carbon); background: var(--sl-sky); }
:root .catalog-modal-mode.is-selected { border-color: var(--sl-carbon); background: var(--sl-sky); }
:root .catalog-modal-mode > i { border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-sun); color: var(--sl-on); }
:root .catalog-modal-mode:nth-child(2) > i { background: var(--sl-mint); color: var(--sl-on); }
:root .catalog-modal-mode small { color: var(--sl-muted); }
:root .catalog-modal-mode b { border-color: var(--sl-carbon); }
:root .catalog-modal-mode.is-selected b { border-color: var(--sl-carbon); box-shadow: inset 0 0 0 4px var(--sl-carbon); }

:root .catalog-modal-question-count { color: var(--sl-carbon); }
:root .catalog-modal-question-count-option { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-paper); color: var(--sl-carbon); }
:root .catalog-modal-question-count-option:hover { border-color: var(--sl-carbon); background: var(--sl-sky); color: var(--sl-carbon); }
:root .catalog-modal-question-count-option.is-selected { border-color: var(--sl-carbon); background: var(--sl-carbon); color: var(--sl-paper); }
:root .catalog-modal-question-count small,
:root .catalog-custom-count label { color: var(--sl-muted); }
:root .catalog-custom-count input { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-card); color: var(--sl-carbon); padding-inline: 18px; }
:root .catalog-custom-count input[aria-invalid="true"] { border-color: var(--sl-bad); }
:root .catalog-modal-question-count .catalog-count-error { color: var(--sl-bad); }
:root .catalog-modal-start-practice { justify-content: space-between; width: 100%; text-transform: none; }
:root .catalog-modal-start-practice[aria-disabled="true"] { border-color: var(--sl-muted); background: var(--sl-mist); color: var(--sl-muted); }

/* ==========================================================
   PRÁCTICA (examen) Y REVISIÓN
   ========================================================== */

:root .practice-workspace { color: var(--sl-carbon); font-family: var(--sl-sans); }
:root .practice-topbar { border-bottom: 0; }
:root .practice-breadcrumb { color: var(--sl-muted); }
:root .practice-breadcrumb a { color: var(--sl-carbon); font-weight: 600; }
:root .practice-breadcrumb strong { color: var(--sl-violet); }
:root .practice-terminal-mark { border-color: var(--sl-carbon); border-radius: 50%; background: var(--sl-sun); color: var(--sl-on); }

:root .practice-heading h1 {
    color: var(--sl-carbon);
    font-family: var(--sl-display);
    font-size: clamp(1.8rem, 1.1rem + 2vw, 3rem);
    font-weight: 400;
    line-height: .9;
    text-transform: uppercase;
}

:root .practice-heading h1::after { display: none; }
:root .practice-heading p { color: var(--sl-muted); font-family: var(--sl-sans); font-weight: 600; }

:root .practice-mode-badge {
    padding: 8px 16px 8px 10px;
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-pill);
    background: var(--sl-mint);
    color: var(--sl-on);
}

:root .practice-mode-badge > i { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--sl-on); border-radius: 50%; background: #fbfaf6; color: #16161a; }
:root .practice-mode-badge strong,
:root .practice-mode-badge small { color: var(--sl-on); }

/* Barra de sesión: píldora negra con el contador. */
:root .practice-session-bar { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-carbon); color: var(--sl-paper); font-weight: 600; }
:root .practice-session-bar strong { color: var(--sl-sun); }
html[data-sl-theme="dark"] .practice-session-bar strong { color: #463fae; }

:root :is(.practice-progress-panel, .practice-question-panel, .practice-navigation) {
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-xl);
    background: var(--sl-card);
    box-shadow: none;
}

:root .practice-progress-panel { background: var(--sl-sky); }
:root .practice-question-index { border-top-color: var(--sl-carbon); }
:root .practice-question-index > span,
:root .practice-progress-heading > span { color: var(--sl-carbon); font-weight: 800; }
:root .practice-progress-heading strong { color: var(--sl-carbon); font-family: var(--sl-display); font-weight: 400; }
:root .practice-progress-heading small { color: var(--sl-muted); }
:root .practice-progress-track { border: 1px solid var(--sl-carbon); background: var(--sl-paper); }
:root .practice-progress-track i { background: var(--sl-carbon); }

:root .practice-question-grid { scrollbar-color: var(--sl-carbon) transparent; }
:root .practice-question-grid button { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-paper); color: var(--sl-carbon); font-weight: 700; }
:root .practice-question-grid button.is-answered { border-color: var(--sl-carbon); background: var(--sl-mint); color: var(--sl-on); }
:root .practice-question-grid button.is-current { border-color: var(--sl-carbon); background: var(--sl-carbon); color: var(--sl-paper); }
:root .practice-legend { color: var(--sl-carbon); }
:root .practice-legend i { border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-paper); }
:root .practice-legend i.is-answered { background: var(--sl-mint); }
:root .practice-legend i.is-current { background: var(--sl-carbon); }
:root .practice-legend i.is-marked { background: var(--sl-sun); }
:root .practice-question-grid button.is-marked::after { border: 1px solid var(--sl-carbon); background: var(--sl-sun); box-shadow: none; }

:root .practice-finish-side { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-ember); color: var(--sl-on); font-weight: 700; }
:root .practice-finish-side:hover { background: var(--sl-sun); color: var(--sl-on); }

/* Pregunta. */
:root .practice-question .question-card-heading { border-bottom: 1px solid var(--sl-carbon); }
:root .practice-question :is(.question-number, .question-type) { color: var(--sl-carbon); font-weight: 800; }
:root .practice-question .question-number { padding: 4px 11px; border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-sun); color: var(--sl-on); }
:root .practice-question .question-text { color: var(--sl-carbon); font-family: var(--sl-sans); font-weight: 700; }

:root .practice-mark-button { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-paper); color: var(--sl-carbon); }
:root .practice-mark-button:hover { border-color: var(--sl-carbon); background: var(--sl-sky); color: var(--sl-carbon); }
:root .practice-mark-button.is-marked { border-color: var(--sl-carbon); background: var(--sl-sun); color: var(--sl-on); }
:root .practice-mark-button.is-marked i { color: var(--sl-on); }

:root .practice-question .practice-option { border: 1px solid var(--sl-carbon); border-radius: 22px; background: var(--sl-paper); }
:root .practice-question .practice-option:hover { background: var(--sl-sky); }
:root .practice-question .practice-option:has(input:checked) { border-color: var(--sl-carbon); background: var(--sl-mint); }
:root .practice-question .practice-option:has(input:checked) .question-option-text { color: var(--sl-on); }
:root .practice-question .question-option-marker { border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-paper); color: var(--sl-carbon); font-weight: 800; }
:root .practice-question .practice-option:has(input:checked) .question-option-marker { background: var(--sl-carbon); color: var(--sl-paper); }
:root .practice-question .question-option-text { color: var(--sl-carbon); }
:root .practice-question .question-option-check { color: var(--sl-paper); }
:root .practice-question .practice-option:has(input:checked) .question-option-check { background: var(--sl-carbon); }
:root .practice-question .practice-option::after { box-shadow: none; }

/* Navegación entre preguntas. */
:root .practice-navigation > span { color: var(--sl-muted); }
:root .practice-nav-button { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-paper); color: var(--sl-carbon); font-family: var(--sl-sans); font-weight: 700; }
:root .practice-nav-button:hover:not(:disabled) { border-color: var(--sl-carbon); background: var(--sl-sun); color: var(--sl-on); }
:root .practice-nav-button--next { background: var(--sl-carbon); color: var(--sl-paper); }
:root .practice-nav-button--next:hover:not(:disabled) { background: var(--sl-sun); color: var(--sl-on); }
:root .practice-nav-hint kbd { border-color: var(--sl-carbon); background: var(--sl-mist); color: var(--sl-carbon); }

/* Ventana «¿Quieres finalizar?». */
:root .practice-confirm-backdrop { background: rgba(22, 22, 26, .45); backdrop-filter: none; }
:root .practice-confirm-dialog { border: 1px solid var(--sl-carbon); border-radius: var(--radius-xl); background: var(--sl-paper); color: var(--sl-carbon); box-shadow: none; }
:root .practice-confirm-close { border: 1px solid var(--sl-carbon); border-radius: 50%; color: var(--sl-carbon); }
:root .practice-confirm-close:hover { background: var(--sl-sun); color: var(--sl-on); }
:root .practice-confirm-dialog h2 { color: var(--sl-carbon); font-family: var(--sl-display); font-weight: 400; text-transform: uppercase; }
:root .practice-confirm-dialog > p:not(.hero-kicker):not(.practice-confirm-warning) { color: var(--sl-muted); }
:root .practice-confirm-summary > div { border: 1px solid var(--sl-carbon); border-radius: 20px; background: var(--sl-sky); }
:root .practice-confirm-summary > div + div { background: var(--sl-sand); }
:root .practice-confirm-summary span { color: var(--sl-on); }
:root .practice-confirm-summary strong { color: var(--sl-on); font-family: var(--sl-display); font-weight: 400; }
:root .practice-confirm-warning { color: var(--sl-carbon); }
:root .practice-confirm-warning i { color: var(--sl-ember); }
:root .practice-confirm-marked i { color: var(--sl-violet); }
:root .practice-confirm-button { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); font-weight: 700; }
:root .practice-confirm-button--cancel { background: var(--sl-paper); color: var(--sl-carbon); }
:root .practice-confirm-button--submit { border-color: var(--sl-carbon); background: var(--sl-carbon); color: var(--sl-paper); box-shadow: none; }
:root .practice-confirm-button:hover { background: var(--sl-sun); color: var(--sl-on); }
:root .practice-saving { background: var(--sl-paper); color: var(--sl-carbon); }
:root .practice-saving-spinner { border-color: var(--sl-line); border-top-color: var(--sl-carbon); }

/* Resultado y revisión. */
:root .practice-result-topbar > a { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-paper); color: var(--sl-carbon); font-weight: 700; }
:root .practice-result-topbar > a:hover { background: var(--sl-sun); color: var(--sl-on); }
:root .practice-result-topbar > span { padding: 6px 12px; border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-mint); color: var(--sl-on); font-weight: 700; }

:root .practice-review { border: 1px solid var(--sl-carbon); border-radius: var(--radius-xl); background: var(--sl-card); box-shadow: none; }
:root .practice-review-heading { border-bottom: 1px solid var(--sl-carbon); }
:root .practice-review-heading h2 { color: var(--sl-carbon); font-family: var(--sl-display); font-weight: 400; text-transform: uppercase; }
:root .practice-review-heading > strong { padding: 8px 18px; border: 1px solid var(--sl-carbon); border-radius: 20px; background: var(--sl-sun); color: var(--sl-on); font-family: var(--sl-display); font-weight: 400; rotate: 3deg; }
:root .practice-timeout-note { border: 1px solid var(--sl-carbon); border-radius: 20px; background: var(--sl-sand); color: var(--sl-on); }

:root .practice-review-card { border: 1px solid var(--sl-carbon); border-radius: 26px; background: var(--sl-paper); }
:root .practice-review-card.is-correct { border-color: var(--sl-carbon); }
:root .practice-review-card.is-incorrect { border-color: var(--sl-carbon); }
:root .practice-review-card-heading { color: var(--sl-muted); font-weight: 800; }
:root .practice-review-card-heading strong { padding: 4px 11px; border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); }
:root .practice-review-card.is-correct .practice-review-card-heading strong { background: var(--sl-mint); color: var(--sl-on); }
:root .practice-review-card.is-incorrect .practice-review-card-heading strong { background: var(--sl-ember); color: var(--sl-on); }
:root .practice-review-card h3 { color: var(--sl-carbon); }
:root .practice-review-option { border: 1px solid var(--sl-line); border-radius: 18px; color: var(--sl-carbon); }
:root .practice-review-option .question-option-marker { border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-paper); color: var(--sl-carbon); }
:root .practice-review-option small { color: var(--sl-on); font-weight: 700; }
:root .practice-review-option.is-correct-option { border-color: var(--sl-carbon); background: var(--sl-mint); color: var(--sl-on); }
:root .practice-review-option.is-correct-option .question-option-marker { background: var(--sl-carbon); color: var(--sl-paper); }
:root .practice-review-option.is-selected-wrong { border-color: var(--sl-carbon); background: var(--sl-ember); color: var(--sl-on); }
:root .practice-review-option.is-selected-wrong small { color: var(--sl-on); }

:root .practice-review-footer { border-top: 1px solid var(--sl-carbon); }
:root .practice-review-pagination { color: var(--sl-carbon); }
:root .practice-review-pagination a { border: 1px solid var(--sl-carbon); border-radius: 50%; color: var(--sl-carbon); }
:root .practice-review-pagination a:hover { background: var(--sl-sun); color: var(--sl-on); }
:root .practice-review-control { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-paper); color: var(--sl-carbon); font-weight: 700; }
:root .practice-review-control--restart { border-color: var(--sl-carbon); background: var(--sl-carbon); color: var(--sl-paper); }
:root .practice-review-control:hover { background: var(--sl-sun); color: var(--sl-on); }

/* ==========================================================
   CUESTIONARIO DE LECTURA
   ========================================================== */

:root .questionnaire-header { border-bottom: 0; }
:root .questionnaire-header .public-back-link { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-paper); color: var(--sl-carbon); font-weight: 700; }
:root .questionnaire-header .public-back-link:hover { background: var(--sl-sun); color: var(--sl-on); }

:root .questionnaire-page .public-page-title {
    color: var(--sl-carbon);
    font-family: var(--sl-display);
    font-size: clamp(2rem, 1.2rem + 2.6vw, 3.6rem);
    font-weight: 400;
    line-height: .88;
    text-transform: uppercase;
}

:root .questionnaire-page .public-resource-context { color: var(--sl-carbon); font-weight: 600; }
:root .questionnaire-context-dot { border: 1px solid var(--sl-carbon); background: var(--sl-mint); box-shadow: none; }
:root .questionnaire-page .questionnaire-note { color: var(--sl-muted); }

:root .questionnaire-search,
:root .questionnaire-toolbar-meta { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-paper); color: var(--sl-carbon); box-shadow: none; }
:root .questionnaire-search:focus-within { border-color: var(--sl-carbon); background: var(--sl-paper); box-shadow: 0 0 0 3px var(--sl-violet); }
:root .questionnaire-search input { color: var(--sl-carbon); }
:root .questionnaire-search input::placeholder { color: var(--sl-muted); }
:root .questionnaire-toolbar-meta { background: var(--sl-sun); color: var(--sl-on); font-weight: 700; }
:root .questionnaire-toolbar-meta i { color: var(--sl-on); }

:root .questionnaire-page .question-card {
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-xl);
    background: var(--sl-card);
    box-shadow: none;
}

:root .questionnaire-page .question-card::before { display: none; }
:root .questionnaire-page .question-number { padding: 3px 11px; border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-sky); color: var(--sl-carbon); font-weight: 800; }
:root .questionnaire-page .question-type { color: var(--sl-muted); font-weight: 700; }
:root .questionnaire-page .question-text { color: var(--sl-carbon); font-weight: 700; }
:root .questionnaire-page .question-option { border: 1px solid var(--sl-line); border-radius: 18px; background: var(--sl-paper); color: var(--sl-carbon); }
:root .questionnaire-page .question-option--correct { border-color: var(--sl-carbon); background: var(--sl-mint); color: var(--sl-on); box-shadow: none; }
:root .questionnaire-page .question-option-marker { border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-paper); color: var(--sl-carbon); }
:root .questionnaire-page .question-option--correct .question-option-marker { background: var(--sl-carbon); color: var(--sl-paper); }
:root .questionnaire-page .question-correct-label { color: var(--sl-on); }
:root .questionnaire-no-options { color: var(--sl-muted); }

/* ==========================================================
   PROYECTOS
   ========================================================== */

:root .project-detail,
:root .project-shell { color: var(--sl-carbon); }

:root :is(.project-hero, .project-toolbar, .project-card, .project-detail-header, .project-detail-story, .project-related) {
    border: 1px solid var(--sl-carbon);
    border-radius: var(--radius-xl);
    background: var(--sl-card);
    box-shadow: none;
}

:root :is(.project-hero, .project-detail-header) { border: 0; background: var(--sl-ribbon-img) center / cover no-repeat, var(--sl-sky); }
:root .project-hero::after { display: none; }

:root .project-hero h1,
:root .project-detail-copy h1 {
    color: var(--sl-carbon);
    font-family: var(--sl-display);
    font-size: clamp(2.4rem, 1.1rem + 3.6vw, 4.8rem);
    font-weight: 400;
    letter-spacing: 0;
    line-height: .84;
    text-transform: uppercase;
}

:root .project-hero h1 span { display: block; color: var(--sl-carbon); }
:root .project-detail-copy { min-width: 0; }
:root .project-detail-copy h1 { font-size: clamp(2.1rem, .6rem + 2.8vw, 4rem); overflow-wrap: anywhere; hyphens: auto; }
:root .project-hero-copy > p:last-child,
:root .project-detail-copy > p:not(.project-kicker) { color: var(--sl-carbon); font-weight: 500; }

/* Terminal del portafolio → tarjeta de papel girada. */
:root .project-hero-terminal { border: 1px solid var(--sl-carbon); border-radius: 24px; background: var(--sl-paper); box-shadow: none; rotate: 2deg; }
:root .project-hero-terminal > div span { color: var(--sl-carbon); }
:root .project-hero-terminal pre { background: none; color: var(--sl-carbon); }
:root .project-hero-terminal pre b { color: var(--sl-violet); }
:root .project-hero-terminal pre span { color: var(--sl-ok); }
:root .project-hero-terminal pre em { color: var(--sl-violet); }

/* Filtros. */
:root .project-search,
:root .project-filter-select { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-paper); color: var(--sl-carbon); }
:root .project-filter-select:hover { background: var(--sl-sky); }
:root .project-filter-select > i,
:root .project-search > i { color: var(--sl-carbon); }
:root .project-filter-select > i { display: grid; place-items: center; width: 32px; height: 32px; border: 1px solid var(--sl-carbon); border-radius: 50%; background: var(--sl-sun); color: var(--sl-on); }
:root .project-search input { color: var(--sl-carbon); }
:root .project-search input::placeholder { color: var(--sl-muted); }
:root .project-filter-select small { color: var(--sl-muted); font-weight: 700; }
:root .project-filter-select select { background: transparent; color: var(--sl-carbon); color-scheme: light; }
html[data-sl-theme="dark"] .project-filter-select select { color-scheme: dark; }
:root .project-filter-summary { color: var(--sl-muted); }
:root .project-filter-summary b { color: var(--sl-carbon); }
:root .project-filter-summary a { color: var(--sl-carbon); text-decoration: underline; }

/* Tarjetas de proyecto. */
:root .project-card { background: var(--sl-mint); color: var(--sl-on); transition: rotate var(--duration) var(--ease-out), translate var(--duration) var(--ease-out); }
:root .project-grid .project-card:nth-child(4n + 2) { background: var(--sl-sand); }
:root .project-grid .project-card:nth-child(4n + 3) { background: var(--sl-blue); }
:root .project-grid .project-card:nth-child(4n + 4) { background: var(--sl-sun); }
:root .project-grid .project-card:nth-child(odd) { rotate: -.8deg; }
:root .project-grid .project-card:nth-child(even) { rotate: .8deg; }
:root .project-card:hover { border-color: var(--sl-carbon); box-shadow: none; transform: none; }
:root .project-card::after { display: none; }
:root .project-card-cover { margin: 10px 10px 0; border: 1px solid var(--sl-on); border-radius: 22px; background: #fbfaf6; overflow: hidden; }
:root .project-card-cover::after { display: none; }
:root .project-card-code { border: 1px solid #16161a; border-radius: 50%; background: #fbfaf6; color: #16161a; backdrop-filter: none; }
:root .project-card-cover em { border: 1px solid #16161a; border-radius: var(--radius-pill); background: var(--sl-sun); color: #16161a; font-weight: 700; }
:root .project-card-tags span { color: var(--sl-on); font-weight: 800; }
:root .project-card-tags small { border: 1px solid var(--sl-on); border-radius: var(--radius-pill); background: #fbfaf6; color: #16161a; font-weight: 600; }
:root .project-card h2 { font-family: var(--sl-display); font-weight: 400; line-height: .95; text-transform: uppercase; }
:root .project-card h2 a { color: var(--sl-on); }
:root .project-card h2 a:hover { color: var(--sl-on); text-decoration: underline; }
:root .project-card-body > p { color: var(--sl-on); }
:root .project-card-footer > a { padding: 8px 16px; border: 1px solid #16161a; border-radius: var(--radius-pill); background: #16161a; color: #fbfaf6; font-weight: 700; }
:root .project-card-footer > a:hover { color: var(--sl-sun); }
:root .project-card-footer > span { border: 1px solid #16161a; border-radius: 50%; background: #fbfaf6; color: #16161a; }

@media (hover: hover) and (pointer: fine) {
    :root .project-grid .project-card:hover { rotate: 0deg; translate: 0 -4px; }
}

/* Detalle de proyecto. */
:root .project-detail-breadcrumb { color: var(--sl-muted); }
:root .project-detail-breadcrumb a { color: var(--sl-carbon); font-weight: 600; }
:root .project-detail-breadcrumb strong { color: var(--sl-violet); }
:root .project-detail-tags span { border: 1px solid var(--sl-carbon); border-radius: var(--radius-pill); background: var(--sl-paper); color: var(--sl-carbon); font-weight: 700; }
:root .project-detail-cover { padding: 10px; border: 1px solid var(--sl-carbon); border-radius: 28px; background: var(--sl-paper); rotate: 2deg; }
:root .project-detail-cover img { border-radius: 20px; }
:root .project-detail-cover figcaption { color: var(--sl-muted); }
:root .project-detail-cover figcaption i { background: var(--sl-ok); box-shadow: none; }
:root .project-story-index { color: var(--sl-carbon); font-family: var(--sl-display); font-weight: 400; }
:root .project-story-index i { background: var(--sl-carbon); }
:root .project-detail-story h2,
:root .project-related h2 { color: var(--sl-carbon); font-family: var(--sl-display); font-weight: 400; line-height: .95; text-transform: uppercase; }
:root .project-description { color: var(--sl-carbon); font-size: var(--text-md); }
:root .project-detail-meta { border: 1px solid var(--sl-carbon); border-radius: 24px; padding: 6px 18px; background: var(--sl-sand); color: var(--sl-on); }
:root .project-detail-meta > span { border-bottom-color: var(--sl-on); }
:root .project-detail-meta > span:last-child { border-bottom: 0; }
:root .project-detail-meta small { color: var(--sl-on); opacity: .75; }
:root .project-detail-meta strong { color: var(--sl-on); font-size: var(--text-sm); }
:root .project-detail-meta strong i { border: 1px solid var(--sl-on); background: var(--sl-mint); box-shadow: none; }
:root .project-related > header > a { color: var(--sl-carbon); text-decoration: underline; }

@media (max-width: 820px) {
    :root .project-hero-terminal,
    :root .project-detail-cover { rotate: 0deg; }
}

/* Cabecera móvil: sin la versión, para dejar sitio al botón de modo noche. */
@media (max-width: 960px) {
    :root .responsive-brand .brand-version { display: none; }
}