@font-face {
    font-family: 'Noto sans';
    src: url('../fuentes/NotoSansDisplay/NotoSansDisplay-700.ttf');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Noto sans';
    src: url('../fuentes/NotoSansDisplay/NotoSansDisplay-600.ttf');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Noto sans';
    src: url('../fuentes/NotoSansDisplay/NotoSansDisplay-500.ttf');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Noto sans';
    src: url('../fuentes/NotoSansDisplay/NotoSansDisplay-400.ttf');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Noto sans';
    src: url('../fuentes/NotoSansDisplay/NotoSansDisplay-300.ttf');
    font-weight: 300;
    font-style: normal;
}

:root {

    --bg-gray-1: #F4F4F4;
    --bg-gray-2: #E8E8E8;
    --bg-gray-3: #AFAFAF;
    --bg-gray-4: #6C6C6C;
    --bg-gray-5: #343a40;

    --bg-1: #1492b7;
    --bg-1-hover: #1082a3;
    --bg-2: #27a8ce;

    --color-gray-1: #5D5D5D;
    --color-gray-2: #adadad;
    --color-gray-3: #E8E8E8;
	--color-gray-4: #6C6C6C;
	--color-gray-5: #343a40;

    --color-1: #083842;
    --color-2: #6c757d;

	--color-appministra-1: #D15026;
	--color-appministra-1-hover: #8A3519;
	--color-appministra-1-active: #B14420;

	--color-appministra-2: #272420;
	--color-appministra-2-hover: #1f1a1b;
	--color-appministra-2-active: #1A1716;

	--color-appministra-3: #BA9061;
	--color-appministra-3-hover: #9E7F5A;
	--color-appministra-3-active: #7A664C;

	--color-info-2: #452C94;
	--color-info-2-hover: #3b2370;
	--color-info-2-active: #2c1a4d;


}

.bg-gray-1 {
	background-color: var(--bg-gray-1);
}

.bg-gray-2 {
	background-color: var(--bg-gray-2);
}

.bg-gray-3 {
	background-color: var(--bg-gray-3);
}

.bg-gray-4 {
	background-color: var(--bg-gray-4);
}

.bg-gray-5 {
	background-color: var(--bg-gray-5)!important;/*se coloco important para los horarios consultorios*/
}

.bg-1 {
	background-color: var(--bg-1)!important;/*se coloco important para los horarios consultorios*/
}

.bg-2 {
	background-color: var(--bg-2);
}

.color-gray-1 {
	color: var(--color-gray-1);
}

.color-gray-2 {
	color: var(--color-gray-2);
}

.color-gray-3 {
	color: var(--color-gray-3);
}

.color-gray-4 {
	color: var(--color-gray-4);
}

.color-gray-5 {
	color: var(--color-gray-5);
}

.color-1 {
	color: var(--color-1)!important;
}

.color-2 {
	color: var(--color-2)!important;
}

.color-appministra-1 {
	color: var(--color-appministra-1)!important;
}

.color-appministra-1-hover {
	color: var(--color-appministra-1-hover)!important;
}

.color-appministra-1-active {
	color: var(--color-appministra-1-active)!important;
}

.color-appministra-2 {
	color: var(--color-appministra-2)!important;
}

.color-appministra-2-hover {
	color: var(--color-appministra-2-hover)!important;
}

.color-appministra-2-active {
	color: var(--color-appministra-2-active)!important;
}

.color-appministra-3 {
	color: var(--color-appministra-3)!important;
}

.color-appministra-3-hover {
	color: var(--color-appministra-3-hover)!important;
}

.color-appministra-3-active {
	color: var(--color-appministra-3-active)!important;
}

.bg-appministra-1 {
	background-color: var(--color-appministra-1)!important;
}

.bg-appministra-1-hover {
	background-color: var(--color-appministra-1-hover)!important;
}

.bg-appministra-1-active {
	background-color: var(--color-appministra-1-active)!important;
}

.bg-appministra-2 {
	background-color: var(--color-appministra-2)!important;
}

.bg-appministra-2-hover {
	background-color: var(--color-appministra-2-hover)!important;
}

.bg-appministra-2-active {
	background-color: var(--color-appministra-2-active)!important;
}

.bg-appministra-3 {
	background-color: var(--color-appministra-3)!important;
}

.bg-appministra-3-hover {
	background-color: var(--color-appministra-3-hover)!important;
}

.bg-appministra-3-active {
	background-color: var(--color-appministra-3-active)!important;
}

*:not(i) {
	box-sizing: border-box;
	font-optical-sizing: auto;
	font-style: normal;
	outline: none!important;
	font-family: 'Noto sans';
	color: var(--color-appministra-2);
	/* color: #3D3D3D; */
}

*::selection {
    background-color: var(--color-appministra-1);
	color: white;
}

*::-webkit-scrollbar {
    width: 6px;
    height: 6px;
}
*::-webkit-scrollbar-thumb {
    background: rgba(50, 50, 50, 0.5);
}
*::-webkit-scrollbar-thumb:hover {
    background: rgba(50, 50, 50, 0.8);
}
*::-webkit-scrollbar-track {
    background: rgba(50, 50, 50, 0.1);
}

textarea {
	resize: none;
}

a {
	text-decoration: none!important;
	color: inherit;
} a:hover{
	color:inherit;
}

select {
	color: inherit;
}

.form-check-input {
	margin-top: 0px;
	vertical-align: middle;
	overflow: hidden;
	box-shadow: none!important;
	cursor: pointer;
	background-position: unset;
	width: 1.2em;
	height: 1.2em;
    background-color: white!important;
}

.form-check-input:checked {
    border: 1px solid var(--color-appministra-1)!important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23D15026' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='m6 10 3 3 6-6'/%3e%3c/svg%3e");
}

.form-check-input:checked:hover {
	border: 1px solid var(--color-appministra-1-hover)!important;
}

.form-check-input:focus {
    border-color: var(--color-appministra-1-active)!important;
}

.form-check-input:focus:not(:checked) {
    border-color: #DEE2E6!important;
}

.form-check-input:not(:checked):hover {
    border: 1px solid var(--color-appministra-1-hover)!important;
}

/*:::::::::::::::::::::::::::::::::::::::::::MENU::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

#menu {
	width: 250px;
	height: 100vh;
	position: absolute;
	z-index: 10;
	animation-duration: 0.20s;
	overflow-y: auto;
	background: linear-gradient(200deg in oklch, var(--color-appministra-2-active) 10%, color-mix(in oklch, var(--color-appministra-2) 100%, var(--color-appministra-1-hover) 100%) 100%);
}

.bg-menu-central {
	background: linear-gradient(200deg in oklch, var(--color-appministra-2-active) 0%, color-mix(in oklch, var(--color-appministra-3-active) 70%, var(--color-appministra-2) 30%) 100%) !important;
}

#imagen-empresa-menu {
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background-size: 80%;
	background-repeat: no-repeat;
	background-position: center;
	border: 3px solid var(--color-appministra-3-hover);
}

.modulo-menu {
    background-color: transparent;
    color: #f0f0f0;
}

.modulo-menu.active {
	background-color: rgba(241, 246, 251, 0.2);
	font-weight: bold;
	text-transform: uppercase;
	border-radius: 20px 20px 0px 0px!important;
}

.modulo-menu.active.collapsed {
	border-radius: 20px!important;
}

.modulo-menu::after {
    transform: scale(0.7);
    transition: transform 0.3s;
}

.modulo-menu:not(.collapsed)::after {
    transform: scale(0.7) rotate(-180deg);
}

.modulo-menu::after {
    filter: brightness(0) invert(1);
    transform: scale(0.7);
}

.submodulo-menu.active, .submodulo-menu:hover {
	background-color: rgba(241, 246, 251, 0.1);
	border-radius: 15px!important;
}

.accordion-submodulo-menu {
    background-color: transparent;
    color: #f0f0f0;
}

.accordion-submodulo-menu.active {
    background-color: rgba(241, 246, 251, 0.1);
    border-radius: 0px 0px 20px 20px!important;
}

/* .accordion-submodulo-menu a::before {
    content: "•";
    color: white;
    font-size: 1.2em;
    margin-right: 5px;
    display: inline-block;
    vertical-align: middle;
    margin-top: -2px;
} */

