/* Paleta: selva + pasteles cálidos */
:root {
    --fuente-serif: 'Lora', 'Palatino Linotype', 'Book Antiqua', Palatino, Georgia, serif;
    --verde-selva: #3d5c3a;
    --verde-selva-oscuro: #2a4028;
    --verde-hoja: #5a7d56;
    --verde-claro: #c8ddb8;
    --verde-musgo: #7a9e6f;
    --crema: #fff8ee;
    --durazno: #fde8c8;
    --arena: #f5e0c4;
    --terracota: #d4845a;
    --marron-texto: #3d3428;
    --borde: #3d5c3a;
    --si: #5a8f55;
    --no: #c96a5a;
    --ni: #d4a04a;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

.oculto {
    display: none !important;
}

body {
    font-family: var(--fuente-serif);
    background: var(--durazno);
    background-image:
        linear-gradient(180deg, var(--verde-claro) 0%, transparent 120px),
        linear-gradient(0deg, var(--arena) 0%, var(--durazno) 40%, var(--crema) 100%);
    min-height: 100vh;
    padding: 20px;
    overflow-x: hidden;
    color: var(--marron-texto);
}

.contenedor {
    max-width: 1100px;
    margin: 0 auto;
}

header {
    text-align: center;
    margin-bottom: 28px;
    padding: 20px;
    background: var(--crema);
    border: 3px solid var(--borde);
}

.cabecera-juego {
    text-align: center;
    margin-bottom: 16px;
    padding: 0;
    background: none;
    border: none;
}

.cabecera-juego h1 {
    font-size: 2.2rem;
    margin-bottom: 6px;
    color: var(--verde-selva-oscuro);
    letter-spacing: -0.5px;
}

.accion-partida {
    text-align: center;
    margin-bottom: 20px;
}

.accion-partida--animales {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 6px;
    text-align: left;
    margin-top: 12px;
    margin-bottom: 0;
    width: 100%;
}

header h1 {
    font-size: 2.2rem;
    margin-bottom: 6px;
    color: var(--verde-selva-oscuro);
    letter-spacing: -0.5px;
}

.subtitulo-juego {
    font-size: 0.9rem;
    font-style: normal;
    color: #000;
    margin-bottom: 14px;
    line-height: 1.4;
}

.pie-juego {
    max-width: 1100px;
    margin: 32px auto 0;
    padding: 16px 20px;
    text-align: center;
    font-size: 0.85rem;
    color: var(--marron-texto);
}

.pie-juego a {
    color: var(--verde-selva);
    font-weight: 600;
    text-decoration: none;
}

.pie-juego a:hover {
    color: var(--terracota);
    text-decoration: underline;
}

.instrucciones {
    font-size: 1rem;
    margin-bottom: 16px;
    line-height: 1.6;
    color: var(--marron-texto);
}

.instrucciones strong {
    padding: 2px 8px;
    background: var(--verde-claro);
    border: 2px solid var(--verde-hoja);
    color: var(--verde-selva-oscuro);
}

.config-partida {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px 24px;
    margin-bottom: 18px;
}

.config-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
}

.config-etiqueta {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--verde-selva-oscuro);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.config-select {
    background: var(--crema);
    border: 3px solid var(--verde-selva);
    padding: 8px 12px;
    font-size: 1rem;
    font-weight: 600;
    color: var(--marron-texto);
    min-width: 72px;
    cursor: pointer;
}

.btn-reiniciar {
    background: var(--verde-selva);
    color: var(--crema);
    border: 3px solid var(--verde-selva-oscuro);
    padding: 10px 20px;
    font-size: 0.9rem;
    font-family: inherit;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
}

.btn-reiniciar:hover {
    background: var(--terracota);
    border-color: #a85f42;
    color: white;
}

a.btn-reiniciar {
    text-decoration: none;
    display: inline-block;
    text-align: center;
}

.accion-partida--animales .btn-reiniciar {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    padding: 8px 4px;
    font-size: 0.78rem;
    text-align: center;
    box-sizing: border-box;
    white-space: nowrap;
}

/* Pantalla inicial: portada y botón JUGAR */
.pantalla-inicio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 24px;
    min-height: 50vh;
    padding: 24px 20px 64px;
}

.pantalla-inicio.oculta {
    display: none;
}

.portada-inicio {
    width: 100%;
    max-width: 720px;
    height: auto;
    display: block;
    border: 3px solid var(--borde);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(61, 52, 40, 0.15);
}

