/* =========================================
   NAVEGACIÓN Y CABECERA (diseño D5, maqueta final del 22 oct)
   - Barra de abajo en móvil y en vertical: Hoy, Planificar, Diario, Logros y Ajustes. Sustituye al ☰
     (en escritorio horizontal sigue el menú lateral fijo, que ya está siempre a la vista).
   - Cabecera de cada pantalla: una placa de cristal esmerilado a lo ancho, en una línea, con el título
     en el color del tema (--color-titulo) y solo el botón de ayuda a su derecha.
   Va la última: sus selectores llevan html body para ganar a las placas antiguas (base.css y otras).
========================================= */

:root {
    --alto-barra-nav: 0px;
}

/* --- Barra de abajo --- */
.barra-navegacion {
    display: none;
}

@media (max-width: 899px), (orientation: portrait) {
    :root {
        --alto-barra-nav: calc(66px + env(safe-area-inset-bottom, 0px));
    }

    html body #btn-menu-hamburguesa {
        display: none;
    }

    .barra-navegacion {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 9998; /* por debajo de hojas, modales y avisos */
        display: flex;
        justify-content: space-around;
        align-items: stretch;
        gap: 2px;
        height: var(--alto-barra-nav);
        padding: 0 6px env(safe-area-inset-bottom, 0px);
        box-sizing: border-box;
        background: var(--fondo-paneles);
        border-top: 1px solid var(--color-bordes);
        box-shadow: 0 -6px 18px rgba(0, 0, 0, 0.28);
    }

    /* Hueco al final del contenido para que la barra no tape lo último de cada pantalla */
    #app-container::after {
        content: '';
        display: block;
        height: var(--alto-barra-nav);
    }

    /* Lo que flota abajo sube por encima de la barra */
    html body .toast-deshacer {
        bottom: calc(20px + var(--alto-barra-nav));
    }

    html body .subtitulo-voz {
        bottom: calc(88px + var(--alto-barra-nav));
    }

    html body .contenedor-avisos-logro {
        bottom: calc(24px + var(--alto-barra-nav));
    }

    /* Con el aviso «Deshacer» a la vista, los logros justo encima de él (companero-y-logros.css) */
    html body.con-toast-deshacer .contenedor-avisos-logro {
        bottom: calc(20px + var(--alto-barra-nav) + var(--alto-toast-deshacer, 72px) + 12px);
    }

    html body .barra-que-es-esto {
        bottom: calc(12px + var(--alto-barra-nav));
    }

    /* Pestañas del Planificador fijadas arriba: ya no hay ☰ al que dejar hueco */
    html body .interruptor-vistas-planificador.fijada {
        padding-left: 12px;
    }
}

.boton-barra {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 6px 2px;
    background: none;
    border: none;
    border-radius: var(--radio-pequeno);
    color: var(--color-texto-secundario);
    font: inherit;
    font-size: var(--letra-pequena);
    letter-spacing: 0;
    word-spacing: 0;
    line-height: 1.1;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    transition: color var(--velocidad-rapida) ease;
}

/* Con letra grande la etiqueta no cabe en su botón (DIS-42): se parte con guion («Plani-ficar») en dos líneas
   en vez de salirse. Con letra normal cabe y sigue en una */
.boton-barra .etiqueta-barra {
    max-width: 100%;
    text-align: center;
    overflow-wrap: anywhere;
    hyphens: auto;
}

.icono-barra,
.btn-buscar-cabecera svg {
    width: 24px;
    height: 24px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
}

/* Iconos propios (D4, js/iconos.js): sustituyen a los emoji. Mismo trazo que la barra de abajo,
   del color del texto y del tamaño de la letra, así crecen con «Lectura» y siguen al tema */
.ico {
    display: inline-block;
    width: 1.2em;
    height: 1.2em;
    vertical-align: -0.24em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
    flex-shrink: 0;
    overflow: visible;
}

/* Separación con el texto que lo sigue (los botones de solo icono no la llevan) */
[data-ico]:not([data-ico-solo]) > .ico[data-ico-auto] {
    margin-inline-end: 0.4em;
}

[data-ico-solo] > .ico[data-ico-auto] {
    vertical-align: middle;
}

/* Datos con su icono delante (hora, duración, lugar…): el icono no se separa de su dato */
.dato-con-icono {
    white-space: nowrap;
}

.dato-con-icono .ico {
    margin-inline-end: 0.3em;
}

/* Iconos tenues delante de un dato (fecha, premio y puntos del Libro de Logros): color del texto, más suave */
.ico.ico-tenue {
    opacity: 0.75;
    margin-inline-end: 0.35em;
}

/* Icono del halo de temporada (Ajustes › Anillo del tiempo): mismo tono tenue */
.btn-anillo-temporada > .ico {
    opacity: 0.75;
}

