/* =========================================
   APOYOS NEUROINCLUSIVOS
========================================= */

/* --- Calma y sentidos (bienestar.js) ---
   Movimiento «Quieto» (también con el Modo Calma o el «reducir movimiento» del móvil): duración casi
   nula y una sola iteración (no "animation: none"), así cada elemento llega al instante a su estado
   final y nada que entre con una animación se queda invisible. */
body.movimiento-quieto *,
body.movimiento-quieto *::before,
body.movimiento-quieto *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0s !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0s !important;
    scroll-behavior: auto !important;
}

/* Celebraciones grandes fuera (el modal y el Limit Break ya no se lanzan desde app.js) */
body.movimiento-quieto .limit-break-destello {
    display: none;
}

/* Movimiento «Suave» (por defecto): las transiciones siguen, con su curva suave, y el compañero sigue
   vivo, flotando más despacio. Los bucles de la interfaz se quedan quietos: «nada de bucles» */
body.movimiento-suave .icono-c-escudo,
body.movimiento-suave .barra-xp.barra-trascendental #xp-progreso,
body.movimiento-suave .titulo-dragon,
body.movimiento-suave .plataforma-holografica,
body.movimiento-suave .onboarding-cielo,
body.movimiento-suave .onboarding-sello::after {
    animation: none;
}

body.movimiento-suave #avatar-usuario-campamento,
body.movimiento-suave #avatar-usuario-campamento img {
    animation-duration: 6s;
}

body.movimiento-suave #avatar-usuario-campamento.companero-saltito {
    animation-duration: 6s, 650ms;
}

body.movimiento-suave .guarida-cuerpo,
body.movimiento-suave .guarida-img-companero {
    animation-duration: 5.5s;
}

body.movimiento-suave .tour-guia-avatar {
    animation-duration: 5s;
}

/* Color «Apagado» (también con el Modo Calma): baja el color de toda la app. El filtro va en <html>
   (en el elemento raíz no altera los modales position:fixed). El compañero conserva el suyo: saturate()
   se compone multiplicando, así 1 / 0,35 en su caja deshace exactamente el 0,35 de fuera */
html.color-apagado {
    filter: saturate(0.35);
}

html.color-apagado :is(#visor-companero-campamento, .guarida-cuerpo, .aura-concentracion, .bienvenida-avatar, .retomar-avatar) {
    filter: saturate(2.857);
}

/* Interruptor accesible (role="switch") */
.fila-interruptor {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.titulo-modo-calma {
    margin: 0 0 6px;
    color: var(--color-tema);
}

.desc-modo-calma {
    margin: 0;
    font-size: var(--letra-pequena);
    color: var(--texto-secundario);
}

.interruptor {
    flex-shrink: 0;
    min-width: 64px;
    min-height: 44px;
    padding: 0;
    background: none;
    border: none;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.interruptor-pista {
    position: relative;
    width: 52px;
    height: 30px;
    border-radius: 999px;
    background: var(--color-bordes);
    border: 1px solid var(--texto-secundario);
    transition: background-color 0.2s ease;
}

.interruptor-bola {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: var(--color-texto);
    transition: transform 0.2s ease;
}

.interruptor[aria-checked="true"] .interruptor-pista {
    background: var(--color-tema);
    border-color: var(--color-tema);
}

.interruptor[aria-checked="true"] .interruptor-bola {
    transform: translateX(22px);
    background: #121212;
}

.interruptor:focus-visible {
    outline: 3px solid var(--color-tema);
    outline-offset: 3px;
    border-radius: 999px;
}

.onboarding-calma-btn {
    display: block;
    margin: 12px auto 0;
    min-height: 44px;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--color-bordes);
    border-radius: 999px;
    color: var(--texto-secundario);
    font: inherit;
    font-size: var(--letra-pequena);
    cursor: pointer;
}

.onboarding-calma-btn[aria-pressed="true"] {
    border-color: var(--color-tema);
    color: var(--color-tema-claro);
}

/* --- Modo Refugio --- */
.btn-modo-refugio {
    display: block;
    width: 100%;
    min-height: 44px;
    margin-top: 12px;
    padding: 10px 16px;
    background: transparent;
    border: 1px dashed var(--color-bordes);
    border-radius: 12px;
    color: var(--texto-secundario);
    font: inherit;
    font-size: var(--letra-pequena);
    cursor: pointer;
}

/* Solo con ratón: en el móvil el :hover se queda pegado tras tocar y el botón parecía encendido */
@media (hover: hover) {
    .btn-modo-refugio:hover {
        border-color: rgba(var(--color-tema-rgb), 0.6);
        color: var(--color-tema-claro);
    }
}

/* Con el Refugio activo el botón se esconde: para salir ya está «Salir del Refugio» en la tarjeta */
body.modo-refugio .btn-modo-refugio {
    display: none;
}

.btn-modo-refugio:focus-visible {
    outline: 3px solid var(--color-tema);
    outline-offset: 2px;
}

.banner-refugio {
    max-width: 640px;
    margin: 20px auto;
    padding: 24px;
    text-align: center;
    background: var(--fondo-paneles);
    border: 1px solid rgba(var(--color-tema-rgb), 0.35);
    border-radius: 16px;
}

.titulo-banner-refugio {
    margin: 0 0 10px;
    font-size: 1.2rem;
    color: var(--color-tema-claro);
}

.titulo-banner-refugio:focus {
    outline: none;
}

.texto-banner-refugio {
    margin: 0 0 18px;
    color: var(--color-texto);
    line-height: 1.5;
}

/* Las listas del día descansan con la persona: vuelven al salir del Refugio o mañana */
body.modo-refugio #vista-campamento .seccion-central {
    display: none;
}