/* En la portada no repetir título ni progreso del encabezado */
.cabecera-juego:has(+ .pantalla-inicio:not(.oculta)) {
    margin-bottom: 0;
}

.cabecera-juego:has(+ .pantalla-inicio:not(.oculta)) h1,
.cabecera-juego:has(+ .pantalla-inicio:not(.oculta)) .subtitulo-juego,
.cabecera-juego:has(+ .pantalla-inicio:not(.oculta)) .progreso-niveles,
.cabecera-juego:has(+ .pantalla-inicio:not(.oculta)) .contador-preguntas {
    display: none;
}

.btn-reiniciar--grande {
    padding: 16px 48px;
    font-size: 1.25rem;
}

/* Tablero oculto hasta pulsar JUGAR */
.zona-juego.oculta,
.zona-referencia.oculta {
    display: none;
}

/* Tour guiado — el overlay bloquea clics solo mientras está visible */
.tour-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    pointer-events: none;
    overflow-y: auto;
    background: transparent;
}

.tour-overlay:not(.oculta) {
    display: block;
    pointer-events: auto;
}

.tour-overlay.oculta {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden;
}

.tour-spotlight {
    position: fixed;
    border-radius: 6px;
    box-shadow: 0 0 0 9999px rgba(42, 64, 40, 0.68);
    border: 3px solid var(--crema);
    pointer-events: none;
    transition: top 0.2s, left 0.2s, width 0.2s, height 0.2s;
    z-index: 10001;
}

.tour-popover {
    position: fixed;
    z-index: 10003;
    width: min(340px, calc(100vw - 24px));
    background: var(--crema);
    border: 3px solid var(--verde-selva-oscuro);
    padding: 16px 18px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
}

.tour-popover__paso {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--verde-hoja);
    margin-bottom: 6px;
}

.tour-popover__titulo {
    font-size: 1.1rem;
    color: var(--verde-selva-oscuro);
    margin-bottom: 8px;
}

.tour-popover__texto {
    font-size: 0.92rem;
    line-height: 1.5;
    color: var(--marron-texto);
    margin-bottom: 14px;
}

.tour-popover__acciones {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.tour-btn {
    border: 2px solid var(--verde-selva-oscuro);
    padding: 8px 14px;
    font-size: 0.9rem;
    font-weight: 700;
    cursor: pointer;
    font-family: inherit;
}

.tour-btn--primario {
    background: var(--verde-selva);
    color: var(--crema);
}

.tour-btn--primario:hover {
    background: var(--verde-selva-oscuro);
}

.tour-btn--secundario {
    background: transparent;
    color: var(--marron-texto);
}

.tour-btn--secundario:hover {
    background: var(--verde-claro);
}

/* Progreso de niveles */
.progreso-niveles {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 0;
}

.contador-preguntas {
    margin-top: 10px;
    font-size: 0.9rem;
    color: var(--verde-selva-oscuro);
    text-align: center;
}

.contador-preguntas strong {
    font-weight: 700;
}

.nivel-paso {
    display: flex;
    align-items: center;
    justify-content: center;
}

.nivel-paso__casilla {
    width: 52px;
    min-height: 52px;
    border-radius: 4px;
    border: 3px solid var(--verde-selva);
    background: var(--crema);
    color: var(--verde-selva-oscuro);
    font-weight: 700;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 5px 4px;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.nivel-paso__numero {
    font-size: 1rem;
    line-height: 1;
}

.nivel-paso__config {
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    opacity: 0.9;
}

.nivel-paso.actual .nivel-paso__casilla {
    background: var(--verde-selva);
    color: var(--crema);
    border-color: var(--verde-selva-oscuro);
    box-shadow: 0 0 0 3px var(--verde-claro);
}

.nivel-paso.actual .nivel-paso__config {
    opacity: 1;
}

.nivel-paso.completado .nivel-paso__casilla {
    background: var(--si);
    border-color: var(--verde-selva-oscuro);
    color: #fff;
}

.nivel-paso.pendiente .nivel-paso__casilla {
    opacity: 0.55;
}

.info-nivel {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--verde-selva-oscuro);
    margin-bottom: 16px;
    min-height: 1.4em;
}

/* Fila de referencia + preguntas (panel superior) */
.zona-referencia {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--verde-hoja);
    padding: 16px 14px 18px;
    margin-bottom: 0;
}