#menu-modulos .accordion-collapse.show {
	border-radius: 0px 0px 20px 20px!important;
}









#aplicacion {
	width: calc(100% - 250px);
	overflow-y: auto;
	height: 100vh;
}
#aplicacion::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
#aplicacion::-webkit-scrollbar-thumb {
    background: rgba(125,125,125,0.4);
}
#aplicacion::-webkit-scrollbar-thumb:hover {
    background: rgba(125,125,125,0.6);
}
#aplicacion::-webkit-scrollbar-track {
    background: rgba(0,0,0,0);
}

#header {
	height: 60px;
}

.pestanas {
	overflow-x: auto;
}

.pestanas .nav {
	border-bottom: 0px!important;
}

.pestanas .nav-link {
	padding: 12px 20px 0px 20px;
	cursor: pointer;
	color: white;
	transition: none;
	font-weight: bold;
}

.pestanas .nav-link:not(.active):hover {
	background-color: var(--bg-gray-2);
	border-radius: 16px 16px 0px 0px;
	color : var(--color-1);
}

.pestanas .nav-link.active {
	background-color: var(--bg-gray-1);
	padding: 14px 30px 0px 30px;
	border-radius: 16px 16px 0px 0px;
	color : var(--color-1);
	border-bottom: 1px solid var(--bg-gray-1);
}

/* Variante "pills" reutilizable para nav de tabs (Bootstrap data-bs-toggle="tab" o "pill"):
   pastillas con borde, fondo blanco e inactivas en color-appministra-2; hover y activo en
   los colores de la plataforma. Aplicar la clase nav-pills-appministra al <ul class="nav">. */
.nav-pills-appministra {
	border-bottom: 0;
	gap: 1rem;
	flex-wrap: wrap;
	justify-content: center;
}

.nav-pills-appministra .nav-link {
	border: 1px solid var(--color-appministra-2);
	border-radius: 0.5rem;
	padding: 0.45rem 1.25rem;
	color: var(--color-appministra-2);
	background-color: #fff;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.nav-pills-appministra .nav-link:hover {
	border-color: var(--color-appministra-1);
	color: var(--color-appministra-1);
}

.nav-pills-appministra .nav-link.active {
	background-color: var(--color-appministra-1-hover);
	border-color: var(--color-appministra-1-hover);
	color: #fff;
}

/* Formulario por pasos (partials/js_formulario_pasos.blade.php): los pills de nav-pills-appministra
   centrados sobre el contenido del modal, uno por paso, con una insignia que lleva el número del
   paso (check verde al completarlo, "!" rojo con errores). El nav abre el formulario y se va hacia
   arriba con el scroll: NO es sticky (pegado, tapaba el contenido que pasaba por debajo). Para moverse
   entre pasos con el formulario bajado quedan ANTERIOR / SIGUIENTE y el contador del pie, que no se
   mueven. NO lleva margen, relleno ni borde en este CSS: el partial le pone `mb-3 mb-lg-4` (la separación
   inferior de las cards), arriba y a los lados lo separa el contenedor del formulario (`px-3 px-lg-4
   pt-3 pt-lg-4`) y cualquier otra separación la decide el CSS de cada vista (el nav es
   `#nav-pasos-<id del formulario>`, p. ej. `#nav-pasos-form-app`). */
.formulario-pasos-nav {
	gap: 0.5rem 1rem;
	background-color: var(--bg-gray-1);
}

.formulario-pasos-nav .nav-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
}

/* El `*:not(i) { color: … }` de la plataforma le da color propio a cada elemento (los span no heredan
   el del pill): sin `color: inherit` el título de un pill activo saldría oscuro sobre el fondo marrón. */
.formulario-pasos-nav .nav-link .paso-titulo {
	color: inherit;
}

.paso-insignia {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 1.35rem;
	height: 1.35rem;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: inherit;
	font-size: 0.65rem;
	line-height: 1;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}

.formulario-pasos-nav .nav-link.active .paso-insignia {
	background-color: #fff;
	border-color: #fff;
	color: var(--color-appministra-1-hover);
}

.formulario-pasos-nav .nav-link.paso-completo .paso-insignia {
	background-color: #198754;
	border-color: #198754;
	color: #fff;
}

.formulario-pasos-nav .nav-link.paso-error {
	border-color: rgb(220, 53, 69);
}

.formulario-pasos-nav .nav-link.paso-error:not(.active) {
	color: rgb(220, 53, 69);
}

.formulario-pasos-nav .nav-link.paso-error .paso-insignia {
	background-color: rgb(220, 53, 69);
	border-color: rgb(220, 53, 69);
	color: #fff;
}

/* Sobre el pill activo (fondo marrón) la insignia de estado lleva un anillo blanco para separarse. */
.formulario-pasos-nav .nav-link.active.paso-completo .paso-insignia,
.formulario-pasos-nav .nav-link.active.paso-error .paso-insignia {
	box-shadow: 0 0 0 2px #fff;
}

/* Un paso que aparece después de elegir una opción (Áreas comunes: Se arrienda = Sí) pulsa tres veces. */
@keyframes paso-nuevo-pulso {
	0%   { box-shadow: 0 0 0 0 rgba(209, 80, 38, .55); }
	100% { box-shadow: 0 0 0 0.7rem rgba(209, 80, 38, 0); }
}

.formulario-pasos-nav .nav-link.paso-nuevo {
	border-color: var(--color-appministra-1);
	animation: paso-nuevo-pulso 1s ease-out 3;
}

@media (prefers-reduced-motion: reduce) {
	.formulario-pasos-nav .nav-link.paso-nuevo {
		animation: none;
	}
}

/* Pie del modal: «Paso X de N · Sigue: …» a la izquierda y ANTERIOR / SIGUIENTE a la derecha; en el último
   paso SIGUIENTE cede su lugar a GUARDAR. El pie no lleva CERRAR (el modal se cierra con la X del encabezado). */
.formulario-pasos-acciones {
	display: flex;
	align-items: center;
	min-width: 0;
	margin-right: auto;
}

.formulario-pasos-contador {
	color: var(--color-gray-1);
}

/* GUARDAR solo aparece en el último paso. La clase la pone el partial en el pie mientras quede un paso
   siguiente; el botón conserva su propio `d-none`, que es del layout (lo quita al abrir y lo pone en 'Ver'). */
.modal-footer.formulario-pasos-sin-guardar .boton-formulario {
	display: none !important;
}

@media (max-width: 767.98px) {
	.formulario-pasos-nav {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		gap: 0.5rem;
	}

	.formulario-pasos-nav .nav-link {
		padding-left: 0.75rem;
		padding-right: 0.75rem;
		white-space: nowrap;
	}

	.formulario-pasos-nav .nav-link:not(.active) .paso-titulo {
		display: none;
	}
}

@media (max-width: 575.98px) {
	.formulario-pasos-acciones {
		width: 100%;
		justify-content: center;
		margin-bottom: 0.25rem;
	}
}

#card-principal {
	min-height: calc(100vh - 60px - 50px - 2.5rem);
}

footer {
	height: 50px;
	font-size: 8px;
}

footer > .row {
	width: calc(100% + 3.5rem);
	margin: 0px -1.75rem 0px -1.75rem;
	border: 1px solid #E8E8E8;
	border-bottom: 0px;
}

.loader {
	position: absolute;
	width: 100%;
	height: 100vh;
	z-index: 9999;
}