/* --- Versión mínima --- */
.btn-version-minima {
    display: block;
    margin: 10px auto 0;
    min-height: 44px;
    padding: 8px 18px;
    background: transparent;
    border: 1px solid var(--color-bordes);
    border-radius: 999px;
    color: var(--texto-secundario);
    font: inherit;
    font-size: var(--letra-pequena);
    cursor: pointer;
}

.btn-version-minima:hover {
    border-color: rgba(var(--color-tema-rgb), 0.6);
    color: var(--color-tema-claro);
}

/* --- Aviso "Deshacer" (toast inferior) --- */
.toast-deshacer {
    position: fixed;
    left: 50%;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 1000005; /* por encima del modal de recompensa y de las celebraciones */
    display: flex;
    align-items: center;
    gap: 14px;
    width: max-content;
    max-width: calc(100vw - 32px);
    padding: 10px 10px 10px 18px;
    background: var(--fondo-paneles);
    border: 1px solid var(--color-bordes);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
    color: var(--color-texto);
    box-sizing: border-box;
}

.toast-deshacer-texto {
    font-size: var(--letra-pequena);
    min-width: 0;
    overflow-wrap: anywhere;
}

.btn-deshacer {
    flex-shrink: 0;
    min-height: 44px;
    min-width: 44px;
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--color-tema);
    border-radius: 10px;
    color: var(--color-tema-claro);
    font: inherit;
    font-weight: 600;
    cursor: pointer;
}

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

/* --- Retorno compasivo --- */
.modal-bienvenida-compasiva {
    position: fixed;
    inset: 0;
    z-index: 1000003;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: rgba(5, 8, 12, 0.82);
    box-sizing: border-box;
}

.modal-bienvenida-compasiva.oculto {
    display: none;
}

.tarjeta-bienvenida {
    width: 100%;
    max-width: 440px;
    max-height: 90vh;
    overflow-y: auto;
    padding: 28px 24px;
    text-align: center;
    background: var(--fondo-paneles);
    border: 1px solid rgba(var(--color-tema-rgb), 0.35);
    border-radius: 20px;
    box-sizing: border-box;
}

.bienvenida-avatar {
    width: 110px;
    height: 110px;
    object-fit: contain;
}

.bienvenida-titulo {
    margin: 10px 0;
    font-size: 1.35rem;
    color: var(--color-tema-claro);
}

.bienvenida-mensaje,
.bienvenida-propuesta {
    margin: 0 0 14px;
    line-height: 1.5;
    color: var(--color-texto);
}

.bienvenida-propuesta {
    color: var(--texto-secundario);
    font-size: var(--letra-pequena);
}

