/* =========================================
   AJUSTE A CADA PANTALLA (25-oct, móvil de José)
   Reglas comunes para que nada se salga ni se quede fuera de alcance en móviles pequeños o con la
   letra del sistema grande (Android agranda el texto del WebView con el tamaño de letra del móvil).
   Va el último a propósito: corrige la cascada de las hojas anteriores.
   1. Ventanas: si no caben, se desplazan dentro y el botón principal queda siempre a mano.
   2. Bocadillo del compañero: nunca más alto que media pantalla ni encima de la barra de abajo.
   3. Texto: los botones parten la línea en vez de salirse de su tarjeta.
   Comprobación: scripts/revisar-pantallas.js (360 px con letra al 130 % y 320 px al 150 %).
========================================= */

/* 1. Ventanas a pantalla completa: con contenido más alto que la pantalla, «safe center» deja el
   principio arriba (no cortado) y la capa se desplaza; antes quedaban centradas y cortadas por los dos lados */
.modal-overlay,
#modal-fin-mision,
#modal-foto-perfil,
#modal-detalle-mision,
.modal-celebracion-nivel,
.modal-guarida,
.modal-bienvenida-compasiva,
.modal-emergencia,
.modal-decision-mision,
.modal-bautizo {
    align-items: safe center;
    justify-content: safe center;
    overflow-y: auto;
    overscroll-behavior: contain;
    box-sizing: border-box;
}

/* vh en Android es el alto con la barra del navegador escondida: dvh es el alto que se ve de verdad */
#modal-foto-perfil .modal-contenido,
.modal-overlay .modal-contenido {
    max-height: 90dvh;
}

/* Bienvenida del compañero y celebraciones: la tarjeta cabe en la pantalla, los mensajes se desplazan
   dentro y el botón se queda abajo, siempre visible */
.tarjeta-celebracion {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-height: calc(100dvh - 32px);
    box-sizing: border-box;
}

.tarjeta-celebracion > * {
    flex-shrink: 0;
    max-width: 100%;
}

.tarjeta-celebracion .celebracion-mensajes {
    flex: 0 1 auto;
    min-height: 3.5em;
    width: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Pantallas bajas: el compañero y el título ceden sitio a los mensajes */
@media (max-height: 760px) {
    .tarjeta-celebracion {
        padding: 18px 18px 16px;
    }

    .celebracion-avatar {
        width: 64px;
        height: 64px;
    }

    .celebracion-titulo {
        margin: 6px 0 10px;
        font-size: 1.2rem;
    }

    .celebracion-mensajes {
        margin-bottom: 14px;
    }
}

/* 2. Bocadillo del compañero guía: como mucho ~45 % de la pantalla (el texto se desplaza dentro) y
   por encima de la barra Hoy · Diario · Ajustes. js/onboarding.js lo cambia de lado si tapa el botón señalado */
.tour-guia {
    max-height: 45dvh;
}

.tour-guia-cuerpo {
    max-height: calc(45dvh - 32px);
}

.tour-guia-texto {
    overflow-y: auto;
    overscroll-behavior: contain;
    min-height: 0;
    flex: 0 1 auto;
}

.tour-guia-nombre,
.tour-guia-acciones {
    flex-shrink: 0;
}

.tour-guia[data-posicion="abajo"] {
    bottom: calc(var(--alto-barra-nav, 0px) + max(12px, env(safe-area-inset-bottom)));
}

body.modo-onboarding .tour-guia[data-posicion="abajo"],
body.modo-enfoque-activo .tour-guia[data-posicion="abajo"] {
    bottom: max(24px, env(safe-area-inset-bottom));
}

body.modo-que-es-esto .tour-guia[data-posicion="abajo"] {
    bottom: calc(var(--alto-barra-nav, 0px) + max(12px, env(safe-area-inset-bottom)) + 76px);
}

body.modo-que-es-esto .barra-que-es-esto {
    bottom: calc(var(--alto-barra-nav, 0px) + max(8px, env(safe-area-inset-bottom)));
}

@media (max-width: 420px) {
    .tour-guia {
        gap: 10px;
        padding: 12px 14px;
    }

    .tour-guia-avatar {
        width: 44px;
        height: 44px;
        align-self: flex-start;
    }
}

/* 3. Texto que no cabe: parte la línea dentro de su caja en vez de salirse de la tarjeta */
button {
    min-width: 0;
    overflow-wrap: break-word;
}

.selector-ajuste-aura {
    flex-wrap: wrap;
}

.btn-anillo-temporada {
    max-width: 100%;
}

#tarjeta-caja-fuerte > div {
    flex-wrap: wrap;
}

#tarjeta-caja-fuerte > div > .btn-secundario {
    min-width: 8em;
}

.barra-sticky-planificador .btn-switch,
.interruptor-vistas-planificador .btn-switch {
    white-space: normal;
    text-align: center;
    justify-content: center;
}

.btn-menu-ajustes {
    box-sizing: border-box;
    max-width: 100%;
}

/* Mapa de expedición: «Octubre de 2026» crece en alto si no cabe en una línea (antes 38 px fijos) */
.controles-navegacion-mes {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: space-between;
}

.selector-mes-constancia {
    flex: 1 1 auto;
    min-width: 0;
    justify-content: center;
}

.input-mes-constancia {
    height: auto;
    min-height: 44px;
    min-width: 0;
    max-width: 100%;
    line-height: 1.2;
    text-wrap: balance;
}

.btn-flecha-mes {
    flex-shrink: 0;
}