/* Iconos que el Diario pinta delante de su texto (fecha, horas, objetivos) */
:is(.titulo-detalle-dia, .chip-tiempo-modal, .badge-subtareas, .badge-tiempo-micro) > .ico {
    margin-inline-end: 0.35em;
}

/* Baldosas de color dentro del texto (franjas del Diario, día de Refugio): dibujo del sprite b-… */
.ico-baldosa {
    display: inline-block;
    width: 1.6em;
    height: 1.6em;
    vertical-align: middle;
    flex-shrink: 0;
}

/* Icono de cada título (Mi perfil › Título activo): medallón redondo = rango, baldosa = logro,
   cara = Vínculo. Pequeño (34 px) para que quepa en la fila del desplegable */
.baldosa.baldosa-titulo {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    border-width: 1.5px;
    --sombra-baldosa: 0 3px 0 color-mix(in srgb, var(--c) 45%, #1b1c1f);
}

.baldosa.baldosa-titulo.medallon {
    border-radius: 50%;
    outline: 2px solid color-mix(in srgb, var(--c) 70%, #fff 10%);
    outline-offset: 2px;
}

.baldosa.baldosa-titulo svg {
    width: 24px;
    height: 24px;
}

:is(.opcion-vestidor, .desplegable-titulos-texto):has(> .baldosa-titulo) {
    display: inline-flex;
    align-items: center;
    gap: 12px;
}

/* Casilla propia (D4): la misma en las 12 casillas de la app. Sigue siendo el <input> de verdad
   (teclado, lectores de pantalla y «checked» intactos); solo cambia su aspecto. Vacía: borde gris
   cálido. Marcada: color del tema con la marca oscura. Sin animación */
input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    box-sizing: border-box;
    width: 24px;
    height: 24px;
    min-width: 24px;
    margin: 0;
    border: 2px solid #7d7a74;
    border-radius: 7px;
    background: transparent;
    cursor: pointer;
    flex-shrink: 0;
    vertical-align: middle;
    transition: none;
}

input[type="checkbox"]:checked {
    border-color: var(--color-tema);
    background: var(--color-tema) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5.5 12.5l4.2 4.2L18.5 7.8' fill='none' stroke='%2316211d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px 18px no-repeat;
}

input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: 2px;
}

input[type="checkbox"]:disabled {
    opacity: 0.5;
    cursor: default;
}

/* Objetivo hecho: texto en gris con el tachado de 2,5 px en el color del tema */
.subtarea-etiqueta input[type="checkbox"]:checked + .subtarea-texto,
.subtarea-completada .subtarea-texto {
    color: var(--color-texto-secundario);
    text-decoration: line-through;
    text-decoration-color: var(--color-tema);
    text-decoration-thickness: 2.5px;
}

.boton-barra.activo {
    color: var(--color-tema);
    font-weight: 700;
}

.boton-barra:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: -2px;
}

/* Recién desbloqueado: un punto suave sobre el icono (el «Nuevo» lo lee el lector de pantalla) */
/* Falta copia de seguridad (DIS-61): el mismo punto suave en Ajustes, sin aviso flotante */
.boton-barra.aviso-copia::after,
.boton-barra.funcion-nueva::after {
    content: '';
    position: absolute;
    top: 8px;
    left: calc(50% + 9px);
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-tema);
}

body.modo-enfoque-activo .barra-navegacion,
body.modo-onboarding .barra-navegacion {
    display: none;
}

/* --- Cabecera: placa de cristal a lo ancho --- */
html body #app-container .cabecera-vista {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin: 0 0 1.25rem;
    padding: 0;
    box-sizing: border-box;
}

html body #app-container .cabecera-vista > h1,
html body #app-container #vista-campamento .cabecera-vista > h1.imagotipo {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    margin: 0;
    padding: 10px 18px;
    box-sizing: border-box;
    background: linear-gradient(135deg,
            color-mix(in srgb, var(--color-tema) 12%, var(--fondo-paneles)),
            var(--fondo-paneles-2));
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: var(--radio-medio);
    box-shadow: var(--sombra-media);
    color: var(--color-titulo);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
    font-size: var(--letra-grande);
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: 0.02em;
    text-transform: none;
    text-align: left;
    /* El título salta de línea en vez de cortarse en «…» (DIS-43) */
    overflow-wrap: break-word;
    hyphens: auto;
}

/* Icono de línea de cada pantalla, pintado con el color del título (sigue al tema) */
html body #app-container .cabecera-vista > h1:not(.imagotipo)::before {
    content: '';
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background: currentColor;
    -webkit-mask: var(--icono-cabecera) center / contain no-repeat;
    mask: var(--icono-cabecera) center / contain no-repeat;
}