.bienvenida-acciones {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bienvenida-acciones button {
    width: 100%;
    min-height: 44px;
    margin: 0;
}

/* --- Zonas táctiles mínimas de 44×44 px ---
   Lista sacada de una auditoría a 390 px de ancho (todos los controles visibles en Campamento,
   menú, panel de creación, Planificador, Ajustes, Buscador, Diario, Logros y Misión).
   min-width/min-height: nunca encogen nada; solo amplían lo que se quedaba corto. */
.btn-eliminar-subtarea,
.btn-eliminar-rutina,
.btn-fijar-rutina,
.btn-restaurar,
.btn-accion-mision-sm,
.btn-tema-color,
.btn-dia,
.btn-micro,
.btn-ayuda-contextual.btn-icono,
.btn-limpiar-busqueda,
.btn-eliminar-cat,
#btn-add-subtarea,
#btn-agregar-categoria,
#btn-eliminar-categoria,
#btn-cerrar-creacion-rapida,
#btn-cerrar-menu-lateral,
#btn-dictado,
#btn-dictado-subtarea,
#btn-mic-nuevo-paso,
#btn-mic-planificacion,
#btn-mic-evento-cal,
#btn-mes-anterior-constancia,
#btn-mes-siguiente-constancia {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

/* Micro del creador de misiones en gris grafito claro, como el del Planificador: sin color propio
   el botón pintaba el icono en negro y no se veía sobre el campo oscuro */
#btn-dictado {
    color: var(--texto-secundario);
}

#btn-dictado:hover,
#btn-dictado:focus-visible,
#btn-dictado.grabando {
    color: var(--color-tema);
}

/* DIS-59: el micro va encima del campo, pegado a la derecha, y con la zona táctil de 44 px ya ocupa
   44 + 15 px. Cada campo traía su propio hueco (35-52 px) de antes de ampliarla, y el texto quedaba
   debajo del micro. Un único hueco para todos los campos con micro */
#input-nombre-mision,
#input-planificacion,
#input-nuevo-paso,
#modal-calendario-dia input#input-evento-cal {
    padding-right: 60px;
}

#btn-agregar-paso,
#costo-energia-input,
#costo-energia-cal,
#select-categoria-tarea,
#etiqueta-mes-constancia,
.btn-accion-resultado,
.btn-ambiente,
.btn-filtro-cat,
.btn-pill-duracion,
.opcion-vestidor,
.acordeon-campamento > summary,
#acordeon-pendientes > summary,
#desplegable-subtareas > summary {
    min-height: 44px;
    box-sizing: border-box;
}

.acordeon-campamento > summary,
#acordeon-pendientes > summary,
#desplegable-subtareas > summary {
    display: flex;
    align-items: center;
}

/* Con días de 44 px, la semana puede pasar a dos filas en pantallas estrechas en vez de desbordar */
.dias-semana-selector {
    flex-wrap: wrap;
}

/* Paso de la misión: la etiqueta (casilla + texto) es la zona táctil completa */
.subtarea-etiqueta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
    cursor: pointer;
}
/* Icono oficial del Escudo Temporal (PNG sin fondo, teñido con el Resplandor del Sistema).
   En un conflicto de agenda usa siempre el tono ámbar, como el resto del aviso */
.icono-c-escudo {
    display: inline-block;
    width: 28px;
    height: 28px;
    background: var(--img-escudo-temporal) center / contain no-repeat;
    animation: c-escudo-pulso 3s ease-in-out infinite;
}
.vigilante-conflicto .icono-c-escudo {
    background-image: url('../assets/marca/escudo-temporal-ambar.png');
}
/* Latido suave del resplandor. Modo Calma lo reduce a una iteración instantánea (regla global body.movimiento-quieto *) */
@keyframes c-escudo-pulso {
    0%, 100% { opacity: 0.85; }
    50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
    .icono-c-escudo { animation: none; }
}

/* =========================================
   CABECERA COMPACTA DE PESTAÑAS (Planificador y Diario)
   Con el ☰ flotante visible (móvil o vertical), la barra de pestañas se fija al borde superior.
   Al quedar fijada (.fijada, la pone app.js), es una franja opaca de lado a lado con hueco para
   el ☰: botón y pestañas en una sola fila y nada del formulario asomando por detrás.
========================================= */
@media (max-width: 899px), (orientation: portrait) {
    .interruptor-vistas-planificador {
        top: 0;
    }
}

.interruptor-vistas-planificador.fijada {
    padding-left: 66px;
    background: transparent;
    border-color: transparent;
    border-radius: 0;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
}

/* Franja de fondo a sangre (cubre también los márgenes laterales de la vista) */
.interruptor-vistas-planificador.fijada::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: -40px;
    right: -40px;
    z-index: -1;
    background: var(--fondo-app);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.45);
}

