/**
 * Multicines PWA — mcp-componentes.css
 *
 * v0.2.1 (D2.2): componentes base. Solo tokens semánticos de mcp-tokens.css, así cada
 * componente funciona igual en tema claro y oscuro. Markup: MCP_Componentes (PHP).
 * Fiel vs mejora: docs/COMPONENTES.md.
 * v0.2.3 (D2.4): móvil primero (la hoja inferior es la base y se centra desde 37.5em), foco de dos
 * anillos también en campos y casillas, textos largos de botón que ajustan de línea, header no fijo
 * en alturas cortas y estados visibles en alto contraste. Ver docs/ACCESIBILIDAD.md.
 * v0.2.4 (D2.5): ajustes de la QA de identidad contra el RN (docs/QA-DISENO.md): alto y letra de
 * botón y alternador, alto del header y tamaño del título, casilla de 30 px en morado, medidas
 * reales de la barra de pestañas y variante de botón con contorno naranja.
 */

/* ── Íconos ──────────────────────────────────────────────────────────── */
.mcp-icono { display: inline-block; flex-shrink: 0; }

/* ── Botones (Buttons.tsx, IconButton.tsx) ───────────────────────────── */
.mcp-boton {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--mcp-esp-3);
	min-height: var(--mcp-alto-boton);
	padding: 0 var(--mcp-esp-5);
	border: 2px solid transparent;          /* el secundario del RN usa borde 2 */
	border-radius: var(--mcp-radio-lg);     /* Buttons.tsx: borderRadius 10 */
	font-size: var(--mcp-texto-xl);         /* Buttons.tsx:91 fontPixel(20) */
	font-weight: var(--mcp-peso-bold);      /* Buttons.tsx:92 fontWeight bold */
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	cursor: pointer;
	max-width: 100%;                        /* v0.2.3: con texto al 200 % el botón no empuja la página de lado */
	min-width: 0;
	overflow-wrap: anywhere;
	-webkit-tap-highlight-color: transparent;
	transition: background-color var(--mcp-transicion), border-color var(--mcp-transicion), color var(--mcp-transicion), transform var(--mcp-transicion);
}
.mcp-boton--bloque { display: flex; width: 100%; }
.mcp-boton--compacto { min-height: var(--mcp-tactil-min); padding: 0 var(--mcp-esp-4); font-size: var(--mcp-texto-base); }
.mcp-boton:active:not(:disabled) { transform: scale(0.98); }

.mcp-boton--primario { background: var(--mcp-primario); color: var(--mcp-sobre-primario); }
.mcp-boton--primario:hover:not(:disabled) { background: var(--mcp-primario-hover); }
.mcp-boton--acento { background: var(--mcp-acento); color: var(--mcp-sobre-acento); }
.mcp-boton--acento:hover:not(:disabled) { filter: brightness(0.95); }
.mcp-boton--secundario { background: transparent; border-color: var(--mcp-primario-texto); color: var(--mcp-primario-texto); }
.mcp-boton--secundario:hover:not(:disabled) { background: var(--mcp-fondo-alterno); }
.mcp-boton--contorno-acento { background: transparent; border-color: var(--mcp-acento); color: var(--mcp-acento-sobre-marca); } /* v0.2.4: NotificationEnable.tsx "Omitir" */
.mcp-boton--contorno-acento:hover:not(:disabled) { background: rgba(247, 149, 32, 0.12); }
.mcp-boton--texto { background: transparent; color: var(--mcp-primario-texto); min-height: var(--mcp-tactil-min); padding: 0 var(--mcp-esp-3); text-decoration: underline; text-underline-offset: 3px; }

.mcp-boton:disabled,
.mcp-boton[aria-disabled="true"] { opacity: var(--mcp-opacidad-deshabilitado); cursor: not-allowed; }
.mcp-boton.is-cargando { cursor: progress; opacity: 1; }
.mcp-boton-spinner { width: 1.25rem; height: 1.25rem; border: 2.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: mcp-giro 0.8s linear infinite; }

/* ── Alternador (ToggleSelector.tsx: píldora con borde 2 morado) ─────── */
.mcp-alternador {
	display: flex;
	padding: var(--mcp-esp-1);
	border: 2px solid var(--mcp-primario-texto);
	border-radius: var(--mcp-radio-pill);   /* ToggleSelector: borderRadius 30 */
	gap: var(--mcp-esp-1);
}
.mcp-alternador-opcion {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 0;                           /* v0.2.3: con texto al 200 % las opciones ajustan en vez de desbordar */
	min-height: var(--mcp-alto-boton);      /* v0.2.4: ToggleSelector usa Buttons (heightPixel 58) */
	padding: 0 var(--mcp-esp-4);
	text-align: center;
	overflow-wrap: anywhere;
	border: 0;
	border-radius: var(--mcp-radio-pill);
	background: transparent;
	color: var(--mcp-primario-texto);
	font-size: var(--mcp-texto-xl);         /* v0.2.4: Buttons.tsx:91 */
	font-weight: var(--mcp-peso-bold);
	text-decoration: none;
	cursor: pointer;
}
.mcp-alternador-opcion.is-activa { background: var(--mcp-primario); color: var(--mcp-sobre-primario); }

