/* =========================================
   AURA ORGÁNICA DEL COMPAÑERO
   El aura sale de la SILUETA del propio PNG: cada capa es un bloque de color recortado con
   mask-image = la imagen del compañero (app.js pone la URL en --img-aura). El desenfoque va en
   la capa y la máscara en su ::before, porque filter se aplica antes que mask y, al revés, el
   borde quedaría duro.
   Bajo estímulo (principios_centrate.md): bucles lentos de 6 a 10 s, sin destellos ni pulsos de
   brillo. Solo se animan transform y opacity (baratos en Android).
   Ajustes > Preferencias: brillo (suave / normal / vivo → --aura-k) y partículas
   (ninguna / pocas / normal) con clases en <body>. Modo Calma y prefers-reduced-motion: aura
   quieta, sin partículas, órbitas ni rayos.
   · Aura del Vínculo  → llama viva en el color del compañero
   · Aura Legendaria   → haces de luz dorados + motas
   · Aura Boreal       → cortinas de aurora (nivel 25 del jugador)
   · Aura Dormilona    → bruma lila, setas y "z" flotando (volver tras unos días fuera)
   · Aura Cósmica      → nebulosa de colores, humo, estrellas en órbita y polvo estelar (Limit Break)
========================================= */

/* El "cuerpo" que flota contiene imagen y aura: la animación pasa de la imagen a su contenedor,
   así el aura sigue exactamente la misma trayectoria (mismo movimiento que antes) */
#avatar-usuario-campamento {
    position: relative;
    isolation: isolate;
    animation: flotarCompanero 4s ease-in-out infinite;
}

#avatar-usuario-campamento img,
.guarida-img-companero,
#img-companero-mision {
    position: relative;
    z-index: 1;
    animation: none;
}

.guarida-cuerpo {
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    isolation: isolate;
    animation: flotacionCompanero 3.5s ease-in-out infinite;
}

.aura-concentracion {
    animation: latidoZen 6s ease-in-out infinite;
    will-change: transform;
}

/* Contenedor del aura: misma caja que la imagen (mask-size: contain hace coincidir la silueta) */
.aura-organica {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    --aura-k: 1;        /* brillo: multiplica la opacidad de las capas */
    --aura-ext: 1;      /* amplitud: cuánto sobresale el halo del cuerpo */
    --tinte-aura: var(--color-aura, var(--color-tema-neon));
    --tinte-suave: color-mix(in srgb, var(--tinte-aura) 70%, #e8f0ff);
    --relleno-halo: var(--tinte-aura);
}

.aura-vinculo .aura-organica { display: block; }

body.aura-brillo-suave .aura-organica { --aura-k: 0.55; --aura-ext: 0.85; }
body.aura-brillo-vivo .aura-organica { --aura-k: 1.3; --aura-ext: 1.2; }

#avatar-usuario-campamento .aura-organica {
    left: 50%;
    right: auto;
    width: clamp(120px, 32vw, 160px);
    transform: translateX(-50%);
}

#zona-companero-mision .aura-organica {
    top: 50%;
    bottom: auto;
    height: clamp(64px, 20vh, 170px);
    max-height: 100%;
    transform: translateY(-50%);
}

.aura-capa {
    position: absolute;
    inset: 0;
    will-change: transform, opacity;
}

.aura-capa::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--tinte-aura);
    -webkit-mask: var(--img-aura) center / contain no-repeat;
    mask: var(--img-aura) center / contain no-repeat;
}

/* Halo amplio: bordea todo el cuerpo (también los laterales) con un desenfoque grande */
.aura-halo {
    filter: blur(12px);
    opacity: min(1, calc(0.8 * var(--aura-k)));
    transform: scale(calc(1 + 0.34 * var(--aura-ext)), calc(1 + 0.28 * var(--aura-ext)));
    animation: aura-halo-respira 8s ease-in-out infinite;
}

.aura-halo::before { background: var(--relleno-halo); }

@keyframes aura-halo-respira {
    0%, 100% { opacity: min(1, calc(0.8 * var(--aura-k))); }
    50% { opacity: min(1, calc(0.95 * var(--aura-k))); }
}

/* Contorno cercano: pegado a la silueta, más definido */
.aura-silueta {
    filter: blur(4px);
    opacity: min(1, calc(0.85 * var(--aura-k)));
    transform: scale(calc(1 + 0.12 * var(--aura-ext)));
    animation: aura-respira 7s ease-in-out infinite;
}

@keyframes aura-respira {
    0%, 100% { opacity: min(1, calc(0.85 * var(--aura-k))); transform: scale(calc(1 + 0.12 * var(--aura-ext))); }
    50% { opacity: min(1, calc(1 * var(--aura-k))); transform: scale(calc(1 + 0.16 * var(--aura-ext))); }
}

/* ---------- Aura del Vínculo · llama viva ---------- */
/* Copias de la silueta estiradas que se mecen a destiempo: lo que asoma por encima del compañero
   son las lenguas de la llama, con la punta difuminada. El estiramiento nace al 70 % de la altura
   y es más ancho que alto: la llama abraza los costados sin subir hasta la tarjeta de nivel */
.aura-borde {
    transform-origin: 50% 70%;
    filter: blur(5px);
}

