/**
 * DESK by Prana — Fundaciones mobile (Fase 0)
 *
 * @file      mobile.css
 * @created   2026-08-03
 * @info      Correcciones globales para que el sistema sea usable en teléfono.
 *            Se carga en TODAS las páginas desde partials/head.php, DESPUÉS de
 *            style.bundle.css (necesita ganarle al tema Craft).
 *
 * Origen: reports/auditoria_mobile_2026-08-03.md — hallazgos F1, F2, F4 y F12.
 *
 * REGLA: acá va SOLO lo que aplica a todo el sistema. Los ajustes de una
 * pantalla concreta van en el CSS de esa pantalla, no acá.
 */

/* =========================================================================
   F1 — Tipografía: en un teléfono el texto tiene que CRECER, no achicarse.
   El tema Craft baja html/body a 12px por debajo de 768px (style.bundle.css
   línea ~48166). Como casi todo el sistema dimensiona en rem, eso arrastra
   todo hacia abajo: la clase fs-9 (340 usos) terminaba renderizando 9px.
   Subimos la base a 14px y le ponemos piso a las clases chicas.
   ========================================================================= */
@media (max-width: 767.98px) {
	html,
	body {
		font-size: 14px !important;
	}

	/* Piso duro: por debajo de ~11px no se lee en la mano.
	   Con base 14px: fs-9 = 11.2px, fs-8 = 12.0px, fs-7 = 13.3px.
	   fs-10 es la peor de todas y en la Fase 0 se me pasó: Craft la define en
	   0.5rem !important, o sea 7px reales. Se la encontró en producción, en los
	   badges de la tabla de pendientes que usa Aprobaciones. El !important es
	   obligatorio acá: el de Craft no se puede ganar de otra forma. */
	.fs-10 { font-size: 0.72rem !important; }
	.fs-9 { font-size: 0.80rem !important; }
	.fs-8 { font-size: 0.86rem !important; }

	/* Compensación de la inflación de padding.
	   Subir la base 12→14px agranda un 17% TODO lo dimensionado en rem. En una
	   pantalla de 360px, el padding de card (2.25rem = 31.5px por lado) se
	   comía 63px de ancho útil. Lo bajamos: el texto gana, el margen cede. */
	.card .card-body,
	.card .card-footer {
		padding: 1.5rem 1.25rem;
	}

	.card .card-header {
		padding: 0 1.25rem;
		min-height: 60px;
	}

	.table > :not(caption) > * > * {
		padding: 0.75rem 0.5rem;
	}
}

/* =========================================================================
   F2 — Inputs a 16px: Safari y WKWebView (el motor de la futura app iOS)
   hacen ZOOM automático al enfocar cualquier campo con font-size < 16px, y
   NO vuelven al zoom original al salir. El usuario queda con el layout
   descuadrado y tiene que pellizcar para volver.
   Con base 13px (tablet) form-control resolvía 14.3px y form-control-sm
   (130 usos) 12.4px → por eso el corte va en 991.98px, no en 767.98px:
   el iPad también hace zoom.
   16px no es una preferencia de diseño, es un umbral del motor.
   ========================================================================= */
@media (max-width: 991.98px) {
	.form-control,
	.form-control-sm,
	.form-control-lg,
	.form-select,
	.form-select-sm,
	.form-select-lg,
	textarea,
	select,
	input[type="text"],
	input[type="search"],
	input[type="number"],
	input[type="tel"],
	input[type="url"],
	input[type="date"],
	input[type="time"],
	input[type="datetime-local"],
	input[type="month"],
	input[type="email"],
	input[type="password"] {
		font-size: 16px !important;
	}

	/* El editor de updates y cualquier campo enriquecido: mismo umbral. */
	[contenteditable="true"],
	.ql-editor,
	.tox-edit-area__iframe {
		font-size: 16px !important;
	}
}

/* =========================================================================
   F4 — Objetivos táctiles. Mínimo iOS (HIG) 44x44px, Android (Material) 48dp,
   WCAG 2.5.5 44x44. El sistema tiene 29 botones de 25x25px, 3 de 20x20px y
   586 btn-sm (~34px de alto real).
   Se agranda el ÁREA SENSIBLE con un pseudo-elemento, sin tocar el diseño:
   el ícono se sigue viendo igual de chico, la zona que responde al dedo
   pasa a 44px. Se usa ::before porque ::after está tomado por el caret de
   .dropdown-toggle.
   ========================================================================= */