#titulo-planificacion {
    --icono-cabecera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='4' y='5.5' width='16' height='14.5' rx='2.5'/%3E%3Cpath d='M4 10.5h16M9 3.5v4M15 3.5v4'/%3E%3C/svg%3E");
}

#titulo-completadas {
    --icono-cabecera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8.5'/%3E%3Cpath d='m15.5 8.5-2 5-5 2 2-5z'/%3E%3C/svg%3E");
}

#titulo-logros {
    --icono-cabecera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 3.5h11v14H7a2 2 0 0 0-2 2v-14a2 2 0 0 1 2-2z'/%3E%3Cpath d='M5 19.5a2 2 0 0 0 2 1h11v-3'/%3E%3C/svg%3E");
}

#titulo-ajustes {
    --icono-cabecera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.2'/%3E%3Cpath d='M12 3v2.4M12 18.6V21M3 12h2.4M18.6 12H21M5.6 5.6l1.7 1.7M16.7 16.7l1.7 1.7M5.6 18.4l1.7-1.7M16.7 7.3l1.7-1.7'/%3E%3C/svg%3E");
}

#titulo-buscador {
    --icono-cabecera: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");
}

/* Campamento: la tienda del Refugio y «Céntrate» dentro de la misma placa */
html body #app-container #vista-campamento .cabecera-vista > h1.imagotipo {
    justify-content: flex-start;
    gap: 10px;
}

html body #app-container #vista-campamento .cabecera-vista h1.imagotipo .imagotipo-icono {
    width: 34px;
    height: 34px;
    margin: 0;
    filter: none;
}

html body #app-container #vista-campamento .cabecera-vista h1.imagotipo .imagotipo-texto {
    /* «Céntrate» siempre en una línea: con letra grande el h1 lo partía con guion («Cén-trate») */
    white-space: nowrap;
    hyphens: manual;
    font-size: min(1em, 6.4vw);
    display: inline;
    min-height: 0;
    padding: 0;
    background: none;
    border: none;
    box-shadow: none;
    border-radius: 0;
    text-shadow: inherit;
    font: inherit;
    color: inherit;
    letter-spacing: inherit;
    text-transform: none;
}

/* Botones a la derecha de la placa (ayuda y, en el Campamento, la lupa): cuadrados de cristal */
html body #app-container .cabecera-vista > .btn-ayuda-contextual,
html body #app-container .cabecera-vista > .btn-buscar-cabecera {
    position: static;
    transform: none;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    margin: 0;
    padding: 0;
    border-radius: var(--radio-medio);
    background: var(--fondo-paneles-2);
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: var(--sombra-suave);
    color: var(--color-texto);
}

html body #app-container .cabecera-vista > .btn-ayuda-contextual[aria-pressed="true"] {
    color: var(--color-tema);
    border-color: var(--color-tema);
}

.btn-buscar-cabecera,
.btn-calma-cabecera {
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

/* En escritorio horizontal Buscar sigue en el menú lateral, a la vista */
@media (min-width: 900px) and (orientation: landscape) {
    html body #app-container .cabecera-vista > .btn-buscar-cabecera {
        display: none;
    }
}

/* Lo bloqueado por el desbloqueo progresivo no se ve, aunque las reglas de arriba digan display */
html body #app-container .cabecera-vista > .btn-buscar-cabecera.funcion-bloqueada,
.boton-barra.funcion-bloqueada {
    display: none;
}

/* =========================================
   CAMPAMENTO, PROPUESTA A (D5)
   Nivel en una línea arriba, compañero grande con su luz detrás (sin marco) y 2 misiones a la vista
========================================= */
html body #vista-campamento .panel-estadisticas {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: 12px;
    padding: 14px 18px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: var(--radio-medio);
    box-shadow: var(--sombra-suave);
}

html body #vista-campamento .panel-estadisticas #nivel-display {
    margin: 0 0 8px;
    font-size: var(--letra-media);
}

html body #vista-campamento .panel-estadisticas .titulo-jugador-campamento {
    margin: 0 0 8px;
    text-align: right;
    overflow-wrap: break-word;
}

html body #vista-campamento .panel-estadisticas > :not(#nivel-display):not(.titulo-jugador-campamento) {
    grid-column: 1 / -1;
}

/* Compañero: sin caja ni borde de puntos; solo su luz suave detrás */
html body #vista-campamento .marco-visor-companero {
    width: min(340px, 100%);
}

html body #vista-campamento .visor-companero-campamento {
    background: radial-gradient(circle at 50% 55%, rgba(var(--color-tema-rgb), 0.16) 0%, transparent 62%);
    border: none;
    box-shadow: none;
    padding-top: 28px;
}

