/* =============================================================================
   RETO DE CUMPLIMIENTO — Hoja de estilos
   -----------------------------------------------------------------------------
   Enfoque MOBILE-FIRST: los estilos base son los del celular y las media
   queries van AÑADIENDO sobre pantallas más grandes (min-width), nunca al revés.

   Índice
     1. Tokens de diseño
     2. Reset y base
     3. Layout
     4. Pantallas
     5. Componentes
        5.1 Botones
        5.2 Barra de progreso
        5.3 Etiqueta de tema
        5.4 Pregunta y opciones
        5.5 Retroalimentación
        5.6 Resultados
     6. Escritorio (min-width)
     7. Pantallas de poca altura (max-height)
     8. Accesibilidad y preferencias del sistema
   ========================================================================== */


/* =============================================================================
   1. TOKENS DE DISEÑO
   Cambiar un color de marca aquí lo cambia en toda la página.
   ========================================================================== */
:root {
    /* --- Marca --- */
    --c-brand:        #1f95ea;
    --c-brand-light:  #3ba9ff;
    --c-brand-dark:   #0d5a9f;

    /* --- Fondo --- */
    --c-bg-1: #0a1628;
    --c-bg-2: #1a3a52;
    --c-bg-3: #0d2847;

    /* --- Texto --- */
    --c-ink:        #1a3a52;
    --c-text:       #333333;
    --c-text-muted: #666666;
    --c-text-soft:  #888888;

    /* --- Superficies --- */
    --c-surface:        #ffffff;
    --c-surface-subtle: #f5f7fa;
    --c-surface-alt:    #f0f4f8;
    --c-border:         #e0e8f0;

    /* --- Estados --- */
    --c-success:       #4caf50;
    --c-success-light: #66bb6a;
    --c-danger:        #f44336;
    --c-danger-light:  #ef5350;

    /* --- Temas --- */
    --c-tema-sagrilaft-bg: #ffebee;
    --c-tema-sagrilaft-fg: #c62828;
    --c-tema-habeas-bg:    #e3f2fd;
    --c-tema-habeas-fg:    #1565c0;
    --c-tema-etica-bg:     #e8f5e9;
    --c-tema-etica-fg:     #2e7d32;
    --c-tema-generico-bg:  #eceff1;
    --c-tema-generico-fg:  #37474f;

    /* --- Tipografía fluida: crece sola entre móvil y escritorio --- */
    --font: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --fs-xs:    0.75rem;
    --fs-sm:    0.875rem;
    --fs-base:  0.9375rem;
    --fs-md:    clamp(0.9375rem, 0.9rem + 0.2vw, 1rem);
    --fs-lg:    clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
    --fs-xl:    clamp(1.25rem, 1.1rem + 0.9vw, 1.625rem);
    --fs-2xl:   clamp(1.375rem, 1.1rem + 1.6vw, 2rem);
    --fs-score: clamp(2.75rem, 2rem + 3.75vw, 3.5rem);

    /* --- Espaciado --- */
    --sp-1: 0.25rem;
    --sp-2: 0.5rem;
    --sp-3: 0.75rem;
    --sp-4: 1rem;
    --sp-5: 1.25rem;
    --sp-6: 1.5rem;
    --sp-8: 2rem;
    --sp-10: 2.5rem;

    /* Relleno del contenido: se adapta al ancho de la pantalla */
    --sp-content: clamp(1.25rem, 5vw, 3.125rem);

    /* --- Radios --- */
    --r-sm: 8px;
    --r-md: 10px;
    --r-lg: 12px;
    --r-xl: 20px;
    --r-pill: 999px;

    /* --- Sombras --- */
    --sh-btn:      0 4px 15px rgba(31, 149, 234, 0.30);
    --sh-btn-hover:0 8px 25px rgba(31, 149, 234, 0.40);
    --sh-card:     0 20px 60px rgba(0, 0, 0, 0.30), 0 0 50px rgba(31, 149, 234, 0.20);
    --sh-float:    0 15px 45px rgba(0, 0, 0, 0.25), 0 0 30px rgba(31, 149, 234, 0.20);

    /* --- Transiciones --- */
    --t-fast: 0.2s ease;
    --t-base: 0.3s ease;

    /* --- Layout --- */
    --w-app: 56rem;   /* 896px */
    --w-feedback: 24rem;

    /* Altura de toque mínima recomendada (WCAG / iOS / Material) */
    --tap: 44px;
}


/* =============================================================================
   2. RESET Y BASE
   ========================================================================== */
*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    -webkit-text-size-adjust: 100%;  /* iOS no reescala el texto al rotar */
}