@media (max-width: 991.98px) {
	.btn.btn-icon.btn-sm,
	.btn.w-25px,
	.btn.w-20px,
	.btn.btn-icon.w-30px,
	a.btn-icon.btn-sm {
		position: relative;
	}

	.btn.btn-icon.btn-sm::before,
	.btn.w-25px::before,
	.btn.w-20px::before,
	.btn.btn-icon.w-30px::before,
	a.btn-icon.btn-sm::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 44px;
		height: 44px;
		/* Invisible y sin fondo: solo existe para recibir el toque. */
		background: transparent;
	}

	/* Botones de texto: alto mínimo cómodo sin cambiar el ancho. */
	.btn.btn-sm {
		min-height: 40px;
	}

	/* Filas de tabla y de lista: separación suficiente para no errar el toque. */
	.table > tbody > tr > td {
		min-height: 44px;
	}

	.menu-item .menu-link {
		min-height: 44px;
	}
}

/* =========================================================================
   F6 — Drawers más anchos que la pantalla.
   eventos.php y sala_reuniones.php declaran data-kt-drawer-width
   "{default:'400px'}": en iPhone SE (375px) y en la mayoría de los Android de
   gama media (360px) los botones de acción quedan FUERA de pantalla.
   Se corrige acá y no en cada PHP a propósito: así queda cubierto cualquier
   drawer nuevo que alguien declare con un ancho fijo, sin depender de que se
   acuerde. KTDrawer aplica el ancho por estilo inline, y un !important de
   hoja de estilos le gana.
   ========================================================================= */
@media (max-width: 991.98px) {
	/* Ampliado de 767.98 a 991.98 en la Fase B (tablet): un drawer u offcanvas
	   más ancho que la pantalla es un bug en cualquier tamaño. En tablet los
	   anchos declarados (400-520px) entran igual, así que la regla es inocua
	   ahí, pero cubre cualquier declaración futura más ancha. */
	.drawer {
		max-width: 100vw !important;
	}

	/* Mismo caso con los .offcanvas de Bootstrap: pauta_facturacion.php (480px)
	   y rrhh_organigrama.php (420px) declaran width inline. Esta regla no es
	   .drawer: KTDrawer y Offcanvas son componentes distintos. */
	.offcanvas {
		max-width: 100vw !important;
	}
}

/* =========================================================================
   FASE B — TABLET (768–991.98px). Decisión de diseño: tablet = ESCRITORIO
   CHICO. Mantiene el layout desktop (aside colapsado + tablas de verdad),
   pero hereda la tabbar y los inputs de 16px de los bloques ≤991.98.
   Lo único que faltaba: Craft deja la base en 13px en este rango, así que
   fs-9 rendía ~9.75px y fs-8 ~11px — ilegible en un iPad en la mano.
   Piso ABSOLUTO en px (independiente de la base) solo para este rango; en
   teléfono sigue mandando el bloque de 767.98 con la base 14px.
   ========================================================================= */
@media (min-width: 768px) and (max-width: 991.98px) {
	.fs-9 { font-size: 11px !important; }
	.fs-8 { font-size: 12px !important; }
}

/* fs-10 en ESCRITORIO: Craft la define 0.5rem !important (6,5px reales) y solo
   la corregíamos en teléfono — quedaba ilegible justo en desktop. El piso vale
   en todos los tamaños; esta regla vive fuera de la media query a propósito. */
.fs-10 {
	font-size: 0.72rem !important;
}

/* =========================================================================
   F12 — Safe areas (notch / Dynamic Island / barra de gestos).
   Hoy en el navegador el impacto es menor. Una vez empaquetada la app (§6 de
   la auditoría) se vuelve visible de inmediato: el header fijo queda debajo
   del notch. Requiere viewport-fit=cover en el <meta viewport> — ya aplicado
   en partials/head.php. Sin ese atributo, env() vale 0 y estas reglas no
   hacen nada: son inocuas mientras tanto.
   ========================================================================= */