/* --- Bienvenida (splash): Refugio del Guardián con brillo esmeralda; app.js añade .splash-oculto --- */
#splash-screen {
    position: fixed;
    inset: 0;
    /* Fondo: el mismo cielo nocturno del Prólogo (vigilante-y-onboarding.css) */
    z-index: 2000000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    transition: opacity 1s ease-in-out;
}

/* Logo oficial (PNG con su propio resplandor, teñido con el tema): sin sombra extra para no deslumbrar */
#splash-screen .splash-refugio {
    position: relative; /* por encima de las estrellas */
    display: block;
    width: min(36vw, 150px);
    aspect-ratio: 1;
    background: var(--img-logo-refugio) center / contain no-repeat;
}

/* Nombre: degradado menta → neón del tema → lavanda (anula la "cápsula" global de los h1) */
#splash-screen h1 {
    position: relative;
    display: block;
    margin: 0;
    padding: 0;
    background: linear-gradient(180deg, #a7f3d0 0%, var(--color-tema-neon, #00c896) 55%, #c4b5fd 100%);
    -webkit-background-clip: text;
    background-clip: text;
    border: none;
    box-shadow: none;
    color: transparent;
    font-size: clamp(2.2rem, 10vw, 3rem);
    letter-spacing: 0.02em;
    text-transform: none;
    filter: drop-shadow(0 0 10px rgba(var(--color-tema-neon-rgb, 0, 200, 150), 0.3));
}

/* Línea de horizonte bajo el nombre y lema en lavanda */
#splash-screen .splash-horizonte {
    position: relative;
    display: block;
    width: min(50vw, 190px);
    height: 2px;
    margin-top: -0.4rem;
    border-radius: 2px;
    background: linear-gradient(90deg, transparent, var(--color-tema-neon, #00c896), #c4b5fd, transparent);
}

#splash-screen .splash-lema {
    position: relative;
    margin: -0.3rem 0 0;
    color: #c4b5fd;
    opacity: 0.85;
    font-size: var(--letra-pequena);
    letter-spacing: 0.12em;
}

#splash-screen.splash-oculto {
    opacity: 0;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #splash-screen { transition: none; }
}

/* --- Versión al pie de Ajustes (texto discreto) ---
   Discreta por el color secundario, sin opacidad: con opacity .6 bajaba a unos 2,9:1 (DIS-44) */
.version-app {
    margin: 24px 0 8px;
    text-align: center;
    font-size: var(--letra-pequena);
    color: var(--texto-secundario);
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
}

/* --- Imagotipo de la cabecera del Campamento: la tienda del Refugio encajada en el borde de la placa ---
   El logo (sin fondo, teñido con el Resplandor del Sistema: --img-logo-refugio) se monta sobre el borde
   izquierdo de la placa de cristal del nombre, así tienda y nombre se leen como una sola pieza.
   La placa crece a la altura de la tienda para que no se quede pequeña a su lado */
#vista-campamento .header-superior h1.imagotipo {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    background: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border: none;
    box-shadow: none;
    padding: 0;
}

.imagotipo-icono {
    position: relative;
    z-index: 1;
    display: block;
    width: 76px;
    height: 76px;
    margin-right: -32px;
    flex-shrink: 0;
    background: var(--img-logo-refugio) center / contain no-repeat;
    filter: drop-shadow(0 0 6px rgba(0, 0, 0, 0.6));
}

#vista-campamento .header-superior .imagotipo-texto {
    display: inline-flex;
    align-items: center;
    min-height: 64px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.015); /* debajo solo está el fondo liso: sin desenfoque (GPU) */
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom: 2px solid rgba(var(--color-tema-neon-rgb), 0.9);
    box-shadow: 0 4px 20px rgba(var(--color-tema-neon-rgb), 0.15);
    text-shadow: 0 0 12px rgba(var(--color-tema-neon-rgb), 0.45);
    border-radius: 14px;
    padding: 12px 34px 12px 46px;
}

@media (max-width: 480px) {
    .imagotipo-icono {
        width: 64px;
        height: 64px;
        margin-right: -28px;
    }

    #vista-campamento .header-superior .imagotipo-texto {
        min-height: 56px;
        padding: 10px 22px 10px 38px;
    }
}

/* --- Campamento: columnas (compañero | tareas del día) ---
   En móvil y tablet vertical, columna única: las envolturas se comportan como el .campamento-principal flex de antes */