/* ── Campos (inputs.tsx, Dropdown.tsx) ───────────────────────────────── */
.mcp-campo { display: flex; flex-direction: column; gap: var(--mcp-esp-2); margin-bottom: var(--mcp-esp-4); }
.mcp-campo-etiqueta { font-size: var(--mcp-texto-lg);   /* v0.2.4: inputs.tsx:60 fontPixel(19) */ font-weight: var(--mcp-peso-semi); color: var(--mcp-texto); } /* inputs.tsx: 600 */
.mcp-campo-requerido { color: var(--mcp-error); }
.mcp-control {
	width: 100%;
	min-height: var(--mcp-alto-input);
	padding: 0 var(--mcp-esp-3);
	border: 1px solid var(--mcp-borde-control);
	border-radius: var(--mcp-radio-lg);        /* inputs.tsx: borderRadius 10 */
	background: var(--mcp-superficie);
	color: var(--mcp-texto);
	font-size: var(--mcp-texto-base);           /* 16 px: evita el zoom automático de iOS (el RN usa 15) */
	appearance: none;
	-webkit-appearance: none;
	transition: border-color var(--mcp-transicion), box-shadow var(--mcp-transicion);
}
.mcp-control::placeholder { color: var(--mcp-texto-placeholder); opacity: 1; }
.mcp-control:focus { border-color: var(--mcp-primario-texto); }
/* v0.2.4 (D2.5): Dropdown.tsx:22 — con un valor elegido, el borde pasa a morado. */
.mcp-control--selector:has(option:checked:not([value=""])) { border-color: var(--mcp-primario-texto); } /* v0.2.3: el anillo lo pone la regla global :focus-visible (antes: halo al 30 %, casi invisible) */
.mcp-control:disabled { opacity: var(--mcp-opacidad-deshabilitado); }
.mcp-campo.is-error .mcp-control { border-color: var(--mcp-error); }
.mcp-campo-ayuda { font-size: var(--mcp-texto-sm); color: var(--mcp-texto-secundario); }
.mcp-campo-error { display: flex; align-items: center; gap: var(--mcp-esp-2); font-size: var(--mcp-texto-sm); color: var(--mcp-error); }  /* LoginScreen error: 14 rojo */

.mcp-control-con-accion { position: relative; }
.mcp-control-con-accion .mcp-control { padding-right: calc(var(--mcp-tactil-min) + var(--mcp-esp-2)); }
.mcp-control-accion {
	position: absolute;
	top: 50%;
	right: var(--mcp-esp-1);
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mcp-tactil-min);
	height: var(--mcp-tactil-min);
	border: 0;
	border-radius: var(--mcp-radio-lg);
	background: transparent;
	color: var(--mcp-texto-secundario);
	cursor: pointer;
}
.mcp-control-accion [hidden] { display: none; }
.mcp-control--selector { cursor: pointer; }
.mcp-control-flecha { position: absolute; top: 50%; right: var(--mcp-esp-3); transform: translateY(-50%); color: var(--mcp-texto-secundario); pointer-events: none; }

/* ── Casilla (Checkbox.tsx: casilla morada) ──────────────────────────── */
.mcp-casilla { position: relative; margin-bottom: var(--mcp-esp-4); }
.mcp-casilla-input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; }
.mcp-casilla label { display: flex; align-items: flex-start; gap: var(--mcp-esp-3); min-height: var(--mcp-tactil-min); padding: var(--mcp-esp-2) 0; cursor: pointer; font-size: var(--mcp-texto-base); }
/* v0.2.4 (D2.5): Checkbox.tsx dibuja los íconos check-box / check-box-outline-blank de
   MaterialIcons en 30 px y en morado (también sin marcar); no es una caja con borde propio. */
.mcp-casilla-caja {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: var(--mcp-tamano-casilla);
	height: var(--mcp-tamano-casilla);
	color: var(--mcp-primario-texto);
}
.mcp-casilla-caja svg { width: 100%; height: 100%; }
.mcp-casilla-caja [data-mcp-casilla-marcada] { display: none; }
.mcp-casilla-texto { padding-top: 1px; }
.mcp-casilla-texto a { color: var(--mcp-primario-texto); text-decoration: underline; text-underline-offset: 3px; }
.mcp-casilla-input:checked + label .mcp-casilla-caja [data-mcp-casilla-marcada] { display: block; }
.mcp-casilla-input:checked + label .mcp-casilla-caja [data-mcp-casilla-vacia] { display: none; }
.mcp-casilla-input:focus-visible + label .mcp-casilla-caja { outline: 2px solid var(--mcp-foco); outline-offset: 2px; box-shadow: 0 0 0 2px var(--mcp-foco-interno); border-radius: var(--mcp-radio-sm); }
.mcp-casilla.is-error .mcp-casilla-caja { color: var(--mcp-error); }