body {
    font-family: var(--font);
    font-size: var(--fs-base);
    color: var(--c-text);
    background: linear-gradient(135deg, var(--c-bg-1) 0%, var(--c-bg-2) 50%, var(--c-bg-3) 100%);
    background-attachment: fixed;

    min-height: 100vh;
    min-height: 100dvh;   /* dvh evita el salto por la barra del navegador móvil */

    display: flex;
    justify-content: center;
    align-items: center;
    /* `safe center` degrada a `start` cuando el contenido es más alto que la
       pantalla, así la parte superior nunca queda cortada e inalcanzable.
       La línea anterior es el respaldo para navegadores que no lo soportan. */
    align-items: safe center;

    padding: var(--sp-4);
    /* Respeta el notch / barra de gestos en iPhone y Android */
    padding-top:    max(var(--sp-4), env(safe-area-inset-top));
    padding-right:  max(var(--sp-4), env(safe-area-inset-right));
    padding-bottom: max(var(--sp-4), env(safe-area-inset-bottom));
    padding-left:   max(var(--sp-4), env(safe-area-inset-left));

    overflow-x: hidden;
    position: relative;
    -webkit-tap-highlight-color: transparent;  /* sin destello gris al tocar */
}

/* Halos decorativos del fondo. Puramente ornamentales. */
body::before,
body::after {
    content: '';
    position: fixed;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

body::before {
    top: -50%;
    right: -10%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(31, 149, 234, 0.15) 0%, transparent 70%);
}

body::after {
    bottom: -20%;
    left: -5%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(59, 169, 255, 0.10) 0%, transparent 70%);
}

img,
svg {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font: inherit;
    color: inherit;
    touch-action: manipulation;  /* elimina el retardo de 300 ms al tocar */
}

code {
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 0.9em;
    background: var(--c-surface-alt);
    padding: 0.15em 0.4em;
    border-radius: 4px;
}


/* =============================================================================
   3. LAYOUT
   ========================================================================== */
.app {
    width: min(100%, var(--w-app));
    background: rgba(255, 255, 255, 0.98);
    border: 1px solid rgba(31, 149, 234, 0.2);
    border-radius: var(--r-xl);
    box-shadow: var(--sh-card);
    overflow: hidden;
    position: relative;
    z-index: 1;
}

.app__header {
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 50%, var(--c-brand-dark) 100%);
    color: #ffffff;
    padding: clamp(1.5rem, 5vw, 2.5rem) var(--sp-5);
    text-align: center;
    position: relative;
    overflow: hidden;
}

/* Círculos sutiles sobre el degradado del encabezado */
.app__header::before {
    content: '';
    position: absolute;
    inset: 0;
    background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><circle cx="20" cy="20" r="15" fill="rgba(255,255,255,0.05)"/><circle cx="80" cy="80" r="20" fill="rgba(255,255,255,0.03)"/></svg>');
    pointer-events: none;
}

.app__header-inner {
    position: relative;
    z-index: 1;
}

.app__title {
    font-size: var(--fs-2xl);
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: var(--sp-2);
    /* Equilibra los saltos de línea del título en pantallas angostas */
    text-wrap: balance;
}

.app__subtitle {
    font-size: var(--fs-md);
    font-weight: 300;
    opacity: 0.95;
}

.app__content {
    padding: var(--sp-content);
}


/* =============================================================================
   4. PANTALLAS
   La pantalla activa se controla desde JS con el atributo `hidden`.
   ========================================================================== */
.screen {
    animation: fade-in 0.5s ease-in;
}

.screen[hidden] {
    display: none;   /* refuerza [hidden] frente a los estilos de autor */
}

.screen--center {
    text-align: center;
}

.screen__title {
    font-size: var(--fs-xl);
    color: var(--c-ink);
    margin-bottom: var(--sp-5);
    text-wrap: balance;
}

.screen__title:focus-visible {
    outline: 3px solid var(--c-brand);
    outline-offset: 4px;
    border-radius: var(--r-sm);
}

.screen__intro {
    color: var(--c-text-muted);
    line-height: 1.6;
    margin-bottom: var(--sp-6);
    text-wrap: pretty;
}

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


/* =============================================================================
   5. COMPONENTES
   ========================================================================== */

/* --- 5.1 Botones ---------------------------------------------------------- */
.btn {
    display: block;
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-4) var(--sp-8);
    border: none;
    border-radius: var(--r-md);
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
    color: #ffffff;
    font-size: var(--fs-md);
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    cursor: pointer;
    box-shadow: var(--sh-btn);
    transition: transform var(--t-base), box-shadow var(--t-base);
}