.imagen-perfil {
	width: 100px;
	height: 100px;
	border-radius: 50%;
	overflow: hidden;
	cursor: pointer;
	background-position: center bottom;
    background-repeat: no-repeat;
    background-size: cover;
	border: 1px solid var(--color-appministra-3-active);
}

.imagen-perfil > .default-icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
}


/*::::::::::::::::::::::::::::::::::::::::::CAMPOS:::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


.form-control, .form-control-md, .form-control-sm {
	width: 100%;
	font-size: 13px!important;
	outline: none!important;
	box-shadow: none!important;
	color: inherit;
	border-radius: 18px;
	transition: 0.3s;
	height: 32px!important;
}

/* Escalas de alto de los campos: 32px la base, 30px el md y 28px el sm. El radio siempre es la
   mitad del alto para que el campo conserve la forma de pastilla. El bloque md va antes que el sm
   porque comparten especificidad: si un campo trae las dos clases, debe ganar el sm. */
.form-control-md {
	font-size: 12px!important;
	border-radius: 15px;
	height: 30px!important;
}

.form-control-sm {
	font-size: 11px!important;
	border-radius: 14px;
	height: 28px!important;
}

.form-control:focus, .form-control-md:focus, .form-control-sm:focus {
	border: 1px solid var(--color-appministra-1)!important;
	/* color: var(--color-appministra-1)!important; */
	font-weight: 500!important;
}

.form-control::-webkit-input-placeholder, .form-control-md::-webkit-input-placeholder, .form-control-sm::-webkit-input-placeholder {
	color: rgba(100,100,100,0.3) !important;
}

.input-filtro {
	border: 1px solid #efefef!important;
}

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type="number"] {
    -moz-appearance: textfield;
}

.form-label {
	position: relative;
	font-size: 12px;
	padding-bottom: 13px;
	margin-bottom: 9px;
	font-weight: 500;
}

.form-label > label.error {
	width: 100%;
	color: rgb(220, 53, 69);
	font-size: 9px;
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    position: absolute;
    bottom: 0;
}

.form-label > .select2~label.error {
	left: 10px;
	margin-bottom: 1px;
}

.label {
	line-height: 13px;
	display: block;
	cursor: pointer;
}

.label > p {
	display: inline;
	margin-bottom: 0px;
	padding-top: 5px;
}

.trumbowyg-box {
	overflow: hidden;
	border-radius: 18px!important;
}

.trumbowyg-editor-box {
	background-color: white;
}

.trumbowyg-button-pane {
	background-color: var(--color-gray-3)!important;
}

/*:::::::::::::::::::::::::::::::::::::::::COLORES:::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/




/*:::::::::::::::::::::::::::::::::::::::::BOTONES:::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.btn {
	height: 32px;
	font-size: 0.75rem!important;
	border-radius: 16px;
	padding: 1px 15px 0px 15px;
	min-width: 32px;
	font-weight: 600;
	text-transform: uppercase;
}

.btn:not(button) {
	line-height: 28px;
}

.btn-appministra-1 {
	color: white!important;
	background-color: var(--color-appministra-1)!important;
	border: 1px solid var(--color-appministra-1)!important;
}

.btn-appministra-1:active {
	background-color: var(--color-appministra-1-active)!important;
	border: 1px solid var(--color-appministra-1-active)!important;
}

.btn-appministra-1:hover {
	background-color: var(--color-appministra-1-hover)!important;
	border: 1px solid var(--color-appministra-1-hover)!important;
}

.btn-appministra-2 {
	color: white!important;
	background-color: var(--color-appministra-2)!important;
	border: 1px solid var(--color-appministra-2)!important;
}

.btn-appministra-2:active {
	background-color: var(--color-appministra-2-active)!important;
	border: 1px solid var(--color-appministra-2-active)!important;
}

.btn-appministra-2:hover {
	background-color: var(--color-appministra-2-hover)!important;
	border: 1px solid var(--color-appministra-2-hover)!important;
}

.btn-appministra-3 {
	color: white!important;
	background-color: var(--color-appministra-3)!important;
	border: 1px solid var(--color-appministra-3)!important;
}

.btn-appministra-3:active {
	background-color: var(--color-appministra-3-active)!important;
	border: 1px solid var(--color-appministra-3-active)!important;
}

.btn-appministra-3:hover {
	background-color: var(--color-appministra-3-hover)!important;
	border: 1px solid var(--color-appministra-3-hover)!important;
}

.btn-sm {
	height: 26px;
	font-size: 11px;
	border-radius: 13px;
	padding: 1px 15px 0px 15px;
}

.btn-sm:not(button) {
	line-height: 22px;
}

.btn-md {
	height: 30px;
	font-size: 12px!important;
	border-radius: 15px;
	padding: 1px 15px 0px 15px;
}

.btn-md:not(button) {
	line-height: 26px;
}

.alert-estado {
	margin-bottom: 0;
	font-size: 9px;
	line-height: 12px;
	font-weight: 600;
	text-transform: uppercase;
	padding: 2px 10px;
	white-space: nowrap;
	text-align: center;
	display: inline-block;
}


/*:::::::::::::::::::::::::::::::::::::::::ALERTS::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.alert-appministra-1 {
	color: var(--color-appministra-1-hover)!important;
	background-color: color-mix(in srgb, var(--color-appministra-1) 45%, white)!important;
	border-color: color-mix(in srgb, var(--color-appministra-1-active) 60%, white)!important;
}

.alert-appministra-2 {
	color: var(--color-appministra-2-hover)!important;
	background-color: color-mix(in srgb, var(--color-appministra-2) 45%, white)!important;
	border-color: color-mix(in srgb, var(--color-appministra-2-active) 60%, white)!important;
}

.alert-appministra-3 {
	color: var(--color-appministra-3-hover)!important;
	background-color: color-mix(in srgb, var(--color-appministra-3) 45%, white)!important;
	border-color: color-mix(in srgb, var(--color-appministra-3-active) 60%, white)!important;
}

.alert-info-2 {
	color: var(--color-info-2-hover)!important;
	background-color: color-mix(in srgb, var(--color-info-2) 45%, white)!important;
	border-color: color-mix(in srgb, var(--color-info-2-active) 60%, white)!important;
}

/* Aviso «Acción sensible» de los modales de Configuración que piden la contraseña (aprobado el
   2026-10-08): ícono grande y título centrados, en el naranja oscuro de la marca. Va junto a
   `alert alert-warning` y su contenido es `<i class="bi bi-exclamation-triangle">`, un
   `<strong>Acción sensible.</strong>` y la frase. */
.alert.alert-accion-sensible {
	text-align: center;
	padding: 1rem 0.5rem;
}

.alert-accion-sensible > .bi {
	display: block;
	font-size: 2rem;
	line-height: 1;
	margin-bottom: 0.5rem;
	color: var(--color-appministra-1-active);
}

.alert-accion-sensible > strong {
	display: block;
	margin-bottom: 0.25rem;
	color: var(--color-appministra-1-active);
}

/* Variante cuyo énfasis es una frase DENTRO de la oración y no un título (advertencia de Cuotas
   extraordinarias): el <strong> sigue en línea, con el mismo color. */
.alert-accion-sensible.alert-accion-sensible-en-linea > strong {
	display: inline;
	margin-bottom: 0;
}


/*:::::::::::::::::::::::::::::::::::::::::SOMBRAS:::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.shadow-1 {
	box-shadow: rgba(0, 0, 0, 0.05) 0px 10px 30px 0px;
}

/*::::::::::::::::::::::::::::::::::::::::::MODALS:::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.modal-backdrop {
	background-color: transparent;
}

.modal {
	background-color: rgba(26,23,22,0.55);
}

.modal::-webkit-scrollbar {
    width: 0px;
    height: 0px;
}
/*.modal::-webkit-scrollbar-thumb {
    background: rgba(50, 50, 50, 0.5);
}
.modal::-webkit-scrollbar-thumb:hover {
    background: rgba(50, 50, 50, 0.8);
}
.modal::-webkit-scrollbar-track {
    background: rgba(0,0,0,0);
}*/

