/*=============================================
=   AJUSTES RESPONSIVE (celular / tablet)      =
=============================================*/

/*
Muchos formularios y modales del sistema (crear/editar promoción,
matrícula, ficha de la alumna, registro de nueva alumna, etc.) usan
clases de Bootstrap como "col-3", "col-4", "col-6" SIN una versión
para pantallas chicas (sería "col-md-3", por ejemplo). Bootstrap
aplica esas clases "col-N" a TODOS los tamaños de pantalla por
igual, así que en un celular esos campos quedaban muy angostos
(4 campos por fila en una pantalla de 350px, por ejemplo).

En vez de editar a mano cada una de esas columnas en cada archivo,
estas reglas las apilan (100% de ancho) en celulares, y las dejan
en 2 por fila en tablets. La única excepción es ".col-6" combinado
con ".col-lg-3" (las 4 tarjetas del dashboard), que ya estaba
pensado para verse en 2 columnas en celular — esa no se toca.
*/

@media (max-width: 767.98px) {

	.col-1, .col-2, .col-3, .col-4, .col-5,
	.col-7, .col-8, .col-9, .col-10, .col-11 {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

	.col-6:not(.col-lg-3) {
		flex: 0 0 100% !important;
		max-width: 100% !important;
	}

}

@media (min-width: 768px) and (max-width: 991.98px) {

	.col-1, .col-2, .col-3, .col-4, .col-5,
	.col-7, .col-8, .col-9, .col-10, .col-11 {
		flex: 0 0 50% !important;
		max-width: 50% !important;
	}

}


/*=============================================
=   Tablas simples (sin DataTables)            =
=============================================*/

/* Evita que estas tablas rompan el layout en pantallas chicas —
el scroll horizontal queda dentro de la tabla, no de toda la página. */

.table-responsive {
	-webkit-overflow-scrolling: touch;
}


/*=============================================
=   Accesos rápidos del dashboard              =
=============================================*/

@media (max-width: 575.98px) {

	#buscadorRapidoInput,
	.position-relative.flex-grow-1 {
		max-width: 100% !important;
	}

}