.panel-superior {
    display: flex;
    align-items: stretch;
    gap: 0;
    max-width: 1100px;
    margin: 0 auto;
}

.panel-superior__animales {
    flex: 0 0 38%;
    min-width: 0;
    padding-right: 16px;
    border-right: 2px solid rgba(255, 248, 238, 0.35);
}

.panel-superior__preguntas {
    flex: 1;
    min-width: 0;
    padding-left: 16px;
}

.panel-superior__animales .titulo-seccion,
.panel-superior__preguntas .titulo-seccion {
    text-align: left;
}

.titulo-seccion {
    text-align: center;
    color: var(--crema);
    font-size: 0.95rem;
    font-weight: 700;
    margin-bottom: 10px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.fila-referencia {
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    gap: clamp(4px, 0.6vw, 8px);
    flex-wrap: nowrap;
    min-height: 70px;
    padding: 0;
    width: 100%;
}

.carta-referencia {
    background: var(--crema);
    border: 3px solid var(--verde-selva-oscuro);
    padding: clamp(4px, 0.8vw, 8px) clamp(3px, 0.6vw, 10px);
    text-align: center;
    cursor: grab;
    transition: background 0.15s, opacity 0.15s;
    user-select: none;
    flex: 0 0 var(--ancho-carta-referencia, 64px);
    width: var(--ancho-carta-referencia, 64px);
    min-width: 0;
    box-sizing: border-box;
}

.carta-referencia:hover {
    background: var(--durazno);
}

.carta-referencia.arrastrando {
    opacity: 0.5;
    cursor: grabbing;
}

.carta-referencia.usada {
    opacity: 0.3;
    pointer-events: none;
    cursor: default;
}

.carta-referencia .img-animal {
    width: var(--tamano-img-referencia, 46px);
    height: var(--tamano-img-referencia, 46px);
    margin: 0 auto;
    object-fit: contain;
}

.carta-referencia .nombre {
    font-size: var(--tamano-texto-referencia, 0.7rem);
    font-weight: bold;
    color: var(--verde-selva-oscuro);
    display: block;
    margin-top: 4px;
    line-height: 1.15;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Modal de resultado (ganar, completar nivel o fallar) */
.modal-resultado {
    position: fixed;
    inset: 0;
    z-index: 10005;
    pointer-events: none;
}

.modal-resultado.oculto {
    display: none;
}

.modal-resultado__overlay {
    position: absolute;
    inset: 0;
    background: rgba(42, 64, 40, 0.18);
    pointer-events: none;
}

.modal-resultado__dialog {
    position: fixed;
    left: 50%;
    top: 12vh;
    transform: translateX(-50%);
    z-index: 1;
    width: min(440px, calc(100vw - 24px));
    background: var(--crema);
    border: 3px solid #000;
    padding: 24px 22px 20px;
    text-align: center;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
    pointer-events: auto;
}

.modal-resultado__dialog.arrastrando {
    cursor: grabbing;
    user-select: none;
}

.modal-resultado.ganador .modal-resultado__dialog {
    background: var(--verde-musgo);
}

.modal-resultado__titulo {
    font-size: 1.35rem;
    margin: -8px -10px 12px;
    padding: 8px 10px;
    color: var(--verde-selva-oscuro);
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.modal-resultado.fallo .modal-resultado__titulo {
    color: var(--terracota);
}

.modal-resultado.ganador .modal-resultado__titulo {
    color: var(--crema);
}

.modal-resultado__texto {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 20px;
    color: var(--marron-texto);
}

.modal-resultado.ganador .modal-resultado__texto {
    color: var(--crema);
}

.modal-resultado__texto strong {
    font-weight: 800;
}

.modal-resultado__btn {
    min-width: 180px;
}

body.modal-resultado-abierto {
    overflow: auto;
}

/* Modales del ranking Top 10 */
.modal-ranking {
    position: fixed;
    inset: 0;
    z-index: 10006;
}

.modal-ranking.oculto {
    display: none;
}

.modal-ranking__overlay {
    position: absolute;
    inset: 0;
    background: rgba(42, 64, 40, 0.35);
}

.modal-ranking__dialog {
    position: fixed;
    left: 50%;
    top: 12vh;
    transform: translateX(-50%);
    z-index: 1;
    width: min(440px, calc(100vw - 24px));
    max-height: calc(100vh - 24vh);
    overflow-y: auto;
    background: var(--crema);
    border: 3px solid #000;
    padding: 24px 22px 20px;
    text-align: center;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.35);
}

.modal-ranking__titulo {
    font-size: 1.35rem;
    margin-bottom: 12px;
    color: var(--verde-selva-oscuro);
}

.modal-ranking__info {
    font-size: 0.88rem;
    line-height: 1.45;
    margin-bottom: 14px;
    color: var(--marron-texto);
    font-style: italic;
}

.modal-ranking__texto {
    font-size: 1rem;
    line-height: 1.5;
    margin-bottom: 16px;
    color: var(--marron-texto);
}

.modal-ranking__resultado {
    font-size: 0.95rem;
    line-height: 1.45;
    margin-bottom: 14px;
    padding: 10px 12px;
    background: var(--verde-claro);
    border: 2px solid var(--verde-hoja);
    color: var(--verde-selva-oscuro);
}

.modal-ranking__resultado.no-califico {
    background: var(--durazno);
    border-color: var(--terracota);
    color: var(--marron-texto);
}

.modal-ranking__etiqueta {
    display: block;
    text-align: left;
    font-size: 0.9rem;
    margin-bottom: 6px;
    color: var(--marron-texto);
}

.modal-ranking__input {
    width: 100%;
    padding: 10px 12px;
    margin-bottom: 16px;
    font-family: var(--fuente-serif);
    font-size: 1rem;
    border: 2px solid var(--borde);
    background: #fff;
    color: var(--marron-texto);
}

.modal-ranking__input:focus {
    outline: 2px solid var(--verde-hoja);
    outline-offset: 1px;
}

.modal-ranking__btn {
    min-width: 180px;
}

.modal-ranking__vacio {
    font-size: 0.95rem;
    margin-bottom: 16px;
    color: var(--marron-texto);
    font-style: italic;
}

.lista-ranking {
    text-align: left;
    margin-bottom: 16px;
}

.lista-ranking-fila {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 8px 10px;
    background: var(--arena);
    border: 1px solid var(--borde);
}

.lista-ranking-fila + .lista-ranking-fila {
    margin-top: 6px;
}

.lista-ranking-texto {
    flex: 1;
    min-width: 0;
    font-size: 0.92rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.lista-ranking-preguntas {
    flex-shrink: 0;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--verde-selva);
}

.lista-ranking-fila.ranking-destacado {
    background: var(--verde-claro);
    border-color: var(--verde-hoja);
    font-weight: 700;
}

body.modal-ranking-abierto {
    overflow: hidden;
}

/* Fila de juego */
.zona-animales {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    flex-wrap: nowrap;
    gap: 6px;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    background: var(--arena);
    padding: 24px 10px 16px;
    margin-bottom: 30px;
    min-height: 160px;
}

.columna-slot {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
}

.slot-adivinanza {
    background: #ffffff;
    border: 3px dashed var(--verde-hoja);
    padding: 10px 8px;
    text-align: center;
    width: 100%;
    aspect-ratio: 4 / 5;
    min-height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: background 0.2s, border-color 0.2s;
    user-select: none;
}

.slot-contenido {
    width: 100%;
    height: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 0;
}

.descartes-slot {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    align-items: center;
    gap: 2px;
    width: 100%;
    padding: 0 1px;
}

.icono-descarte {
    flex: 1 1 0;
    min-width: 0;
    background: var(--crema);
    border: 2px solid var(--verde-hoja);
    padding: 3px 1px;
    cursor: pointer;
    transition: background 0.15s, opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.icono-descarte .img-animal--mini {
    width: 100%;
    height: clamp(14px, 2.5vw, 20px);
    margin: 0 auto;
    object-fit: contain;
}

.icono-descarte:hover:not(:disabled) {
    background: var(--verde-claro);
}

.icono-descarte.descartado {
    opacity: 0.35;
    text-decoration: line-through;
    background: #e0d4c4;
}

.icono-descarte:disabled {
    cursor: default;
    opacity: 0.45;
}

.columna-slot.juego-terminado .descartes-slot {
    opacity: 0.5;
}

.slot-adivinanza.activo-animal {
    border-color: var(--terracota);
    border-style: solid;
    background: #ffffff;
}

.slot-adivinanza.ocupado {
    background: #ffffff;
    border-style: solid;
    border-color: var(--verde-selva);
}

.slot-adivinanza.correcto {
    border-color: var(--si);
    background: #ffffff;
    border-width: 4px;
}

.slot-adivinanza.incorrecto {
    border-color: var(--no);
    background: #ffffff;
    border-width: 4px;
}

.signo-pregunta {
    font-size: clamp(2.8rem, 7vw, 4.5rem);
    font-weight: bold;
    color: var(--verde-hoja);
    line-height: 1;
}

.slot-vacio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.slot-vacio__etiqueta {
    font-size: calc(0.75rem + 2px);
    font-weight: 600;
    color: var(--verde-hoja);
    line-height: 1;
    text-transform: lowercase;
}

.animal-colocado {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: grab;
    width: 100%;
    height: 100%;
    gap: 4px;
}

/* Imágenes de animales (PNG individuales) */
.img-animal {
    display: block;
    object-fit: contain;
}

.animal-colocado .img-animal {
    width: 92%;
    height: auto;
    max-height: calc(100% - 1.4rem);
    flex: 1 1 auto;
    margin: 0 auto;
    object-fit: contain;
}

.animal-colocado .nombre {
    font-weight: bold;
    color: var(--verde-selva-oscuro);
    font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    margin-top: 0;
    flex-shrink: 0;
    line-height: 1.1;
}

.animal-colocado.incorrecto-jugador {
    opacity: 0.5;
    text-decoration: line-through;
}

.animal-correcto {
    margin-top: 6px;
    padding-top: 6px;
    border-top: 2px dashed var(--si);
    width: 100%;
}

.etiqueta-correcto {
    display: block;
    font-size: 0.65rem;
    color: var(--si);
    font-weight: bold;
    text-transform: uppercase;
    margin-bottom: 2px;
}

.animal-correcto .img-animal {
    width: 80%;
    height: auto;
    max-height: 48px;
    margin: 0 auto;
    object-fit: contain;
}

.animal-correcto .nombre {
    font-size: clamp(0.65rem, 1.2vw, 0.8rem);
    font-weight: bold;
    color: var(--verde-selva);
}

/* Espacios para preguntas */
.espacio-pregunta {
    flex: 1.2;
    min-width: 0;
    min-height: 130px;
    align-self: flex-start;
    border: 3px dashed var(--verde-musgo);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    transition: background 0.2s, border-color 0.2s;
    position: relative;
    background: rgba(255, 248, 238, 0.6);
}

.pila-preguntas {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 6px 4px;
}

.espacio-pregunta.activo {
    border-color: var(--terracota);
    border-style: solid;
    background: var(--crema);
}

.espacio-pregunta.ocupado {
    border-style: solid;
    border-color: var(--verde-selva);
    background: var(--crema);
}

.espacio-pregunta .indicador {
    color: var(--verde-hoja);
    font-size: calc(0.75rem + 2px);
    font-weight: 600;
    text-align: center;
    padding: 5px;
    align-self: center;
    margin: auto;
}

.pregunta-colocada {
    width: 100%;
    padding: 6px 5px;
    text-align: center;
    cursor: default;
    background: var(--durazno);
    border: 2px solid var(--verde-claro);
    flex-shrink: 0;
    user-select: none;
}

.pregunta-colocada .texto-pregunta,
.pregunta-colocada .respuesta {
    pointer-events: none;
}

.pregunta-colocada .texto-pregunta {
    font-size: clamp(0.55rem, 1vw, 0.72rem);
    font-weight: bold;
    color: #000;
    margin-bottom: 4px;
    line-height: 1.2;
}

.pregunta-colocada .respuesta {
    font-size: clamp(0.75rem, 1.4vw, 1rem);
    font-weight: bold;
    padding: 3px 10px;
    display: inline-block;
    border: 2px solid transparent;
}

.respuesta.si {
    background: var(--si);
    color: white;
    border-color: #3d6e38;
}

.respuesta.no {
    background: var(--no);
    color: white;
    border-color: #a04d40;
}

.respuesta.ni {
    background: var(--ni);
    color: white;
    border-color: #a67d30;
}

/* Preguntas en el panel superior (derecha) */
.lista-preguntas {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-start;
    align-content: flex-start;
    min-height: 70px;
    max-height: 160px;
    overflow-y: auto;
    padding-right: 4px;
}

.carta-pregunta {
    background: var(--terracota);
    color: #000;
    padding: 8px 12px;
    border: 3px solid #000;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: grab;
    transition: background 0.15s, opacity 0.15s;
    user-select: none;
    touch-action: none;
    flex: 0 1 auto;
    max-width: 100%;
    line-height: 1.25;
}

.carta-pregunta:hover {
    background: #c97552;
}

.carta-pregunta.arrastrando {
    opacity: 0.5;
    cursor: grabbing;
}

.carta-pregunta.usada {
    display: none;
}

/* Tabla de características */
.selector-animales {
    background: var(--crema);
    border: 3px solid var(--borde);
    padding: 16px 20px;
    margin-bottom: 20px;
}

.selector-animales__titulo {
    font-weight: 700;
    font-size: 1rem;
    color: var(--verde-selva-oscuro);
    margin-bottom: 4px;
}

.selector-animales__ayuda {
    font-size: 0.9rem;
    color: var(--marron-texto);
    margin-bottom: 14px;
}

.selector-animales__lista {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.selector-animales__item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    border: 3px solid var(--verde-selva-oscuro);
    background: var(--crema);
    cursor: pointer;
    user-select: none;
    transition: background 0.15s;
}

.selector-animales__item:hover {
    background: var(--durazno);
}

.selector-animales__check {
    width: 16px;
    height: 16px;
    accent-color: var(--verde-selva);
    cursor: pointer;
    flex-shrink: 0;
}

.selector-animales__nombre {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--verde-selva-oscuro);
}

.img-animal--selector {
    width: 32px;
    height: 32px;
    object-fit: contain;
    flex-shrink: 0;
}

.contenedor-tabla {
    max-width: 100%;
}

.enlace-volver {
    display: inline-block;
    text-decoration: none;
}

.tabla-contenedor {
    background: var(--crema);
    border: 3px solid #000;
    padding: 20px;
    overflow-x: auto;
}

.contenedor-tabla .tabla-caracteristicas {
    table-layout: fixed;
    width: 100%;
}

.contenedor-tabla .tabla-caracteristicas th,
.contenedor-tabla .tabla-caracteristicas td {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-word;
}

.tabla-caracteristicas {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

.tabla-caracteristicas th,
.tabla-caracteristicas td {
    padding: 12px 14px;
    text-align: center;
    border: 2px solid #000;
}

.tabla-caracteristicas thead th {
    background: var(--verde-claro);
    color: var(--verde-selva-oscuro);
    font-weight: 600;
    position: sticky;
    top: 0;
}

.tabla-caracteristicas thead th:first-child {
    text-align: left;
    min-width: 180px;
}

.contenedor-tabla .tabla-caracteristicas thead th:first-child {
    min-width: 0;
    width: auto;
}

.contenedor-tabla .tabla-caracteristicas thead th:not(:first-child) {
    font-size: 0.85rem;
    line-height: 1.2;
}

.tabla-caracteristicas tbody tr:nth-child(even) {
    background: var(--durazno);
}

.tabla-caracteristicas tbody tr:hover {
    background: var(--verde-claro);
}

.celda-pregunta {
    text-align: left !important;
    font-weight: 600;
    color: var(--verde-selva-oscuro);
    background: var(--crema);
}

.tabla-caracteristicas tbody tr:hover .celda-pregunta {
    background: var(--crema);
}

.img-animal--tabla {
    width: 48px;
    height: 48px;
    margin: 0 auto 6px;
    object-fit: contain;
}

.celda-si {
    color: var(--si);
    font-weight: bold;
    background: rgba(200, 221, 184, 0.55);
}

.celda-no {
    color: var(--no);
    font-weight: bold;
    background: rgba(253, 232, 200, 0.65);
}

/* Responsive */
@media (max-width: 768px) {
    .panel-superior {
        flex-direction: column;
        gap: 14px;
    }

    .panel-superior__animales {
        flex: none;
        width: 100%;
        padding-right: 0;
        border-right: none;
        border-bottom: 2px solid rgba(255, 248, 238, 0.35);
        padding-bottom: 14px;
    }

    .panel-superior__preguntas {
        padding-left: 0;
    }

    .panel-superior__animales .titulo-seccion,
    .panel-superior__preguntas .titulo-seccion {
        text-align: center;
    }

    .accion-partida--animales {
        justify-content: stretch;
        flex-wrap: nowrap;
        text-align: center;
    }

    .fila-referencia {
        justify-content: center;
    }

    .lista-preguntas {
        justify-content: center;
        max-height: none;
    }

    .zona-animales {
        gap: 4px;
        padding: 16px 6px;
        overflow-x: auto;
    }

    header h1 {
        font-size: 1.6rem;
    }
}