.aura-borde::before {
    background: linear-gradient(to top, var(--tinte-aura) 40%, var(--tinte-suave));
    -webkit-mask: var(--img-aura) center / contain no-repeat,
        linear-gradient(to top, #000 45%, rgba(0, 0, 0, 0.25) 100%);
    -webkit-mask-composite: source-in;
    mask: var(--img-aura) center / contain no-repeat,
        linear-gradient(to top, #000 45%, rgba(0, 0, 0, 0.25) 100%);
    mask-composite: intersect;
}

.aura-borde-1 { animation: aura-llama-1 6.5s ease-in-out infinite; }
.aura-borde-2 { animation: aura-llama-2 8s ease-in-out infinite; }

@keyframes aura-llama-1 {
    0%, 100% { opacity: min(1, calc(0.6 * var(--aura-k))); transform: translateY(-1%) scale(1.22, 1.24) skewX(-4deg); }
    50% { opacity: min(1, calc(0.78 * var(--aura-k))); transform: translateY(-3%) scale(1.16, 1.34) skewX(4deg); }
}

@keyframes aura-llama-2 {
    0%, 100% { opacity: min(1, calc(0.5 * var(--aura-k))); transform: translateY(-2%) scale(1.3, 1.2) skewX(5deg); }
    50% { opacity: min(1, calc(0.68 * var(--aura-k))); transform: translateY(-4%) scale(1.24, 1.3) skewX(-5deg); }
}

/* Piezas que solo usan algunas auras */
.aura-rayos,
.aura-particula,
.aura-orbita,
.aura-setas {
    display: none;
}

/* Partículas: motas pequeñas que suben despacio y se apagan con suavidad (sin parpadeo) */
.aura-particula {
    position: absolute;
    bottom: 18%;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--tinte-suave);
    box-shadow: 0 0 6px var(--tinte-suave);
    opacity: 0;
    animation: aura-mota 9s ease-in-out infinite;
    will-change: transform, opacity;
}

.aura-organica .aura-particula-1 { left: 16%; animation-delay: 0s; }
.aura-organica .aura-particula-2 { left: 36%; animation-delay: -5.4s; width: 3px; height: 3px; }
.aura-organica .aura-particula-3 { left: 58%; animation-delay: -1.8s; }
.aura-organica .aura-particula-4 { left: 78%; animation-delay: -7.2s; width: 3px; height: 3px; }
.aura-organica .aura-particula-5 { left: 47%; animation-delay: -3.6s; }
.aura-organica .aura-particula-6 { left: 6%; animation-delay: -6.3s; width: 3px; height: 3px; bottom: 40%; }
.aura-organica .aura-particula-7 { left: 90%; animation-delay: -2.7s; bottom: 35%; }
.aura-organica .aura-particula-8 { left: 26%; animation-delay: -8.1s; width: 2px; height: 2px; bottom: 55%; }

@keyframes aura-mota {
    0% { opacity: 0; transform: translate(0, 0); }
    25% { opacity: min(1, calc(0.75 * var(--aura-k))); }
    100% { opacity: 0; transform: translate(6px, -58px); }
}

/* ---------- Aura Serena · resplandor base ---------- */
/* La de todos desde el primer día: solo el halo esmeralda de la app, muy tenue, con pulsos lentos */
.aura-serena .aura-organica { --tinte-aura: #10b981; --relleno-halo: #10b981; }

.aura-serena .aura-borde,
.aura-serena .aura-silueta {
    display: none;
}

.aura-serena .aura-halo {
    opacity: min(1, calc(0.3 * var(--aura-k)));
    animation: aura-serena-pulso 6s ease-in-out infinite;
}

@keyframes aura-serena-pulso {
    0%, 100% { opacity: min(1, calc(0.22 * var(--aura-k))); }
    50% { opacity: min(1, calc(0.5 * var(--aura-k))); }
}

/* ---------- Aura Legendaria · haces de luz ---------- */
.aura-dorada .aura-organica { --tinte-aura: #f2c85b; --tinte-suave: #fbe7a8; }

.aura-dorada .aura-borde { display: none; }

.aura-dorada .aura-rayos {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    width: 175%;
    aspect-ratio: 1;
    /* Centrado con márgenes (en % del ancho del aura = la mitad de los haces en ambos ejes), no con
       translate(-50%, -50%): el giro anima solo la rotación y no depende de un tamaño medido al empezar */
    margin: -87.5% 0 0 -87.5%;
    border-radius: 50%;
    background: repeating-conic-gradient(from 0deg,
        color-mix(in srgb, var(--tinte-suave) 60%, transparent) 0deg 3deg,
        transparent 6deg 24deg);
    -webkit-mask: radial-gradient(circle, #000 18%, transparent 62%);
    mask: radial-gradient(circle, #000 18%, transparent 62%);
    filter: blur(1.5px);
    opacity: min(1, calc(0.42 * var(--aura-k)));
    transform: rotate(0deg);
    animation: aura-rayos-giro 90s linear infinite;
    will-change: transform;
}

@keyframes aura-rayos-giro {
    to { transform: rotate(360deg); }
}

.aura-dorada .aura-particula-1,
.aura-dorada .aura-particula-3,
.aura-dorada .aura-particula-5,
.aura-dorada .aura-particula-7 {
    display: block;
}

/* ---------- Aura Boreal · cortinas de aurora ---------- */
.aura-boreal .aura-organica {
    --tinte-aura: #34d399;
    --tinte-suave: #a5f3fc;
    --relleno-halo: linear-gradient(100deg, #34d399, #22d3ee 50%, #a78bfa);
}

/* Cortinas: silueta estirada hacia arriba y rayada en franjas verticales que se mecen */
.aura-boreal .aura-borde { filter: blur(3px); }

.aura-boreal .aura-borde::before {
    background: linear-gradient(to top, #34d399, #22d3ee 55%, #a78bfa);
    -webkit-mask: var(--img-aura) center / contain no-repeat,
        repeating-linear-gradient(90deg, #000 0 5%, rgba(0, 0, 0, 0.2) 7% 10%);
    -webkit-mask-composite: source-in;
    mask: var(--img-aura) center / contain no-repeat,
        repeating-linear-gradient(90deg, #000 0 5%, rgba(0, 0, 0, 0.2) 7% 10%);
    mask-composite: intersect;
}

.aura-boreal .aura-borde-1 { animation: aura-cortina-1 9s ease-in-out infinite; }
.aura-boreal .aura-borde-2 { animation: aura-cortina-2 11s ease-in-out infinite; }

@keyframes aura-cortina-1 {
    0%, 100% { opacity: min(1, calc(0.5 * var(--aura-k))); transform: translateY(-2%) scale(1.28, 1.3) skewX(-7deg); }
    50% { opacity: min(1, calc(0.68 * var(--aura-k))); transform: translateY(-4%) scale(1.34, 1.38) skewX(7deg); }
}

@keyframes aura-cortina-2 {
    0%, 100% { opacity: min(1, calc(0.4 * var(--aura-k))); transform: translateY(-3%) scale(1.4, 1.26) skewX(8deg); }
    50% { opacity: min(1, calc(0.58 * var(--aura-k))); transform: translateY(-1%) scale(1.32, 1.34) skewX(-6deg); }
}

.aura-boreal .aura-particula-1,
.aura-boreal .aura-particula-2,
.aura-boreal .aura-particula-3,
.aura-boreal .aura-particula-4,
.aura-boreal .aura-particula-5 {
    display: block;
}

/* ---------- Aura Dormilona · bruma, setas y "z" ---------- */
.aura-dormilona .aura-organica { --tinte-aura: #b9a7e8; --tinte-suave: #f3e6c8; }

.aura-dormilona .aura-borde { display: none; }

/* Respiración de quien dormita: más lenta que en las demás */
.aura-dormilona .aura-halo { animation-duration: 10s; }
.aura-dormilona .aura-silueta { animation-duration: 10s; }

.aura-dormilona .aura-setas {
    display: block;
    position: absolute;
    inset: 0;
}

.aura-setas i {
    position: absolute;
    bottom: -3%;
    width: 13%;
    min-width: 9px;
    aspect-ratio: 1 / 1.1;
    transform-origin: 50% 100%;
    animation: aura-seta 7s ease-in-out infinite;
    will-change: transform;
}

.aura-setas i:nth-child(1) { left: -2%; }
.aura-setas i:nth-child(2) { left: 9%; width: 9%; min-width: 7px; animation-delay: -2.3s; }
.aura-setas i:nth-child(3) { right: -1%; width: 11%; animation-delay: -4.6s; }

/* Sombrerillo melocotón con lunares crema y pie crema: colores suaves, nada de rojo intenso */
.aura-setas i::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 58%;
    border-radius: 50% 50% 18% 18% / 80% 80% 20% 20%;
    background:
        radial-gradient(circle at 30% 45%, #fdf6e7 0 11%, transparent 13%),
        radial-gradient(circle at 68% 35%, #fdf6e7 0 9%, transparent 11%),
        #eaa7a0;
    box-shadow: inset 0 -2px 0 rgba(0, 0, 0, 0.12);
}

.aura-setas i::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 32%;
    width: 36%;
    height: 48%;
    border-radius: 35% 35% 30% 30%;
    background: #f3e6c8;
}

@keyframes aura-seta {
    0%, 100% { transform: rotate(-4deg); }
    50% { transform: rotate(4deg); }
}

/* Partículas de la Dormilona: letras "z" que suben en diagonal y se desvanecen */
.aura-dormilona .aura-particula-1,
.aura-dormilona .aura-particula-3,
.aura-dormilona .aura-particula-5 {
    display: block;
    width: auto;
    height: auto;
    background: none;
    box-shadow: none;
    bottom: 62%;
    left: 64%;
    color: #f3e6c8;
    font: 700 13px/1 'Atkinson Hyperlegible', sans-serif;
    text-shadow: 0 0 6px rgba(185, 167, 232, 0.8);
    animation: aura-zzz 10s ease-in-out infinite;
}

.aura-dormilona .aura-particula::before { content: 'z'; }
.aura-dormilona .aura-particula-3 { animation-delay: -3.3s; font-size: 10px; }
.aura-dormilona .aura-particula-5 { animation-delay: -6.6s; font-size: 16px; }

@keyframes aura-zzz {
    0% { opacity: 0; transform: translate(0, 0) rotate(-8deg); }
    25% { opacity: min(1, calc(0.85 * var(--aura-k))); }
    100% { opacity: 0; transform: translate(26px, -46px) rotate(10deg); }
}

/* ---------- Aura Cósmica · nebulosa, humo y estrellas en órbita ---------- */
.aura-cosmica .aura-organica {
    --tinte-aura: #9b6cf0;
    --tinte-suave: #c4b5fd;
    --relleno-halo: linear-gradient(135deg, #8b5cf6, #3b82f6 50%, #14b8a6);
}

.aura-cosmica .aura-silueta::before { background: linear-gradient(160deg, #c084fc, #818cf8 60%, #5eead4); }

.aura-cosmica .aura-borde { filter: blur(8px); opacity: 0; }

.aura-cosmica .aura-borde::before {
    background: linear-gradient(to top, #8b5cf6, #60a5fa 60%, #5eead4);
    -webkit-mask: var(--img-aura) center / contain no-repeat;
    mask: var(--img-aura) center / contain no-repeat;
}

/* Volutas: nacen en la silueta, suben y se deshacen; dos a contratiempo para que nunca se corte */
.aura-cosmica .aura-borde-1 { animation: aura-humo 9s ease-in-out infinite; }
.aura-cosmica .aura-borde-2 { animation: aura-humo 9s ease-in-out -4.5s infinite; }

@keyframes aura-humo {
    0% { opacity: 0; transform: translateY(2%) scale(1.06, 1.08); }
    35% { opacity: min(1, calc(0.65 * var(--aura-k))); }
    100% { opacity: 0; transform: translateY(-11%) scale(1.4, 1.3); }
}

.aura-cosmica .aura-particula { display: block; }

/* Anillo de estrellas en órbita: una elipse plana (scaleY) que gira muy despacio */
.aura-cosmica .aura-orbita {
    display: block;
    position: absolute;
    top: 52%;
    left: 50%;
    width: 150%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scaleY(0.3);
}

.aura-orbita-giro {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 1px solid color-mix(in srgb, #c4b5fd 22%, transparent);
    animation: aura-orbita 28s linear infinite;
    will-change: transform;
}

.aura-orbita-giro i {
    position: absolute;
    width: 6px;
    height: 6px;
    margin: -3px 0 0 -3px;
    border-radius: 50%;
    background: #e0e7ff;
    box-shadow: 0 0 8px #a5b4fc, 0 0 14px rgba(139, 92, 246, 0.6);
    opacity: min(1, calc(0.85 * var(--aura-k)));
}

.aura-orbita-giro i:nth-child(1) { top: 0; left: 50%; }
.aura-orbita-giro i:nth-child(2) { top: 75%; left: 93%; width: 4px; height: 4px; }
.aura-orbita-giro i:nth-child(3) { top: 75%; left: 7%; width: 5px; height: 5px; }

@keyframes aura-orbita {
    to { transform: rotate(360deg); }
}

/* ---------- Cantidad de partículas (Ajustes) ---------- */
body.aura-particulas-pocas .aura-particula-4,
body.aura-particulas-pocas .aura-particula-5,
body.aura-particulas-pocas .aura-particula-6,
body.aura-particulas-pocas .aura-particula-7,
body.aura-particulas-pocas .aura-particula-8,
body.aura-particulas-pocas .aura-orbita-giro i:nth-child(n + 2) {
    display: none !important;
}

body.aura-particulas-ninguna .aura-particula,
body.aura-particulas-ninguna .aura-orbita {
    display: none !important;
}

/* Pantalla de Misión: la misma aura que en el Campamento (órbita, partículas y rayos incluidos).
   El Modo Calma, "reducir movimiento" y los ajustes de brillo y partículas la calman igual que allí.
   El halo genérico de concentración se retira cuando hay aura, para no sumar un segundo brillo. */
#zona-companero-mision.aura-vinculo .aura-concentracion::after {
    display: none;
}

/* Modo Calma: aura visible y quieta; se retira todo lo que se mueve por sí solo */
body.movimiento-quieto .aura-rayos,
body.movimiento-quieto .aura-particula,
body.movimiento-quieto .aura-orbita {
    display: none !important;
}

body.movimiento-quieto .aura-capa,
body.movimiento-quieto .aura-setas i,
body.movimiento-quieto #avatar-usuario-campamento,
body.movimiento-quieto .guarida-cuerpo,
body.movimiento-quieto .aura-concentracion {
    animation: none !important;
}

body.movimiento-quieto .aura-cosmica .aura-borde-1 { opacity: 0.35; transform: translateY(-4%) scale(1.12, 1.16); }
body.movimiento-quieto .aura-cosmica .aura-borde-2 { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .aura-capa,
    .aura-setas i,
    #avatar-usuario-campamento,
    .guarida-cuerpo,
    .aura-concentracion {
        animation: none;
    }

    .aura-rayos,
    .aura-particula,
    .aura-orbita {
        display: none !important;
    }

    .aura-cosmica .aura-borde-1 { opacity: 0.35; transform: translateY(-4%) scale(1.12, 1.16); }
}

/* ---------- Ajustes > Compañeros: brillo y partículas del aura ---------- */

.guarida-desc-aura {
    margin: 4px 0 0;
    font-size: var(--letra-pequena);
    color: var(--texto-secundario);
}

/* VIVO-1 (maqueta AJ-3): la etiqueta arriba y los botones debajo. En la misma línea, «Vivo» (en negrita al
   pulsarlo) quedaba a 0 px del relleno de la tarjeta y en el móvil se salía. Si no caben, bajan de línea.
   Lectura tenía lo mismo («Amplio», «Grande», «Muy suave» a 0 px) */
#tarjeta-lectura .fila-ajuste-aura,
#tarjeta-aura-ajustes .fila-ajuste-aura {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    margin-top: 10px;
}
#tarjeta-lectura .selector-ajuste-aura,
#tarjeta-aura-ajustes .selector-ajuste-aura { flex-wrap: wrap; min-width: 0; max-width: 100%; }
/* 44 px de alto como mínimo: zona táctil cómoda también con poca precisión motora */
#tarjeta-aura-ajustes .btn-ajuste-aura { padding: 8px 12px; min-height: 44px; }
.fila-ajuste-aura {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px 12px;
    margin-top: 14px;
}

.etiqueta-ajuste-aura {
    font-size: var(--letra-pequena);
    color: var(--color-texto, var(--texto-principal));
}

.selector-ajuste-aura {
    display: flex;
    gap: 6px;
}

/* 44 px como el resto de botones (A11Y-1302): todos viven en Ajustes › Preferencias */
.btn-ajuste-aura {
    min-height: 44px;
    padding: 8px 14px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    background: rgba(255, 255, 255, 0.03);
    color: var(--texto-secundario);
    font-size: var(--letra-pequena);
    cursor: pointer;
}

.btn-ajuste-aura[aria-pressed="true"] {
    border-color: rgba(var(--color-tema-rgb), 0.6);
    background: rgba(var(--color-tema-rgb), 0.14);
    color: var(--color-tema);
    font-weight: 700;
}

.btn-ajuste-aura:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: 2px;
}

/* =========================================
   VOZ Y LECTURA (voces.js): ajustes, subtítulo de la voz, botón 🔊 de la misión y pausa guiada
========================================= */
#tarjeta-voz-lectura,
#tarjeta-sonido-avisos {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Sonido de los avisos (sonido-avisos.js): mismos controles que la voz, botones de 44 px */
#tarjeta-sonido-avisos .fila-ajuste-aura { margin-top: 0; }
#tarjeta-sonido-avisos .selector-ajuste-aura { flex-wrap: wrap; }
#tarjeta-sonido-avisos .btn-ajuste-aura { min-height: 44px; }

.subtitulo-voz-ajustes {
    margin: 0 0 4px;
    font-size: 1rem;
    color: var(--color-texto);
}

.opciones-voz {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--color-bordes);
    border-radius: 12px;
}

.momentos-voz {
    margin: 0;
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.momentos-voz legend {
    margin-bottom: 6px;
    font-size: var(--letra-pequena);
    color: var(--texto-secundario);
}

.casilla-voz {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 44px;
    color: var(--color-texto);
    cursor: pointer;
}

.casilla-voz input {
    flex-shrink: 0;
}

.etiqueta-volumen-voz {
    font-size: var(--letra-pequena);
    color: var(--texto-secundario);
}

.rango-volumen-voz {
    width: 100%;
    min-height: 44px;
    accent-color: var(--color-tema);
}

.btn-probar-voz,
.btn-pausa-guiada {
    min-height: 44px;
}

.btn-probar-voz[aria-pressed="true"],
.btn-leer-voz[aria-pressed="true"],
.btn-pausa-guiada[aria-pressed="true"] {
    border-color: var(--color-tema);
    color: var(--color-tema-claro);
}

/* Botón 🔊 de la misión: discreto, bajo el nombre de la misión */
.btn-leer-voz {
    display: block;
    margin: 0 auto 12px;
    min-height: 44px;
    padding: 8px 18px;
    border-radius: 999px;
    border: 1px solid var(--color-bordes);
    background: var(--fondo-paneles);
    color: var(--color-texto);
    font-size: var(--letra-pequena);
    cursor: pointer;
}

.btn-leer-voz:focus-visible,
.btn-pausa-guiada:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: 2px;
}

/* Texto completo de la pausa guiada dentro del Momento de transición */
.texto-pausa-guiada {
    margin: 12px 0;
    padding: 12px 14px;
    border-left: 3px solid var(--color-tema);
    background: rgba(var(--color-tema-rgb), 0.06);
    border-radius: 8px;
    text-align: left;
}

.texto-pausa-guiada h3 {
    margin: 0 0 6px;
    font-size: 1rem;
    color: var(--color-tema-claro);
}

.texto-pausa-guiada p {
    margin: 0;
    line-height: 1.6;
    color: var(--color-texto);
}

/* Subtítulo de lo que dice el compañero: abajo, sin tapar la barra de navegación */
.subtitulo-voz {
    position: fixed;
    left: 50%;
    bottom: calc(88px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 10050;
    display: flex;
    align-items: center;
    gap: 10px;
    width: min(92vw, 420px);
    padding: 10px 14px;
    border-radius: 14px;
    background: var(--fondo-paneles);
    border: 1px solid rgba(var(--color-tema-rgb), 0.45);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
    color: var(--color-texto);
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.subtitulo-voz.oculto {
    display: none;
}

.subtitulo-voz-cara {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.subtitulo-voz-texto {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

/* =========================================
   BETA 2.1 · BLOQUE 1: creador de misiones y Flujo Abierto
========================================= */
/* Título visible del primer campo del creador (antes solo había placeholder) */
.etiqueta-campo-creador {
    display: block;
    margin: 0 0 6px;
    font-size: var(--letra-pequena);
    color: var(--color-texto-secundario);
}

/* Casilla "∞ Sin límite" junto a la duración */
.opcion-sin-limite {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    font-size: var(--letra-pequena);
    color: var(--color-texto-secundario);
    cursor: pointer;
}

.opcion-sin-limite input {
    margin: 0;
}

#input-duracion-campamento:disabled {
    opacity: 0.45;
}

/* Micro-pasos del creador: una fila por paso que reparte el ancho. En móviles estrechos la
   píldora inline se encogía hasta dejar solo el botón de borrar visible */
#lista-subtareas-campamento {
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 6px;
    max-height: 9.5rem;
}

.subtarea-pildora,
.item-micro-paso {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    width: 100%;
    box-sizing: border-box;
}

.subtarea-pildora {
    border-radius: 12px;
}

.subtarea-pildora .texto-subtarea,
.item-micro-paso .input-subtarea-inline {
    flex: 1;
    min-width: 0;
    word-break: break-word;
}

/* Tap-to-edit: parece texto normal; al enfocarlo aparece una línea inferior sutil */
input.input-subtarea-inline {
    width: 100%;
    margin: 0;
    padding: 4px 0;
    font: inherit;
    font-size: var(--letra-pequena);
    color: inherit;
    background: transparent;
    border: none;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    outline: none;
    box-shadow: none;
    transition: border-color 0.2s ease;
}

input.input-subtarea-inline:focus {
    border-bottom-color: rgba(var(--color-tema-rgb), 0.6);
}

/* Quitar micro-paso: aspa fina en gris neutro, sin rojo ni saltos de escala */
.btn-quitar-micro-paso,
.item-micro-paso .btn-quitar-micro-paso {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    background: none;
    border: none;
    border-radius: 50%;
    color: var(--texto-secundario);
    opacity: 0.7;
    cursor: pointer;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.btn-quitar-micro-paso:hover,
.btn-quitar-micro-paso:focus-visible,
.item-micro-paso .btn-quitar-micro-paso:hover {
    opacity: 1;
    color: var(--texto-principal);
    background-color: rgba(var(--color-tema-rgb), 0.1);
    transform: none;
}

/* Misiones recicladas: cuántos micro-pasos se restaurarán con ella */
.reciclado-pasos {
    font-size: var(--letra-pequena);
    color: var(--color-texto-secundario);
}

/* Diario: avance parcial (misión abortada o reciclada con pasos hechos). Sin XP, tono neutro */
.estado-exito-expedicion.estado-parcial-expedicion {
    color: var(--color-texto-secundario);
}

/* Pequeños pasos: el aspa de quitar va en el color del tema (gana a la regla gris de arriba) y,
   en las filas a lo ancho, sin el margen negativo pensado para las píldoras */
.btn-quitar-paso.btn-quitar-micro-paso {
    margin: -6px -6px -6px 0;
    color: var(--color-tema);
    opacity: 1;
}

.btn-quitar-paso.btn-quitar-micro-paso:hover,
.btn-quitar-paso.btn-quitar-micro-paso:focus-visible {
    color: var(--color-tema);
    background-color: rgba(var(--color-tema-rgb), 0.15);
}

/* Diario: paso que quedó sin hacer (se guardó en el Banco). Tono apagado, sin rojo */
.item-subtarea-detalle-modal.subtarea-sin-hacer .texto-subtarea-modal,
.item-subtarea-detalle-modal.subtarea-sin-hacer .icono-subtarea-modal {
    color: var(--color-texto-secundario);
    opacity: 0.75;
}

.visualmente-oculto {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
}

/* El título de una decisión recibe el foco al abrirse (para no preseleccionar ninguna opción) */
.decision-titulo:focus { outline: none; }

/* ♻️ Para retomar: las recicladas viven en el Banco de Tareas; la bandeja del Campamento recuerda dónde */
#lista-recicladas .nota-recicladas-banco {
    grid-column: 1 / -1;
    list-style: none;
    font-size: var(--letra-pequena);
    color: var(--color-texto-secundario);
    padding: 2px 4px;
}

.badge-para-retomar {
    color: var(--color-tema);
    border-color: rgba(var(--color-tema-rgb), 0.3);
}

#input-duracion-tarea:disabled {
    opacity: 0.45;
}

/* =========================================
   DESBLOQUEO PROGRESIVO (js/desbloqueos-ui.js)
   Lo bloqueado no ocupa sitio; al desbloquearse aparece en su hueco de siempre.
   «Nuevo» es una píldora estática del color del tema (sin parpadeos ni animación).
========================================= */
.funcion-bloqueada {
    display: none !important;
}

#menu-lateral .lista-menu li.funcion-nueva .boton-menu::after {
    content: attr(data-nuevo);
    margin-left: auto;
    padding: 2px 10px;
    border-radius: 999px;
    background: var(--color-tema);
    color: var(--color-texto-sobre-tema);
    font-size: var(--letra-pequena);
    font-weight: 700;
    line-height: 1.4;
}

/* Punto suave en el ☰ mientras haya algo nuevo en el menú */
#btn-menu-hamburguesa.hay-novedades::after {
    content: '';
    position: absolute;
    top: 6px;
    right: 6px;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--color-tema);
    box-shadow: 0 0 0 2px rgba(22, 24, 34, 0.9);
}

/* --- Accesibilidad P-2: títulos de sección que pasaron de h3 a h2 para no saltar niveles.
   Se ven igual que antes: sin el centrado móvil genérico de .vista-app h2 */
.titulo-misiones-hoy,
.titulo-mapa-grupo h2 {
    text-align: left;
}

/* --- Accesibilidad P-3: «Tiempo con más contraste» (Ajustes > Preferencias). Por defecto el tiempo
   y el estado de la misión son tenues a propósito; con el ajuste pasan a casi blanco (≥ 7:1) --- */
body.tiempo-contraste .tiempo-discreto,
body.tiempo-contraste #vista-mision :is(.tiempo-palabras, .tiempo-quedan) {
    color: rgba(255, 255, 255, 0.92);
}

body.tiempo-contraste #estado-mision {
    color: rgba(255, 255, 255, 0.88);
}

/* Saltito del compañero (PNG) al tocarlo en el Campamento (refugio-guardian.js). Va en `translate`,
   no en `transform`, para sumarse a la flotación sin cortarla; el aura sube con él */
#avatar-usuario-campamento.companero-saltito {
    animation: flotarCompanero 4s ease-in-out infinite, saltitoCompanero 650ms ease-out;
}

@keyframes saltitoCompanero {
    0%, 100% { translate: 0 0; }
    40% { translate: 0 -12px; }
    70% { translate: 0 -3px; }
}

body.movimiento-quieto #avatar-usuario-campamento.companero-saltito { animation: none; }

@media (prefers-reduced-motion: reduce) {
    #avatar-usuario-campamento.companero-saltito { animation: none; }
}

/* ---------- Compañero 3D en el Campamento (js/companero-3d.js) ----------
   El lienzo ocupa su propia caja; el PNG se esconde solo cuando el modelo ya está dibujado.
   Sin la flotación del contenedor: el modelo ya respira con su animación idle y pisa el suelo
   (los pies quedan sobre la plataforma y el propio lienzo dibuja su sombra de contacto).
   El brillo del aura lo dibuja el propio lienzo (js/avatar-aura.js) con la silueta de cada fotograma:
   las capas recortadas con el PNG se esconden y solo quedan las piezas sueltas (haces, motas, órbita,
   setas), en la misma caja que el lienzo. */
#avatar-usuario-campamento .companero-3d {
    position: absolute;
    z-index: 1;
    width: clamp(170px, 48vw, 230px);
    aspect-ratio: 4 / 5;
    visibility: hidden; /* mientras carga: ya tiene tamaño, pero aún se ve el PNG */
}

#avatar-usuario-campamento.con-companero-3d .companero-3d {
    position: relative;
    visibility: visible;
}

/* Modelo de otra skin cargando: el de antes sigue a la vista hasta que este está listo */
#avatar-usuario-campamento.con-companero-3d .companero-3d.companero-3d-cargando {
    position: absolute;
    visibility: hidden;
}

#avatar-usuario-campamento.con-companero-3d {
    animation: none;
}

#avatar-usuario-campamento.con-companero-3d .aura-organica {
    left: 0;
    width: 100%;
    transform: none;
}

#avatar-usuario-campamento.con-companero-3d .aura-capa {
    display: none;
}