html body #vista-campamento .visor-companero-campamento:hover,
html body #vista-campamento .visor-companero-campamento:focus-visible {
    border: none;
    box-shadow: none;
}

/* Misiones de hoy: las que esperan quedan tras «N más esperando» */
#lista-misiones-hoy > .mision-en-espera {
    display: none;
}

.btn-misiones-en-espera {
    min-height: 44px;
    padding: 8px 4px;
    background: none;
    border: none;
    color: var(--color-texto-secundario);
    font: inherit;
    font-size: var(--letra-pequena);
    text-decoration: underline;
    text-underline-offset: 4px;
    cursor: pointer;
}

.btn-misiones-en-espera:hover,
.btn-misiones-en-espera:focus-visible {
    color: var(--color-tema);
}

/* Batería ya elegida: una línea «Batería: [Justa] · Cambiar» (el panel entero vuelve con «Cambiar») */
.etiqueta-energia-compacta,
.btn-cambiar-energia {
    display: none;
}

html body #panel-energia-diaria.energia-compacta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 16px 4px;
    padding: 0 4px;
    background: none;
    border: none;
    text-align: left;
}

#panel-energia-diaria.energia-compacta .titulo-energia,
#panel-energia-diaria.energia-compacta .por-que,
#panel-energia-diaria.energia-compacta .btn-modo-refugio,
#panel-energia-diaria.energia-compacta .btn-energia:not(.activo) {
    display: none;
}

#panel-energia-diaria.energia-compacta .etiqueta-energia-compacta {
    display: inline;
    color: var(--color-texto-secundario);
    font-size: var(--letra-pequena);
}

/* La caja no encoge por debajo del botón activo: si no, con letra grande la pill se sale y tapa «Batería:» y
   «Cambiar». Si la fila no cabe, «Cambiar» baja a otra línea */
#panel-energia-diaria.energia-compacta .botones-energia {
    flex: 0 0 auto;
    max-width: 100%;
}

#panel-energia-diaria.energia-compacta .btn-energia.activo {
    flex: 0 0 auto;
    min-width: 0;
    min-height: 44px;
    border-radius: 999px;
    padding: 4px 16px;
}

#panel-energia-diaria.energia-compacta .btn-cambiar-energia {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    min-height: 44px;
    padding: 0 6px;
    background: none;
    border: none;
    color: var(--color-tema);
    font: inherit;
    font-size: var(--letra-pequena);
    cursor: pointer;
}

/* --- Compañero y Vínculo (Campamento v4, 24-oct): el compañero sin su etiqueta de nombre (lo dice el Vínculo)
   y debajo la caja del Vínculo en tres líneas cortas (caja A, elegida por Sergio): «[cara] Axiel está contigo»,
   «título · Vínculo 3» y «barra · VP». Borde y barra en el color de su skin o, sin skin, en el de cada
   compañero (suavizado, se lee bien sobre grafito). Hasta el Vínculo (2.ª misión) sigue la etiqueta del nombre --- */
html body #vista-campamento #zona-companero-campamento {
    margin-top: 6px;
}

html body #vista-campamento .visor-companero-campamento {
    padding: 4px 12px 6px;
}

html body #vista-campamento .visor-companero-campamento .plataforma-holografica {
    bottom: 4px;
}

#zona-companero-campamento:has(#panel-vinculo:not(.funcion-bloqueada)) .nombre-visor-companero,
#vista-campamento #avatar-gecko {
    display: none;
}

#panel-vinculo {
    --color-vinculo: var(--color-tema-claro);
}
#panel-vinculo[data-companero="ajolote"] { --color-vinculo: #E995B8; }
#panel-vinculo[data-companero="slime"] { --color-vinculo: #6FBDEB; }
#panel-vinculo[data-companero="tigre"] { --color-vinculo: #E8A066; }
#panel-vinculo[data-companero="capibara"] { --color-vinculo: #D9AA7E; }
#panel-vinculo[data-companero="aguila"] { --color-vinculo: #DDC25A; }
#panel-vinculo[data-companero="panda"] { --color-vinculo: #E3957F; }
#panel-vinculo[data-companero="lobo"] { --color-vinculo: #959CEB; }
#panel-vinculo[data-companero="medusa"] { --color-vinculo: #74D3C6; }
#panel-vinculo[data-companero="conejo"] { --color-vinculo: #BBA0EA; }
#panel-vinculo[data-companero="dragon"] { --color-vinculo: #E6C65F; }

html body #vista-campamento #panel-vinculo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
        "presencia presencia"
        "titulo nivel"
        "barra barra"
        "vp vp";
    align-items: center;
    gap: 4px 14px;
    width: min(370px, 100%);
    margin: 2px auto 10px;
    padding: 10px 14px;
    text-align: left;
    border-radius: 14px;
    background: color-mix(in srgb, var(--color-vinculo) 6%, transparent);
    border: 1px solid color-mix(in srgb, var(--color-vinculo) 60%, transparent);
    box-shadow: 0 0 12px color-mix(in srgb, var(--color-vinculo) 22%, transparent);
}