.modal-dialog {
	width: none;
	max-width: none;
	animation-duration: 0.35s;
}

.modal-header {
	height: 50px;
	border-radius: 1rem 1rem 0px 0px;
}

.modal-content {
	background-color: transparent;
	/*max-height: calc(100vh - 50px);*/
}

.modal-footer {
	border-radius: 0px 0px 1rem 1rem;
}

.modal-body {
	overflow-y: auto;
	/*border: 1px solid red!important;*/
	max-height: calc(100vh - 165px);
}

.modal-body-no-footer {
	max-height: calc(100vh - 3.10rem - 50px);
}

.cerrar-modal {
	width: 50px;
	height: 50px;
	color: rgb(220, 53, 69);
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	padding-top: 17px;
}

.cerrar-modal:hover {
	color: white;
	border-radius: 0px 1rem 0px 0px;
	background-color: rgba(220, 53, 6, 0.7);
}

.col-section {
	overflow-y: auto;
	max-height: calc(100vh - 165px);
}

.col-section-principal {
	overflow-y: auto;
	max-height: calc(100vh - 165px);
}


.accordeon-app .accordion-button:not(.collapsed) {
	color: var(--color-appministra-2);
	background-color: white!important;
	font-weight: bold;
	font-size: 16px!important;
	text-transform: uppercase;
	padding-top: 20px!important;
}






















/*:::::::::::::::::::::::::::::::::::::::DATATABLES::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	table.dataTable.no-footer {
		border-top: 0px;
		border-bottom: 1px solid var(--bg-2);
	}

	.thead-datatables tr th {
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .table thead {
    	font-size: 14px;
    }

    .table th {
    	text-align: left;
    	padding-left: 10px!important;
    	padding-right: 10px!important;
    	font-weight: 700!important;
    	white-space: nowrap;
	    text-overflow: ellipsis;
	    overflow: hidden;
	    font-size: 12px;
    }

    .dataTable thead tr th{
		border-bottom: 0px;
		border-top: 0px!important;
	}

	.dataTable tbody tr td, .dataTable tbody tr td span:not(.alert-estado), .fixed-header-table td {
		border-top:0px;
		color: #36322C;
	}

    .dataTables_scrollBody {
    	min-height: calc(100vh - 270px - 2rem);
    	border: 0px!important;
    }

    .dataTables_scrollBody::-webkit-scrollbar {
	    width: 6px;
	    height: 6px;
	}
	.dataTables_scrollBody::-webkit-scrollbar-thumb {
	    background: rgba(125,125,125,0.3);
	}
	.dataTables_scrollBody::-webkit-scrollbar-thumb:hover {
	    background: rgba(125,125,125,0.5);
	}
	.dataTables_scrollBody::-webkit-scrollbar-track {
	    background: rgba(0,0,0,0);
	}

    .dataTables_filter {
    	float: right;
    }

    .dataTables_filter label input {
    	width: 200px;
    	outline: none!important;
    }

    #contenedor-filtrado, .contenedor-filtrado {
    	width: 50px;
    }

    .dataTables_filter label i {
    	cursor: pointer;
    	margin-left: 5px;
    }

    .dataTables_filter label input::-webkit-input-placeholder{
    	font-weight: 400;
    	color: #E8E8E8!important;
    }

    .dataTables_length{
    	font-size: 10px;
    	font-weight: 500;
    	width: 50px;
    }

    .mostrar-datatables {

		font-size: 10px;
		font-weight: 500;
    }

    .dataTables_length label select{
    	background-color: rgba(0,0,0,0);
    	border: 0px;
    	cursor: pointer;
    	outline: none;
    }

    .dataTables_length label select option{
    	color: rgba(30,30,30,1);
    }

    td, th {
    	line-height: 14px;
    	font-size: 12px;
    	/* font-weight: 500!important; */
    	vertical-align: middle!important;
    	/* border: 0px!important; */
    	border: 0px;
    	/* border-left: 1px solid #E8E8E8!important; */
    }

    .icono-tabla{
    	width: 15px;
    	display: inline-block!important;
    	margin-right: 5px;
    }

    /* .odd{
		background-color: rgba(150,150,140,0.2)!important;
    }.odd:hover{
    	background-color: rgba(150,150,140,0.3)!important;
    }

    .even{
    	background-color: rgba(0,0,0,0)!important;
    }.even:hover{
    	background-color: rgba(150,150,140,0.3)!important;
    } */

    .reportes-datatables i{
    	cursor: pointer;
    	padding:0px 8px 0px 8px;
    }

