/* ==========================================================
   CAPA DE REFINAMIENTO DE INTERFAZ
   Se carga después de pages.css. Usa los tokens de tokens.css y
   agrupa estados, foco, efectos y componentes compartidos.
   ========================================================== */

/* ---------- Base: superficies del navegador ---------- */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    font-family: var(--font-sans);
    line-height: var(--leading-normal);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

::selection {
    background: rgba(47, 124, 255, .38);
    color: var(--color-text);
}

html {
    scrollbar-color: var(--color-border-strong) var(--color-bg);
}

input,
textarea {
    caret-color: var(--color-primary);
}

select,
select option {
    background-color: var(--color-surface-2);
    color: var(--color-text);
}

a,
button,
summary,
label,
select,
[role="option"] {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

[id] {
    scroll-margin-top: 88px;
}

:where(h1, h2, h3) {
    text-wrap: balance;
}

:where(p, li, figcaption, blockquote) {
    text-wrap: pretty;
}

/* Cifras que cambian o se comparan: ancho fijo para que no «bailen». */
[data-practice-timer],
[data-practice-answered],
.practice-question-grid button,
.home-metric strong,
.analytics-metric strong,
.catalog-toolbar-summary b,
.catalog-pagination-page,
.questionnaire-page-number,
.question-number,
.practice-review-heading strong {
    font-variant-numeric: tabular-nums;
}

/* ---------- Foco visible común ---------- */

:where(a, button, summary, select, textarea, input:not([type="radio"], [type="checkbox"]), [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--focus-ring);
    outline-offset: 3px;
}

/* Campos cuyo contenedor dibuja el borde: el anillo va en el contenedor. */
.catalog-search:has(input:focus-visible),
.catalog-select:has(select:focus-visible),
.questionnaire-search:has(input:focus-visible),
.project-search:has(input:focus-visible),
.project-filter-select:has(select:focus-visible) {
    outline: 2px solid var(--focus-ring);
    outline-offset: 2px;
}

.catalog-search input:focus-visible,
.catalog-select select:focus-visible,
.questionnaire-search input:focus-visible,
.project-search input:focus-visible,
.project-filter-select select:focus-visible,
.command-palette-search input:focus-visible {
    outline: none;
}

/* ---------- Opciones de respuesta y modos: foco de teclado visible ---------- */

.practice-question .practice-option,
.catalog-modal-mode {
    position: relative;
}

.practice-question .practice-option:has(input:focus-visible),
.catalog-modal-mode:has(input:focus-visible) {
    outline: 2px solid var(--focus-ring, #6daaff);
    outline-offset: 3px;
}

/* ---------- Catálogo: menú «•••» de tarjeta ---------- */

.catalog-card:has(.catalog-card-menu.is-open) {
    position: relative;
    z-index: 10;
}

.catalog-card-menu {
    position: relative;
    display: block;
    color: inherit;
    font-size: inherit;
    letter-spacing: normal;
}

.catalog-card-menu-button {
    display: grid;
    place-items: center;
    width: 36px;
    height: 32px;
    margin: -6px -6px -6px 0;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text-subtle);
    font-size: 1.125rem;
    cursor: pointer;
}

.catalog-card-menu-button:hover,
.catalog-card-menu.is-open .catalog-card-menu-button {
    border-color: var(--color-border-strong);
    background: var(--color-surface-2);
    color: var(--color-text);
}

.catalog-card-menu-panel {
    position: absolute;
    z-index: 20;
    top: calc(100% + var(--space-2));
    right: -6px;
    display: grid;
    min-width: 212px;
    padding: var(--space-1);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    background: var(--color-surface-2);
    box-shadow: var(--shadow-3);
    transform-origin: top right;
    animation: ui-pop-in var(--duration-fast) var(--ease-out);
}

.catalog-card-menu-panel[hidden] {
    display: none;
}

.catalog-card-menu-panel a,
.catalog-card-menu-panel button {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    padding: 0 var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-text);
    font: var(--weight-semibold) var(--text-sm) / 1 var(--font-sans);
    text-align: left;
    cursor: pointer;
}