@media (max-width: 991.98px) {
	.header-tablet-and-mobile-fixed[data-kt-sticky-header="on"] .header {
		height: calc(55px + env(safe-area-inset-top));
		min-height: calc(55px + env(safe-area-inset-top));
		padding-top: env(safe-area-inset-top);
	}

	.header-tablet-and-mobile-fixed[data-kt-sticky-header="on"] .wrapper {
		padding-top: calc(55px + env(safe-area-inset-top));
	}

	/* Landscape con notch: el contenido no puede quedar bajo la muesca. */
	.wrapper,
	.header {
		padding-left: env(safe-area-inset-left);
		padding-right: env(safe-area-inset-right);
	}

	/* El inset inferior lo absorbe la tab bar (ver más abajo), no el contenido. */
	.content {
		padding-bottom: 20px;
	}

	/* Los drawers laterales llegan hasta el borde: mismo tratamiento. */
	.drawer {
		padding-top: env(safe-area-inset-top);
		padding-bottom: env(safe-area-inset-bottom);
	}
}

/* =========================================================================
   F11 — Barra de pestañas inferior (partials/mobile_tabbar.php).
   El aside tiene ~46 destinos en una lista vertical: en teléfono eso es
   navegación por scroll ciego. Los 4 destinos frecuentes pasan a estar a un
   toque; el resto queda detrás de "Más", que abre el aside de siempre.
   Patrón estándar de iOS y Android — es lo que más hace que la aplicación se
   sienta nativa aun siendo web.
   ========================================================================= */
:root {
	/* 0 por defecto: en escritorio no hay tabbar. La media query de abajo la
	   sube a 58px donde la barra existe, así los elementos fijos al pie pueden
	   sumar var(--desk-tabbar-h) sin preguntarse en qué breakpoint están. */
	--desk-tabbar-h: 0px;
}

.desk-tabbar {
	display: none;
}

@media (max-width: 991.98px) {
	:root {
		--desk-tabbar-h: 58px;
	}

	.desk-tabbar {
		display: flex;
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		/* Por encima del contenido y del header fijo (z-index 97), por debajo
		   de los drawers y modales, que deben poder taparla. */
		z-index: 98;
		align-items: stretch;
		justify-content: space-around;
		height: calc(var(--desk-tabbar-h) + env(safe-area-inset-bottom));
		/* El inset es de la barra, no del contenido: así el fondo llega hasta
		   el borde y los íconos quedan arriba del indicador de gestos. */
		padding-bottom: env(safe-area-inset-bottom);
		background-color: var(--bs-body-bg);
		border-top: 1px solid var(--bs-border-color);
		box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.06);
	}

	.desk-tabbar-item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		/* Toda la pestaña es el objetivo táctil: muy por encima de los 44px. */
		min-height: var(--desk-tabbar-h);
		padding: 6px 2px;
		border: 0;
		background: transparent;
		color: var(--bs-gray-600);
		text-decoration: none;
		-webkit-tap-highlight-color: transparent;
	}

	.desk-tabbar-item:hover,
	.desk-tabbar-item:focus {
		color: var(--bs-gray-700);
		text-decoration: none;
	}

	.desk-tabbar-item.active {
		color: var(--bs-primary);
	}

	.desk-tabbar-icon {
		font-size: 1.45rem;
		line-height: 1;
	}

	.desk-tabbar-label {
		font-size: 0.72rem;
		font-weight: 600;
		line-height: 1.1;
		/* Nombres largos no rompen la grilla de 5 columnas. */
		max-width: 100%;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.desk-tabbar-iconwrap {
		position: relative;
		display: inline-flex;
	}

	/* Doble clase a propósito: .badge-* de Metronic trae su propio alto y
	   min-width, y con una sola clase le ganaba en especificidad y el globo
	   terminaba tapando el ícono. */
	.desk-tabbar .desk-tabbar-badge {
		position: absolute;
		top: -5px;
		left: 100%;
		transform: translateX(-55%);
		min-width: 16px;
		width: auto;
		height: 16px;
		padding: 0 4px;
		border-radius: 8px;
		font-size: 9px;
		font-weight: 700;
		line-height: 16px;
		text-align: center;
	}

	/* Reserva del alto: sin esto la barra tapa el final de cada página —
	   justo donde suelen estar los botones de guardar. */
	body {
		padding-bottom: calc(var(--desk-tabbar-h) + env(safe-area-inset-bottom));
	}

	/* El botón "subir" del template no puede quedar debajo de la barra. */
	.scrolltop {
		bottom: calc(var(--desk-tabbar-h) + env(safe-area-inset-bottom) + 10px);
	}
}

