/*
 * AJUSTES PARA CELULAR Y TABLETA (responsive)
 * Se carga despues de adminlte.min.css en core/templates/__header.tpl.
 * Todo va dentro de media queries: en escritorio (>= 992px) no cambia nada.
 * Complemento: js/mobile.js (botones de las tablas en un menu con el nombre de la fila y buscador de la barra superior).
 */

/* ===================== TABLETA Y CELULAR (< 992px) ===================== */
@media (max-width: 991.98px) {
	/* Pestañas: se desplazan a los lados en lugar de partirse en varias lineas */
	.nav-tabs:not(.flex-column), .card-header-tabs, .nav-pills.flex-row {
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: thin;
	}
	.nav-tabs .nav-item, .nav-pills.flex-row .nav-item {
		flex: 0 0 auto;
	}
	.nav-tabs .nav-link {
		white-space: nowrap;
	}
	/* Pestañas verticales (p. ej. servicios en la cotizacion): pasan a ser una fila que se desplaza */
	.nav.flex-column.nav-tabs {
		flex-direction: row !important;
		flex-wrap: nowrap;
		overflow-x: auto;
		overflow-y: hidden;
		height: auto !important;
		margin-bottom: .75rem;
		border-bottom: 1px solid #dee2e6;
		-webkit-overflow-scrolling: touch;
	}
	.nav.flex-column.nav-tabs .nav-link {
		white-space: nowrap;
		flex: 0 0 auto;
	}
	/* Modales grandes: ocupan casi todo el ancho */
	.modal-xl, .modal-lg {
		max-width: calc(100% - 1rem);
	}
}