.catalog-card-menu-panel i {
    color: var(--color-primary);
    font-size: 1rem;
}

.catalog-card-menu-panel a:hover,
.catalog-card-menu-panel button:hover,
.catalog-card-menu-panel a:focus-visible,
.catalog-card-menu-panel button:focus-visible {
    background: var(--color-primary-soft);
    outline: none;
    box-shadow: inset 0 0 0 1px var(--color-primary-line);
}

@keyframes ui-pop-in {
    from { opacity: 0; transform: translateY(-4px) scale(.97); }
    to { opacity: 1; transform: none; }
}

/* ---------- Catálogo: atajo de búsqueda ---------- */

.catalog-shortcut {
    min-width: 24px;
    padding: 2px 7px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-subtle);
    font: var(--weight-semibold) var(--text-xs) / 1.4 var(--font-mono);
    text-align: center;
}

/* ---------- Catálogo: vista de lista ---------- */

.catalog-grid.is-list {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

.catalog-grid.is-list .catalog-card {
    display: grid;
    grid-template-columns: 48px minmax(0, 1fr) auto auto auto;
    grid-template-areas:
        "icon tag   meta actions menu"
        "icon title meta actions menu"
        "icon desc  meta actions menu";
    align-items: center;
    column-gap: var(--space-5);
    row-gap: 2px;
    min-height: 0;
    padding: var(--space-3) var(--space-5);
}

.catalog-grid.is-list .catalog-card-top,
.catalog-grid.is-list .catalog-card-content,
.catalog-grid.is-list .catalog-card-copy {
    display: contents;
}

.catalog-grid.is-list .catalog-category-tag { grid-area: tag; justify-self: start; }
.catalog-grid.is-list .catalog-card-menu { grid-area: menu; }
.catalog-grid.is-list .catalog-card-icon {
    grid-area: icon;
    width: 48px;
    height: 48px;
    font-size: 1.5rem;
}

.catalog-grid.is-list .catalog-card-title {
    grid-area: title;
    margin: 2px 0 0;
    font-size: var(--text-md);
}

.catalog-grid.is-list .catalog-card-description {
    grid-area: desc;
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    line-clamp: 1;
}

.catalog-grid.is-list .catalog-card-meta {
    grid-area: meta;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    margin: 0;
    padding: 0 0 0 var(--space-5);
    border-top: 0;
    border-left: 1px solid var(--color-border);
}

.catalog-grid.is-list .catalog-card-meta span + span {
    padding-left: 0;
    border-left: 0;
}

.catalog-grid.is-list .catalog-card-actions {
    grid-area: actions;
    margin: 0;
}

.catalog-grid.is-list .catalog-start-link {
    min-width: 128px;
}

@media (max-width: 768px) {
    .catalog-grid.is-list .catalog-card {
        grid-template-columns: 40px minmax(0, 1fr) auto;
        grid-template-areas:
            "icon tag     menu"
            "icon title   menu"
            "desc desc    desc"
            "meta meta    meta"
            "actions actions actions";
        row-gap: var(--space-1);
        column-gap: var(--space-3);
        padding: var(--space-3);
    }

    .catalog-grid.is-list .catalog-card-icon {
        width: 40px;
        height: 40px;
        font-size: 1.25rem;
    }

    .catalog-grid.is-list .catalog-card-description {
        margin-top: var(--space-1);
        -webkit-line-clamp: 2;
        line-clamp: 2;
    }

    .catalog-grid.is-list .catalog-card-meta {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-1) var(--space-3);
        margin-top: var(--space-1);
        padding: 0;
        border-left: 0;
    }

    .catalog-grid.is-list .catalog-card-actions {
        margin-top: var(--space-2);
    }

    .catalog-grid.is-list .catalog-start-link {
        flex: 1;
    }
}

@media (max-width: 500px) {
    .catalog-card-menu {
        display: block;
    }
}

/* Transición entre vistas: las tarjetas se desplazan a su nueva posición. */
::view-transition-group(*) {
    animation-duration: var(--duration-slow);
    animation-timing-function: var(--ease-out);
}

