/* PokéHábitats — mobile-first. Base 390px, se acomoda hasta tablet.
   Regla de oro: nada táctil por debajo de 48x48px. */

:root {
    --verde: #2f7d5c;
    --verde-claro: #e6f4ec;
    --arena: #fdf8ef;
    --tinta: #23302b;
    --tinta-suave: #5d6b64;
    --borde: #d9e5dd;
    --sombra: 0 2px 6px rgba(35, 48, 43, .12);
    --radio: 18px;
    --alto-nav: 68px;
    --toque-min: 48px;

    /* Escala de las imágenes de Pokémon. Son lo más llamativo del juego, así que
       viven en cuatro medidas y no en ocho valores sueltos: cambiar una las cambia
       en toda la app. */
    --sprite-gigante: 300px;   /* el Pokémon que aparece, y el mejor del día */
    --sprite-grande: 240px;    /* la ficha de la Pokédex */
    --sprite-medio: 132px;     /* rejillas y pantallas donde acompaña al texto */
    --sprite-chico: 76px;      /* miniaturas dentro de listas y tarjetas */
}

* { box-sizing: border-box; }

/* El [hidden] del navegador es solo `display: none`, así que cualquier clase que ponga
   `display` se lo gana. Con !important, ocultar algo desde el HTML o el JS siempre funciona. */
[hidden] { display: none !important; }

html {
    -webkit-text-size-adjust: 100%;
    /* El mismo color que la app: al rebotar el scroll en Safari asomaba el blanco
       del documento y se veia como una barra blanca arriba. */
    background: var(--arena);
}

/*
 * La pagina es una columna de altura fija y lo unico que hace scroll es el centro.
 * Con cabecera sticky y pie fixed, Safari en iPad los despegaba al rebotar el scroll
 * y al colapsar la barra de direcciones. Siendo hermanos del area que hace scroll,
 * sencillamente no pueden moverse.
 */
body {
    margin: 0;
    display: flex;
    flex-direction: column;
    height: 100vh;
    height: 100dvh;   /* dvh sigue a la barra de direcciones; vh queda de respaldo */
    overflow: hidden;
    overscroll-behavior: none;
    background: var(--arena);
    color: var(--tinta);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 17px;
    line-height: 1.45;
}

img { max-width: 100%; }

code {
    background: var(--verde-claro);
    border-radius: 6px;
    padding: 2px 6px;
    font-size: .85em;
    word-break: break-all;
}

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* ---------- Estructura ---------- */

.barra-superior {
    flex-shrink: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    min-height: 56px;
    padding: env(safe-area-inset-top) 16px 0;
    background: var(--verde);
    color: #fff;
}

.logo { flex: 1; font-size: 18px; font-weight: 700; }

/* Chiquito y arriba a propósito: la barra de abajo es del niño, esta entrada es del adulto. */
.boton-ajustes {
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--toque-min);
    height: var(--toque-min);
    margin-right: -12px;
    font-size: 20px;
    text-decoration: none;
    opacity: .85;
}

.contenido {
    flex: 1;
    align-self: center;
    width: 100%;
    max-width: 720px;
    padding: 16px 16px 24px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.titulo {
    margin: 8px 0 4px;
    font-size: 26px;
    line-height: 1.2;
}

.subtitulo {
    margin: 0 0 20px;
    color: var(--tinta-suave);
}

.aviso {
    margin-top: 24px;
    padding: 14px 16px;
    background: #fff;
    border: 1px dashed var(--borde);
    border-radius: var(--radio);
    color: var(--tinta-suave);
    font-size: 15px;
}

/* ---------- Navegación inferior ---------- */

.barra-inferior {
    flex-shrink: 0;
    z-index: 20;
    display: flex;
    justify-content: space-around;
    background: #fff;
    border-top: 1px solid var(--borde);
    padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
    flex: 1;
    min-height: var(--alto-nav);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    text-decoration: none;
    color: var(--tinta-suave);
    font-size: 13px;
    font-weight: 600;
}

.nav-item.activo { color: var(--verde); background: var(--verde-claro); }

.nav-icono { font-size: 24px; line-height: 1; }

/* ---------- Inicio ---------- */

.tarjeta-destacado {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
    padding: 14px 16px;
    background: var(--verde-claro);
    border-radius: var(--radio);
}

.etiqueta {
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--verde);
}

