/**
 * Multicines PWA — mcp-base.css
 *
 * v0.1.0 (D1.2): carcasa, loader, instalación PWA, marcador de pantalla.
 * v0.2.1 (D2.2): header, barra de pestañas y botón se mudan a mcp-componentes.css.
 * v0.2.0 (D2.1): todo pasa a usar los tokens semánticos de mcp-tokens.css (nada de colores ni
 * medidas escritos a mano). Se agrega un reset acotado a .mcp-pantalla-completa para que ninguna
 * regla del tema de WordPress (tipografía de títulos, márgenes, botones) se cuele en la app:
 * era la causa de que el título "Cartelera" saliera con la fuente del tema.
 * Convención: todo selector empieza con .mcp- (no se tocan páginas ajenas al plugin).
 *
 * v0.2.3 (D2.4): MÓVIL PRIMERO. Los estilos base son los del teléfono; los anchos mayores se
 * agregan con min-width. Cortes (en em para que respeten el tamaño de letra del usuario):
 *   37.5em (600 px)  tableta / computadora: la app se muestra como columna centrada.
 *   Altura corta: (max-height: 30em) = teléfono en horizontal; header no fijo y barra más baja.
 * Foco de dos anillos, movimiento reducido global y modo de alto contraste (forced-colors).
 * Detalle y pruebas: docs/ACCESIBILIDAD.md.
 */

/* ── Reset acotado ───────────────────────────────────────────────────── */
.mcp-pantalla-completa {
	margin: 0;
	background: var(--mcp-fondo);
	color: var(--mcp-texto);
	font-family: var(--mcp-fuente);
	font-size: var(--mcp-texto-base);
	line-height: var(--mcp-interlineado);
	-webkit-font-smoothing: antialiased;
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
}
.mcp-pantalla-completa *,
.mcp-pantalla-completa *::before,
.mcp-pantalla-completa *::after { box-sizing: border-box; }
.mcp-pantalla-completa :where(h1, h2, h3, h4, h5, h6, p, dl, dd, figure, blockquote) { margin: 0; }
.mcp-pantalla-completa :where(h1, h2, h3, h4, h5, h6) {
	font-family: var(--mcp-fuente);
	line-height: var(--mcp-interlineado-titulo);
	letter-spacing: normal;
	text-transform: none;
	color: inherit;
}
.mcp-pantalla-completa :where(button, input, select, textarea) {
	font: inherit;
	color: inherit;
	letter-spacing: normal;
	text-transform: none;
}
.mcp-pantalla-completa :where(a) { color: inherit; }
.mcp-pantalla-completa :where(img, svg) { display: block; max-width: 100%; }

/* ── Accesibilidad ───────────────────────────────────────────────────── */
.mcp-saltar { position: absolute; left: -9999px; top: 0; z-index: var(--mcp-z-loader); background: var(--mcp-acento); color: var(--mcp-sobre-acento); padding: var(--mcp-esp-3) var(--mcp-esp-4); font-weight: var(--mcp-peso-bold); }
.mcp-saltar:focus { left: var(--mcp-esp-3); top: var(--mcp-esp-3); }

/* v0.2.3 (D2.4): foco de DOS anillos. Anillo externo (outline) + anillo interno (box-shadow que
   rellena el espacio del outline-offset). Así siempre hay un anillo con 3:1 contra el fondo o contra
   el propio botón, sea blanco, morado, naranja u oscuro (verificado con tools/contraste-tokens.py).
   En modo de alto contraste de Windows la sombra desaparece pero el outline queda con color del sistema. */
.mcp-pantalla-completa :focus-visible {
	outline: 2px solid var(--mcp-foco);
	outline-offset: 2px;
	box-shadow: 0 0 0 2px var(--mcp-foco-interno);
}
/* Sobre fondos de marca (header morado, Bienvenida, loader) el anillo externo es blanco. */
.mcp-header, .mcp-bienvenida, .mcp-loader, .mcp-saltar {
	--mcp-foco: var(--mcp-foco-marca);
	--mcp-foco-interno: var(--mcp-foco-marca-interno);
}
/* Destinos de foco por programa (saltar al contenido, título de un paso): no son controles. */
.mcp-main:focus, .mcp-pantalla-completa [tabindex="-1"]:focus { outline: none; box-shadow: none; }