/* Recolor Clásico en 3D: fondo de dibujo animado antiguo (rayos de sol sepia, quietos y de poco contraste) */
.visor-companero-campamento.visor-clasico {
    background:
        repeating-conic-gradient(from 0deg at 50% 62%, rgba(255, 240, 220, 0.05) 0deg 10deg, transparent 10deg 20deg),
        radial-gradient(circle at 50% 55%, #6b5a4c 0%, #3a2f27 70%, #251e19 100%);
}

/* Los pies del modelo quedan a 4 % del borde de abajo del lienzo (avatar-player.js, opción suelo):
   la plataforma se centra ahí, debajo de ellos */
.visor-companero-campamento:has(.con-companero-3d) .plataforma-holografica {
    bottom: 38px;
}

#avatar-usuario-campamento.con-companero-3d img,
#avatar-usuario-campamento.con-companero-3d .recolor-cosmos {
    display: none;
}

/* Compañero 3D: las piezas sueltas del aura se colocan con la caja del cuerpo dentro del lienzo
   (--cuerpo-x0/x1/y0/y1, en % desde arriba a la izquierda, companero-3d.js). Sin esto quedaban
   repartidas por todo el lienzo, lejos de compañeros estrechos como el águila */
#avatar-usuario-campamento.con-companero-3d .aura-organica {
    --ancho-cuerpo: calc(var(--cuerpo-x1, 85%) - var(--cuerpo-x0, 15%));
    --alto-cuerpo: calc(var(--cuerpo-y1, 96%) - var(--cuerpo-y0, 16%));
    --centro-x: calc((var(--cuerpo-x0, 15%) + var(--cuerpo-x1, 85%)) / 2);
}