.destacado-nombre { font-size: 20px; font-weight: 700; }

.boton-grande {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 132px;
    padding: 20px;
    background: var(--verde);
    color: #fff;
    border-radius: var(--radio);
    box-shadow: var(--sombra);
    text-decoration: none;
    text-align: center;
}

.boton-grande[aria-disabled="true"] { background: #9db8ac; }

.boton-icono { font-size: 40px; line-height: 1; }

.boton-texto { font-size: 24px; font-weight: 700; }

.boton-nota { font-size: 13px; opacity: .9; }

.rejilla-accesos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-top: 16px;
}

.acceso {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 104px;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta);
    text-decoration: none;
    text-align: center;
}

.acceso-pendiente { color: var(--tinta-suave); background: #f4f1ea; }

.acceso-icono { font-size: 30px; line-height: 1; }

.acceso-texto { font-weight: 700; }

.acceso-dato { font-size: 14px; color: var(--tinta-suave); }

/* ---------- Pokédex ---------- */

.buscador { display: block; margin-bottom: 16px; }

.buscador input {
    width: 100%;
    min-height: var(--toque-min);
    padding: 10px 14px;
    font-size: 17px; /* 16px+ evita el zoom automático de iOS */
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta);
}

.rejilla-pokedex {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.carta-pokemon {
    position: relative;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    border-top: 4px solid var(--color-pokemon, var(--borde));
    overflow: hidden;
}

/* De los vistos es un botón que abre la ficha; de los que no, un hueco con su número. */
.carta-cuerpo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 100%;
    min-height: 212px;
    padding: 12px 8px 10px;
    background: none;
    border: 0;
    color: var(--tinta);
    font-family: inherit;
    text-align: center;
}

button.carta-cuerpo { cursor: pointer; }

button.carta-cuerpo:focus-visible {
    outline: 3px solid var(--verde);
    outline-offset: -3px;
}