/* ---------- Toast ---------- */

.catalog-toast[data-tone="error"] {
    border-color: color-mix(in srgb, var(--color-danger) 55%, transparent);
    color: #ffd9dd;
}

/* ---------- Práctica: marcar para revisar ---------- */

.practice-question .question-card-heading {
    gap: var(--space-3);
}

.practice-question .question-type {
    margin-left: auto;
}

.practice-mark-button {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 32px;
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-pill);
    background: transparent;
    color: var(--color-text-muted);
    font: var(--weight-semibold) var(--text-xs) / 1 var(--font-sans);
    cursor: pointer;
}

.practice-mark-button:hover {
    border-color: color-mix(in srgb, var(--color-violet) 60%, transparent);
    color: var(--color-text);
}

.practice-mark-button.is-marked {
    border-color: color-mix(in srgb, var(--color-violet) 70%, transparent);
    background: color-mix(in srgb, var(--color-violet) 14%, transparent);
    color: #e2cdff;
}

.practice-mark-button.is-marked i {
    color: var(--color-violet);
    animation: ui-mark-pop var(--duration) var(--ease-out);
}

@keyframes ui-mark-pop {
    0% { transform: scale(.6); }
    60% { transform: scale(1.18); }
    100% { transform: scale(1); }
}

.practice-question-grid button.is-marked::after {
    content: "";
    position: absolute;
    top: 3px;
    right: 3px;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-violet);
    box-shadow: 0 0 0 2px var(--color-surface);
}

.practice-confirm-dialog > p.practice-confirm-marked[data-practice-confirm-marked] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-3);
    color: #d6bcff;
    font-size: var(--text-xs);
}

.practice-confirm-marked i {
    color: var(--color-violet);
}

.practice-confirm-dialog > p.practice-confirm-marked[hidden] {
    display: none;
}

@media (max-width: 480px) {
    .practice-mark-button span {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }

    .practice-mark-button {
        width: var(--tap-target);
        height: var(--tap-target);
        justify-content: center;
        padding: 0;
    }
}

/* ---------- Utilidades ---------- */

.visually-hidden {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

kbd {
    font-family: var(--font-mono);
}

/* ---------- Sidebar: acceso a la paleta ---------- */

.sidebar-command {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    min-height: 40px;
    margin: var(--space-3) 0 var(--space-1);
    padding: 0 var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: color-mix(in srgb, var(--color-surface-2) 70%, transparent);
    color: var(--color-text-subtle);
    font: var(--weight-semibold) var(--text-sm) / 1 var(--font-sans);
    cursor: pointer;
}

.sidebar-command span {
    flex: 1;
    text-align: left;
}

.sidebar-command kbd {
    padding: 2px 6px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.sidebar-command:hover {
    border-color: var(--color-primary-line);
    background: var(--color-surface-2);
    color: var(--color-text);
}

@media (hover: none) {
    .sidebar-command kbd {
        display: none;
    }
}

/* ---------- Paleta de comandos ---------- */

.command-palette {
    position: fixed;
    z-index: var(--z-modal);
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding: max(12vh, var(--space-6)) var(--space-4) var(--space-4);
}

.command-palette[hidden] {
    display: none;
}

.command-palette-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(1, 5, 12, .72);
    backdrop-filter: blur(6px);
}

.command-palette-dialog {
    position: relative;
    display: flex;
    flex-direction: column;
    width: min(100%, 620px);
    max-height: min(560px, 76vh);
    overflow: hidden;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: linear-gradient(180deg, #0b1423, var(--color-surface));
    box-shadow: var(--shadow-3), 0 0 0 1px rgba(47, 124, 255, .08);
    outline: none;
}

.command-palette-search {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    border-bottom: 1px solid var(--color-border);
}

.command-palette-prompt {
    color: var(--color-primary);
    font: var(--weight-bold) var(--text-md) / 1 var(--font-mono);
}

.command-palette-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--color-text);
    font: var(--weight-semibold) var(--text-md) / 1.4 var(--font-sans);
    caret-color: var(--color-primary);
}

.command-palette-search input::placeholder {
    color: var(--color-text-subtle);
}