#avatar-usuario-campamento.con-companero-3d .aura-particula-1 { left: calc(var(--cuerpo-x0, 15%) + var(--ancho-cuerpo) * 0.08); }
#avatar-usuario-campamento.con-companero-3d .aura-particula-2 { left: calc(var(--cuerpo-x0, 15%) + var(--ancho-cuerpo) * 0.3); }
#avatar-usuario-campamento.con-companero-3d .aura-particula-3 { left: calc(var(--cuerpo-x0, 15%) + var(--ancho-cuerpo) * 0.58); }
#avatar-usuario-campamento.con-companero-3d .aura-particula-4 { left: calc(var(--cuerpo-x0, 15%) + var(--ancho-cuerpo) * 0.82); }
#avatar-usuario-campamento.con-companero-3d .aura-particula-5 { left: calc(var(--cuerpo-x0, 15%) + var(--ancho-cuerpo) * 0.46); }
#avatar-usuario-campamento.con-companero-3d .aura-particula-6 { left: calc(var(--cuerpo-x0, 15%) - var(--ancho-cuerpo) * 0.08); }
#avatar-usuario-campamento.con-companero-3d .aura-particula-7 { left: calc(var(--cuerpo-x1, 85%) + var(--ancho-cuerpo) * 0.04); }
#avatar-usuario-campamento.con-companero-3d .aura-particula-8 { left: calc(var(--cuerpo-x0, 15%) + var(--ancho-cuerpo) * 0.2); }