#panel-vinculo .vinculo-cabecera {
    display: contents;
}

#panel-vinculo .vinculo-presencia {
    grid-area: presencia;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    margin: 0;
    color: var(--color-texto-secundario);
    font-size: var(--letra-media);
}

#panel-vinculo .vinculo-presencia strong {
    color: var(--color-texto);
    font-weight: 700;
}

#panel-vinculo .vinculo-presencia .cara-companero {
    flex: 0 0 auto;
    width: 26px;
    height: 26px;
    margin: 0;
}

/* El título se lee entero: si no cabe salta de línea (con «…» salía «Gu…» en móviles con letra grande) */
#panel-vinculo .vinculo-titulo {
    grid-area: titulo;
    min-width: 0;
    overflow-wrap: anywhere;
    font-weight: 600;
}

#panel-vinculo .vinculo-titulo:not(.titulo-epico) {
    color: var(--color-vinculo);
}

#panel-vinculo .vinculo-nivel {
    grid-area: nivel;
    justify-self: end;
    white-space: nowrap;
    color: var(--color-vinculo);
    font-weight: 700;
}

#panel-vinculo .barra-vinculo {
    grid-area: barra;
    width: auto;
    height: 6px;
    margin: 0;
    background: rgba(255, 255, 255, 0.08);
    box-shadow: none;
}

#panel-vinculo .vinculo-progreso {
    background: var(--color-vinculo);
    box-shadow: none;
}

#panel-vinculo .vinculo-texto {
    grid-area: vp;
    justify-self: end;
    white-space: nowrap;
}

/* Sin título todavía: el nivel ocupa su línea entero */
#panel-vinculo:has(.vinculo-titulo:empty) .vinculo-nivel {
    grid-column: 1 / -1;
    justify-self: start;
}

/* Al subir de nivel solo brilla un momento la barra (la caja no crece ni se mueve) */
html body #vista-campamento #panel-vinculo.vinculo-subida {
    animation: none;
}

html body #vista-campamento #panel-vinculo.vinculo-subida .barra-vinculo {
    animation: vinculo-subida-barra 1.6s ease;
}

@keyframes vinculo-subida-barra {
    0%, 100% { box-shadow: none; }
    30% { box-shadow: 0 0 10px var(--color-vinculo); }
}

body.movimiento-quieto #panel-vinculo.vinculo-subida .barra-vinculo {
    animation: none;
}

/* --- Misiones de hoy (terminado 24-oct): tarjetas sueltas sobre el fondo, sin el panel alrededor. Un solo
   botón ▶ para empezar; el resto de la tarjeta se toca para editar. La primera, resaltada. Encima, la
   cabecera «Misiones de hoy · 4» con el micro y «+ Nueva»; debajo, «N más esperando» --- */
html body #vista-campamento .seccion-central {
    margin-top: 4px;
    padding: 0;
    background: none;
    border: none;
}

html body #vista-campamento #contenedor-misiones-hoy {
    margin: 4px 0 18px !important;
}

#lista-misiones-hoy {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.tarjeta-mision-hoy.item-rutina {
    padding: 0 12px 0 0;
    gap: 8px;
}

.tarjeta-mision-hoy.item-rutina:hover {
    transform: none;
}

.btn-editar-tarjeta-mision {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 64px;
    padding: 10px 4px 10px 16px;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.btn-editar-tarjeta-mision .item-rutina-info {
    gap: 2px;
}

.titulo-tarjeta-mision {
    color: var(--color-texto);
    font-size: var(--letra-media);
    font-weight: 600;
    overflow-wrap: anywhere;
}

.detalle-tarjeta-mision {
    color: var(--color-texto-secundario);
    font-size: var(--letra-pequena);
}

.btn-empezar-mision.btn-lanzar-rutina {
    flex: 0 0 auto;
    justify-content: center;
    width: 56px;
    height: 48px;
    padding: 0;
    border-radius: 12px;
}

.btn-empezar-mision svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linejoin: round;
}

/* La que toca: borde del tema y ▶ grande y lleno */
.tarjeta-mision-hoy.mision-de-hoy-primera {
    border-color: rgba(var(--color-tema-rgb), 0.55);
}

.mision-de-hoy-primera .btn-editar-tarjeta-mision .titulo-tarjeta-mision {
    font-weight: 700;
}

.mision-de-hoy-primera .btn-empezar-mision.btn-lanzar-rutina {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    background: var(--color-tema);
    color: var(--fondo-paneles);
    border-color: var(--color-tema);
}

