/*
 * COEDPI — Adaptación móvil de la app (portal, área personal, login, formularios públicos).
 *
 * REGLA DE ORO: todo el contenido de este fichero vive dentro de un @media con
 * max-width. El escritorio no se ve afectado por construcción, así que se puede
 * usar !important sin riesgo para vencer a los estilos en línea que hay repartidos
 * por el PHP (p. ej. style="padding:6px 10px;font-size:11px" en botones de acción).
 * No copies estas reglas fuera de un @media. La única excepción es el bloque
 * final de anclas, que sí necesita una regla min-width para neutralizar el
 * salto en escritorio; está documentada allí.
 *
 * Breakpoints alineados con coedpi-proto-v1.css: 1050 / 760 / 430.
 * Se carga después de coedpi-proto-bridge.css y solo en páginas de la app
 * (ver coedpi_enqueue_mobile_css en includes/main.php). Nunca en wp-admin.
 */

/* ==========================================================================
   Tablet — el sidebar ya pasa a off-canvas en proto-v1 a este mismo ancho
   ========================================================================== */
@media (max-width: 1050px) {
	.sidebar {
		width: min(300px, 86vw);
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	/* El menú abierto debe quedar por encima del overlay y del header sticky. */
	.sidebar.open {
		box-shadow: 0 0 40px rgba(0, 0, 0, .28);
	}
}

/* ==========================================================================
   Móvil — bloque principal
   ========================================================================== */
@media (max-width: 760px) {

	/* ----------------------------------------------------------------------
	   Campos de formulario.
	   Safari en iOS hace zoom automático al enfocar cualquier campo con fuente
	   menor de 16px, y no revierte el zoom al salir. Es la causa principal de
	   que la app resulte inmanejable en iPhone.
	   ---------------------------------------------------------------------- */
	input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="submit"]):not([type="button"]),
	select,
	textarea {
		font-size: 16px !important;
		min-height: 44px !important;
		max-width: 100%;
	}

	textarea {
		min-height: 96px !important;
		line-height: 1.5;
	}

	/* Casillas y radios: agrandar el objetivo sin tocar el layout. */
	input[type="checkbox"],
	input[type="radio"] {
		width: 20px !important;
		height: 20px !important;
	}

	label {
		font-size: 12px;
	}

	/* ----------------------------------------------------------------------
	   Botones y enlaces de acción — mínimo 44x44px.
	   El !important neutraliza los estilos en línea del PHP.
	   ---------------------------------------------------------------------- */
	.btn,
	a.btn,
	button.btn,
	.btnormal,
	.coedpibutton,
	button[type="submit"],
	input[type="submit"],
	.coedpi-row-actions .btn,
	.dual-actions .btn {
		min-height: 44px !important;
		padding: 11px 18px !important;
		font-size: 13px !important;
		display: inline-flex;
		align-items: center;
		justify-content: center;
	}

	/* Botones con aspecto de enlace: sin padding propio quedan en ~13px de alto. */
	.text-link,
	a.text-link,
	.lost-link,
	button.lost-link {
		font-size: 13px !important;
		display: inline-flex;
		align-items: center;
		padding: 8px 2px !important;
		min-height: 42px !important;
	}

	/* Botones de cierre e iconos cuadrados. */
	.coedpi-modal__close,
	.coedpi-pwd-toggle,
	.coedpi-otp-close,
	.coedpi-notif-btn,
	.menu,
	.coedpi-menu-btn {
		min-width: 44px !important;
		min-height: 44px !important;
	}

	/* ----------------------------------------------------------------------
	   Pestañas y tiras de filtros: deslizables en vez de comprimidas.
	   ---------------------------------------------------------------------- */
	.personal-tabs,
	.entity-tabs,
	.context-filters,
	.service-filters,
	.notification-filters,
	.coedpi-stat-tabs,
	.coedpi-grupo-filter-tabs {
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scroll-snap-type: x proximity;
		scrollbar-width: none;
		flex-wrap: nowrap;
	}

	.personal-tabs::-webkit-scrollbar,
	.entity-tabs::-webkit-scrollbar,
	.context-filters::-webkit-scrollbar,
	.service-filters::-webkit-scrollbar,
	.notification-filters::-webkit-scrollbar,
	.coedpi-stat-tabs::-webkit-scrollbar,
	.coedpi-grupo-filter-tabs::-webkit-scrollbar {
		display: none;
	}

	.personal-tabs a,
	.personal-tabs button,
	.entity-tabs a,
	.entity-tabs button,
	.context-filters a,
	.context-filters button,
	.service-filters a,
	.service-filters button,
	.notification-filters a,
	.notification-filters button,
	.coedpi-stat-tabs button,
	.coedpi-grupo-filter-tabs a,
	.coedpi-grupo-filter-tabs button {
		font-size: 12px !important;
		min-height: 42px !important;
		padding: 10px 14px !important;
		flex: 0 0 auto;
		scroll-snap-align: start;
	}

	/* Conmutadores tipo píldora: reparten el ancho, no se deslizan. */
	.view-switch,
	.segmented {
		width: 100%;
	}

	.view-switch a,
	.view-switch button,
	.segmented a,
	.segmented button {
		flex: 1 1 0;
		font-size: 12px !important;
		min-height: 42px !important;
		padding: 10px 12px !important;
	}

	/* ----------------------------------------------------------------------
	   Cabecera.
	   proto-v1 ya oculta .head-actions .search y .user div en móvil, pero la
	   regla global de inputs del bridge (.coedpi-proto-shell input[type=search],
	   especificidad 0-2-1) vence a ese display:none (0-2-0) y devuelve el buscador
	   a la vista. Con la cabecera en 469px la página entera se ensancha a 546px y
	   el navegador se aleja para encajarla. Aquí se zanja el conflicto.
	   ---------------------------------------------------------------------- */
	.head-actions input.search,
	.head-actions input.coedpi-header-menu-search,
	.app-header input.search,
	.app-header input.coedpi-header-menu-search {
		display: none !important;
	}

	.head-actions {
		min-width: 0;
		gap: 6px;
	}

	.head-actions > * {
		min-width: 0;
	}

	/* Nombre y rol en texto: fuera. El avatar y el selector de perfil se quedan,
	   porque cambiar de perfil es una acción central de la app. */
	.head-user .user div,
	a.user div,
	a.user i {
		display: none !important;
	}

	.coedpi-perfil-switch,
	.coedpi-perfil-switch select {
		min-width: 0 !important;
		max-width: 44vw;
	}

	.bell,
	a.bell,
	.head-user .user,
	a.user {
		min-width: 44px !important;
		min-height: 44px !important;
	}

	/* Los badges de estado (Al corriente, Sin seguro…) suelen ser enlaces a la
	   vista de detalle, así que también son objetivo táctil. */
	a.badge {
		min-height: 40px !important;
		padding: 8px 12px !important;
		display: inline-flex;
		align-items: center;
	}

	/* ----------------------------------------------------------------------
	   Navegación lateral
	   ---------------------------------------------------------------------- */

	/* Acciones del pie del sidebar (área personal, cambiar escuela, salir):
	   9px de fuente y 26px de alto en el prototipo. */
	.context-actions a,
	.context-actions button {
		font-size: 13px !important;
		min-height: 44px !important;
		padding: 10px 8px !important;
		display: flex;
		align-items: center;
	}

	/* Botón de cerrar el menú lateral. */
	[data-coedpi-nav-close] {
		min-width: 44px !important;
		min-height: 44px !important;
	}

	.sidebar nav a.nav-link,
	.sidebar nav button {
		min-height: 48px !important;
	}

	.sidebar nav span {
		font-size: 14px !important;
	}

	.sidebar nav > p {
		font-size: 10px !important;
	}

	/* ----------------------------------------------------------------------
	   Densidad de texto: los 8-11px del prototipo son ilegibles en móvil.
	   ---------------------------------------------------------------------- */
	.data-row span {
		font-size: 13px !important;
	}

	.data-row.data-head {
		font-size: 11px !important;
	}

	.badge,
	.card small {
		font-size: 11px !important;
	}

	table.coedpi-table,
	table.athlete-table,
	table.coedpi-stat-table {
		font-size: 13px;
	}

	/* ----------------------------------------------------------------------
	   Filtros y barras de herramientas: una columna, sin min-width que fuerce
	   dos columnas apretadas antes de envolver.
	   ---------------------------------------------------------------------- */
	.toolbar,
	.athlete-table-filters,
	.athlete-directory-tools {
		flex-direction: column;
		align-items: stretch;
	}

	.toolbar > *,
	.toolbar label,
	.athlete-table-filters > *,
	.athlete-table-filters label,
	.athlete-directory-tools > * {
		flex: 1 1 100% !important;
		min-width: 0 !important;
		width: 100%;
	}

	/* Muchas barras de filtro son un <form> flex suelto, sin clase .toolbar, así
	   que no basta con actuar sobre el contenedor. Se fuerza desde el propio
	   filtro: base del 100% para que cada uno caiga en su fila al envolver. */
	.coedpi-filter-select,
	.field-label {
		min-width: 0 !important;
		flex: 1 1 100% !important;
		width: 100% !important;
		box-sizing: border-box;
	}

	/* Los selects de filtro los fija el bridge en 34px con !important y
	   especificidad 0-2-1, así que la regla genérica de 44px no les llega.
	   Hay que igualar el selector para poder vencerlos. */
	.app-shell .coedpi-filter-select,
	.coedpi-proto-shell .coedpi-filter-select {
		min-height: 46px !important;
		width: 100% !important;
		font-size: 12px !important;
	}

	.app-shell .coedpi-filter-select > select:not([multiple]):not([size]),
	.coedpi-proto-shell .coedpi-filter-select > select:not([multiple]):not([size]),
	.app-shell .toolbar > label > select:not([multiple]):not([size]),
	.coedpi-proto-shell .toolbar > label > select:not([multiple]):not([size]) {
		height: 44px !important;
		min-height: 44px !important;
		line-height: 44px !important;
		font-size: 16px !important;
	}

	/* ----------------------------------------------------------------------
	   Tablas anchas que no se pueden convertir en tarjetas (la de atletas son
	   9 columnas, 1055px). El contenedor ya recorta con overflow-x:auto; aquí
	   se añade inercia táctil y se ancla la columna del nombre para no perder
	   la referencia de qué fila se está leyendo al desplazarse.
	   ---------------------------------------------------------------------- */
	.athlete-table-wrap,
	.coedpi-table-scroll {
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-x: contain;
	}

	.athlete-table-wrap table.athlete-table th:first-child,
	.athlete-table-wrap table.athlete-table td:first-child {
		position: sticky;
		left: 0;
		z-index: 2;
		background: #fff;
		box-shadow: 1px 0 0 var(--line, #e8e2d6);
	}

	/* ----------------------------------------------------------------------
	   Contención horizontal: nada debe empujar el ancho de la página.
	   ---------------------------------------------------------------------- */
	img,
	video,
	iframe {
		max-width: 100%;
		height: auto;
	}

	.page-intro h1 {
		font-size: 22px;
		line-height: 1.25;
	}

	/* ----------------------------------------------------------------------
	   Hojas de inscripción (editor + QR / enlaces por grupo)
	   ---------------------------------------------------------------------- */
	.enrollment-layout {
		grid-template-columns: 1fr !important;
		gap: 14px;
	}

	.coedpi-hoja-atletas-section,
	.coedpi-hoja-sidebar {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	.section-title {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px;
	}

	.section-title h2 {
		font-size: 17px !important;
		line-height: 1.25;
	}

	.section-title p {
		font-size: 13px !important;
	}

	.sheet-fields label {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 8px;
		font-size: 13px !important;
		padding: 10px 0 !important;
	}

	.coedpi-hoja-editor-tabs {
		display: flex !important;
		flex-wrap: wrap;
		gap: 8px !important;
	}

	.coedpi-hoja-editor-tabs a {
		min-height: 42px !important;
		display: inline-flex !important;
		align-items: center;
		padding: 10px 14px !important;
		font-size: 13px !important;
	}

	.coedpi-hoja-action-row,
	.coedpi-hoja-grupo-actions,
	.hoja-share-actions {
		flex-direction: row !important;
		flex-wrap: wrap !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		width: 100%;
		gap: 8px !important;
	}

	.coedpi-hoja-action-row .btn,
	.coedpi-hoja-grupo-actions .btn,
	.hoja-share-actions .btn,
	.hoja-share-actions a.btn {
		width: auto !important;
		flex: 1 1 calc(50% - 8px) !important;
		margin: 0 !important;
		min-width: 0;
		max-width: 100%;
		white-space: nowrap;
	}

	.app-shell .share-url,
	.enrollment-share .share-url,
	.coedpi-hoja-grupos-grid .share-url {
		flex-direction: column !important;
		align-items: stretch !important;
		padding: 10px !important;
	}

	.app-shell .share-url code,
	.enrollment-share .share-url code,
	.coedpi-hoja-grupos-grid .share-url code {
		flex: 1 1 100% !important;
		width: 100% !important;
		font-size: 12px !important;
		line-height: 1.4 !important;
		white-space: normal !important;
		word-break: break-all !important;
		overflow-wrap: anywhere !important;
		overflow: visible !important;
		text-overflow: unset !important;
	}

	.app-shell .share-url .btn,
	.enrollment-share .share-url .btn,
	.coedpi-hoja-grupos-grid .share-url .btn {
		display: none !important;
	}

	.enrollment-share img,
	.enrollment-share.qr-display img,
	.hoja-qr-wrap img {
		max-width: min(320px, 100%) !important;
		width: 100% !important;
		height: auto !important;
	}

	.hoja-send-email {
		max-width: 100% !important;
		margin-left: 0 !important;
		margin-right: 0 !important;
	}

	.coedpi-hoja-send-email-row {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.coedpi-hoja-send-email-row input[type="email"] {
		width: 100% !important;
		min-width: 0 !important;
		flex: 1 1 auto !important;
	}

	.coedpi-hoja-send-email-row .btn {
		width: 100% !important;
	}

	.coedpi-cf-row {
		max-width: 100%;
		box-sizing: border-box;
	}

	.coedpi-cf-row .btn,
	.coedpi-cf-row button {
		width: 100%;
	}

	.coedpi-hoja-grupo-actions .btn {
		width: auto !important;
		flex: 1 1 calc(50% - 8px) !important;
	}

	/* Sidebar off-canvas: sin pointer-events cuando está cerrado (iOS). */
	.sidebar:not(.open) {
		pointer-events: none;
	}

	.sidebar.open {
		pointer-events: auto;
	}

	#coedpi-nav-overlay[hidden] {
		display: none !important;
		pointer-events: none !important;
	}

	body.coedpi-scroll-locked {
		overflow: hidden;
		position: fixed;
		width: 100%;
		left: 0;
		right: 0;
	}

	button,
	a,
	.btn,
	input[type="submit"],
	input[type="button"],
	select,
	[role="button"],
	[role="tab"] {
		touch-action: manipulation;
	}

	/* Atajos del grupo: botones apilados a ancho completo. */
	.group-quick-actions,
	.group-tabs {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	.group-quick-actions .btn,
	.group-tabs .btn {
		width: 100% !important;
		justify-content: center;
	}

	/* Tabla de alumnos del grupo → tarjetas (evita scroll horizontal para llegar a Acciones). */
	.coedpi-grupo-alumnos-scroll {
		overflow-x: visible !important;
	}

	.coedpi-grupo-alumnos-table thead {
		display: none;
	}

	.coedpi-grupo-alumnos-table tbody tr {
		display: block;
		margin: 0 0 12px;
		padding: 12px 14px;
		border: 1px solid var(--line, #e8e2d6);
		border-radius: 12px;
		background: #fff;
	}

	.coedpi-grupo-alumnos-table tbody td {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		gap: 10px;
		padding: 8px 0 !important;
		border: 0 !important;
		max-width: none !important;
		white-space: normal !important;
	}

	.coedpi-grupo-alumnos-table tbody td::before {
		content: attr(data-label);
		flex: 0 0 38%;
		font-size: 10px;
		font-weight: 800;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		color: var(--muted, #8a847a);
		padding-top: 2px;
	}

	.coedpi-grupo-alumnos-table tbody td[data-label="Alumno"] {
		flex-direction: column;
		align-items: flex-start;
		padding-bottom: 10px !important;
		margin-bottom: 4px;
		border-bottom: 1px solid var(--line, #eee) !important;
	}

	.coedpi-grupo-alumnos-table tbody td[data-label="Alumno"]::before {
		display: none;
	}

	.coedpi-grupo-alumnos-table .coedpi-row-actions {
		flex-direction: column;
		align-items: stretch !important;
	}

	.coedpi-grupo-alumnos-table .coedpi-row-actions::before {
		margin-bottom: 4px;
	}

	.coedpi-grupo-alumnos-table .coedpi-row-actions .btn,
	.coedpi-grupo-alumnos-table .coedpi-row-actions button.btn,
	.coedpi-grupo-alumnos-table .coedpi-row-actions a.btn {
		width: 100% !important;
		min-height: 44px !important;
		margin: 0 !important;
		padding: 11px 14px !important;
		font-size: 13px !important;
		justify-content: center;
		white-space: normal;
	}

	.coedpi-grupo-alumnos-table .coedpi-row-actions__form {
		display: block;
		width: 100%;
	}

	.coedpi-grupo-alumnos-table .coedpi-row-actions__form .btn {
		width: 100% !important;
	}
}

/* ==========================================================================
   Táctil — sin hover pegajoso
   ========================================================================== */
@media (hover: none) and (max-width: 1050px) {
	.btn:hover,
	.card:hover,
	.mod-tile:hover,
	.data-row:hover,
	.school-card:hover {
		transform: none;
	}

	.btn:active,
	.card:active,
	.mod-tile:active {
		transform: scale(.985);
	}

	a,
	button,
	.btn,
	summary {
		-webkit-tap-highlight-color: rgba(229, 189, 24, .18);
	}
}

/* ==========================================================================
   Móvil estrecho — rellena los huecos donde el prototipo se queda en 2 columnas
   ========================================================================== */
@media (max-width: 430px) {
	.stat-grid,
	.coedpi-partes-portal .incident-kpis,
	.tutor-kpi-grid,
	.coedpi-stats-kpi-grid {
		grid-template-columns: 1fr !important;
	}

	.card,
	.portal-page-card {
		padding: 14px;
	}

	/* En pantallas muy estrechas los botones de acción ocupan el ancho para
	   no quedar apilados a medias. */
	.dual-actions {
		flex-direction: column;
	}

	.dual-actions .btn {
		width: 100%;
	}
}

/* ==========================================================================
   Aterrizaje en el detalle (#detalle)
   ========================================================================== */

/* En móvil el selector de Acciones rápidas mide más que la pantalla (892px de
   alto frente a 844), así que al elegir una opción la página recargaba y
   aterrizaba arriba del todo: se volvía a ver la misma lista y parecía que no
   había pasado nada. Los enlaces y el buscador apuntan ahora a #detalle; este
   margen deja el bloque justo debajo del header sticky, que mide 64px. */
@media (max-width: 760px) {
	#detalle {
		scroll-margin-top: 76px;
	}

	/* Sin esto el ancla se queda a medias en las acciones de contenido corto:
	   la página no da más de sí y el detalle aterriza a media pantalla, con la
	   cola del selector todavía arriba. Reservando una pantalla de recorrido el
	   destino es siempre el mismo, haya mucho contenido o poco. */
	.quick-action-workspace {
		min-height: calc(100vh - 76px);
	}
}

/* Única excepción a la regla de oro del fichero, y es deliberada. A partir de
   761px el selector es una rejilla y el detalle ya se ve sin hacer scroll, así
   que el salto solo serviría para esconder el selector. Reservando una pantalla
   entera de margen el destino se queda en 0 y el ancla no mueve nada, salvo que
   el detalle caiga de verdad a más de un viewport (ventanas muy bajas), que es
   justo cuando sí interesa saltar. */
@media (min-width: 761px) {
	#detalle {
		scroll-margin-top: 100vh;
	}
}