.command-palette-search input:focus,
.command-palette-search input:focus-visible {
    outline: none;
}

.command-palette-key,
.command-palette-footer kbd {
    padding: 2px 6px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.command-palette-list {
    flex: 1;
    margin: 0;
    padding: var(--space-2);
    overflow-y: auto;
    overscroll-behavior: contain;
    list-style: none;
}

.command-palette-group {
    padding: var(--space-3) var(--space-3) var(--space-2);
    color: var(--color-text-subtle);
    font: var(--weight-bold) var(--text-xs) / 1 var(--font-mono);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
}

.command-palette-option {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--tap-target);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font: var(--weight-semibold) var(--text-sm) / 1.3 var(--font-sans);
    cursor: pointer;
}

.command-palette-option[hidden],
.command-palette-group[hidden],
.command-palette-empty[hidden] {
    display: none;
}

.command-palette-option i {
    color: var(--color-text-subtle);
    font-size: 1rem;
}

.command-palette-option span {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.command-palette-option q {
    color: var(--color-primary-hover);
    quotes: "«" "»";
}

.command-palette-option small {
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.command-palette-option[aria-selected="true"] {
    background: var(--color-primary-soft);
    box-shadow: inset 0 0 0 1px var(--color-primary-line);
}

.command-palette-option[aria-selected="true"] i {
    color: var(--color-primary);
}

.command-palette-empty {
    padding: var(--space-6) var(--space-3);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    text-align: center;
}

.command-palette-footer {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    padding: var(--space-3) var(--space-5);
    border-top: 1px solid var(--color-border);
    color: var(--color-text-subtle);
    font-size: var(--text-xs);
}

.command-palette-footer span {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

@media (hover: none) {
    .command-palette-footer,
    .command-palette-key {
        display: none;
    }
}

/* ---------- Diálogos: entrada y salida ---------- */

.command-palette .command-palette-backdrop,
.catalog-modal .catalog-modal-backdrop,
.practice-confirm-modal .practice-confirm-backdrop {
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
}

.command-palette .command-palette-dialog,
.catalog-modal .catalog-modal-dialog,
.practice-confirm-modal .practice-confirm-dialog {
    opacity: 0;
    transform: translateY(10px) scale(.98);
    transition: opacity var(--duration) var(--ease-out), transform var(--duration) var(--ease-out);
}

.command-palette.is-open .command-palette-backdrop,
.catalog-modal.is-open .catalog-modal-backdrop,
.practice-confirm-modal.is-open .practice-confirm-backdrop {
    opacity: 1;
}

.command-palette.is-open .command-palette-dialog,
.catalog-modal.is-open .catalog-modal-dialog,
.practice-confirm-modal.is-open .practice-confirm-dialog {
    opacity: 1;
    transform: none;
}

.catalog-modal-dialog,
.practice-confirm-dialog {
    overscroll-behavior: contain;
}

/* ---------- Imágenes responsivas ---------- */

/* <picture> no debe alterar la maquetación original de la imagen. */
.home-machine-stage > picture,
.catalog-hero-visual > picture {
    display: contents;
}

/* Con display: contents los <source> pasarían a ser celdas del grid (el
   navegador no los oculta por defecto) y desplazarían el contenido. */
picture > source {
    display: none;
}

/* ---------- Navegación: salto al contenido y marca ---------- */

.skip-link {
    position: fixed;
    z-index: calc(var(--z-toast) + 1);
    top: calc(var(--space-3) + env(safe-area-inset-top, 0px));
    left: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-primary-strong);
    color: var(--color-on-primary);
    font: var(--weight-bold) var(--text-sm) / 1 var(--font-sans);
    box-shadow: var(--shadow-2);
    transform: translateY(calc(-100% - var(--space-6)));
    transition: transform var(--duration-fast) var(--ease-out);
}

.skip-link:focus,
.skip-link:focus-visible {
    transform: none;
}

.dashboard-main:focus {
    outline: none;
}

.brand-header .brand-title {
    text-decoration: none;
}

.responsive-brand .brand-title {
    pointer-events: auto;
}

.brand-header .brand-title:focus-visible {
    border-radius: var(--radius-sm);
}

/* ---------- Estado vacío común ---------- */

.empty-state {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-12) var(--space-6);
    border: 1px dashed var(--color-border-strong);
    border-radius: var(--radius-xl);
    background: color-mix(in srgb, var(--color-surface) 80%, transparent);
    text-align: center;
}

.empty-state-icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: var(--space-2);
    border: 1px solid var(--color-primary-line);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
    color: var(--color-primary);
    font-size: 1.5rem;
}