/* =========================================================================
   §4.1 — Pantallas que no se optimizan para teléfono.
   Configuración pesada que nadie edita desde la mano: Roles y Permisos,
   Administración (áreas/trabajos/estados/iconos), Logs, Auditoría, Cron Jobs
   y Plantillas de email. Se ocultan del menú en mobile en vez de invertir en
   adaptarlas. Quien entre por URL igual entra: se le avisa con un banner
   (partials/solo_escritorio.php), no se le bloquea.
   ========================================================================= */
@media (max-width: 991.98px) {
	.desk-solo-escritorio {
		display: none !important;
	}
}

/* =========================================================================
   Piso duro para los badges.
   En la tabla de pendientes (que usan el board, Aprobaciones y las vistas por
   área/cliente/usuario) algunos badges caían a 7px reales: son tamaños en `em`
   anidados dentro de contenedores que ya reducen el tamaño, y se multiplican.
   El piso de .fs-8/.fs-9 no los alcanza porque no usan esas clases.
   Medido en producción el 2026-08-05 en aprobaciones.php.
   ========================================================================= */
@media (max-width: 991.98px) {
	.badge {
		font-size: max(10px, 0.75rem);
	}
}

/* =========================================================================
   Avatares dentro de tablas: 50px es mucho en una pantalla de 375px. Bajarlos
   a 36 devuelve 14px de ancho a la columna del nombre, que es la que sirve.
   Se toca el tamaño, no la forma: la foto se sigue viendo.
   ========================================================================= */
@media (max-width: 767.98px) {
	.table .symbol.symbol-50px,
	.table .symbol.symbol-50px > .symbol-label {
		width: 36px !important;
		height: 36px !important;
	}
	/* La <img> se dimensiona aparte en Metronic: si solo se achica el
	   contenedor, la foto queda con el ancho nuevo y el alto viejo, estirada.
	   Pasó en la cabecera del tablero y se corrige acá para cualquier tabla. */
	.table .symbol.symbol-50px img {
		width: 100% !important;
		height: 100% !important;
		object-fit: cover !important;
	}
}

/* =========================================================================
   Botones de la barra de tarjeta (.card-toolbar) — "Filtrar / Exportar /
   Agregar Usuario" y sus equivalentes en las pantallas de administración.

   Medido en producción: 93px de ALTO cada uno. Son botones con ícono `fs-2`
   (21px) más texto de 15,4px y 22px de padding lateral: pensados para una
   barra de escritorio. En 375px los tres no entran en fila, el texto envuelve
   en dos renglones y el ícono queda en el suyo — de ahí los 93px.

   No se les cambia el contenido ni el orden: solo dejan de tener medidas de
   escritorio. Con esto los tres entran en una fila de ~38px.
   ========================================================================= */
@media (max-width: 767.98px) {
	.card-toolbar .btn:not(.btn-icon) {
		padding: 0.5rem 0.7rem !important;
		font-size: 0.82rem !important;
		white-space: nowrap;
	}
	.card-toolbar .btn:not(.btn-icon) > i {
		font-size: 1.05rem !important;
		margin-right: 0.3rem;
	}
	.card-toolbar .btn.me-3 {
		margin-right: 0.4rem !important;
	}
	/* La fila de botones se desplaza si aun así no entran, en vez de apilarse
	   en bloques gigantes. */
	.card-toolbar > .d-flex {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		scrollbar-width: none;
	}
	.card-toolbar > .d-flex::-webkit-scrollbar { display: none; }
}

/* =========================================================================
   El control "+" de DataTables Responsive quedaba ARRIBA del contenido.
   Es un ::before del <td>, y el td es un bloque: el pseudo-elemento se
   apilaba sobre el <div class="d-flex"> que trae el avatar y el nombre. En
   pantalla se leía como un cuadrado vacío suelto, no como un botón de
   desplegar. Poniendo la celda en flex, el "+" se ubica a la izquierda y
   centrado, que es donde se espera.
   ========================================================================= */
@media (max-width: 767.98px) {
	table.dataTable > tbody > tr > td.dtr-control {
		display: flex !important;
		align-items: center;
		gap: 8px;
	}
	table.dataTable > tbody > tr > td.dtr-control > * {
		min-width: 0;
	}
}

/* =========================================================================
   Chips de estado de la cabecera de Pendientes (.header-chips).
   Siete badges de 118 a 174px de ancho envolviendo libremente: quedaban en
   4 filas escalonadas, con una fila de un solo chip largo en el medio. Se
   leía como un amontonamiento, no como una lista.
   Dos columnas iguales los alinea sin ocultar ninguno. Es el mismo criterio
   que se usó para los filtros del tablero.
   ========================================================================= */