.campamento-columnas,
.campamento-columna-companero,
.campamento-columna-tareas {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.campamento-columnas,
.campamento-columna-tareas {
    flex-grow: 1;
}

/* Escritorio: dos columnas bajo la barra de nivel (que sigue a ancho completo en el <header>) */
@media (min-width: 900px) and (orientation: landscape) {
    .campamento-columnas {
        display: grid;
        grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        gap: 2rem;
        align-items: start;
    }

    /* La lista ya no empieza debajo del compañero: arriba alineada con él */
    .campamento-columna-tareas > .seccion-central,
    .campamento-columna-tareas > .banner-refugio {
        margin-top: clamp(10px, 2.5vh, 20px);
    }
}

/* --- «¿Por qué?» plegado (ui-comun.js): discreto, cerrado por defecto, sin animación.
   El id de #acordeon-pendientes pesa más que una clase: por eso se repite aquí --- */
details.por-que {
    width: 100%;
    margin: 6px 0 0;
}

details.por-que > summary,
#acordeon-pendientes details.por-que > summary {
    display: block; /* la flecha va en línea con el texto, también si el panel lo centra */
    min-height: 44px; /* zona táctil (WCAG 2.5.8) */
    padding: 12px 0;
    line-height: 1.4;
    font-size: var(--letra-pequena);
    font-weight: 600;
    color: var(--color-texto-secundario);
}

details.por-que > summary::before {
    content: '▸';
    margin-right: 6px;
    color: var(--color-tema);
}

details.por-que[open] > summary::before {
    content: '▾';
}

details.por-que > summary:focus-visible {
    outline: 2px solid var(--color-tema);
    outline-offset: 2px;
    border-radius: 4px;
}

.por-que-texto {
    margin: 0 0 6px;
    font-size: var(--letra-pequena);
    line-height: 1.5;
    color: var(--color-texto);
}

/* --- Tarjeta «Calma y sentidos» (Ajustes › Preferencias) --- */
.fila-sentido {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px solid var(--color-bordes);
    border-radius: 14px;
}

.texto-sentido {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.etiqueta-sentido {
    font-weight: 700;
    color: var(--color-tema);
}

.pista-sentido,
.nota-sentidos-calma {
    font-size: var(--letra-pequena);
    color: var(--texto-secundario);
    line-height: 1.45;
}

.nota-sentidos-calma {
    margin: 12px 0 0;
}

.nota-sentidos-calma.oculto {
    display: none;
}

/* Los botones se reparten el ancho: con letra grande caben en dos líneas sin cortarse */
.selector-sentido {
    flex-wrap: wrap;
}

.selector-sentido .btn-ajuste-aura {
    flex: 1 1 0;
    min-width: max-content;
    min-height: 44px;
}

/* Con el Modo Calma encendido mandan sus valores: se ven, pero no se eligen */
.selector-sentido .btn-ajuste-aura:disabled {
    cursor: default;
    opacity: 0.7;
}

.atajo-modo-calma {
    margin-top: 16px;
    padding: 12px 14px;
    border: 1px dashed rgba(var(--color-tema-rgb), 0.45);
    border-radius: 14px;
}

.atajo-modo-calma .titulo-modo-calma {
    font-size: 1.05rem;
}

/* --- Volver a una misión a medias: «Ajolote te guardó el sitio» (mision.js) ---
   Reusa la tarjeta del retorno compasivo; el compañero con su luz suave detrás */
.tarjeta-retomar {
    border-color: rgba(var(--color-tema-rgb), 0.5);
}

.retomar-avatar {
    width: 140px;
    height: 140px;
    background: radial-gradient(circle, rgba(var(--color-tema-rgb), 0.22) 0%, transparent 68%);
    border-radius: 50%;
}

.tarjeta-retomar .bienvenida-titulo {
    color: var(--color-titulo, var(--color-tema));
    font-weight: 700;
}

.retomar-progreso {
    margin: 0 auto 18px;
    max-width: 260px;
}

.retomar-progreso[hidden] {
    display: none;
}

.retomar-objetivo {
    display: block;
    margin-bottom: 6px;
    font-size: var(--letra-pequena);
    color: var(--texto-secundario);
}

.retomar-barra {
    height: 6px;
    border-radius: 999px;
    background: var(--color-bordes);
    overflow: hidden;
}

.retomar-barra-relleno {
    height: 100%;
    border-radius: inherit;
    background: var(--color-tema);
}

.retomar-pista {
    margin: 12px 0 0;
}

.btn-retomar-seguir {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.icono-retomar {
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}