.empty-state-title {
    max-inline-size: 36ch;
    margin: 0;
    color: var(--color-text);
    font: var(--weight-bold) var(--text-lg) / var(--leading-snug) var(--font-sans);
}

.empty-state-title q {
    color: var(--color-primary-hover);
    quotes: "“" "”";
}

.empty-state-text {
    max-inline-size: 48ch;
    margin: 0;
    color: var(--color-text-muted);
    font-size: var(--text-base);
}

.empty-state-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-target);
    margin-top: var(--space-3);
    padding: 0 var(--space-5);
    border: 1px solid var(--color-primary-line);
    border-radius: var(--radius-md);
    color: var(--color-primary-hover);
    font: var(--weight-bold) var(--text-sm) / 1 var(--font-sans);
}

.empty-state-action:hover {
    border-color: var(--color-primary);
    background: var(--color-primary-soft);
}

.empty-state-action i {
    transition: transform var(--duration-fast) var(--ease-out);
}

.empty-state-action:hover i {
    transform: translateX(3px);
}

/* ---------- Carga de resultados: skeleton ---------- */

[data-results].is-loading :is(.catalog-card, .project-card) {
    position: relative;
    overflow: hidden;
    pointer-events: none;
}

[data-results].is-loading :is(.catalog-card, .project-card) > * {
    visibility: hidden;
}

[data-results].is-loading :is(.catalog-card, .project-card)::before {
    content: "";
    position: absolute;
    inset: var(--space-4);
    background:
        linear-gradient(var(--color-surface-3), var(--color-surface-3)) 0 0 / 34% 14px no-repeat,
        linear-gradient(var(--color-surface-3), var(--color-surface-3)) 0 40px / 72% 18px no-repeat,
        linear-gradient(var(--color-surface-3), var(--color-surface-3)) 0 72px / 92% 10px no-repeat,
        linear-gradient(var(--color-surface-3), var(--color-surface-3)) 0 90px / 80% 10px no-repeat,
        linear-gradient(var(--color-surface-3), var(--color-surface-3)) 0 100% / 100% 38px no-repeat;
    border-radius: var(--radius-sm);
}

[data-results].is-loading :is(.catalog-card, .project-card)::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg, transparent 20%, rgba(255, 255, 255, .05) 50%, transparent 80%);
    transform: translateX(-100%);
    animation: ui-shimmer 1.2s var(--ease-in-out) infinite;
}

@keyframes ui-shimmer {
    to { transform: translateX(100%); }
}

/* ---------- Catálogo: legibilidad en móvil ---------- */