/* ── Header (Header.tsx) ─────────────────────────────────────────────── */
.mcp-header {
	position: sticky;
	top: 0;
	z-index: var(--mcp-z-header);
	display: flex;
	align-items: center;
	gap: var(--mcp-esp-2);
	min-height: calc(var(--mcp-alto-header) + env(safe-area-inset-top));
	padding: env(safe-area-inset-top) var(--mcp-esp-2) 0;
	background: var(--mcp-header-fondo);
	color: var(--mcp-header-texto);
}
.mcp-header-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: var(--mcp-radio-pill);
	background: transparent;
	color: inherit;
	cursor: pointer;
}
.mcp-header-boton:hover { background: rgba(255, 255, 255, 0.12); }
.mcp-header-logo { display: flex; align-items: center; padding-left: var(--mcp-esp-3); }
.mcp-header-logo img { width: min(var(--mcp-ancho-logo), 46vw); height: auto; } /* v0.2.4: Header.tsx:129 width 180 */
.mcp-header-titulo {
	flex: 1;
	min-width: 0;
	padding: 0 var(--mcp-esp-2);
	font-size: var(--mcp-texto-header);         /* v0.2.4: Header.tsx:116 fontPixel(28), con la misma escala del RN */
	font-weight: var(--mcp-peso-semi);          /* Header.tsx:117 600 */
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
.mcp-header .mcp-pwa-boton { margin-right: var(--mcp-esp-2); }
@media (max-height: 30em) { .mcp-header { position: static; } } /* v0.2.3: en horizontal el header se va con el contenido */

/* ── Barra de pestañas (TabNav.tsx: flotante, radio 15, píldora activa) ── */
.mcp-tabbar {
	position: fixed;
	left: 50%;
	bottom: calc(var(--mcp-esp-3) + env(safe-area-inset-bottom));
	transform: translateX(-50%);
	width: 90%;                                 /* v0.2.4: TabNav.tsx:35 marginHorizontal 5% */
	max-width: calc(var(--mcp-ancho-app) * 0.9);
	z-index: var(--mcp-z-tabbar);
	display: flex;
	align-items: center;
	justify-content: space-around;              /* v0.2.4: TabNav reparte dos píldoras fijas de 150 px */
	gap: var(--mcp-esp-2);
	height: var(--mcp-alto-tabbar);
	padding: 0 var(--mcp-esp-3);
	background: var(--mcp-tabbar-fondo);
	border-radius: var(--mcp-radio-xl);
	box-shadow: var(--mcp-sombra-flotante);
}
.mcp-tabbar-item {
	flex: 0 1 var(--mcp-ancho-pestana);         /* v0.2.4: TabNav.tsx:56 width 150 */
	height: var(--mcp-alto-pestana);            /* TabNav.tsx:57 height 50 */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--mcp-esp-2);
	border-radius: var(--mcp-radio-xl);
	color: var(--mcp-tabbar-texto);
	text-decoration: none;
	font-size: var(--mcp-texto-base);
	font-weight: var(--mcp-peso-semi);          /* TabNav.tsx: 16 / 600 */
	transition: background-color var(--mcp-transicion), color var(--mcp-transicion);
}
.mcp-tabbar-item.is-activa { background: var(--mcp-tabbar-activa-fondo); color: var(--mcp-tabbar-activa-texto); }

/* ── Modal (MCModal.tsx) con <dialog> ────────────────────────────────── */
.mcp-modal {
	width: calc(100% - 2 * var(--mcp-gutter));
	max-width: min(420px, calc(100% - 2 * var(--mcp-gutter)));
	max-height: calc(100vh - 2 * var(--mcp-gutter));
	max-height: calc(100dvh - 2 * var(--mcp-gutter));  /* v0.2.6: respaldo sin dvh */
	margin: auto;
	padding: 0;
	border: 0;
	border-radius: var(--mcp-radio-lg);         /* MCModal Styles: borderRadius 10 */
	background: var(--mcp-superficie-elevada);
	color: var(--mcp-texto);
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}
/* v0.2.6 (auditoría D2): Safari 15.0-15.3 no soporta <dialog>; sin esta regla el navegador no lo
   oculta y el contenido del modal se dibujaba dentro de la página. */