/* ===================== CELULAR (< 768px) ===================== */
@media (max-width: 767.98px) {
	/* --- Barra superior --- */
	.main-header.navbar {
		padding-left: .25rem;
		padding-right: .25rem;
	}
	.main-header .navbar-nav .nav-link {
		padding-left: .55rem;
		padding-right: .55rem;
	}
	/* Texto del ambiente (DEVE/TEST) junto al icono: se oculta; el tiempo de sesion se deja */
	.main-header .navbar-nav li:not(#liLastAccess) > .nav-link small {
		display: none;
	}
	#liLastAccess .nav-link small {
		font-size: .7rem;
	}
	/* Buscador: oculto hasta tocar la lupa (js/mobile.js); entonces ocupa todo el ancho bajo la barra */
	#frmGlobalSearch {
		display: none !important;
	}
	body.asm-search-open #frmGlobalSearch {
		display: flex !important;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		margin: 0 !important;
		padding: .5rem;
		background: #fff;
		border-bottom: 1px solid #dee2e6;
		box-shadow: 0 4px 8px rgba(0, 0, 0, .08);
		z-index: 1035;
	}
	body.asm-search-open #frmGlobalSearch .input-group {
		width: 100%;
	}
	body.asm-search-open #frmGlobalSearch .form-control-navbar {
		font-size: 16px;   /* evita el zoom automatico de iOS al enfocar */
	}

	/* --- Encabezado de la pagina --- */
	.content-header {
		padding: 10px .5rem;
	}
	.content-header h1 {
		font-size: 1.4rem;
	}
	.content-header .breadcrumb {
		float: none !important;
		margin-top: .25rem;
		font-size: .85rem;
	}
	.content > .container-fluid, .content-header > .container-fluid {
		padding-left: .5rem;
		padding-right: .5rem;
	}

	/* --- Tarjetas --- */
	.card-header {
		padding: .6rem .75rem;
	}
	.card-body {
		padding: .75rem;
	}
	/* Titulo y herramientas en la misma linea; las herramientas bajan solo si no caben */
	.card-header:not(.p-0):not(.border-bottom-0) {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .25rem;
	}
	.card-header:not(.p-0):not(.border-bottom-0) > .card-title {
		float: none;
		flex: 1 1 auto;
		min-width: 0;
	}
	.card-header:not(.p-0):not(.border-bottom-0) > .card-tools {
		float: none;
		margin: 0 0 0 auto;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: .25rem;
	}
	.card-header:not(.p-0):not(.border-bottom-0)::after {
		display: none;
	}

	/* --- Tablas --- */
	/* Las columnas con texto largo se parten en varias lineas; asi DataTables Responsive deja visibles los datos importantes */
	table.dataTable.nowrap th,
	table.dataTable.nowrap td,
	table.text-nowrap th,
	table.text-nowrap td {
		white-space: normal;
	}
	/* Anchos fijos de columnas (width en %/px de cada pagina): en celular la tabla usa el ancho disponible
	   y DataTables Responsive decide que columnas caben */
	table.dataTable.dt-responsive,
	table.dataTable.dtr-inline,
	table.dataTable.dtr-column {
		width: 100% !important;
	}
	table.dataTable.dt-responsive > thead > tr > th,
	table.dataTable.dtr-inline > thead > tr > th {
		width: auto !important;
	}
	/* Bandeja de notificaciones */
	.mailbox-messages table td,
	.mailbox-messages table th {
		white-space: normal;
	}
	table.dataTable td .asm-actions,
	table.dataTable td .btn-toolbar {
		white-space: nowrap;
	}
	/* Controles de DataTables (mostrar, buscar, paginas) */
	div.dataTables_wrapper div.dataTables_length,
	div.dataTables_wrapper div.dataTables_filter,
	div.dataTables_wrapper div.dataTables_info,
	div.dataTables_wrapper div.dataTables_paginate {
		text-align: center;
	}
	div.dataTables_wrapper div.dataTables_filter input {
		width: 100%;
		max-width: 260px;
		margin-left: .25rem;
	}
	div.dataTables_wrapper div.dataTables_paginate ul.pagination {
		justify-content: center;
		flex-wrap: wrap;
		margin-top: .5rem;
	}
	/* Tablas que no son DataTables: se desplazan a los lados en lugar de salirse de la pantalla */
	.card-body > table.table:not(.dataTable),
	.modal-body > table.table:not(.dataTable),
	.tab-pane > table.table:not(.dataTable) {
		display: block;
		width: 100%;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}
	/* Menu de acciones de cada fila (js/mobile.js): el boton lleva el nombre de la fila; si es largo, puntos suspensivos */
	.asm-actions .dropdown-toggle {
		padding: .3rem .55rem;
		display: inline-flex;
		align-items: center;
		max-width: min(13rem, 52vw);
		text-align: left;
	}
	.asm-actions .dropdown-toggle > i {
		flex: 0 0 auto;
		margin-right: .35rem;
	}
	.asm-actions .dropdown-toggle::after {
		flex: 0 0 auto;
	}
	.asm-actions-label {
		display: block;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.asm-actions-menu .asm-actions-title {
		white-space: normal;
		font-weight: 600;
		color: #343a40;
		max-width: 16rem;
	}
	.asm-actions-menu {
		max-height: 60vh;
		overflow-y: auto;
		min-width: 12rem;
	}
	.asm-actions-menu .dropdown-item {
		padding: .5rem 1rem;
	}
	.asm-actions-menu .dropdown-item i {
		width: 1.25em;
		margin-right: .5rem;
		text-align: center;
	}

	/* --- Formularios --- */
	/* 16px en los campos evita que el celular haga zoom al escribir */
	.form-control, .custom-select, select.form-control, textarea.form-control {
		font-size: 16px;
	}
	label {
		white-space: normal;
	}
	.input-group {
		flex-wrap: wrap;
	}
	.input-group > .form-control,
	.input-group > .custom-select {
		min-width: 0;
	}

	/* --- Botones --- */
	/* Area de toque mas comoda */
	.btn:not(.btn-sm):not(.btn-xs):not(.btn-tool):not(.btn-link) {
		min-height: 36px;
	}
	.btn-tool {
		padding: .35rem .5rem;
	}
	/* Grupos de botones largos: se parten en varias lineas */
	.card-footer .btn-group,
	.modal-footer .btn-group {
		flex-wrap: wrap;
	}
	.card-footer, .modal-footer {
		flex-wrap: wrap;
		gap: .35rem;
	}
	.card-footer .float-right {
		float: none !important;
		display: block;
		margin-top: .35rem;
	}

	/* --- Modales --- */
	.modal-dialog {
		margin: .5rem;
		max-width: calc(100% - 1rem);
	}
	.modal-content {
		max-height: calc(100vh - 1rem);
	}
	.modal-body {
		overflow-y: auto;
		padding: .75rem;
	}
	.modal-header {
		padding: .65rem .75rem;
	}
	.modal-title {
		font-size: 1.1rem;
	}

	/* --- Tablero (cajas pequeñas) --- */
	.small-box .inner h3 {
		font-size: 1.8rem;
	}

	/* --- Varios --- */
	img, video, canvas, iframe {
		max-width: 100%;
	}
	.dropdown-menu {
		max-width: calc(100vw - 1rem);
	}
	pre {
		white-space: pre-wrap;
		word-break: break-word;
	}
}

/* ===================== CELULAR PEQUEÑO (< 400px) ===================== */
@media (max-width: 399.98px) {
	.main-header .navbar-nav .nav-link {
		padding-left: .4rem;
		padding-right: .4rem;
	}
	.content-header h1 {
		font-size: 1.25rem;
	}
}