@media (max-width: 520px) {
    .catalog-grid:not(.is-list) {
        grid-template-columns: minmax(0, 1fr);
        gap: var(--space-3);
    }

    .catalog-grid:not(.is-list) .catalog-card {
        min-height: 0;
        padding: var(--space-4);
    }

    .catalog-grid:not(.is-list) .catalog-card-content {
        grid-template-columns: 48px minmax(0, 1fr);
        gap: var(--space-3);
        min-height: 0;
    }

    .catalog-grid:not(.is-list) .catalog-card-icon {
        width: 48px;
        height: 48px;
        font-size: 1.5rem;
    }

    .catalog-grid:not(.is-list) .catalog-card-title {
        min-height: 0;
        padding-inline: 0;
    }

    .catalog-grid .catalog-category-tag {
        max-width: none;
    }

    .catalog-grid:not(.is-list) .catalog-card-meta {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

/* Color de categoría elegido en el admin: se aclara para garantizar contraste en el texto. */
.catalog-card .catalog-category-tag {
    color: color-mix(in oklab, var(--category-color, var(--color-primary)) 70%, white);
}

/* ---------- Práctica: cabecera y ayuda de teclado ---------- */

.practice-heading h1 {
    letter-spacing: -.01em;
    line-height: var(--leading-snug);
}

.practice-breadcrumb a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
}

.practice-nav-hint kbd {
    padding: 1px 6px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: var(--text-xs);
}

.practice-nav-hint-touch {
    display: none;
}

@media (hover: none) {
    .practice-nav-hint-keys {
        display: none;
    }

    .practice-nav-hint-touch {
        display: inline;
    }
}

/* ---------- Áreas táctiles de 44px en pantallas táctiles ---------- */

@media (pointer: coarse) {
    .home-action,
    .catalog-start-link,
    .catalog-open-button,
    .catalog-card-menu-button,
    .catalog-pagination-page,
    .catalog-pagination-direction,
    .practice-nav-button,
    .practice-review-control,
    .practice-review-pagination a,
    .public-back-link,
    .sidebar-toggle,
    .sidebar-command,
    .catalog-view-toggle button,
    .practice-confirm-button,
    .catalog-modal-back,
    .catalog-modal-close,
    .practice-confirm-close {
        min-height: var(--tap-target);
    }

    .catalog-open-button,
    .catalog-card-menu-button,
    .catalog-pagination-page,
    .catalog-view-toggle button,
    .practice-review-pagination a,
    .catalog-modal-close,
    .practice-confirm-close {
        min-width: var(--tap-target);
    }

    .practice-question-grid button {
        min-height: var(--tap-target);
    }

    .catalog-card-menu-button {
        margin: -8px -8px -8px 0;
    }
}

/* ---------- Menú móvil ---------- */

.sidebar-drawer {
    overscroll-behavior: contain;
}

/* ---------- Ajustes de layout: longitud de línea y respiración ---------- */

@media (min-width: 961px) {
    /* El texto no debe tocar el marco decorativo de la derecha. */
    .catalog-hero {
        height: auto;
    }

    .catalog-hero-copy {
        padding-right: var(--space-12);
    }
}

.catalog-intro,
.home-hero-text,
.project-hero-copy > p,
.project-description,
.questionnaire-note,
.analytics-header h1 + p {
    max-inline-size: 65ch;
}

/* ==========================================================
   EFECTOS Y MOVIMIENTO
   Solo transform y opacity, 150–400 ms, con alternativa para
   prefers-reduced-motion al final de esta sección.
   ========================================================== */

/* ---------- Aparición escalonada (activada por motion-init.js) ---------- */

.motion-ok :is(
    .home-hero-copy > *, .home-hero-art, .home-about > *, .home-metrics > *,
    .catalog-grid > .catalog-card, .project-grid > .project-card,
    .analytics-metrics > *, .analytics-grid > *, .rp-kpis > *, .rp-grid > *,
    .ab-reveal, .ab-interests > li,
    .questionnaire-list > .question-card, .practice-review-list > *,
    .project-detail-story, .project-related
):not(.reveal-in):not(.reveal-done) {
    opacity: 0;
    transform: translateY(14px);
}

.motion-ok .reveal-in {
    transition:
        opacity var(--duration-slow) var(--ease-out) var(--reveal-delay, 0ms),
        transform var(--duration-slow) var(--ease-out) var(--reveal-delay, 0ms) !important;
}

/* ---------- Kicker de Inicio: escritura de terminal ---------- */

.home-kicker.is-typing .type-char {
    opacity: 0;
    animation: ui-type-in 1ms steps(1) forwards;
    animation-delay: calc(120ms + var(--char-index) * 32ms);
}

.home-kicker .type-caret {
    display: inline-block;
    width: .6em;
    height: 1.05em;
    margin-left: 2px;
    vertical-align: -.15em;
    background: currentColor;
    opacity: 0;
    animation:
        ui-caret-on 1ms calc(120ms + var(--char-count) * 32ms) forwards,
        ui-caret-blink 900ms steps(1) calc(120ms + var(--char-count) * 32ms) 4,
        ui-caret-off var(--duration) var(--ease-out) calc(3720ms + var(--char-count) * 32ms) forwards;
}

@keyframes ui-type-in { to { opacity: 1; } }
@keyframes ui-caret-on { to { opacity: 1; } }
@keyframes ui-caret-blink { 50% { opacity: 0; } }
@keyframes ui-caret-off { to { opacity: 0; } }

/* ---------- Tarjetas: elevación y brillo sutil ---------- */

.catalog-card,
.project-card {
    position: relative;
}

.catalog-card,
.project-card,
.home-path,
.home-metric,
.analytics-metric,
.empty-state-action {
    transition: transform var(--duration) var(--ease-out);
}

.catalog-card::after,
.project-card::after {
    content: "";
    position: absolute;
    inset: -1px;
    border-radius: inherit;
    box-shadow:
        0 0 0 1px color-mix(in srgb, var(--category-color, var(--project-color, var(--color-primary))) 45%, transparent),
        0 16px 40px rgba(0, 0, 0, .35),
        0 0 32px color-mix(in srgb, var(--category-color, var(--project-color, var(--color-primary))) 14%, transparent);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration) var(--ease-out);
}