/* Cabecera de la lista: título y contador a la izquierda; dictar y «+ Nueva» a la derecha */
.cabecera-misiones-hoy {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    margin: 6px 0 8px;
}

html body #vista-campamento .titulo-misiones-hoy {
    margin: 0;
    color: var(--color-tema);
    font-size: var(--letra-media);
    font-weight: 700;
}

.contador-cabecera-campamento {
    margin-right: auto;
    padding-left: 6px;
    color: var(--color-texto-secundario);
    font-size: var(--letra-pequena);
    font-weight: 400;
}

.btn-accion-misiones {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-width: 44px;
    min-height: 44px;
    padding: 0 6px;
    background: none;
    border: none;
    border-radius: 999px;
    color: var(--color-tema);
    font: inherit;
    font-size: var(--letra-pequena);
    font-weight: 600;
    cursor: pointer;
}

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

.btn-accion-mic {
    color: var(--color-texto-secundario);
}

.btn-accion-nueva {
    padding: 0 14px;
    border: 1px solid rgba(var(--color-tema-rgb), 0.5);
}

.hueco-misiones-en-espera:empty {
    display: none;
}

.hueco-misiones-en-espera {
    margin-top: 6px;
}

/* Móvil muy estrecho (320 px): «+ Nueva» se queda en el + (su nombre lo sigue leyendo el lector de pantalla)
   para que la cabecera quepa en una línea, y el título del Vínculo salta de línea en vez de cortarse */
@media (max-width: 360px) {
    #texto-fab-add {
        display: none;
    }

    .btn-accion-nueva {
        padding: 0 12px;
    }

    #panel-vinculo .vinculo-titulo {
        white-space: normal;
        overflow-wrap: anywhere;
    }
}

/* Día sin misiones: mensaje tranquilo en un recuadro discontinuo (no es un error ni una tarea pendiente) */
#lista-misiones-hoy > .vacio-misiones-hoy {
    padding: 14px 16px;
    border: 1px dashed rgba(var(--color-tema-rgb), 0.35);
    border-radius: 12px;
    color: var(--color-texto-secundario);
    font-size: var(--letra-pequena);
    line-height: 1.5;
    list-style: none;
}

/* Rutinas fijas: una línea que se pliega (icono, nombre, cuántas y flecha) y las mismas tarjetas con ▶ */
html body #vista-campamento #acordeon-rutinas {
    margin-top: 6px;
    padding: 0;
    border-bottom: none;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

#acordeon-rutinas > summary {
    justify-content: flex-start;
    gap: 0;
    min-height: 48px;
}

#acordeon-rutinas > summary .titulo-summary {
    flex-grow: 0;
    font-size: var(--letra-media);
}

.flecha-acordeon {
    width: 10px;
    height: 10px;
    margin: 0 6px 4px 0;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

#acordeon-rutinas[open] > summary .flecha-acordeon {
    margin-bottom: -4px;
    transform: rotate(-135deg);
}

#lista-rutinas-campamento {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

html body #vista-campamento .btn-nueva-rutina {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 44px;
    margin-top: 6px;
    padding: 0 6px;
    background: none;
    border: none;
    color: var(--color-tema);
    font: inherit;
    font-size: var(--letra-pequena);
    font-weight: 600;
    cursor: pointer;
}

/* Modo Refugio: las listas descansan, pero crear y dictar siguen a mano en la cabecera de la lista */
body.modo-refugio #vista-campamento .seccion-central {
    display: block;
}

body.modo-refugio #vista-campamento .seccion-central > :not(#contenedor-misiones-hoy),
body.modo-refugio #vista-campamento #contenedor-misiones-hoy > :not(.cabecera-misiones-hoy),
body.modo-refugio #vista-campamento .contador-cabecera-campamento {
    display: none;
}

body.modo-refugio #vista-campamento .titulo-misiones-hoy {
    margin-right: auto;
}

/* --- Logo de la cabecera: el brillo «respira» muy despacio (6 s, suave, sin destellos; aprobado por Sergio
   24-oct). En Modo Calma o con movimiento reducido se queda quieto a media luz --- */
@keyframes respira-logo {
    0%, 100% { filter: drop-shadow(0 0 1px rgba(var(--color-tema-neon-rgb), 0.25)); }
    50% { filter: drop-shadow(0 0 5px rgba(var(--color-tema-neon-rgb), 0.55)) drop-shadow(0 0 12px rgba(var(--color-tema-neon-rgb), 0.28)); }
}