/*::::::::::::::::Paginador datatables::::::::::::::*/

	.dataTables_info {
		font-size: 12px;
		padding-top: 14px!important;
		font-weight: 600;
		color: var(--color-appministra-1-active);
	}

	.dataTables_paginate {
		font-size: 14px;
		padding: 5px 0px 5px 0px!important;
	}

	.paginate_button.previous, .paginate_button.next {
		border-radius: 18px!important;
		text-align: center;
		height: 36px;
	}

	.paginate_button:not(.previous, .next) {
		width: 36px;
		height: 36px;
		border-radius: 18px!important;
		padding-left: 0px!important;
		padding-right: 0px!important;
		text-align: center;
	}

	.dataTables_paginate span .current {
		background: var(--color-appministra-1)!important;
		border: 1px solid rgba(0,0,0,0)!important;
		color: white!important;
		font-weight: bold;
		outline: none!important;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
		color: white!important;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button.current {
		color: white!important;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
		background: var(--color-appministra-1-hover)!important;
		border: 1px solid rgba(0,0,0,0)!important;
		color: white!important;
		outline: none!important;
	}

	.paginate_button.disabled {
		background-color: #E8E8E8!important;
	}

	.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover{
		background: linear-gradient(to bottom, #dcdcdc 0%, #dcdcdc 100%)!important;
	}

	.dataTables_scrollHead {
		border: 1px solid #E8E8E8!important;
		border: 0px!important;
		background: white!important;
		/* border-radius: 20px 20px 0px 0px !important; */
		box-shadow: inset 0px -1px 0px 0px #E8E8E8;
	}

	.dataTables_scrollBody {
		border: 1px solid #E8E8E8!important;
		border: 0px!important;
		border-top: 0px!important;
		/* border-radius: 0px 0px 20px 20px!important; */
	}

	/* Pie con los totales (tfoot). Va en blanco como la cabecera: al aparecer la barra de
	   desplazamiento vertical, DataTables reserva su ancho a la derecha del pie y ese hueco
	   dejaba ver el fondo de la pagina en la esquina inferior derecha. */
	.dataTables_scrollFoot,
	.dataTables_scrollFootInner,
	.dataTables_scrollFootInner > .table {
		background: white!important;
	}

	.dataTables_scrollFootInner {
		padding-right: 0px!important;
	}

	.dataTables_scrollFoot {
		border: 0px!important;
		/* box-shadow: inset 0px 1px 0px 0px #E8E8E8; */
		border-top: 1.5px solid #E8E8E8!important;
	}

	table.dataTable tfoot td {
		border-top: 0px;
		padding: 8px 10px;
		font-size: 13px;
	}

	/* Mismo padding que la cabecera: DataTables le pone al pie uno propio (10px 18px 6px 18px)
	   que lo deja mas alto y con las cifras corridas frente a su columna. Vertical: el de
	   .table-sm (0.25rem), igual que el th. Horizontal: el de .table th (10px). */
	table.dataTable tfoot th {
		padding: 0.25rem 10px!important;
	}

	/* Con scrollX hay dos tablas: el clon visible de la cabecera y el thead original oculto dentro
	   de .dataTables_scrollBody, que es el que DataTables mide para calcular los anchos. Todo lo
	   que afecte el ANCHO (peso, mayusculas, tamano de fuente, padding horizontal) debe aplicar a
	   ambas, o las columnas se desalinean acumulativamente hacia la derecha. */
	.dataTables_scrollHeadInner > .table > thead > tr > th,
	.dataTables_scrollBody > .table > thead > tr > th {
		font-weight: bold!important;
		text-transform: uppercase;
		font-size: 13px;
	}

	/* No afecta el ancho: solo la cabecera visible. La altura se deja fuera de la regla compartida
	   para no inflar el thead oculto. */
	.dataTables_scrollHeadInner > .table > thead > tr > th {
		box-shadow: inset 0px -1px 0px 0px #E8E8E8;
		height: 20px!important;
	}

	.dataTables_scroll {
		overflow: hidden;
		border-bottom: 1px solid #E8E8E8;
		/* border-radius: 20px; */
	}

	/*:::::::::::::::::::::::COLUMNAS FIJAS AL DESPLAZAR (DATATABLES)::::::::::::::::::::::*/

	/* Congelan una columna cuando la tabla se desplaza horizontalmente. Se declaran con una clase
	   en la etiqueta <table> de la vista y son combinables:

	       fijar-primera   la columna 1 queda pegada a la izquierda
	       fijar-segunda   la columna 2 queda pegada a la izquierda
	       fijar-ultima    la ultima columna (normalmente Acciones) queda pegada a la derecha

	   Con scrollX, DataTables clona la tabla para pintar la cabecera, asi que la clase viaja a las
	   dos y la columna queda fija tanto en el thead visible como en el cuerpo.

	   El fondo tiene que ser opaco o el contenido se ve por debajo al desplazar; se usa
	   --bs-body-bg para que acompane al tema claro/oscuro. El rayado y el hover se conservan
	   porque Bootstrap los pinta con un box-shadow interior sobre cada celda, no con background. */
	.fijar-primera > thead > tr > th:nth-child(1),
	.fijar-primera > tbody > tr > td:nth-child(1),
	.fijar-segunda > thead > tr > th:nth-child(2),
	.fijar-segunda > tbody > tr > td:nth-child(2),
	.fijar-ultima > thead > tr > th:last-child,
	.fijar-ultima > tbody > tr > td:last-child {
		position: sticky;
		background-color: var(--bs-body-bg);
		z-index: 2;
	}

	.fijar-primera > thead > tr > th:nth-child(1),
	.fijar-primera > tbody > tr > td:nth-child(1),
	.fijar-segunda > thead > tr > th:nth-child(2),
	.fijar-segunda > tbody > tr > td:nth-child(2) {
		left: 0;
	}

	.fijar-ultima > thead > tr > th:last-child,
	.fijar-ultima > tbody > tr > td:last-child {
		right: 0;
	}

	/* Separador con el contenido que pasa por debajo. Se pinta con un pseudo-elemento y no con un
	   borde ni con un box-shadow, por descarte:

	     - Un borde reserva 1px aunque este transparente, y por ahi se ve el fondo de la tabla: se
	       nota como una linea blanca entre columnas sobre las filas rayadas. Quitar y poner el
	       borde tampoco sirve, porque cambia el ancho de la celda y descuadra la cabecera.
	     - Un box-shadow pisaria el que Bootstrap usa para el rayado y el hover de la fila.

	   Al ser absoluto no ocupa espacio, asi que aparecer y desaparecer no mueve nada. Las celdas
	   fijas son position: sticky, que ya sirve de referencia para posicionarlo. */
	.fijar-primera:not(.fijar-segunda) > thead > tr > th:nth-child(1)::after,
	.fijar-primera:not(.fijar-segunda) > tbody > tr > td:nth-child(1)::after,
	.fijar-segunda > thead > tr > th:nth-child(2)::after,
	.fijar-segunda > tbody > tr > td:nth-child(2)::after,
	.fijar-ultima > thead > tr > th:last-child::after,
	.fijar-ultima > tbody > tr > td:last-child::after {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		width: 1px;
		background-color: #E8E8E8;
		opacity: 0;
		transition: opacity 0.15s ease;
	}

	.fijar-primera:not(.fijar-segunda) > thead > tr > th:nth-child(1)::after,
	.fijar-primera:not(.fijar-segunda) > tbody > tr > td:nth-child(1)::after,
	.fijar-segunda > thead > tr > th:nth-child(2)::after,
	.fijar-segunda > tbody > tr > td:nth-child(2)::after {
		right: 0;
	}

	.fijar-ultima > thead > tr > th:last-child::after,
	.fijar-ultima > tbody > tr > td:last-child::after {
		left: 0;
	}

	/* Solo se ve cuando queda contenido oculto de ese lado, que es cuando la columna tapa algo.
	   Sin desplazamiento (o ya al tope de ese lado) el separador seria una linea suelta sin
	   sentido. Las clases las pone marcarDesplazamientoColumnasFijas() en app.blade.php sobre un
	   ancestro comun, para que la cabecera clonada y el cuerpo cambien a la vez. */
	.fijas-izquierda .fijar-primera:not(.fijar-segunda) > thead > tr > th:nth-child(1)::after,
	.fijas-izquierda .fijar-primera:not(.fijar-segunda) > tbody > tr > td:nth-child(1)::after,
	.fijas-izquierda .fijar-segunda > thead > tr > th:nth-child(2)::after,
	.fijas-izquierda .fijar-segunda > tbody > tr > td:nth-child(2)::after,
	.fijas-derecha .fijar-ultima > thead > tr > th:last-child::after,
	.fijas-derecha .fijar-ultima > tbody > tr > td:last-child::after {
		opacity: 1;
	}

	.dt-buttons {
		display: none;
	}

	/* Sin la extension Select de DataTables (desactivada en layouts/app.blade.php) nada anade
	   la clase .selected, asi que esta regla no pinta nada hoy. Se conserva por si se reactiva. */
	tr.selected > td {
		background-color: var(--bg-2)!important;
		color: white;
	}

	.table tr th:first-child, .table tr td:first-child {
	    border-left: 0px!important;
	}

	.select-info {
		display: none;
	}

	/*TABLAS NORMALES*/

	.no-datatables {
		/* border-radius: 20px!important; */
		border-radius: 0.5rem;
	}

	.no-datatables th {
		padding: 10px 10px!important;
	}

	.no-datatables td {
		padding: 8px 10px;
	}

	.no-datatables-sm td {
		padding: 0px 5px!important;
		font-size: 10px!important;
	}

	.table.no-datatables th:first-child {
		border-radius: 20px 0px 0px 0px!important;
		border: 1px solid #E8E8E8!important;
	}

	.table.no-datatables th:last-child {
		border-radius: 0px 20px 0px 0px!important;
	}

	.contenedor-table-responsive {
		overflow: hidden;
		border-radius: 0.5rem;
	}

	/* Tabla .table-bordered dentro de un contenedor que ya tiene su propio borde
	   (.table-responsive.border): Bootstrap le pone borde arriba y abajo a cada fila, y el de
	   la primera y el de la última se sumaban al del contenedor, viéndose doble. Se quitan solo
	   esos dos; las líneas entre filas no cambian. Con tfoot visible, la línea que lo separa del
	   tbody la sigue dando el borde superior de su fila. */
	.table-responsive.border > .table-bordered > thead > tr:first-child,
	.table-responsive.border > .table-bordered > tbody:first-child > tr:first-child {
		border-top-width: 0;
	}

	.table-responsive.border > .table-bordered > tbody > tr:last-child,
	.table-responsive.border > .table-bordered > tfoot > tr:last-child {
		border-bottom-width: 0;
	}

	/*TABLAS FIJAS*/

	.fixed-header-table {
		position: relative;
		overflow: auto;
		max-height: calc(100vh - 140px)
	}

	.fixed-header-table-md {
		max-height: calc(100vh - 300px)
	}

	.fixed-header-table-sm {
		max-height: calc(100vh - 400px)
	}
	
	.fixed-header-table thead th {
		position: sticky;
		top: 0;
		background-color: white;
		z-index: 8;
		text-transform: uppercase;
		font-weight: 700;
	}
	
	.fixed-column {
		position: sticky;
		left: 0;
		background-color: white;
		z-index: 5;
	}
	
	.fixed-header-table .fixed-column:first-child {
		z-index: 7;
	}

	.fixed-header-table thead .fixed-column:first-child {
		z-index: 9!important;
	}


/*::::::::::::::::::::::::::::::::::::::::SELECT 2:::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

	.select2, .select2-container, .select2-container--default, .select2-container--below, .select2-container--open {
		border-radius: 0px 0px 5px 0px;
		display: block!important;
	}

	.select2-selection__rendered {
	    /* background-color: rgba(220,220,180,0); */
	    border:0px;
	    height: 32px;
	    padding: 0px;
	}
	.select2-container--default, .select2-selection--single{
		background-color: white !important;
		border-radius: 18px !important;
		border: 1px solid var(--bs-border-color)!important;
		box-sizing: border-box !important;
		box-shadow: 0px 0px 8px rgba(200, 200, 200, 0.1) !important;
	    height: 32px;
	    padding: 0px;
	}

	.select2-multiple ~ .select2-container.select2-container--default {
		height: auto!important;
		
	}

	.select2-multiple ~ .select2-container.select2-container--default .select2-selection.select2-selection--multiple {
		padding-bottom: 10px;
    	padding-right: 7px;
	}

	.select2-container--disabled {
		background-color: #e9ecef!important;
	}

	.select2-container--open {
		border-radius: 18px 18px 0px 0px !important;
	}
	.label-campo-filtro > .select2-container--default, .label-campo-filtro > .campo {
		height: 30px!important;
		margin-top: -4px;
	}
	.select2-selection, .select2-selection--single, .select2-selection__rendered{
	    border: 0px!important;
	    background-color: transparent!important;
	    height: 33px!important;
	    line-height: 25px!important;
	    font-weight: 400!important;
	    font-size: 13px!important;
	    /* color: var(--color-appministra-2)!important; */
	    padding-top: 1px;
		padding-left: 4px;
	}

	.select2-selection__choice {
		background-color: var(--color-appministra-2)!important;
		border-color: var(--color-appministra-2)!important;
		border-radius: 16px!important;
		height: 32px!important;
		margin-left: 10px!important;
    	margin-top: 11px!important;
    	padding-left: 15px!important;
    	padding-right: 15px!important;
	}

	.select2-selection__choice__remove {
		background-color: rgb(220, 53, 69)!important;
		border-right: 0px!important;
		height: 32px!important;
		top: -1px!important;
		padding: 0px 6px 0px 4px!important;
		left: auto!important;
		right: 0px!important;
		border-radius: 0px!important;
		display: none;
	}

	.select2-selection__choice:hover .select2-selection__choice__remove {
		display: block;
	}


	.select2-multiple ~ .select2-container.select2-container--default .select2-search__field {
		border: 1px solid var(--bs-border-color)!important;
		width: calc(100% - 13px)!important;
		height: 32px!important;
		margin-top: 10px!important;
    	margin-left: 10px!important;
    	padding-top: 3px!important;
	}

	.select2-multiple ~ .select2-container.select2-container--default .select2-search__field:focus {
		border: 1px solid var(--color-appministra-2)!important;
	}

	.select2-selection__choice__remove span {
		color: white!important;
		font-size: 16px;
	}

	.select2-selection__choice__display {
		height: 31px!important;
		padding-top: 3px!important;
		display: inline-block!important;
    	color: white!important;
    	margin-left: 13px!important;
	}

	.select2-container--default .select2-selection--multiple .select2-selection__choice::before {
	    content: '';
	    position: absolute;
	    left: 16px;
	    top: 13px;
	    transform: translateY(-50%) rotate(45deg);
	    width: 5px;
	    height: 7.5px;
	    border-right: 2.3px solid white;
	    border-bottom: 2.3px solid white;
	}

	.select2-selection__arrow {
	    height: 30px!important;
	}

	/* Chevron en lugar del triangulo relleno que trae Select2 por defecto: se arma con un cuadrado
	   del que solo se pintan dos bordes y se gira 45 grados. Todas las medidas llevan !important
	   porque las reglas del plugin (que lo dibujan como triangulo con border-width) tienen mas
	   especificidad. Se centra con translate en vez de margenes calculados a mano. */
	.select2-selection__arrow b {
	    width: 7px!important;
	    height: 7px!important;
	    margin: 0!important;
	    border: solid var(--color-appministra-2)!important;
	    border-width: 0 1.5px 1.5px 0!important;
	    border-radius: 1px;
	    transform: translate(-50%, -65%) rotate(45deg);
	    transition: transform 0.15s ease;
	}

	/* Desplegado: apunta hacia arriba. El desfase vertical distinto compensa que el vertice del
	   chevron pasa de estar abajo (cerrado) a estar arriba (abierto), para que se vea centrado
	   en los dos estados. */
	.select2-container--open .select2-selection__arrow b {
	    transform: translate(-50%, -35%) rotate(-135deg);
	}
	.select2-dropdown, .select2-dropdown--below {
		overflow: hidden;
	}
	.select2-results__option, .select2-results__option--selectable, .select2-results__option--selected{
	    background-color: white!important;
	    color: var(--color-appministra-2)!important;
	}
	.select2-search__field, .select2-search__field:focus {
	    font-size: 12px;
	    border-color: var(--color-appministra-2)!important;
	    border-radius: 15px;
	    padding-left: 8px!important;
	    padding-top: 5px!important;
	    height: 32px;
	}

	.select2-results__option, .select2-results__message{
	    color: var(--color-appministra-2)!important;
	    /* font-weight: 500!important; */
	    font-size: 12px!important;
	}
	.select2-results__option--selected{
	    background-color: var(--color-appministra-2)!important;
	    color: white!important;
	}

	.select2-dropdown, .select2-dropdown--below{
		border-top:0px!important;
		margin-left: -1px!important;
		margin-top: -1px!important;
		background-color: white!important;
	    border: 1px solid var(--bs-border-color)!important;
		border-radius: 0px 0px 18px 18px !important;
	    box-shadow: 0px 0px 8px rgba(200, 200, 200, 0.2) !important;
	}

	.select2-dropdown--above {
		border-radius: 18px 18px 0px 0px !important;
	}

	.select2-container--above.select2-container--open {
		border-radius: 0px 0px 18px 18px !important;
	}

	.select2-results__options {
		max-height: 240px!important;
	}

	.select2-results__options::-webkit-scrollbar {
	    width: 6px;
	    height: 6px;
	}

	.select2-results__options::-webkit-scrollbar-thumb {
	    background: rgba(125,125,125,0.3);
	}

	.select2-results__options::-webkit-scrollbar-thumb:hover {
	    background: rgba(125,125,125,0.5);
	}

	.select2-results__options::-webkit-scrollbar-track {
	    background: rgba(0,0,0,0);
	}

	.select2-results__option:hover, .select2-results__option--selectable:hover, .select2-results__option--selected:hover{
	    background-color: var(--color-appministra-2)!important;
	    color: white!important;
	}

	.label-campo-select2-multiple > .select2-container--default {
		height: auto!important;
	}

	.select2-selection--multiple {
		height: auto!important;
	}

	/* Select2 reemplaza el <select> por un contenedor hermano, asi que las escalas md y sm se le
	   trasladan por adyacencia. El contenedor toma el mismo alto del campo y las partes internas
	   toman el alto del area de contenido (alto del campo menos los 2px de borde). El line-height
	   igual a ese alto centra el texto y anula el line-height/padding del bloque general.
	   El radio no se toca: el navegador recorta los 18px del contenedor al maximo que cabe en el
	   alto, con lo que la pastilla queda exacta en las tres escalas y el estado abierto conserva
	   sus esquinas inferiores rectas. */
	.form-control-md + .select2-container {
		height: 30px!important;
		font-size: 12px!important;
	}

	.form-control-md + .select2-container .select2-selection--single,
	.form-control-md + .select2-container .select2-selection__rendered,
	.form-control-md + .select2-container .select2-selection__arrow {
		height: 28px!important;
		line-height: 28px!important;
		font-size: 12px!important;
		padding-top: 0px!important;
	}

	.form-control-sm + .select2-container {
		height: 28px!important;
		font-size: 11px!important;
	}

	.form-control-sm + .select2-container .select2-selection--single,
	.form-control-sm + .select2-container .select2-selection__rendered,
	.form-control-sm + .select2-container .select2-selection__arrow {
		height: 26px!important;
		line-height: 26px!important;
		font-size: 11px!important;
		padding-top: 0px!important;
	}

	th >.form-control-sm + .select2-container .select2-selection__rendered {
		color: rgba(100,100,100,0.4) !important;
	}

	th >.form-control-sm.select-filtro + .select2-container {
		border: 1px solid #efefef!important;
	}

	.select2.rounded-end-0 + .select2-container {
		border-top-right-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	.select2.rounded-start-0 + .select2-container {
		border-top-left-radius: 0 !important;
		border-bottom-left-radius: 0 !important;
	}

	.rounded-start-0 ~ .select2-container--default {
		border-bottom-left-radius: 0 !important;
    	border-top-left-radius: 0 !important;
	}

	.rounded-end-0 ~ .select2-container--default {
		border-top-right-radius: 0 !important;
    	border-bottom-right-radius: 0 !important;
	}

	.select2.border-end-0 + .select2-container {
		border-right: 0 !important;
	}

	.select2.border-start-0 + .select2-container {
		border-left: 0 !important;
	}

	.border-start-0 ~ .select2-container--default {
		border-left: 0 !important;
	}

	.border-end-0 ~ .select2-container--default {
		border-right: 0 !important;
	}


/*:::::::::::::::::::::::::::::::::CLASES PERSONALIZADAS:::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

.imagen-tabla {
	height: 50px;
	background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
}

.pointer {
	cursor: pointer;
}

.nowrap {
	white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
}

.h7 {
	font-size: 0.75rem!important;
	line-height: 1.2;
}

/*:::::::::::::::::::::::::::MEDIDOR DE FUERZA DE CONTRASEÑA::::::::::::::::::::::::::::::*/

.fuerza-contrasena {
	font-size: 0.75rem;
	margin-top: 6px;
}

.fuerza-contrasena-medidor {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	padding: 6px 0 4px;
}

.fuerza-contrasena-icono {
	font-size: 40px;
	line-height: 1;
	transition: color 0.15s ease;
}

.fuerza-contrasena-nivel {
	display: block;
	margin-top: 4px;
	font-size: 0.8rem;
	font-weight: 600;
	transition: color 0.15s ease;
}

.fuerza-contrasena-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 0.7rem;
	margin: 2px 10px 2px 0;
	transition: color 0.15s ease;
}

.fuerza-contrasena-item i {
	font-size: 0.75rem;
}

.h8 {
	font-size: 0.6rem!important;
	line-height: 1.2;
}

.w-240px {
	width: 240px!important;
	max-width: 240px!important;
	min-width: 240px!important;
}

.w-200px {
	width: 200px!important;
	max-width: 200px!important;
	min-width: 200px!important;
}

.w-180px {
	width: 180px!important;
	max-width: 180px!important;
	min-width: 180px!important;
}

.w-160px {
	width: 160px!important;
	max-width: 160px!important;
	min-width: 160px!important;
}

.w-140px {
	width: 140px!important;
	max-width: 140px!important;
	min-width: 140px!important;
}

.w-120px {
	width: 120px!important;
	max-width: 120px!important;
	min-width: 120px!important;
}

.w-110px {
	width: 110px!important;
	max-width: 110px!important;
	min-width: 110px!important;
}

.w-100px {
	width: 100px!important;
	max-width: 100px!important;
	min-width: 100px!important;
}

.w-90px {
	width: 90px!important;
	max-width: 90px!important;
	min-width: 90px!important;
}

.w-80px {
	width: 80px!important;
	max-width: 80px!important;
	min-width: 80px!important;
}

.w-70px {
	width: 70px!important;
	max-width: 70px!important;
	min-width: 70px!important;
}

.w-60px {
	width: 60px!important;
	max-width: 60px!important;
	min-width: 60px!important;
}

.w-50px {
	width: 50px!important;
	max-width: 50px!important;
	min-width: 50px!important;
}

.w-40px {
	width: 40px!important;
	max-width: 40px!important;
	min-width: 40px!important;
}

.w-36px {
	width: 36px!important;
	max-width: 36px!important;
	min-width: 36px!important;
}

/* Separacion vertical de una barra de filtros cuando envuelve. row-gap y NO los gy-* de
   Bootstrap: gy-* trabaja con margenes (margin-top negativo en el .row, positivo en cada
   columna) y eso subiria la barra entera respecto del buscador con el que comparte fila en
   el layout, tambien en escritorio, donde no hay ninguna envoltura que separar. row-gap solo
   actua ENTRE lineas de flex: si la barra cabe en una linea no hace nada. Bootstrap 5.3.3 no
   declara row-gap en .row (solo --bs-gutter-y), asi que no se pisan.
   .75rem es el punto medio entre los mb-2 y mb-3 que cada vista venia parchando a mano de
   forma distinta, y evita que varios filtros apilados ocupen media pantalla. */
.fila-filtros {
	row-gap: .75rem;
}

/* Rango de fechas (desde / hasta) de una barra de filtros: dos inputs de fecha, uno sobre otro,
   dentro de UN solo campo. Reemplazo a dos columnas de 120px pegadas a mano
   (rounded-end-0/border-end-0 + rounded-start-0) que se desarmaban al envolver en movil: aqui
   las dos fechas nunca se separan ni quedan con una esquina recta suelta.
   El contenedor es el campo (32px de alto como cualquier .form-control, con su borde y su
   pastilla) y los inputs van sin borde ni fondo, 15px cada uno (32 - 2px de borde = 30), asi que
   no hay linea entre ellos. Para que la fecha quepa en 15px se reduce la fuente y el icono del
   calendario. El foco se pinta en el contenedor (:focus-within), no en cada input. El ancho lo
   da la columna que lo aloja (w-110px) y el aire lateral de cada input, su pe-2. */
.filtro-fechas-apiladas {
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 32px;
	overflow: hidden;
	border: 1px solid var(--bs-border-color);
	border-radius: 18px;
	background-color: var(--bs-body-bg);
	transition: 0.3s;
}

.filtro-fechas-apiladas:focus-within {
	border-color: var(--color-appministra-1);
}

.filtro-fechas-apiladas .form-control {
	flex: 0 0 15px;
	height: 15px!important;
	padding-top: 0;
	padding-bottom: 0;
	border: 0;
	border-radius: 0;
	background-color: transparent;
	font-size: 10px!important;
	line-height: 15px;
}

/* El foco ya lo muestra el contenedor: sin el borde de color que .form-control:focus pone. */
.filtro-fechas-apiladas .form-control:focus {
	border: 0!important;
}

.filtro-fechas-apiladas .form-control::-webkit-calendar-picker-indicator {
	width: 10px;
	height: 10px;
	margin: 0;
	padding: 0;
	background-size: 10px;
}

/* Grupo de piezas (select + input + boton) que solo se lee pegado cuando cabe en una linea,
   como el buscador de visitante por documento. Al apilarse en movil los rounded-*-0 dejaban
   esquinas rectas sueltas sin vecino al lado, y los px-0 las dejaban ademas sin aire entre
   si: por debajo de LG se les devuelve el radio de pastilla y el gutter normal de columna.
   El select2 se redondea por su selector hermano porque el plugin esconde el <select> y
   pinta su propio contenedor al lado. */
@media (max-width: 991.98px) {
	.grupo-pegado-lg > [class*="px-0"],
	.grupo-pegado-lg > [class*="pe-0"],
	.grupo-pegado-lg > [class*="ps-0"] {
		padding-right: calc(var(--bs-gutter-x, 1.5rem) * .5)!important;
		padding-left: calc(var(--bs-gutter-x, 1.5rem) * .5)!important;
	}
	.grupo-pegado-lg .rounded-0,
	.grupo-pegado-lg .rounded-end-0,
	.grupo-pegado-lg .rounded-start-0 {
		border-radius: 18px!important;
	}
	.grupo-pegado-lg .select2.rounded-end-0 + .select2-container,
	.grupo-pegado-lg .select2.rounded-start-0 + .select2-container {
		border-radius: 18px!important;
	}
}

.tooltip, .tooltip-inner {
	border-radius: 20px!important;
	font-size: 11px!important;
}

/* Tooltip de AYUDA de un campo: contenido HTML (titulo + vinetas + nota), no una etiqueta
   suelta. Los 200px por defecto de Bootstrap lo dejarian en una columna altisima, y centrado
   se lee peor que alineado a la izquierda. Los colores se fijan porque el contenido, al ser
   HTML, hereda estilos del sistema y quedaba sin contraste sobre el fondo oscuro del tooltip.
   Todo va bajo data-bs-custom-class, asi que no afecta a los tooltips del resto del sistema. */
.tooltip-ayuda .tooltip-inner {
	max-width: 320px;
	padding: 10px 14px;
	text-align: left;
}

.tooltip-ayuda .tooltip-inner,
.tooltip-ayuda .tooltip-inner * {
	color: #fff !important;
}

.tooltip-ayuda .tooltip-inner strong {
	color: var(--color-appministra-3) !important;
}

.tooltip-ayuda .tooltip-inner .titulo-tooltip {
	padding-bottom: 4px;
	margin-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
}

.tooltip-ayuda .tooltip-inner ul {
	margin-bottom: 0;
}

.tooltip-ayuda .tooltip-inner li + li {
	margin-top: 2px;
}

.tooltip-ayuda .tooltip-inner .nota-tooltip {
	margin-top: 6px;
	opacity: .85;
}

/* El icono de ayuda de un form-label esta oculto hasta que se pasa el cursor por la
   seccion del campo (a diferencia de inventarioappministra2, donde el icono siempre esta visible). */
.icono-ayuda {
	opacity: 0;
	transition: opacity .15s ease-in-out;
}

.form-label:hover .icono-ayuda {
	opacity: 1;
}

/* El "+" que agrega un valor al catalogo de un select (partials/vehiculos/_alta_catalogo_vehiculos):
   vive en la linea del label, oculto hasta que se pasa el cursor por el campo, igual que en
   inventarioappministra2. Es un boton HERMANO del label y no va dentro: configurarFormulario() busca el label
   con $campo.siblings('.label'). Con teclado aparece al enfocarlo, y en una pantalla tactil (sin
   hover) se ve siempre. */
.form-label > .agregar-catalogo {
	position: absolute;
	top: -1px;
	right: calc(var(--bs-gutter-x, 1.5rem) * .5);
	padding: 0 .15rem;
	border: 0;
	background: transparent;
	line-height: 13px;
	font-size: 13px;
	cursor: pointer;
	opacity: 0;
	transition: opacity .15s ease-in-out;
}

.form-label:hover > .agregar-catalogo,
.form-label:focus-within > .agregar-catalogo,
.form-label > .agregar-catalogo:focus-visible {
	opacity: 1;
}

@media (hover: none) {
	.form-label > .agregar-catalogo {
		opacity: 1;
	}
}

/* En modo Ver el select esta deshabilitado: no se ofrece agregar nada. */
.form-label:has(> select:disabled) > .agregar-catalogo {
	display: none;
}

.girar-icono {
	transform: scaleX(-1)!important;
	display: inline-block!important;
}

.margin--8px {
	margin-left: -8px!important;
}

.margin--16px {
	margin-left: -16px!important;
}


/*::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::RESPONSIVE:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::  SM  ::::::::::::::::::::::::::::::::::::::::::*/


	@media (max-width: 575px) {
		#nombre-modulo-header {
			max-width: 140px;
		}
	}


	@media (min-width: 576px) {
		.dataTables_filter label input {
			width: 150px;
		}
	}


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::  MD  ::::::::::::::::::::::::::::::::::::::::::*/


	/* Por debajo de MD un ancho en px fijo tiene que ceder ante el grid. Las utilidades
	   .w-XXXpx declaran width, min-width y max-width con !important y sin media query, asi
	   que en un movil "col-6 col-md-auto w-80px" se comporta como 80px clavados y el col-6
	   no pinta nada: varios filtros de ese tipo en la misma fila quedan en bandas de anchos
	   arbitrarios que no alinean entre si. Aqui se apagan, pero SOLO dentro de una barra de
	   filtros: fuera de ella (modales, tablas, badges) el ancho fijo sigue siendo un
	   requisito y no una decoracion, y se queda intacto.
	   Se listan los tamanos que hoy aparecen en barras de filtros; si manana se usa otro
	   ahi, hay que anadirlo aqui, y ese olvido se nota a simple vista en un movil. */
	@media (max-width: 767.98px) {
		.fila-filtros .w-240px, .fila-filtros .w-200px, .fila-filtros .w-180px,
		.fila-filtros .w-160px, .fila-filtros .w-120px, .fila-filtros .w-110px,
		.fila-filtros .w-100px, .fila-filtros .w-80px {
			width: auto!important;
			min-width: 0!important;
			max-width: 100%!important;
		}
		#aplicacion::-webkit-scrollbar {
			width: .25rem;
			height: .25rem;
		}
	}


	@media (min-width: 768px) {

	}


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::  LG  ::::::::::::::::::::::::::::::::::::::::::*/


	@media (min-width: 992px) {
		#menu {
			position: relative;
		}
		.modal-dialog {
			margin: 1.55rem;
		}
	}


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::  XL  ::::::::::::::::::::::::::::::::::::::::::*/


	@media (min-width: 1200px) {
		.border-xl-start {
			border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
		}
	}










	/* Horario de solicitudes (Configuración): en teléfono cada día es una tarjeta, el día arriba e inicio/fin lado a lado */
	@media (max-width: 767.98px) {
		.tabla-jornadas thead {
			display: none;
		}
		.tabla-jornadas,
		.tabla-jornadas tbody {
			display: block;
		}
		.tabla-jornadas tr {
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 12px;
			padding: 12px 0;
			border-bottom: 1px solid var(--bs-border-color);
		}
		.tabla-jornadas td {
			display: block;
			border: 0;
			padding: 0 !important;
		}
		.tabla-jornadas td:first-child {
			grid-column: 1 / -1;
			margin-bottom: 8px;
		}
		.tabla-jornadas td .col-7 {
			padding-left: 0;
		}
		.tabla-jornadas td[data-label]::before {
			content: attr(data-label);
			display: block;
			margin-bottom: 4px;
			font-weight: 700;
			font-size: 0.75rem;
		}
	}