@media (hover: hover) {
    .catalog-card:hover,
    .project-card:hover {
        transform: translateY(-4px);
    }

    .catalog-card:hover::after,
    .project-card:hover::after,
    .catalog-card:focus-within::after,
    .project-card:focus-within::after {
        opacity: 1;
    }

    .home-path:hover,
    .home-metric:hover,
    .analytics-metric:hover {
        transform: translateY(-3px);
    }
}

/* ---------- Botones: respuesta al pulsar ---------- */

:is(
    .home-action, .catalog-start-link, .catalog-open-button, .practice-nav-button,
    .catalog-modal-start-practice, .catalog-modal-action, .practice-confirm-button,
    .project-external-button, .project-back-button, .empty-state-action,
    .practice-finish-side, .practice-mark-button, .sidebar-command,
    .practice-review-control, .catalog-view-toggle button
):active {
    transform: scale(.97);
    transition: transform var(--duration-fast) var(--ease-out);
}

/* Brillo en el botón principal: capa de luz que aparece con opacity. */
.home-action--primary {
    position: relative;
    isolation: isolate;
}

.home-action--primary::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    border-radius: inherit;
    box-shadow: var(--glow-primary-strong);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
}

.home-action--primary:hover::after,
.home-action--primary:focus-visible::after {
    opacity: 1;
}

/* ---------- Práctica: cambio de pregunta y selección ---------- */

.practice-question.is-entering-next {
    animation: ui-slide-from-right var(--duration) var(--ease-out);
}

.practice-question.is-entering-prev {
    animation: ui-slide-from-left var(--duration) var(--ease-out);
}

@keyframes ui-slide-from-right {
    from { opacity: 0; transform: translateX(18px); }
    to { opacity: 1; transform: none; }
}

@keyframes ui-slide-from-left {
    from { opacity: 0; transform: translateX(-18px); }
    to { opacity: 1; transform: none; }
}

.practice-question .practice-option {
    overflow: hidden;
}

/* Barrido de luz que confirma la elección. */
.practice-question .practice-option::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(47, 124, 255, .22), transparent);
    opacity: 0;
    transform: translateX(-100%);
    pointer-events: none;
}

.practice-question .practice-option.just-selected::after {
    animation: ui-sweep var(--duration-slow) var(--ease-out);
}

.practice-question .practice-option.just-selected .question-option-marker,
.practice-question .practice-option.just-selected .question-option-check {
    animation: ui-mark-pop var(--duration) var(--ease-out);
}

@keyframes ui-sweep {
    from { opacity: 1; transform: translateX(-100%); }
    to { opacity: 0; transform: translateX(100%); }
}

/* Barra de progreso animada con transform. */
.practice-progress-track i {
    width: 100%;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform var(--duration-slow) var(--ease-out);
}

/* ---------- Revisión: aciertos y fallos ---------- */