@keyframes respira-logo-texto {
    0%, 100% { text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
    50% { text-shadow: 0 0 10px rgba(var(--color-tema-neon-rgb), 0.35), 0 1px 2px rgba(0, 0, 0, 0.35); }
}

html body #app-container #vista-campamento .cabecera-vista h1.imagotipo .imagotipo-icono {
    animation: respira-logo 6s ease-in-out infinite;
}

html body #app-container #vista-campamento .cabecera-vista h1.imagotipo .imagotipo-texto {
    animation: respira-logo-texto 6s ease-in-out infinite;
}

html body.movimiento-quieto #app-container #vista-campamento .cabecera-vista h1.imagotipo .imagotipo-icono,
html body.modo-calma #app-container #vista-campamento .cabecera-vista h1.imagotipo .imagotipo-icono {
    animation: none;
    filter: drop-shadow(0 0 3px rgba(var(--color-tema-neon-rgb), 0.4));
}

html body.movimiento-quieto #app-container #vista-campamento .cabecera-vista h1.imagotipo .imagotipo-texto,
html body.modo-calma #app-container #vista-campamento .cabecera-vista h1.imagotipo .imagotipo-texto {
    animation: none;
}

@media (prefers-reduced-motion: reduce) {
    html body #app-container #vista-campamento .cabecera-vista h1.imagotipo .imagotipo-icono {
        animation: none;
        filter: drop-shadow(0 0 3px rgba(var(--color-tema-neon-rgb), 0.4));
    }

    html body #app-container #vista-campamento .cabecera-vista h1.imagotipo .imagotipo-texto {
        animation: none;
    }
}

/* =========================================
   ICONOS EN BALDOSA (D4): Libro de Logros
   Cristal grueso tipo gema (elegido por Sergio, 23-oct): el dibujo queda como dentro de un cristal del
   color del icono (--c), con bisel de luz arriba, canto más oscuro abajo, una veta de brillo en diagonal y
   un halo suave del color debajo. Dentro, el dibujo de index.html (<symbol id="b-…">) o la cara del
   compañero. Nada se mueve ni parpadea
========================================= */
.baldosa {
    --c: #C3C0B6;
    --sombra-baldosa: 0 4px 0 color-mix(in srgb, var(--c) 45%, #1b1c1f), 0 10px 22px color-mix(in srgb, var(--c) 30%, transparent), inset 0 -8px 14px rgba(27, 28, 31, 0.25);
    position: relative;
    isolation: isolate;
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    overflow: hidden;
    background: linear-gradient(160deg, color-mix(in srgb, var(--c) 68%, rgba(255, 255, 255, 0.3)), color-mix(in srgb, var(--c) 50%, transparent) 55%, color-mix(in srgb, var(--c) 64%, transparent));
    border: 2px solid rgba(255, 255, 255, 0.35);
    border-top-color: rgba(255, 255, 255, 0.75);
    border-bottom-color: color-mix(in srgb, var(--c) 60%, #1b1c1f);
    box-shadow: var(--sombra-baldosa);
    box-sizing: border-box;
}

/* La veta de brillo en diagonal y el bisel de luz de arriba (los dos quietos) */
.baldosa::before,
.baldosa::after {
    content: '';
    position: absolute;
    z-index: 1;
    pointer-events: none;
}

.baldosa::before {
    inset: -20% auto -20% -10%;
    width: 38%;
    transform: rotate(25deg);
    background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
}

.baldosa::after {
    left: 8%;
    right: 8%;
    top: 5%;
    height: 30%;
    border-radius: 10px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0));
}

.baldosa > * {
    position: relative;
    z-index: 2;
}

.baldosa svg {
    width: 66%;
    height: 66%;
    filter: drop-shadow(0 2px 2px rgba(27, 28, 31, 0.35));
}

.baldosa-emoji {
    font-size: 1.5rem;
    line-height: 1;
}

.baldosa-cara {
    width: 82%;
    height: 82%;
    border-radius: 50%;
    object-fit: cover;
}

/* La tarjeta del logro: la baldosa ocupa todo el hueco del icono (sin marco propio) */
html body .logro-icono {
    width: auto;
    height: auto;
    background: none;
    border: none;
    box-shadow: none;
}

html body .hito-desbloqueado .logro-icono {
    border: none;
    box-shadow: none;
}

/* Pestañas: baldosa pequeña junto al nombre */
html body .btn-categoria-logro .baldosa.categoria-logro-icono {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    box-shadow: var(--sombra-baldosa);
}

html body .libro-icono-categoria {
    background: none;
    border: none;
    box-shadow: none;
}

/* Resumen: cada dato con la baldosa arriba y la cifra pegada a su derecha, las dos centradas juntas;
   debajo, el texto centrado a todo el ancho de la ficha (pedido por Sergio, 23-oct).
   DIS-59: así «conseguidos» o «completadas» no tienen que caber en la columna estrecha de al lado del
   icono y no se salen por el borde con «Letra grande», «Espaciado amplio» o en inglés.
   El texto no pinta caja propia (display: contents): cifra y texto se colocan en la rejilla de la ficha */