.btn:hover {
    transform: translateY(-3px);
    box-shadow: var(--sh-btn-hover);
}

.btn:active {
    transform: translateY(-1px);
}

.btn--sm {
    padding: var(--sp-3);
    font-size: var(--fs-sm);
    text-transform: none;
    letter-spacing: normal;
    border-radius: var(--r-sm);
}


/* --- 5.2 Barra de progreso ------------------------------------------------ */
.progress {
    margin-bottom: var(--sp-8);
}

.progress__info {
    display: flex;
    flex-wrap: wrap;          /* en pantallas muy angostas baja a dos líneas */
    justify-content: space-between;
    gap: var(--sp-2);
    margin-bottom: var(--sp-3);
    font-size: var(--fs-sm);
    font-weight: 600;
    color: #555555;
}

.progress__track {
    width: 100%;
    height: 10px;
    background: #e0e0e0;
    border-radius: var(--r-md);
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress__fill {
    width: 0%;
    height: 100%;
    border-radius: var(--r-md);
    background: linear-gradient(90deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
    transition: width 0.4s ease;
}


/* --- 5.3 Etiqueta de tema ------------------------------------------------- */
.topic-badge {
    display: inline-block;
    padding: var(--sp-2) var(--sp-4);
    margin-bottom: var(--sp-5);
    border-radius: var(--r-pill);
    font-size: var(--fs-xs);
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--c-tema-generico-bg);
    color: var(--c-tema-generico-fg);
}

.topic-badge--sagrilaft { background: var(--c-tema-sagrilaft-bg); color: var(--c-tema-sagrilaft-fg); }
.topic-badge--habeas    { background: var(--c-tema-habeas-bg);    color: var(--c-tema-habeas-fg); }
.topic-badge--etica     { background: var(--c-tema-etica-bg);     color: var(--c-tema-etica-fg); }


/* --- 5.4 Pregunta y opciones ---------------------------------------------- */
.question {
    font-size: var(--fs-lg);
    font-weight: 600;
    color: var(--c-ink);
    line-height: 1.6;
    margin-bottom: var(--sp-6);
    text-wrap: pretty;
}

.question:focus-visible {
    outline: 3px solid var(--c-brand);
    outline-offset: 4px;
    border-radius: var(--r-sm);
}

.options {
    display: grid;
    gap: var(--sp-3);
    margin-bottom: var(--sp-6);
}

.option {
    width: 100%;
    min-height: var(--tap);
    padding: var(--sp-4) var(--sp-5);
    border: 2px solid var(--c-border);
    border-radius: var(--r-lg);
    background: linear-gradient(135deg, var(--c-surface-subtle) 0%, var(--c-surface-alt) 100%);
    color: var(--c-text);
    font-size: var(--fs-base);
    font-weight: 500;
    line-height: 1.45;
    text-align: left;
    cursor: pointer;
    transition: background var(--t-base), border-color var(--t-base),
                box-shadow var(--t-base), transform var(--t-base);
}

/* :hover solo en dispositivos con puntero real: evita estados "pegados" al
   tocar en pantallas táctiles. */
@media (hover: hover) {
    .option:hover:not(:disabled) {
        background: linear-gradient(135deg, #e8eef7 0%, #dfe8f0 100%);
        border-color: var(--c-brand);
        box-shadow: 0 4px 12px rgba(31, 149, 234, 0.15);
        transform: translateX(4px);
    }
}

.option:disabled {
    cursor: not-allowed;
    opacity: 1;   /* no atenuar: las respuestas siguen siendo legibles */
}

.option.is-selected {
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
    border-color: var(--c-brand);
    color: #ffffff;
    box-shadow: 0 4px 12px rgba(31, 149, 234, 0.3);
}

.option.is-correct {
    background: linear-gradient(135deg, var(--c-success) 0%, var(--c-success-light) 100%);
    border-color: var(--c-success);
    color: #ffffff;
}

.option.is-incorrect {
    background: linear-gradient(135deg, var(--c-danger) 0%, var(--c-danger-light) 100%);
    border-color: var(--c-danger);
    color: #ffffff;
}


/* --- 5.5 Retroalimentación ------------------------------------------------
   MÓVIL (base): hoja inferior anclada al borde de la pantalla, siempre visible
   sin importar dónde esté el scroll.
   ESCRITORIO (§6): tarjeta flotante arriba a la derecha.
   -------------------------------------------------------------------------- */
.feedback {
    position: fixed;
    inset: auto 0 0 0;              /* abajo, de borde a borde */
    z-index: 100;

    max-height: min(70dvh, 32rem);
    overflow-y: auto;
    overscroll-behavior: contain;   /* el scroll no se propaga a la página */

    background: var(--c-surface);
    border-top: 1px solid rgba(31, 149, 234, 0.3);
    border-radius: var(--r-xl) var(--r-xl) 0 0;
    box-shadow: var(--sh-float);

    padding: var(--sp-5);
    padding-bottom: max(var(--sp-5), env(safe-area-inset-bottom));

    animation: slide-up var(--t-base);
}

.feedback[hidden] {
    display: none;
}

@keyframes slide-up {
    from { opacity: 0; transform: translateY(100%); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes slide-in-right {
    from { opacity: 0; transform: translateX(30px); }
    to   { opacity: 1; transform: translateX(0); }
}

.feedback__header {
    display: flex;
    align-items: center;
    gap: var(--sp-3);
    margin-bottom: var(--sp-4);
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-ink);
}

.feedback__icon {
    font-size: 1.75rem;
    line-height: 1;
    flex-shrink: 0;
}

.feedback__celebration {
    font-size: 3rem;
    line-height: 1;
    text-align: center;
    margin: var(--sp-4) 0;
    animation: bounce 0.6s ease-in-out;
}

.feedback__celebration[hidden] {
    display: none;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-15px); }
}

.feedback__text {
    font-size: var(--fs-sm);
    font-weight: 500;
    line-height: 1.6;
    color: #555555;
    margin-bottom: var(--sp-5);
    text-wrap: pretty;
}


/* --- 5.6 Resultados ------------------------------------------------------- */
.final-score {
    font-size: var(--fs-score);
    font-weight: 700;
    line-height: 1;
    color: var(--c-brand);
    margin: var(--sp-8) 0 var(--sp-2);
    text-shadow: 0 2px 4px rgba(31, 149, 234, 0.2);
}

.final-score__label {
    font-size: var(--fs-sm);
    color: var(--c-text-muted);
}

.stats {
    background: linear-gradient(135deg, var(--c-surface-subtle) 0%, var(--c-surface-alt) 100%);
    border: 2px solid var(--c-border);
    border-radius: var(--r-lg);
    padding: clamp(1.25rem, 4vw, 1.875rem);
    margin: var(--sp-8) 0;
    text-align: left;
}

.stats__title {
    font-size: var(--fs-md);
    font-weight: 700;
    color: var(--c-ink);
    margin-bottom: var(--sp-5);
    text-align: center;
}

/* En pantallas de poca altura (ver sección 7) esta lista recibe un
   max-height y overflow-y para que sea ella la que haga scroll en vez de
   empujar el botón "Jugar de Nuevo" fuera del área visible. En pantallas con
   alto de sobra no hace falta limitarla: crece con la cantidad de temas. */
.stats__list {
    overscroll-behavior: contain;
}

.stats__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    padding: var(--sp-4) 0;
    border-bottom: 2px solid rgba(31, 149, 234, 0.1);
}