/* Casilla sin descubrir: solo el número, como en la Pokédex de Pokémon GO. */
.carta-pokemon.sin-ver { background: #f4f1ea; }

.numero-solo {
    font-size: 22px;
    font-variant-numeric: tabular-nums;
    color: #b3aea3;
}

/* Cuántas veces lo ha atrapado. Aparece a partir de la segunda. */
.contador-capturas {
    position: absolute;
    bottom: 6px;
    right: 8px;
    padding: 1px 7px;
    background: var(--verde-claro);
    border-radius: 999px;
    color: var(--verde);
    font-size: 13px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.numero {
    font-size: 12px;
    font-weight: 700;
    color: var(--tinta-suave);
}

.sprite {
    width: var(--sprite-medio);
    height: var(--sprite-medio);
    object-fit: contain;
}

.sprite-faltante {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 36px;
    background: var(--verde-claro);
    border-radius: 50%;
}

.nombre { font-weight: 700; font-size: 16px; }

.tipos {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px;
}

.chip-tipo {
    padding: 2px 8px;
    border-radius: 999px;
    background: var(--color-tipo, var(--verde-claro));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-shadow: 0 1px 1px rgba(0, 0, 0, .25);
}

/* Visto pero sin atrapar: se muestra entero, solo sin la palomita. No se castiga visualmente. */

.carta-pokemon.capturado::after {
    content: "✅";
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 16px;
}

.sin-resultados {
    margin-top: 24px;
    text-align: center;
    color: var(--tinta-suave);
}

/* ---------- Constructor de hábitat ---------- */

.fila-cartas,
.fila-intensidad {
    margin: 0 0 20px;
    padding: 0;
    border: 0;
}

.fila-cartas legend,
.fila-intensidad legend {
    padding: 0 0 8px;
}

.pista {
    margin-left: 6px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: 0;
    color: var(--tinta-suave);
}

.cartas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
    gap: 8px;
}

/* 64px de alto mínimo por pedido explícito del constructor; el mínimo global de toque es 48. */
.carta-condicion {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 76px;
    padding: 8px 4px;
    background: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.carta-condicion:focus-visible,
.boton-intensidad:focus-visible {
    outline: 3px solid var(--verde);
    outline-offset: 2px;
}

.carta-condicion.activa {
    background: var(--verde-claro);
    border-color: var(--verde);
    box-shadow: var(--sombra);
}

.carta-condicion:disabled {
    opacity: .4;
    cursor: default;
}

.carta-emoji { font-size: 28px; line-height: 1.1; }

.carta-nombre { font-weight: 700; text-align: center; line-height: 1.15; }

.boton-intensidad {
    flex: 1;
    min-height: var(--toque-min);
    background: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta);
    font-family: inherit;
    font-size: 20px;
    font-weight: 700;
    cursor: pointer;
}

.boton-intensidad.activo {
    background: var(--verde);
    border-color: var(--verde);
    color: #fff;
}

.fila-intensidad .cartas {
    display: flex;
    gap: 8px;
}

/* ---------- Marcador en vivo ---------- */

.marcador {
    margin: 24px 0;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.marcador-titulo {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin: 0 0 12px;
    font-size: 18px;
}

.marcador-total { font-size: 14px; font-weight: 600; color: var(--tinta-suave); }

.marcador-vacio { margin: 0; color: var(--tinta-suave); font-size: 15px; }

.barras { list-style: none; margin: 0; padding: 0; }

.barra + .barra { margin-top: 12px; }

.barra-encabezado {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 4px;
}

.barra-nombre { font-weight: 700; font-size: 15px; }

.barra-cifras {
    flex-shrink: 0;
    font-size: 14px;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-suave);
}

.barra-canal {
    height: 20px;
    background: var(--verde-claro);
    border-radius: 999px;
    overflow: hidden;
}

.barra-relleno {
    height: 100%;
    min-width: 4px;
    background: var(--color-tipo, var(--verde));
    border-radius: 999px;
    transition: width .18s ease-out;
}

.barra.en-tope .barra-canal { box-shadow: inset 0 0 0 2px var(--verde); }

.barra-tope {
    display: inline-block;
    margin-top: 4px;
    font-size: 13px;
    font-weight: 700;
    color: var(--verde);
}

.desglose { margin-top: 16px; }

.desglose summary {
    min-height: var(--toque-min);
    display: flex;
    align-items: center;
    font-weight: 700;
    color: var(--verde);
    cursor: pointer;
}

.lista-simple {
    margin: 4px 0 0;
    padding-left: 20px;
    color: var(--tinta-suave);
    font-size: 15px;
    line-height: 1.7;
}

/* ---------- Ciclo POE ---------- */

.titulo-centrado { text-align: center; }

.tipos-centrados { display: flex; justify-content: center; gap: 6px; margin: 0 0 20px; }

.fila-emojis { margin: 4px 0; font-size: 17px; line-height: 1.6; }

.aviso-oculto { text-align: center; }

.enlace-secundario {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--toque-min);
    margin-top: 12px;
    color: var(--tinta-suave);
    font-weight: 600;
    text-decoration: none;
}

/* --- Revelación: la animación completa dura 1.5 s, bajo el techo de 2 s de §3.7. --- */

.revelacion {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 320px;
    margin: 8px 0 4px;
}

.revelacion-hierba {
    position: absolute;
    bottom: 12px;
    display: flex;
    gap: 24px;
    font-size: 34px;
}

.revelacion-hierba span { animation: mecer .5s ease-in-out 3; }

.revelacion-hierba span:nth-child(2) { animation-delay: .12s; }
.revelacion-hierba span:nth-child(3) { animation-delay: .24s; }

/* El estado final es el visible: si prefers-reduced-motion apaga las animaciones,
   el sprite se queda tal cual, sin desaparecer. */
.revelacion-sprite {
    width: var(--sprite-gigante);
    height: var(--sprite-gigante);
    object-fit: contain;
    animation: aparecer .6s ease-out .9s backwards;
}

@keyframes mecer {
    0%, 100% { transform: rotate(-8deg); }
    50% { transform: rotate(8deg); }
}