.mcp-modal:not([open]) { display: none; }
.mcp-modal::backdrop { background: var(--mcp-velo); }
.mcp-modal[open] { animation: mcp-modal-entrar var(--mcp-transicion); }
.mcp-modal-caja { display: flex; flex-direction: column; max-height: inherit; }
.mcp-modal-cabecera { display: flex; align-items: center; justify-content: space-between; gap: var(--mcp-esp-3); padding: var(--mcp-esp-3) var(--mcp-esp-2) 0 var(--mcp-esp-5); }
.mcp-modal-titulo { font-size: var(--mcp-texto-lg); font-weight: var(--mcp-peso-bold); }
.mcp-modal-cerrar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--mcp-tactil-min);
	height: var(--mcp-tactil-min);
	margin-left: auto;
	border: 0;
	border-radius: var(--mcp-radio-pill);
	background: transparent;
	color: var(--mcp-acento-texto);            /* MCModal: ícono cerrar naranja */
	cursor: pointer;
}
.mcp-modal-cuerpo { padding: var(--mcp-esp-3) var(--mcp-esp-5) var(--mcp-esp-5); overflow-y: auto; }
.mcp-modal-acciones { display: flex; gap: var(--mcp-esp-3); padding: 0 var(--mcp-esp-5) var(--mcp-esp-5); }
.mcp-modal-acciones .mcp-boton { flex: 1; }

/* Variante hoja: sube desde abajo en celular (mejora), centrada en pantallas anchas.
   v0.2.3 (D2.4): móvil primero; antes era max-width: 599px. */
.mcp-modal--hoja { width: 100%; max-width: none; margin: auto 0 0; border-radius: var(--mcp-radio-2xl) var(--mcp-radio-2xl) 0 0; padding-bottom: env(safe-area-inset-bottom); }
.mcp-modal--hoja[open] { animation: mcp-hoja-entrar 0.22s ease-out; }
@media (min-width: 37.5em) {
	.mcp-modal--hoja { width: calc(100% - 2 * var(--mcp-gutter)); max-width: min(420px, calc(100% - 2 * var(--mcp-gutter))); margin: auto; border-radius: var(--mcp-radio-lg); padding-bottom: 0; }
	.mcp-modal--hoja[open] { animation: mcp-modal-entrar var(--mcp-transicion); }
}
@keyframes mcp-modal-entrar { from { opacity: 0; transform: scale(0.97); } to { opacity: 1; transform: none; } }
@keyframes mcp-hoja-entrar { from { transform: translateY(100%); } to { transform: none; } }

/* Mientras un modal está abierto, el fondo no se desplaza (clase puesta por mcp-front.js). */
.mcp-sin-scroll { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
	.mcp-boton, .mcp-tabbar-item, .mcp-control, .mcp-casilla-caja { transition: none; }
	.mcp-modal[open], .mcp-modal--hoja[open] { animation: none; }
	.mcp-boton:active:not(:disabled) { transform: none; }
}

/* v0.2.3 (D2.4): alto contraste de Windows. Los estados activos se marcaban solo con fondo de color. */
@media (forced-colors: active) {
	.mcp-tabbar { border: 1px solid CanvasText; }
	.mcp-tabbar-item.is-activa,
	.mcp-alternador-opcion.is-activa { forced-color-adjust: none; background: Highlight; color: HighlightText; }
	.mcp-casilla-caja { forced-color-adjust: none; color: CanvasText; }
	.mcp-casilla-input:checked + label .mcp-casilla-caja { color: Highlight; }
	.mcp-boton { border-color: ButtonText; }
	.mcp-boton--texto { border-color: transparent; }
	.mcp-modal { border: 1px solid CanvasText; }
}

/* ── Muestrario de componentes (solo administradores, QA) ────────────── */
.mcp-muestra { margin-bottom: var(--mcp-esp-6); }
.mcp-muestra-titulo { font-size: var(--mcp-texto-sm); font-weight: var(--mcp-peso-bold); letter-spacing: 0.06em; text-transform: uppercase; color: var(--mcp-texto-secundario); margin-bottom: var(--mcp-esp-3); }
.mcp-muestra-nota { font-size: var(--mcp-texto-sm); color: var(--mcp-texto-secundario); margin-bottom: var(--mcp-esp-5); }
.mcp-muestra-nota a { color: var(--mcp-primario-texto); }
.mcp-muestra-pila { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mcp-esp-3); }
.mcp-muestra-fila { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mcp-esp-3); }
.mcp-muestra-headers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--mcp-esp-3); } /* v0.2.3: sin minmax el título largo ensanchaba la rejilla */
.mcp-muestra-headers .mcp-header { position: static; border-radius: var(--mcp-radio-lg); padding-top: 0; min-height: var(--mcp-alto-header); }