.stats__row:last-child {
    border-bottom: none;
}

.stats__topic {
    /* min-width:0 permite que flexbox reduzca este elemento por debajo de su
       ancho de contenido; sin esto, un tema con nombre largo desborda la
       fila en pantallas angostas en vez de partirse en varias líneas. */
    flex: 1 1 12rem;
    min-width: 0;
    overflow-wrap: break-word;
    font-size: var(--fs-base);
    font-weight: 600;
    color: var(--c-ink);
}

.stats__score {
    flex-shrink: 0;
    padding: var(--sp-2) var(--sp-4);
    border-radius: var(--r-pill);
    background: linear-gradient(135deg, var(--c-brand) 0%, var(--c-brand-light) 100%);
    color: #ffffff;
    font-size: var(--fs-sm);
    font-weight: 700;
}


/* =============================================================================
   6. ESCRITORIO Y MÓVIL EN HORIZONTAL
   A partir de 64rem (1024px) de ancho, o en cualquier pantalla baja (móvil
   apaisado), la retroalimentación cabe al lado del contenido en vez de
   taparlo con una hoja inferior alta.
   ========================================================================== */
@media (min-width: 64rem), (max-height: 32rem) and (orientation: landscape) {
    .feedback {
        inset: var(--sp-3) var(--sp-3) auto auto;   /* arriba a la derecha */
        width: min(var(--w-feedback), 30vw);
        max-height: min(90dvh, 40rem);

        border: 1px solid rgba(31, 149, 234, 0.3);
        border-radius: var(--r-lg);
        padding: var(--sp-6);

        animation: slide-in-right 0.4s ease-out;
    }
}