/* Texto solo para lectores de pantalla. */
.mcp-solo-lectores {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* ── Carcasa ─────────────────────────────────────────────────────────── */
.mcp-app {
	max-width: var(--mcp-ancho-app);
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0 auto;
	display: flex;
	flex-direction: column;
	background: var(--mcp-fondo);
}
.mcp-main { flex: 1; min-width: 0; padding: var(--mcp-gutter); overflow-wrap: break-word; }
/* v0.2.3 (D2.4): WCAG 2.4.11 (foco no tapado). Al avanzar con Tab, el navegador desplaza la página
   dejando este margen, para que ni el header fijo ni la barra flotante tapen el control enfocado. */
html:has(.mcp-pantalla-completa) { scroll-padding-top: calc(var(--mcp-alto-header) + env(safe-area-inset-top) + var(--mcp-esp-3)); }
html:has(.mcp-app--con-tabbar) { scroll-padding-bottom: calc(var(--mcp-alto-tabbar) + var(--mcp-esp-6) + env(safe-area-inset-bottom)); }
@media (max-height: 30em) { html:has(.mcp-pantalla-completa) { scroll-padding-top: var(--mcp-esp-3); } } /* header no fijo */
/* v0.2.6 (auditoría D2): la clase la pone MCP_Template::pagina(). Antes era `:has(.mcp-tabbar)`,
   que Safari 15 no entiende: ahí la barra flotante tapaba el final del contenido. */
.mcp-app--con-tabbar .mcp-main { padding-bottom: calc(var(--mcp-alto-tabbar) + var(--mcp-esp-6) + env(safe-area-inset-bottom)); }

.mcp-mensaje { padding: var(--mcp-esp-3) var(--mcp-esp-4); border-radius: var(--mcp-radio-lg); margin-bottom: var(--mcp-esp-4); border: 1px solid; background: var(--mcp-superficie); }
.mcp-mensaje--error { border-color: var(--mcp-error); color: var(--mcp-error); }
.mcp-mensaje--info { border-color: var(--mcp-primario); }

/* ── Marcador de pantalla en construcción (v0.1.0) ───────────────────── */
.mcp-marcador { padding: var(--mcp-esp-5) var(--mcp-esp-4); border: 1px dashed var(--mcp-borde); border-radius: var(--mcp-radio-xl); text-align: center; background: var(--mcp-superficie); }
.mcp-marcador-titulo { font-size: var(--mcp-texto-xl); font-weight: var(--mcp-peso-bold); color: var(--mcp-texto-destacado); margin-bottom: var(--mcp-esp-2); }
.mcp-marcador-dev { display: grid; grid-template-columns: auto 1fr; gap: var(--mcp-esp-1) var(--mcp-esp-3); text-align: left; font-size: var(--mcp-texto-sm); color: var(--mcp-texto-secundario); margin: var(--mcp-esp-4) 0; }
.mcp-marcador-rutas { display: flex; flex-wrap: wrap; gap: var(--mcp-esp-2); justify-content: center; }
.mcp-marcador-rutas a { color: var(--mcp-texto); background: var(--mcp-fondo-alterno); border: 1px solid var(--mcp-borde); padding: var(--mcp-esp-2) var(--mcp-esp-3); border-radius: var(--mcp-radio-pill); font-size: var(--mcp-texto-sm); text-decoration: none; }
.mcp-marcador-rutas a[aria-current="page"] { border-color: var(--mcp-acento); background: var(--mcp-acento); color: var(--mcp-sobre-acento); } /* v0.2.3: naranja sobre gris no llegaba a 4.5:1 */
.mcp-marcador-dev dd, .mcp-marcador-dev code { min-width: 0; overflow-wrap: anywhere; }                                            /* v0.2.3: desbordaba con texto al 200 % */

/* ── Loader de navegación (reutilizado de wolk-portal-socios v0.2.86) ── */
.mcp-loader {
	position: fixed;
	inset: 0;
	z-index: var(--mcp-z-loader);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--mcp-esp-5);
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	transition: opacity var(--mcp-transicion), visibility 0s linear 0.18s;
}
.mcp-loader { background: var(--mcp-marca-fondo); } /* v0.2.2: color de marca por tema (SplashScreen.tsx / AppGradient) */
.mcp-loader--visible,
.mcp-arranque .mcp-loader { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity var(--mcp-transicion); }
.mcp-loader .mcp-loader-logo { display: block; width: 60%; max-width: 240px; }
.mcp-loader .mcp-loader-logo img { width: 100%; height: auto; }
.mcp-arranque .mcp-loader-spinner, .mcp-arranque .mcp-loader-texto { display: none; } /* splash: solo el logo animado, como el RN */
.mcp-loader-spinner { width: 2.4rem; height: 2.4rem; border: 3px solid rgba(255, 255, 255, 0.2); border-top-color: var(--mcp-p-naranja-500); border-radius: 50%; animation: mcp-giro 0.8s linear infinite; }
.mcp-loader-texto { color: var(--mcp-p-gris-300); font-size: var(--mcp-texto-sm); letter-spacing: 0.12em; text-transform: uppercase; }
@keyframes mcp-giro { to { transform: rotate(360deg); } }
@keyframes mcp-latido { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* ── Instalación PWA (reutilizado de wolk-portal-socios v0.2.23 / v0.2.28) ── */
.mcp-pwa-boton { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--mcp-tactil-min); height: var(--mcp-tactil-min); border: 0; border-radius: 50%; background: var(--mcp-acento); color: var(--mcp-sobre-acento); cursor: pointer; }
.mcp-pwa-boton.mcp-pwa-pulsando { animation: mcp-pulso 2.2s ease-out infinite; }
@keyframes mcp-pulso {
	0% { box-shadow: 0 0 0 0 rgba(247, 149, 32, 0.6); }
	70% { box-shadow: 0 0 0 0.85rem rgba(247, 149, 32, 0); }
	100% { box-shadow: 0 0 0 0 rgba(247, 149, 32, 0); }
}
/* Hallazgo del base: "display" por defecto va en none y solo :not([hidden]) lo muestra. */
.mcp-pwa-instrucciones { position: fixed; inset: 0; z-index: var(--mcp-z-modal); align-items: flex-end; justify-content: center; background: var(--mcp-velo); padding: var(--mcp-gutter); display: none; }
.mcp-pwa-instrucciones:not([hidden]) { display: flex; }
.mcp-pwa-instrucciones-caja { width: 100%; max-width: 420px; padding: var(--mcp-esp-5); border-radius: var(--mcp-radio-2xl); background: var(--mcp-superficie-elevada); color: var(--mcp-texto); text-align: center; margin-bottom: env(safe-area-inset-bottom); }
.mcp-pwa-instrucciones-caja p { margin-bottom: var(--mcp-esp-4); }
.mcp-pwa-instrucciones-titulo { font-size: var(--mcp-texto-lg); font-weight: var(--mcp-peso-bold); color: var(--mcp-texto-destacado); }