@keyframes aparecer {
    from { opacity: 0; transform: scale(.7); }
    to { opacity: 1; transform: scale(1); }
}

/* --- Tarjetas de resultado --- */

.tarjeta-acierto,
.tarjeta-casi {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    padding: 16px;
    border-radius: var(--radio);
    text-align: center;
}

.tarjeta-acierto { background: var(--verde-claro); }

.tarjeta-casi {
    align-items: stretch;
    background: #fff;
    border: 2px dashed var(--verde);
    text-align: left;
}

.acierto-icono { font-size: 34px; line-height: 1; }

.acierto-texto { font-size: 20px; font-weight: 700; }

.casi-texto { margin: 4px 0; font-weight: 600; }

.casi-pregunta { margin: 0 0 12px; color: var(--tinta-suave); }

.boton-secundario {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--toque-min);
    padding: 10px 16px;
    background: var(--verde-claro);
    border-radius: var(--radio);
    color: var(--verde);
    font-weight: 700;
    text-decoration: none;
}

.boton-suave { background: #6d9c86; }

/* --- Botones de tipo y de puntos --- */

.carta-tipo {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: 84px;
    padding: 8px 4px;
    background: #fff;
    border: 2px solid var(--borde);
    border-top: 6px solid var(--color-tipo, var(--borde));
    border-radius: var(--radio);
    color: var(--tinta);
    font-family: inherit;
    font-size: 13px;
    cursor: pointer;
}

.carta-tipo.activa {
    background: var(--verde-claro);
    border-color: var(--verde);
    border-top-color: var(--color-tipo, var(--verde));
    box-shadow: var(--sombra);
}

.carta-tipo:focus-visible,
.boton-puntos:focus-visible,
.opcion:focus-visible {
    outline: 3px solid var(--verde);
    outline-offset: 2px;
}

.cartas-puntos { grid-template-columns: repeat(5, 1fr); }

.boton-puntos {
    min-height: var(--toque-min);
    background: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta);
    font-family: inherit;
    font-size: 17px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    cursor: pointer;
}

.boton-puntos.activo { background: var(--verde); border-color: var(--verde); color: #fff; }

/* --- Opciones de /Explicar --- */

.opciones { list-style: none; margin: 0 0 24px; padding: 0; }

.opciones li + li { margin-top: 10px; }

.opcion {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 68px;
    padding: 12px 14px;
    background: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta);
    font-family: inherit;
    font-size: 16px;
    text-align: left;
    cursor: pointer;
}

.opcion-letra {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: var(--verde-claro);
    border-radius: 50%;
    color: var(--verde);
    font-weight: 700;
}

.opcion-texto { line-height: 1.35; }

.lista-cuenta { list-style: none; padding-left: 0; }

.linea-clave {
    padding: 6px 10px;
    margin-left: -10px;
    background: var(--verde-claro);
    border-radius: 10px;
    color: var(--tinta);
    font-weight: 700;
}

.marca-clave { display: block; font-size: 13px; font-weight: 600; color: var(--verde); }

.sprite-chico { width: var(--sprite-medio); height: var(--sprite-medio); object-fit: contain; }

/* --- Receta en la Pokédex --- */

.receta { margin-top: 6px; width: 100%; }

.receta summary {
    min-height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--verde);
    cursor: pointer;
}

.receta-emojis { display: block; font-size: 20px; line-height: 1.4; }

/* ---------- Cuaderno ---------- */

.pestanas {
    display: flex;
    gap: 8px;
    margin: 4px 0 20px;
}

.pestana {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--toque-min);
    padding: 8px 10px;
    background: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta-suave);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
}

.pestana.activa { background: var(--verde); border-color: var(--verde); color: #fff; }

/* --- Historial --- */

.lista-encuentros,
.lista-recetas,
.rejilla-objetivos { list-style: none; margin: 0; padding: 0; }

.lista-encuentros li + li,
.lista-recetas li + li { margin-top: 10px; }

.tarjeta-encuentro {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 96px;
    padding: 10px 14px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta);
    text-decoration: none;
}