/* En escritorio de verdad (ancho amplio) se recupera el margen mayor y el
   ancho fijo de la tarjeta flotante. */
@media (min-width: 64rem) {
    .feedback {
        inset: var(--sp-5) var(--sp-5) auto auto;
    }
}


/* =============================================================================
   7. PANTALLAS DE POCA ALTURA
   Cuando el alto de la ventana es limitado (teléfonos pequeños, o cualquier
   teléfono con la barra del navegador visible), la pantalla de resultados es
   la más alta de las tres y puede exigir scroll para llegar al botón
   "Jugar de Nuevo". Aquí se comprime el espaciado vertical progresivamente
   para que todo el contenido quepa sin scroll.
   ========================================================================== */
@media (max-height: 56.25rem) {   /* 900px: recorte leve, casi imperceptible,
                                      para que un celular alto (p. ej. 812px
                                      con las 3 categorías completas) no
                                      necesite scroll por unos pocos píxeles */
    .app__header {
        padding-top: var(--sp-4);
        padding-bottom: var(--sp-4);
    }

    .screen__intro {
        margin-bottom: var(--sp-3);
    }

    .final-score {
        margin: var(--sp-6) 0 var(--sp-2);
    }

    .stats {
        margin: var(--sp-6) 0;
    }

    .stats__row {
        padding: var(--sp-3) 0;
    }
}

@media (max-height: 46.25rem) {   /* 740px */
    .app__header {
        padding-top: var(--sp-3);
        padding-bottom: var(--sp-3);
    }

    .app__content {
        padding-top: var(--sp-3);
        padding-bottom: var(--sp-3);
    }

    .screen__intro {
        margin-bottom: var(--sp-3);
    }

    /* El texto de bienvenida ya cumplió su función durante el reto; en
       pantallas bajas cede su espacio para que el botón final sea alcanzable
       sin scroll. */
    #screen-resultados .screen__intro {
        display: none;
    }

    .final-score {
        margin: var(--sp-3) 0 var(--sp-1);
    }

    .stats {
        margin: var(--sp-4) 0;
        padding: var(--sp-3);
    }

    .stats__title {
        margin-bottom: var(--sp-3);
    }

    .stats__row {
        padding: var(--sp-2) 0;
    }

    .stats__list {
        max-height: min(11rem, 26dvh);
        overflow-y: auto;
    }

    .app__subtitle {
        display: none;
    }
}

@media (max-height: 30rem) {   /* 480px: teléfono en horizontal */
    .app__header {
        padding-top: var(--sp-2);
        padding-bottom: var(--sp-2);
    }

    .app__content {
        padding-top: var(--sp-2);
        padding-bottom: var(--sp-2);
    }

    .app__title {
        font-size: var(--fs-lg);
        margin-bottom: 0;
    }

    .screen__title {
        margin-bottom: var(--sp-2);
    }

    .final-score {
        font-size: clamp(1.75rem, 5dvh, 2.5rem);
        margin: var(--sp-2) 0 0;
    }

    .final-score__label {
        margin-bottom: 0;
    }

    .stats {
        margin: var(--sp-2) 0;
        padding: var(--sp-2) var(--sp-3);
    }

    .btn {
        padding: var(--sp-3) var(--sp-8);
    }

    .stats__row {
        padding: var(--sp-1) 0;
    }

    .stats__list {
        max-height: min(7rem, 22dvh);
        overflow-y: auto;
    }
}


/* =============================================================================
   8. ACCESIBILIDAD Y PREFERENCIAS DEL SISTEMA
   ========================================================================== */

/* Foco visible y consistente para navegación por teclado */
:where(button, [href], [tabindex]):focus-visible {
    outline: 3px solid var(--c-brand-light);
    outline-offset: 3px;
}

.option:focus-visible {
    outline: 3px solid var(--c-brand-dark);
    outline-offset: 2px;
}

/* Respeta a quien pidió menos animación en su sistema operativo */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .btn:hover,
    .option:hover:not(:disabled) {
        transform: none;
    }
}

/* Más contraste para quien lo solicita a nivel de sistema */
@media (prefers-contrast: more) {
    .option {
        border-color: var(--c-ink);
    }

    .screen__intro,
    .feedback__text {
        color: var(--c-text);
    }
}

/* Impresión: sin fondos oscuros ni elementos flotantes */
@media print {
    body {
        background: #ffffff;
        padding: 0;
    }

    body::before,
    body::after,
    .feedback {
        display: none !important;
    }

    .app {
        box-shadow: none;
        border: none;
        width: 100%;
    }
}