/* Dormilona: las «z» salen junto a la cabeza y las setas, a los pies */
#avatar-usuario-campamento.con-companero-3d.aura-dormilona .aura-particula-1,
#avatar-usuario-campamento.con-companero-3d.aura-dormilona .aura-particula-3,
#avatar-usuario-campamento.con-companero-3d.aura-dormilona .aura-particula-5 {
    left: calc(var(--cuerpo-x1, 85%) - var(--ancho-cuerpo) * 0.2);
    bottom: calc(100% - var(--cuerpo-y0, 16%) - var(--alto-cuerpo) * 0.12);
}

#avatar-usuario-campamento.con-companero-3d.aura-dormilona .aura-setas {
    inset: auto auto calc(100% - var(--cuerpo-y1, 96%) - 1%) calc(var(--cuerpo-x0, 15%) - var(--ancho-cuerpo) * 0.06);
    width: calc(var(--ancho-cuerpo) * 1.12);
    height: calc(var(--alto-cuerpo) * 0.2);
}

/* «z» más grandes y legibles junto a la cabeza */
#avatar-usuario-campamento.con-companero-3d.aura-dormilona .aura-particula { font-size: 19px; }
#avatar-usuario-campamento.con-companero-3d.aura-dormilona .aura-particula-3 { font-size: 15px; }
#avatar-usuario-campamento.con-companero-3d.aura-dormilona .aura-particula-5 { font-size: 23px; }