html body .resumen-dato {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto minmax(0, 1fr);
    grid-template-areas: ". icono valor ." "texto texto texto texto";
    align-items: center;
    gap: 8px 10px;
    min-width: 0;
    text-align: center;
}

.resumen-dato .baldosa {
    grid-area: icono;
    width: 40px;
    height: 40px;
    border-radius: 12px;
}

.resumen-dato-texto {
    display: contents;
}

html body .resumen-dato-valor {
    grid-area: valor;
    justify-self: center;
    white-space: nowrap;
}

html body .resumen-dato-label {
    grid-area: texto;
    justify-self: center;
}

/* Resumen, opción A: el aro a la izquierda con dos datos a su lado y los otros dos debajo, a lo ancho */
html body .resumen-logros-cabecera {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    justify-items: stretch;
    gap: 10px;
}

html body .resumen-logros-cabecera .resumen-datos {
    display: contents;
}

html body .resumen-logros-cabecera .resumen-anillo {
    grid-column: 1;
    grid-row: 1 / span 2;
    justify-self: center;
    align-self: center;
}

html body .resumen-logros-cabecera .resumen-dato:nth-child(1) { grid-column: 2; grid-row: 1; }
html body .resumen-logros-cabecera .resumen-dato:nth-child(2) { grid-column: 2; grid-row: 2; }

/* En escritorio el aro y los cuatro datos, en dos filas de dos a su lado */
@media (min-width: 900px) and (orientation: landscape) {
    html body .resumen-logros-cabecera {
        grid-template-columns: auto repeat(2, minmax(0, 1fr));
    }

    html body .resumen-logros-cabecera .resumen-dato:nth-child(1) { grid-column: 2; grid-row: 1; }
    html body .resumen-logros-cabecera .resumen-dato:nth-child(2) { grid-column: 3; grid-row: 1; }
    html body .resumen-logros-cabecera .resumen-dato:nth-child(3) { grid-column: 2; grid-row: 2; }
    html body .resumen-logros-cabecera .resumen-dato:nth-child(4) { grid-column: 3; grid-row: 2; }
}

/* DIS-59: en el móvil la media columna junto al aro no da para «conseguidos» o «completadas». Así que
   en cualquier móvil el aro va arriba y los cuatro datos debajo, uno por fila (elegido por Sergio, 23-oct);
   al lado del aro solo en tablet y escritorio. El corte va en em: con letra grande se apila antes.
   (La consulta mira el ancho del contenido del libro, que es quien contiene al resumen) */
#contenido-categoria-logros {
    container-type: inline-size;
}

@container (max-width: 34em) {
    html body .resumen-logros-cabecera {
        grid-template-columns: minmax(0, 1fr);
    }

    html body .resumen-logros-cabecera .resumen-anillo { grid-column: 1; grid-row: auto; }

    html body .resumen-logros-cabecera .resumen-dato:nth-child(n) { grid-column: 1; grid-row: auto; }

    /* Cada dato en fila, como una tabla de stats (opción A elegida por Sergio, 23-oct): baldosa grande a la
       izquierda, nombre en medio y la cifra a la derecha */
    html body .resumen-logros-cabecera .resumen-dato {
        grid-template-columns: auto minmax(0, 1fr);
        grid-template-areas: "icono texto";
        gap: 12px;
        padding: 12px 18px 12px 14px;
        text-align: left;
    }

    /* Como un título con su cantidad debajo (Sergio, 24-oct): el nombre en una sola línea y la cifra justo
       debajo, los dos centrados en el hueco de la ficha a la derecha del icono. Igual en las 4 fichas, para
       que se vean alineadas */
    html body .resumen-logros-cabecera .resumen-dato-texto {
        grid-area: texto;
        justify-self: center;
        text-align: center;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        max-width: 100%;
        min-width: 0;
    }

    html body .resumen-logros-cabecera .resumen-dato .baldosa {
        width: 52px;
        height: 52px;
        border-radius: 14px;
    }

    html body .resumen-logros-cabecera .resumen-dato-label {
        order: 0;
        /* Una sola línea: la letra se ajusta al ancho de la ficha (con letra grande baja un poco) */
        font-size: clamp(0.7rem, 4.4cqi, 0.95rem);
        max-width: 100%;
        white-space: nowrap;
        color: var(--color-texto);
    }

    /* Cifra algo más pequeña que antes, igual en las 4 fichas para que se vean parejas */
    html body .resumen-logros-cabecera .resumen-dato-valor {
        order: 1;
        font-size: 1.2rem;
    }
}