.sprite-mini { width: var(--sprite-chico); height: var(--sprite-chico); flex-shrink: 0; object-fit: contain; }

.encuentro-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.encuentro-receta { font-size: 20px; line-height: 1.3; }

.encuentro-meta { font-size: 14px; font-weight: 600; color: var(--tinta-suave); }

.encuentro-fecha { font-size: 12px; color: var(--tinta-suave); }

.encuentro-acierto { flex-shrink: 0; font-size: 22px; }

.boton-ver-mas { margin-top: 16px; }

/* --- Fórmulas --- */

.tarjeta-receta {
    position: relative;
    background: #fff;
    border: 1px solid var(--borde);
    border-left: 6px solid var(--color-tipo, var(--borde));
    border-radius: var(--radio);
    overflow: hidden;
}

.tarjeta-receta.elegida { border-color: var(--verde); box-shadow: var(--sombra); }

.tarjeta-receta.borrando { border-color: #c46b5f; }

.receta-cuerpo {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    min-height: 84px;
    padding: 12px 14px;
    background: none;
    border: 0;
    color: var(--tinta);
    font-family: inherit;
    font-size: 15px;
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    /* Sin esto, mantener pulsado en iOS selecciona texto en vez de abrir el panel de borrar. */
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

.receta-emoji { flex-shrink: 0; font-size: 34px; line-height: 1; }

.receta-datos { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }

.receta-nombre { font-weight: 700; font-size: 16px; }

.receta-cartas { font-size: 19px; line-height: 1.3; }

.receta-meta { font-size: 13px; color: var(--tinta-suave); }

.receta-mejor { flex-shrink: 0; width: var(--sprite-chico); height: var(--sprite-chico); object-fit: contain; }

.receta-distancia {
    margin: 2px 0 0;
    font-size: 14px;
    font-weight: 700;
    color: var(--tinta-suave);
}

.receta-distancia.cerca,
.receta-distancia.alcanza { color: var(--verde); }

.receta-borrar {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px 14px;
    background: #fdf1ef;
    border-top: 1px solid #f0d9d5;
}

.borrar-pregunta { margin: 0; font-weight: 700; }

.boton-borrar,
.boton-cancelar {
    min-height: var(--toque-min);
    border-radius: var(--radio);
    font-family: inherit;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
}

.boton-borrar { background: #c46b5f; border: 0; color: #fff; }

.boton-cancelar { background: #fff; border: 2px solid var(--borde); color: var(--tinta); }

.cartas-emojis { grid-template-columns: repeat(6, 1fr); }

.boton-emoji {
    min-height: 56px;
    background: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    font-size: 28px;
    cursor: pointer;
}

.boton-emoji.activo { background: var(--verde-claro); border-color: var(--verde); }

.lista-reemplazo { margin-top: 8px; }

/* --- Objetivo --- */

.tarjeta-objetivo {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 14px;
    background: var(--verde-claro);
    border-radius: var(--radio);
    color: var(--tinta);
    text-decoration: none;
}

.tarjeta-objetivo-inicio { margin-top: 16px; }

.objetivo-sprite { width: var(--sprite-chico); height: var(--sprite-chico); flex-shrink: 0; object-fit: contain; }

.objetivo-datos { display: flex; flex-direction: column; flex: 1; min-width: 0; }

/* Con el sprite más grande el espacio se aprieta: la etiqueta se partía en dos líneas. */
.tarjeta-objetivo .etiqueta { white-space: nowrap; }

.tarjeta-objetivo .boton-secundario { flex-shrink: 0; padding: 8px 12px; font-size: 15px; }

.boton-objetivo { width: 100%; }

.boton-quitar-objetivo { margin-top: 16px; }

.rejilla-objetivos {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.objetivo-carta img { width: var(--sprite-medio); height: var(--sprite-medio); object-fit: contain; }

.objetivo-carta {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    min-height: 232px;
    padding: 12px 8px;
    background: #fff;
    border: 2px solid var(--borde);
    border-top: 6px solid var(--color-tipo, var(--borde));
    border-radius: var(--radio);
    color: var(--tinta);
    font-family: inherit;
    cursor: pointer;
}

.objetivo-carta.activa { background: var(--verde-claro); border-color: var(--verde); }

.objetivo-carta.ya-capturado img { opacity: .6; }

.objetivo-nombre { font-weight: 700; font-size: 15px; }

.objetivo-marca { font-size: 12px; font-weight: 700; color: var(--verde); }

/* --- Mezclar --- */

.columnas-mezcla { display: flex; flex-direction: column; gap: 16px; }

.columna-mezcla,
.zona-mezcla {
    padding: 14px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.zona-mezcla { margin-top: 16px; border: 2px dashed var(--verde); }

.columna-titulo { margin: 0 0 10px; font-size: 16px; }

.pista-mezcla { margin: 10px 0 0; font-size: 13px; color: var(--tinta-suave); }

.zona-mezcla .barras { margin-top: 16px; }

/* ---------- Ajustes (panel de padre) ---------- */

.pregunta-candado {
    margin: 24px 0 8px;
    font-size: 26px;
    font-weight: 700;
    text-align: center;
}

.pantalla-candado {
    display: block;
    margin: 0 auto 20px;
    padding: 10px 16px;
    max-width: 200px;
    background: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    font-size: 34px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    text-align: center;
}

.teclado {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-width: 320px;
    margin: 0 auto;
}

.tecla {
    min-height: 64px;
    background: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta);
    font-family: inherit;
    font-size: 26px;
    font-weight: 700;
    cursor: pointer;
}

.tecla:focus-visible { outline: 3px solid var(--verde); outline-offset: 2px; }

.tecla-borrar { font-size: 22px; color: var(--tinta-suave); }

.tecla-ok { background: var(--verde); border-color: var(--verde); color: #fff; }

.tecla-ok:disabled { background: #9db8ac; border-color: #9db8ac; }

.aviso-candado { text-align: center; }

/* --- Secciones del panel --- */

.ajuste {
    margin-bottom: 20px;
    padding: 16px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.ajuste-titulo { margin: 0 0 4px; font-size: 17px; }

.ajuste-nota { margin: 0 0 12px; font-size: 14px; color: var(--tinta-suave); line-height: 1.4; }

.opciones-ajuste { display: flex; flex-wrap: wrap; gap: 8px; }

.boton-opcion {
    flex: 1;
    min-width: 96px;
    min-height: var(--toque-min);
    padding: 8px 12px;
    background: #fff;
    border: 2px solid var(--borde);
    border-radius: var(--radio);
    color: var(--tinta);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boton-opcion.activo { background: var(--verde); border-color: var(--verde); color: #fff; }

.objetivo-actual { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }

.objetivo-actual img { width: var(--sprite-chico); height: var(--sprite-chico); object-fit: contain; }

/* --- Tabla de la semana --- */

.tabla-semana {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}

.tabla-semana th,
.tabla-semana td {
    padding: 8px 4px;
    border-bottom: 1px solid var(--borde);
    text-align: right;
    font-size: 15px;
}

.tabla-semana thead th {
    font-size: 13px;
    color: var(--tinta-suave);
    text-transform: uppercase;
    letter-spacing: .03em;
}

.tabla-semana tbody th { text-align: left; font-weight: 700; text-transform: capitalize; }

.tabla-semana .dia-vacio { color: var(--tinta-suave); opacity: .6; }

/* --- Reinicio --- */

.tarjeta-peligro {
    margin-bottom: 20px;
    padding: 16px;
    background: #fdf1ef;
    border: 2px solid #e6c3bd;
    border-radius: var(--radio);
}

.tarjeta-peligro .etiqueta { display: block; margin-top: 10px; color: #a9503f; }

.tarjeta-peligro .etiqueta:first-child { margin-top: 0; }

.nota-peligro { margin: 14px 0 0; font-weight: 700; color: #a9503f; }

.confirmacion {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: var(--toque-min);
    margin-bottom: 16px;
    font-size: 16px;
    line-height: 1.35;
}

.confirmacion input { width: 28px; height: 28px; flex-shrink: 0; accent-color: #c46b5f; }

.boton-peligro { background: #c46b5f; }

.boton-peligro-suave { border-color: #e6c3bd; color: #a9503f; }

.boton-salir {
    width: 100%;
    background: none;
    border: 0;
    font-family: inherit;
    font-size: 16px;
    cursor: pointer;
}

/* ---------- Ritmo diario: aviso y despedida ---------- */

/* Ámbar suave, nunca rojo: es un recordatorio, no una alarma. */
/* Antes llevaba `top: 56px` a mano, que se descuadraba en cuanto el notch hacia
   la cabecera mas alta. Ahora es un hermano mas de la columna. */
.aviso-sesion {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 10px 16px;
    background: #fdf3e0;
    border-bottom: 1px solid #f0dfc0;
    color: #7a5b24;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
}

.carta-condicion.destacada {
    border-color: #e8c766;
    box-shadow: 0 0 0 2px #f7e3a8 inset;
}

.carta-estrella {
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 13px;
}

.carta-condicion { position: relative; }

/* --- Pantalla de despedida --- */

.despedida {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin: 12px 0 24px;
    text-align: center;
}

.despedida-sprite { width: var(--sprite-gigante); height: var(--sprite-gigante); object-fit: contain; }

.despedida-emoji { font-size: 90px; line-height: 1.2; }

.subtitulo-centrado { text-align: center; }

.tarjeta-manana {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    width: 100%;
    margin-top: 12px;
    padding: 18px 16px;
    background: var(--verde-claro);
    border-radius: var(--radio);
}

.manana-habitat { font-size: 24px; font-weight: 700; }

.manana-bonus { font-size: 17px; }

.manana-espera { margin-top: 6px; font-weight: 700; color: var(--verde); }

/* ---------- Misiones ---------- */

.tarjeta-mision {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 16px;
    padding: 14px 16px;
    background: #fff;
    border: 2px solid var(--borde);
    border-left: 6px solid var(--verde);
    border-radius: var(--radio);
    color: var(--tinta);
    text-decoration: none;
}

.tarjeta-mision.cumplida { border-left-color: #e8c766; background: var(--verde-claro); }

.tarjeta-mision-alterna {
    margin-top: 8px;
    border-left-color: var(--borde);
    border-width: 1px;
}

.tarjeta-mision-alterna .mision-emoji { font-size: 26px; }

.tarjeta-mision-alterna .mision-texto { font-size: 15px; font-weight: 600; }

.mision-emoji { flex-shrink: 0; font-size: 32px; line-height: 1; }

.mision-datos { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.mision-texto { font-weight: 700; font-size: 16px; line-height: 1.3; }

.mision-ver { flex-shrink: 0; font-size: 13px; font-weight: 700; color: var(--verde); }

.lista-misiones { list-style: none; margin: 0 0 24px; padding: 0; }

.lista-misiones li + li { margin-top: 10px; }

.mision {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 76px;
    padding: 12px 14px;
    background: #fff;
    border: 1px solid var(--borde);
    border-radius: var(--radio);
}

.mision.activa { border-color: var(--verde); border-width: 2px; box-shadow: var(--sombra); }

/* Cumplida se ve celebrada, no tachada: lo hecho no se apaga. */
.mision.cumplida { background: var(--verde-claro); border-color: var(--verde-claro); }

.mision-fecha { font-size: 13px; color: var(--tinta-suave); }

.mision.cumplida .mision-fecha { color: var(--verde); font-weight: 600; }

/* --- La calcomanía, única recompensa --- */

.tarjeta-mision-cumplida {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    margin-bottom: 20px;
    padding: 18px 16px;
    background: #fdf7e6;
    border: 2px solid #e8c766;
    border-radius: var(--radio);
    text-align: center;
}

.calcomania { font-size: 56px; line-height: 1.1; }

.calcomania-nota { margin-top: 4px; font-size: 13px; color: var(--tinta-suave); }

.calcomanias {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px 14px;
    background: #fdf7e6;
    border: 1px dashed #e8c766;
    border-radius: var(--radio);
}

.calcomania-chica { font-size: 28px; line-height: 1; }

/* ---------- Celebraciones (§3.7) ---------- */

/* Una sola clase para TODA celebración del juego: predicción acertada, misión cumplida,
   calcomanía, umbral alcanzado. Duración total 0.9s, muy por debajo del techo de 2s, y
   `animation-iteration-count: 1` explícito: nada de bucles de "casi ganas".

   Regla del proyecto: ninguna animación de la app puede ser `infinite`. La única excepción
   permitida sería un indicador de carga, que hoy no existe. Hay una prueba que lo verifica
   leyendo este archivo. */
.celebracion {
    animation: celebrar .9s ease-out 1 both;
}

/* Un toque la corta: la celebración nunca retiene al niño. */
.celebracion.celebracion-saltada {
    animation: none;
}

@keyframes celebrar {
    0% { opacity: 0; transform: scale(.92); }
    45% { opacity: 1; transform: scale(1.02); }
    100% { opacity: 1; transform: scale(1); }
}

.invitacion-compartir {
    margin: 16px 0 0;
    font-size: 15px;
    color: var(--tinta-suave);
    text-align: center;
}

/* Nota técnica dentro de un aviso del niño: presente para el adulto, discreta para él. */
.nota-adulto {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    opacity: .75;
}

.invitacion-compartir {
    margin: 16px 0 0;
    font-size: 15px;
    color: var(--tinta-suave);
    text-align: center;
}

/* Nota técnica dentro de un aviso del niño: visible para el adulto, discreta para él. */
.nota-adulto {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    opacity: .7;
}

/* ---------- Ficha grande de la Pokédex ---------- */

.ficha {
    width: min(92vw, 420px);
    max-height: 86vh;
    max-height: 86dvh;
    padding: 20px 18px 24px;
    background: var(--arena);
    border: 0;
    border-top: 8px solid var(--color-pokemon, var(--verde));
    border-radius: var(--radio);
    box-shadow: 0 8px 32px rgba(35, 48, 43, .28);
    color: var(--tinta);
    overflow-y: auto;
    text-align: center;
}

.ficha::backdrop { background: rgba(35, 48, 43, .55); }

.ficha-cerrar {
    position: absolute;
    top: 8px;
    right: 8px;
    width: var(--toque-min);
    height: var(--toque-min);
    background: none;
    border: 0;
    color: var(--tinta-suave);
    font-size: 20px;
    cursor: pointer;
}

.ficha-cerrar:focus-visible { outline: 3px solid var(--verde); outline-offset: -3px; }

.ficha-numero {
    display: block;
    font-size: 14px;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: var(--tinta-suave);
}

.ficha-sprite {
    width: var(--sprite-grande);
    height: var(--sprite-grande);
    margin: 4px auto 0;
    object-fit: contain;
}

.ficha-nombre { margin: 0 0 10px; font-size: 26px; }

.ficha-estado {
    margin: 12px 0 0;
    font-size: 15px;
    color: var(--tinta-suave);
    line-height: 1.4;
}

.ficha-receta {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--borde);
    text-align: left;
}

.ficha-receta .etiqueta { display: block; margin-bottom: 10px; }

/* En la ficha las cartas solo se leen, así que no llevan alto de toque. */
.carta-receta { min-height: 0; padding: 10px 6px; cursor: default; }

/* Mientras sin-saltos.js trae el contenido nuevo. No es una animación: es un estado. */
.contenido.cargando { opacity: .6; }

/* ---------- Tablet ---------- */

@media (min-width: 600px) {
    body { font-size: 18px; }
    .rejilla-pokedex { grid-template-columns: repeat(3, 1fr); }
    .cartas { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); }
    .columnas-mezcla { flex-direction: row; }
    .columna-mezcla { flex: 1; min-width: 0; }
    .rejilla-objetivos { grid-template-columns: repeat(4, 1fr); }
    .nav-texto { font-size: 14px; }
    .titulo { font-size: 30px; }
}

@media (min-width: 900px) {
    .rejilla-pokedex { grid-template-columns: repeat(4, 1fr); }
}

@media (prefers-reduced-motion: reduce) {
    * { animation: none !important; transition: none !important; }
}