#avatar-usuario-campamento.con-companero-3d .aura-setas i { bottom: 0; width: 17%; }
#avatar-usuario-campamento.con-companero-3d .aura-setas i:nth-child(2) { width: 12%; left: 13%; }
#avatar-usuario-campamento.con-companero-3d .aura-setas i:nth-child(3) { width: 14%; }

/* Órbita de la Cósmica con compañero 3D: la dibuja el lienzo (avatar-aura.js) para que la mitad de atrás pase
   por detrás del cuerpo */
#avatar-usuario-campamento.con-companero-3d.aura-cosmica .aura-orbita { display: none; }

#avatar-usuario-campamento.con-companero-3d.aura-dorada .aura-rayos {
    top: calc(var(--cuerpo-y0, 16%) + var(--alto-cuerpo) * 0.45);
    left: var(--centro-x);
    width: calc(var(--alto-cuerpo) * 2.3);
    margin: calc(var(--alto-cuerpo) * -1.15) 0 0 calc(var(--alto-cuerpo) * -1.15);
    /* Haces más cálidos y anchos que nacen del brillo del cuerpo (revisión con el evaluador de diseño) */
    background: repeating-conic-gradient(from 0deg,
        color-mix(in srgb, #f7d46e 70%, transparent) 0deg 5deg,
        transparent 8deg 24deg);
    -webkit-mask: radial-gradient(circle, #000 16%, transparent 66%);
    mask: radial-gradient(circle, #000 16%, transparent 66%);
    /* Haces difuminados, sin canto duro (revisión ECC) */
    filter: blur(4px);
    opacity: min(1, calc(0.55 * var(--aura-k)));
}

/* Foco de teclado visible en todo lo que se puede pulsar (DIS-41). Muchos botones quitan el contorno
   («Nueva misión», el micro, los filtros del Diario): esta hoja va de las últimas y :where() no suma
   peso, así que gana a esos `outline: none` y deja mandar a los estilos de foco propios de cada pieza.
   Solo sale con teclado o mando (:focus-visible), nunca al tocar con el dedo. */
:where(a, button, summary, select, [role="button"], [tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 3px solid var(--color-tema);
    outline-offset: 3px;
}

/* Refugio («Gestión del compañero»): el mismo compañero 3D en pequeño, con su aura (companero-3d.js).
   Hasta que carga se ve la cara; después la cara y las capas del aura recortadas con ella se esconden */
.guarida-escenario .companero-3d {
    position: absolute;
    /* TV-4: algo más pequeño que el escenario, de pie dentro de la tienda (con el Refugio vivo, el escenario entero) */
    inset: 40px 10px 4px;
    z-index: 2;
    visibility: hidden;
}

.guarida-escenario.con-companero-3d .companero-3d {
    visibility: visible;
}

/* Refugio vivo: el lienzo ocupa todo el escenario (la cámara deja sitio para pasear y para la tienda al fondo) */
.guarida-escenario.refugio-vivo .companero-3d {
    inset: 0;
}

.guarida-escenario.con-companero-3d .guarida-img-companero,
.guarida-escenario.con-companero-3d .recolor-cosmos,
.guarida-escenario.con-companero-3d .aura-organica {
    visibility: hidden;
}

.guarida-escenario.con-companero-3d .plataforma-holografica {
    bottom: 6px;
}