.practice-review-card.is-correct.reveal-in .practice-review-card-heading strong i {
    display: inline-block;
    animation: ui-mark-pop var(--duration) var(--ease-out) calc(var(--reveal-delay, 0ms) + 200ms) both;
}

.practice-review-card.is-incorrect.reveal-in .practice-review-card-heading strong {
    display: inline-flex;
    animation: ui-nudge 360ms var(--ease-out) calc(var(--reveal-delay, 0ms) + 200ms);
}

@keyframes ui-nudge {
    20% { transform: translateX(-3px); }
    40% { transform: translateX(3px); }
    60% { transform: translateX(-2px); }
    80% { transform: translateX(1px); }
}

/* ---------- Estados de carga ---------- */

[data-start-practice-link].is-loading {
    pointer-events: none;
    opacity: .85;
}

[data-start-practice-link].is-loading > span {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(255, 255, 255, .35);
    border-top-color: #fff;
    border-radius: 50%;
    font-size: 0;
    animation: ui-spin 700ms linear infinite;
}

@keyframes ui-spin {
    to { transform: rotate(360deg); }
}

/* ---------- Movimiento reducido ---------- */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    /* Bucles y gestos se detienen en su estado final; los cambios de estado se mantienen. */
    *,
    *::before,
    *::after {
        animation-duration: 1ms !important;
        animation-iteration-count: 1 !important;
        animation-delay: 0ms !important;
        scroll-behavior: auto !important;
    }

    /* Sin desplazamientos: los diálogos y menús solo aparecen con opacidad. */
    .command-palette .command-palette-dialog,
    .catalog-modal .catalog-modal-dialog,
    .practice-confirm-modal .practice-confirm-dialog,
    .catalog-card:hover,
    .project-card:hover,
    .home-path:hover,
    .home-metric:hover,
    .analytics-metric:hover,
    :is(.home-action, .catalog-start-link, .practice-nav-button, .practice-confirm-button):active {
        transform: none !important;
    }

    [data-start-practice-link].is-loading > span {
        animation: none;
    }

    ::view-transition-group(*),
    ::view-transition-old(*),
    ::view-transition-new(*) {
        animation: none !important;
    }
}

/* Móviles y equipos modestos: sin desenfoque de fondo en elementos siempre visibles. */
.low-power .project-card-code {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Pantallas táctiles: sin hover, cada toque da una respuesta breve de «presionado».
   Solo scale (compositor), 150 ms; con movimiento reducido no se aplica. */
@media (hover: none) and (prefers-reduced-motion: no-preference) {
    :is(.sl-btn, .cv-button, .rp-button, .rp-pill-link, .rp-periods a, .catalog-start-link, .catalog-open-button,
        .catalog-pagination-page, .catalog-pagination-direction, .empty-state-action, .project-external-button,
        .project-back-button, .project-card-footer > a, .practice-nav-button, .practice-finish-side,
        .practice-review-control, .sb-link, .sb-socials a, .sl-theme-toggle, .sidebar-toggle, .cv-socials a,
        .catalog-modal-action, .catalog-modal-mode, .catalog-modal-start-practice, .practice-option) {
        -webkit-tap-highlight-color: transparent;
        transition: scale var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
    }

    :is(.sl-btn, .cv-button, .rp-button, .rp-pill-link, .rp-periods a, .catalog-start-link, .catalog-open-button,
        .catalog-pagination-page, .catalog-pagination-direction, .empty-state-action, .project-external-button,
        .project-back-button, .project-card-footer > a, .practice-nav-button, .practice-finish-side,
        .practice-review-control, .sb-link, .sb-socials a, .sl-theme-toggle, .sidebar-toggle, .cv-socials a,
        .catalog-modal-action, .catalog-modal-start-practice):active { scale: .95; }

    :is(.sl-card, .project-card, .catalog-modal-mode, .practice-option) {
        -webkit-tap-highlight-color: transparent;
        transition: scale var(--duration-fast) var(--ease-out);
    }

    :is(.sl-card, .project-card, .catalog-modal-mode, .practice-option):active { scale: .98; }
}