@media (prefers-reduced-motion: reduce) {
	.mcp-pwa-boton.mcp-pwa-pulsando { animation: none; }
}

/* ── v0.2.3 (D2.4): anchos mayores (mejora propuesta: el RN solo existe en teléfono) ───────────── */
@media (min-width: 37.5em) {
	/* La app queda como columna centrada; afuera, fondo alterno para que la columna se distinga. */
	.mcp-pantalla-completa { background: var(--mcp-fondo-alterno); }
	.mcp-app { box-shadow: 0 0 0 1px var(--mcp-borde); }
}

/* ── v0.2.3 (D2.4): altura corta (teléfono en horizontal, o texto muy ampliado) ─────────────────
   El header fijo + la barra flotante tapaban más de un tercio de la pantalla a 360 px de alto. */
@media (max-height: 30em) {
	:root { --mcp-alto-tabbar: 3.5rem; --mcp-alto-header: 3rem; }
}

/* ── v0.2.3 (D2.4): movimiento reducido GLOBAL (WCAG 2.3.3) ────────────────────────────────────
   Complementa las reglas puntuales de cada componente: cualquier animación o transición nueva de
   una pantalla futura queda cubierta sin tener que acordarse. */
@media (prefers-reduced-motion: reduce) {
	.mcp-pantalla-completa *,
	.mcp-pantalla-completa *::before,
	.mcp-pantalla-completa *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ── v0.2.3 (D2.4): alto contraste de Windows (forced-colors) ──────────────────────────────────
   El sistema reemplaza los colores; los estados que solo se marcaban con color de fondo se pierden,
   así que se marcan con los colores del sistema. */
@media (forced-colors: active) {
	.mcp-pantalla-completa :focus-visible { outline: 3px solid Highlight; }
	.mcp-loader-spinner { border-color: CanvasText; border-top-color: Highlight; }
}