@media (max-width: 767.98px) {
	.header-chips {
		display: grid !important;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 8px !important;
	}
	.header-chips > * {
		min-width: 0;
		width: 100%;
		justify-content: space-between;
		/* El texto se corta, el número NO: "Aprobación Interna" es más largo
		   que la columna y se estaba comiendo su propio contador, que es el
		   dato que uno mira. */
		overflow: hidden;
		white-space: nowrap;
	}
	.header-chips > * > .badge {
		flex: 0 0 auto;
	}
	/* Se corta el NOMBRE, nunca el contador. */
	.header-estado-nombre {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		min-width: 0;
	}

	/* Las pestañas de esta cabecera (Dashboard / Estados / Clientes /
	   Historial) envolvían en 2 filas. Misma solución que en el tablero: una
	   sola fila que se arrastra. */
	#area-tabs {
		flex-wrap: nowrap !important;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
	}
	#area-tabs::-webkit-scrollbar { display: none; }
	#area-tabs .nav-item { flex: 0 0 auto; }
	#area-tabs .nav-link { white-space: nowrap; }
}

/* =========================================================================
   Higiene: ninguna pantalla debe producir scroll horizontal del <body>.
   Esto NO reemplaza poner table-responsive donde falta — es la red de
   seguridad para que un desborde puntual no arrastre la página entera.
   ========================================================================= */
@media (max-width: 991.98px) {
	html,
	body {
		overflow-x: hidden;
		max-width: 100%;
	}

	/* Las imágenes nunca fuerzan ancho. */
	img {
		max-width: 100%;
		height: auto;
	}
}

/* =========================================================================
   TABLET DENTRO DE LA APP NATIVA (pedido de Giorgio, 2026-08-27: "tablet,
   el mismo uso que mobile").
   La capa táctil de arriba corta en 991.98px: una tablet VERTICAL ya la
   recibe entera, pero en HORIZONTAL (1024–1366px) caía al layout de
   escritorio con botones de mouse y el zoom automático del iPad al enfocar
   inputs <16px. Este bloque extiende LO TÁCTIL a ese rango únicamente
   cuando la página corre dentro de la app (html.desk-app, clase que pone
   partials/head.php leyendo el puente de Capacitor). El navegador de
   escritorio con ventana angosta NO se ve afectado: ahí la clase no existe.
   El layout general sigue siendo el de escritorio (sidebar visible, sin
   barra de pestañas): en 10" apaisada es lo correcto — solo se agrandan
   los objetivos y los campos.
   ========================================================================= */
@media (min-width: 992px) and (max-width: 1399.98px) {
	html.desk-app .form-control,
	html.desk-app .form-control-sm,
	html.desk-app .form-control-lg,
	html.desk-app .form-select,
	html.desk-app .form-select-sm,
	html.desk-app .form-select-lg,
	html.desk-app textarea,
	html.desk-app select,
	html.desk-app input[type="text"],
	html.desk-app input[type="search"],
	html.desk-app input[type="number"],
	html.desk-app input[type="tel"],
	html.desk-app input[type="url"],
	html.desk-app input[type="date"],
	html.desk-app input[type="time"],
	html.desk-app input[type="datetime-local"],
	html.desk-app input[type="month"],
	html.desk-app input[type="email"],
	html.desk-app input[type="password"] {
		font-size: 16px !important;
	}

	html.desk-app [contenteditable="true"],
	html.desk-app .ql-editor,
	html.desk-app .tox-edit-area__iframe {
		font-size: 16px !important;
	}

	html.desk-app .btn.btn-icon.btn-sm,
	html.desk-app .btn.w-25px,
	html.desk-app .btn.w-20px,
	html.desk-app .btn.btn-icon.w-30px,
	html.desk-app a.btn-icon.btn-sm {
		position: relative;
	}

	html.desk-app .btn.btn-icon.btn-sm::before,
	html.desk-app .btn.w-25px::before,
	html.desk-app .btn.w-20px::before,
	html.desk-app .btn.btn-icon.w-30px::before,
	html.desk-app a.btn-icon.btn-sm::before {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 44px;
		height: 44px;
		background: transparent;
	}

	html.desk-app .btn.btn-sm {
		min-height: 40px;
	}

	html.desk-app .menu-item .menu-link {
		min-height: 44px;
	}
}