@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: #ADADAD;

    --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: #ADADAD;

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

	/* Hueco bajo cada campo para el mensaje de error de jquery.validate (ver .form-label). */
	--relleno-error-campo: 13px;
	--margen-error-campo: 9px;

	--color-appministra2-1: #068A8A;
	--color-appministra2-1-hover: color-mix(in srgb, var(--color-appministra2-1) 82%, black 18%);
	--color-appministra2-1-active: color-mix(in srgb, var(--color-appministra2-1) 50%, black 50%);

	--color-appministra2-2: #0A1F3D;
	--color-appministra2-2-hover: color-mix(in srgb, var(--color-appministra2-2) 82%, black 18%);
	--color-appministra2-2-active: color-mix(in srgb, var(--color-appministra2-2) 50%, black 50%);

	--color-appministra2-3: #861D30;
	--color-appministra2-3-hover: color-mix(in srgb, var(--color-appministra2-3) 82%, black 18%);
	--color-appministra2-3-active: color-mix(in srgb, var(--color-appministra2-3) 50%, black 50%);

	/* Naranja de "pendiente": lo que falta por pagar o por hacer. Llama la atencion sin
	   leerse como error, que es lo que hace el rojo de .text-danger. */
	--color-naranja: #D15026;
	--color-naranja-hover: #A93E1B;
	--color-naranja-active: #7E2D12;

	--color-info-2: #452C94;
	--color-info-2-hover: #0F0429;
	--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-naranja {
	color: var(--color-naranja)!important;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.bg-appministra2-3-active {
	background-color: var(--color-appministra2-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-appministra2-2); */
	color: #353941;
}

*::selection {
    background-color: var(--color-appministra2-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-appministra2-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-appministra2-1-hover)!important;
}

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

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

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

/*::::::::::::::::::::::::::::::::::::::MENU SUPERIOR::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*  El menu son TRES secciones apiladas, cada una de ALTO FIJO y sin fondo propio (dejan    */
/*  ver el degradado del documento):                                                       */
/*    1. Modulos (60px): marca a la izquierda, modulos al centro y usuario a la derecha.    */
/*    2. Submodulos (40px): control segmentado, carril + pastilla en el abierto.            */
/*    3. Avisos (26px): fecha de prueba, suscripcion vencida y el manual del submodulo.     */
/*       Ocupa el sitio del antiguo margin-top de #card-principal, este vacia o no.         */
/*  El menu no es fijo: se desplaza con el documento (ver APLICACION). Su alto lo publica   */
/*  --altura-menu-superior, DERIVADO de las tres secciones, del que cuelgan #aplicacion,   */
/*  #card-principal y el scrollY de las tablas (layout).                                   */

:root {
	--altura-barra-modulos: 60px;
	--altura-barra-submodulos: 40px;
	--altura-barra-avisos: 26px;
	/* Se DERIVA, no se escribe: la suma de las tres secciones. La tarjeta no lleva margen
	   arriba; el aire que la separa del menu es la seccion de avisos. */
	--altura-menu-superior: calc(var(--altura-barra-modulos) + var(--altura-barra-submodulos) + var(--altura-barra-avisos));
	/* TAMANOS FIJOS de las pestanas: cada una mide exactamente esto, tenga el texto que
	   tenga, y no se encoge aunque la fila desborde (ver .modulo-tab y .submodulo-tab). Van
	   centradas en el alto de su seccion. El carril de submodulos suma 3px de relleno y 1px
	   de borde por lado: 32 + 8 = 40, el alto exacto de la seccion 2. */
	--altura-modulo: 32px;
	--altura-submodulo: 32px;
	/* Ancho MAXIMO de una pestana de submodulo, relleno incluido: pasado ese ancho el nombre baja a
	   una segunda linea en vez de alargar la fila (ver .submodulo-tab). Con 140px el nombre mas
	   largo de hoy -"Reporte existencias minimas"- cabe en dos lineas dentro de los 32px de alto; un
	   nombre que pidiera tres se saldria de la pastilla. */
	--ancho-maximo-submodulo: 140px;
	/* Marca: el logo y debajo el nombre, que suman el alto exacto de la seccion 1
	   (48 + 12 = 60). */
	--altura-logo-menu: 48px;
	--altura-nombre-menu: 12px;
	/* Margen lateral del menu: el mismo con que #aplicacion separa la tarjeta del borde de
	   la ventana (px-lg-3 + px-1 de #body-app = 20px), para que el logo y el avatar queden
	   a plomo con los bordes de la tarjeta. Por debajo de lg baja a 8px (RESPONSIVE). */
	--margen-lateral-menu: 20px;
	/* Colores sobre el degradado oscuro del documento. El carril es TRANSLUCIDO y no un
	   gris fijo: asi se distingue sobre cualquier punto del fondo. */
	--color-texto-menu: rgba(255, 255, 255, 0.6);
	--color-carril-submodulos: rgba(0, 0, 0, 0.2);
	--color-texto-submodulo: rgba(255, 255, 255, 0.6);
}

#menu-superior {
	position: relative;
	z-index: 1030;
	width: 100%;
	padding: 0px var(--margen-lateral-menu);
}

/*::::::::::::::::::::::::::::::: Seccion 1: modulos :::::::::::::::::::::::::::::::*/

/* Tres zonas. Las de los lados (marca y usuario) tienen base 0 y crecen por igual, asi que
   se reparten el sobrante a partes iguales y la del centro queda centrada en la PANTALLA
   aunque la marca y el usuario no midan lo mismo. Eso exige que en la mitad de cada lado
   quepa el mas ancho de los dos: si no, el lado ancho no baja de su contenido (nada se
   corta) y los modulos se corren hacia el otro. Por eso los lados no llevan relleno -- la
   separacion con los modulos la dan las flechas, que reservan su sitio aunque esten
   ocultas -- y las pestanas van con 12px por lado: a 1366px la marca de prueba (logo de
   136px + nombre) cabe justa. Cuando no cabe todo, la que cede es la zona del centro
   (min-width: 0), que pasa a desplazarse con sus flechas. */
.barra-modulos {
	display: flex;
	align-items: center;
	height: var(--altura-barra-modulos);
}

.zona-marca,
.zona-usuario {
	flex: 1 1 0px;
	display: flex;
	align-items: center;
}

.zona-marca {
	justify-content: flex-start;
}

.zona-usuario {
	justify-content: flex-end;
}

.zona-modulos {
	flex: 0 1 auto;
	min-width: 0px;
	height: 100%;
	display: flex;
	align-items: center;
}

/* La marca es una columna: el logo y debajo el nombre de la empresa, sin separacion entre
   ellos, porque los dos altos suman justo los 60px de la seccion. El nombre va centrado bajo
   el logo, y la columna no pasa del ancho maximo del logo. Por debajo de lg el nombre se
   oculta (RESPONSIVE) y el logo queda centrado en el alto de la seccion. */
.marca-menu {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: var(--altura-barra-modulos);
	max-width: 160px;
	min-width: 0px;
	text-decoration: none;
}

/* El logo va COMPLETO: se escala al alto sin recortarlo ni encerrarlo en un circulo y
   conserva su proporcion (ancho automatico). El tope de ancho deja entrar a 48px de alto
   un logotipo de hasta 3,3:1; uno mas alargado se ve mas bajo antes que quitarle el
   centro a los modulos. */
.marca-menu .logo-menu {
	display: block;
	flex: 0 0 auto;
	height: var(--altura-logo-menu);
	width: auto;
	max-width: 160px;
	object-fit: contain;
}

/* Sin logo: un recuadro del mismo alto, para que el menu no cambie de forma segun la
   empresa. */
.marca-menu .logo-menu-vacio {
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--altura-logo-menu);
	border-radius: 12px;
	border: 1px solid rgba(255, 255, 255, 0.2);
	background-color: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.55);
	font-size: 1.4rem;
}

/* Una sola linea de 12px: un nombre que no cabe en el ancho de la marca se corta con
   puntos suspensivos en vez de bajar a otra linea (completo en el title del enlace). La
   letra es la mas grande que entra en esa linea. */
.marca-menu .nombre-menu {
	flex: 0 0 auto;
	max-width: 100%;
	height: var(--altura-nombre-menu);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	text-align: center;
	color: #FFFFFF;
	font-size: 0.6rem;
	font-weight: 700;
	line-height: var(--altura-nombre-menu);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.modulos-menu {
	flex: 1 1 auto;
	min-width: 0px;
	display: flex;
	align-items: center;
	/* "safe": centra los modulos cuando caben, pero si desbordan cae a flex-start.
	   Con "center" a secas, el desborde queda repartido a los dos lados y el lado
	   izquierdo no se puede alcanzar con scrollLeft (nunca es negativo): el ultimo
	   modulo queda inalcanzable aunque la flecha derecha siga ofreciendo "mas". */
	justify-content: safe center;
	overflow-x: auto;
	scrollbar-width: none;
}

.modulos-menu::-webkit-scrollbar {
	display: none;
}

/* Sin fondo en ningun estado: el elegido se resalta en blanco y con la letra mas gruesa.
   Engordar la letra ensancharia la pestana y, con la fila centrada, correria a todas las
   demas de lado al cambiar de seleccion; para evitarlo, ::after reserva desde el
   principio el ancho del nombre en negrita (data-nombre) con alto cero e invisible. La
   pestana es una columna flex para que esa reserva quede debajo del texto y no al lado. */
.modulo-tab {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	height: var(--altura-modulo);
	flex: 0 0 auto;
	padding: 0px 12px;
	border: 0px;
	background-color: transparent;
	color: var(--color-texto-menu);
	font-size: 0.72rem;
	letter-spacing: 0.02em;
	white-space: nowrap;
	cursor: pointer;
	transition: color 0.15s ease;
}

.modulo-tab::after {
	content: attr(data-nombre);
	height: 0px;
	overflow: hidden;
	visibility: hidden;
	font-weight: 800;
	pointer-events: none;
	user-select: none;
}

.modulo-tab:hover {
	color: white;
}

.modulo-tab.seleccionado {
	color: white;
	font-weight: 700;
}

.flecha-menu {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	padding: 0px 5px;
	border: 0px;
	background-color: transparent;
	color: var(--color-texto-menu);
	font-size: 0.8rem;
	cursor: pointer;
}

.flecha-menu:hover {
	color: #FFFFFF;
}

.usuario-menu {
	display: flex;
	align-items: center;
}

.boton-usuario {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0px;
	border: 0px;
	background-color: transparent;
}

.boton-usuario .datos-usuario {
	min-width: 0px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	max-width: 170px;
}

.boton-usuario .nombre-usuario {
	color: #FFFFFF;
	font-size: 0.72rem;
	font-weight: 700;
	max-width: 100%;
}

.boton-usuario .rol-usuario {
	color: var(--color-texto-menu);
	font-size: 0.62rem;
	max-width: 100%;
}

.boton-usuario .avatar-usuario {
	width: 30px;
	height: 30px;
	flex: 0 0 auto;
	border-radius: 50%;
	background-color: var(--bg-gray-4);
	background-size: cover;
	background-position: center;
}

/*::::::::::::::::::::::::::::: Seccion 2: submodulos ::::::::::::::::::::::::::::::*/

.barra-submodulos {
	display: flex;
	align-items: stretch;
	height: var(--altura-barra-submodulos);
}

.submodulos-menu {
	flex: 1 1 auto;
	min-width: 0px;
	display: flex;
	align-items: center;
	/* Mismo motivo que .modulos-menu: "safe center" evita que un grupo de
	   submodulos que desborda (Reportes trae trece) deje el ultimo inalcanzable
	   por scroll. */
	justify-content: safe center;
	overflow-x: auto;
	scrollbar-width: none;
}

.submodulos-menu::-webkit-scrollbar {
	display: none;
}

.grupo-submodulos {
	display: none;
	align-items: center;
}

/* El grupo visible ES el carril del control segmentado. */
.grupo-submodulos.visible {
	display: flex;
	flex: 0 0 auto;
	gap: 2px;
	padding: 3px;
	border-radius: 999px;
	background-color: var(--color-carril-submodulos);
	border: 1px solid rgba(130, 130, 130, 0.2);
}

/* Un modulo sin submodulos no pinta un carril vacio. */
.grupo-submodulos.visible:not(:has(.submodulo-tab)) {
	display: none;
}

.submodulo-tab {
	display: flex;
	align-items: center;
	box-sizing: border-box;
	height: var(--altura-submodulo);
	flex: 0 0 auto;
	/* Los nombres largos pasan a DOS lineas por ancho, no por un <br>: el nombre del submodulo es
	   tambien el del permiso ("Ver <nombre>") y no lleva marcado, y un salto fijo partiria hasta
	   los que caben enteros. Con max-width + flex-basis auto la pestana mide lo que mide su texto
	   hasta el tope; los cortos (Marcas, Ventas) no cambian. `balance` reparte las dos lineas
	   parejas ("Actualizacion / de inventario", no "Actualizacion de / inventario"); donde no se
	   soporta, parte en el primer hueco, que tambien se lee bien. OJO: la caja de una pestana
	   partida conserva el ancho maximo aunque su linea mas larga sea mas corta, y eso se ve como
	   mas relleno lateral: el CSS no puede encogerla, asi que ajustarAnchoSubmodulos() (layout)
	   le fija el ancho de su linea mas ancha. */
	max-width: var(--ancho-maximo-submodulo);
	justify-content: center;
	padding: 0px 14px;
	border: 0px;
	border-radius: 999px;
	color: var(--color-texto-submodulo);
	font-size: 0.72rem;
	line-height: 1.15;
	text-align: center;
	text-decoration: none;
	text-wrap: balance;
	white-space: normal;
	transition: color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease;
}

.submodulo-tab:hover {
	background-color: rgba(130, 130, 130, 0.2);
	color: #fff;
}

/* La pestana abierta se levanta del carril en una pastilla blanca. Mismo peso de letra
   que las demas: no se ensancha al activarse. */
.submodulo-tab.actual {
	background-color: #FFFFFF;
	color: #0B0C0E;
	font-weight: 700;
}

/*::::::::::::::::::::::::::::::: Seccion 3: avisos ::::::::::::::::::::::::::::::::*/

/* Mide SIEMPRE su alto, tenga avisos o no: un aviso que aparece no puede empujar la
   pagina hacia abajo. Va centrada, como las dos secciones de arriba. */
.barra-avisos {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: var(--altura-barra-avisos);
	overflow: hidden;
	white-space: nowrap;
}

/* Rojo claro en pastilla: el text-danger de Bootstrap no se lee sobre el fondo oscuro. */
.aviso-menu {
	padding: 1px 10px;
	border-radius: 999px;
	border: 1px solid rgba(220, 53, 69, 0.5);
	background-color: rgba(220, 53, 69, 0.18);
	color: #FF9A9A;
	font-size: 0.62rem;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.icono-manual {
	color: var(--color-texto-menu);
	font-size: 0.95rem;
	line-height: 1;
}

.icono-manual:hover {
	color: #FFFFFF;
}

/*::::::::::::::::::::::::::::::::::::::APLICACION:::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/* Menu y cuerpo son UNA sola vista y el que se desplaza es el DOCUMENTO, no
   #aplicacion: con el scroll en #aplicacion la barra empezaba debajo del menu y se veia
   cortada. #aplicacion conserva el alto que le deja el menu como MINIMO (de el siguen
   colgando #card-principal y las tablas), pero ya no lo recorta: lo que sobre empuja el
   documento y el menu sube junto con el contenido.

   El fondo es un degradado de grises que vive en el DOCUMENTO y no en #aplicacion, para
   que pase sin corte por detras del menu (sin fondo propio) y del cuerpo. Va de ARRIBA
   hacia ABAJO, de un gris casi blanco a uno oscuro: arriba, donde esta el menu, el texto
   oscuro de las pestanas se lee sobre lo claro, y abajo el contraste con las tarjetas
   blancas les da profundidad. Va "fixed": la luz se queda quieta y el contenido pasa por
   encima, asi que el pie de la ventana siempre es lo oscuro aunque la pagina sea larga.
   El background-color de respaldo es el tono medio, para el navegador que no pinte el
   degradado. */
html,
body {
	min-height: 100%;
	background-color: #A9AEB5;
	background-image: linear-gradient(to bottom, #0B0C0E 0%, #5E6673 30%, #494F5A 70%, #353941 100%);
	background-attachment: fixed;
	background-repeat: no-repeat;
}

#aplicacion {
	width: 100%;
	min-height: calc(100vh - var(--altura-menu-superior));
}

html::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
html::-webkit-scrollbar-thumb {
    background: rgba(125,125,125,0.4);
}
html::-webkit-scrollbar-thumb:hover {
    background: rgba(125,125,125,0.6);
}
html::-webkit-scrollbar-track {
    background: rgba(0,0,0,0);
}

.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);
}

.nav-tabs-1 .nav-link {
	color: var(--color-appministra2-2-hover)!important;
	text-transform: uppercase;
	font-weight: 600;
}

.nav-tabs-1 .nav-link:not(.active):hover {
	color: var(--color-appministra2-3)!important;
}

.nav-tabs-1 .nav-link.active {
	color: var(--color-appministra2-3)!important;
	font-weight: 700;
}

/*::::::::::::::::Pestanas conectadas con el contenido (ordenes)::::::::::::::*/

/* La linea inferior la dibuja el panel (.contenido-pestanas); la pestana activa
   la tapa con su borde inferior blanco para que se vea unida al contenido. */
.nav-tabs-conectadas {
	position: relative;
	z-index: 2;
	margin-bottom: -1px;
	border-bottom: 0px;
	flex-wrap: wrap;
	row-gap: 2px;
}

.nav-tabs-conectadas .nav-link {
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 6px 10px;
	border: 1px solid transparent;
	border-radius: 10px 10px 0px 0px;
	background-color: transparent;
	color: var(--color-gray-4);
	font-weight: 600;
	white-space: nowrap;
	transition: none;
}

.nav-tabs-conectadas .nav-link:not(.active):hover {
	background-color: var(--bg-gray-2);
	border-color: transparent;
	color: var(--color-appministra2-1);
}

.nav-tabs-conectadas .nav-link.active {
	background-color: #FFFFFF;
	border-color: var(--bg-gray-2) var(--bg-gray-2) #FFFFFF;
	color: var(--color-appministra2-1);
	font-weight: 700;
}

.contenido-pestanas {
	background-color: #FFFFFF;
	border: 1px solid var(--bg-gray-2);
	border-radius: 0px 10px 10px 10px;
	padding: 10px 14px;
}

/* Pestanas con acciones al final de la MISMA linea (Citas): lo que vale para todas las
   pestanas -un filtro, el boton de crear- no puede vivir dentro de ninguna, y sobre ellas
   ocuparia una fila entera para dos controles. Se alinean por abajo con las pestanas, asi
   que conviene darles el alto pequeno (.form-control-sm / .btn-sm, los dos de 28px), que es
   el de una pestana.

   El -1px que conecta la pestana activa con el panel pasa del <ul> a esta barra: dentro de
   un flex, el margen del <ul> solo encogeria su propia caja y el hueco lo volveria a abrir
   la altura de la fila. */
.barra-pestanas-acciones {
	position: relative;
	z-index: 2;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	column-gap: 12px;
	row-gap: 6px;
	margin-bottom: -1px;
}

.barra-pestanas-acciones > .nav-tabs-conectadas {
	margin-bottom: 0px;
}

/* Variante "pills" reutilizable para nav de tabs (Bootstrap data-bs-toggle="tab"): pastillas
   sueltas con borde, fondo blanco e inactivas en gris neutro; activa en el color de marca.
   Aplicar la clase nav-pills-appministra2 al <ul class="nav">, con mb-3 en el propio <ul> para
   separarla del panel (el panel no lleva borde ni fondo propio: no se conecta con la pestana
   como .nav-tabs-conectadas). Portado de appministra (.nav-pills-appministra). */
.nav-pills-appministra2 {
	border-bottom: 0;
	gap: 0.75rem;
	flex-wrap: wrap;
	justify-content: center;
}

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

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

/* El color va !important por lo mismo que .nav-tabs-1 .nav-link.active: una pestana
   marcada pestana-pendiente (selector con id, mas especifico) no debe verse en rojo
   mientras es justo la que esta a la vista y se esta llenando. */
.nav-pills-appministra2 .nav-link.active {
	background-color: var(--color-appministra2-1);
	border-color: var(--color-appministra2-1);
	color: #fff!important;
	font-weight: 700;
}

/*::::::::::::::::Tabla de lentes de la orden (opciones por laboratorio)::::::::::::::*/

/* La fila elegida se marca con un gris y su chulo; el detalle completo lo muestra la card
   de abajo, asi que aqui no hace falta ningun borde de color. */
.tabla-lentes tbody tr:hover > * {
	--bs-table-bg-state: var(--bg-gray-1);
}

.tabla-lentes tbody tr.elegida > * {
	--bs-table-bg-state: var(--bg-gray-2);
}

/* Oculto pero ocupando su lugar: asi los nombres no se corren al elegir una fila. */
.tabla-lentes tbody tr .icono-elegida {
	visibility: hidden;
}

.tabla-lentes tbody tr.elegida .icono-elegida {
	visibility: visible;
	color: var(--color-appministra2-2);
}

#card-principal {
	min-height: calc(100vh - var(--altura-menu-superior) - 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-appministra2-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, .form-control-xs, .form-control-xxs {
	width: 100%;
	font-size: 13px!important;
	outline: none!important;
	box-shadow: none!important;
	color: inherit;
	border-radius: 18px;
	transition: 0.3s;
	height: 32px!important;
}

/* Tamaño intermedio entre el normal (32px) y el pequeño (28px).
   El radio es siempre la mitad del alto para conservar la forma de pildora. */
.form-control-md {
	font-size: 12px!important;
	border-radius: 15px;
	height: 30px!important;
	padding: 4px 10px;
}

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

/* Tamaños extra pequeños para filas densas (carritos, formulas, filtros de tabla).
   Se conserva la proporcion de la escala: la fuente y el padding bajan un escalon
   respecto a .form-control-sm y el radio sigue siendo la mitad del alto. */
.form-control-xs {
	font-size: 10px!important;
	border-radius: 13px;
	height: 26px!important;
	padding: 3px 8px;
}

.form-control-xxs {
	font-size: 9px!important;
	border-radius: 12px;
	height: 24px!important;
	padding: 2px 7px;
}

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

.form-control::-webkit-input-placeholder, .form-control-md::-webkit-input-placeholder, .form-control-sm::-webkit-input-placeholder, .form-control-xs::-webkit-input-placeholder, .form-control-xxs::-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;
}

/*
| El padding y el margen de abajo NO son separacion: son el hueco donde jquery.validate
| pinta el mensaje de error del campo (label.error, en position:absolute bottom:0). Van en
| variables porque el panel del autocompletado tiene que descontar ese mismo hueco para
| colgar del input y no del final del hueco; si se cambian aqui, alla se ajusta solo.
*/
.form-label {
	position: relative;
	font-size: 12px;
	padding-bottom: var(--relleno-error-campo);
	margin-bottom: var(--margen-error-campo);
	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;
	margin-bottom: 2px;
}

.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-appministra2-1 {
	color: white!important;
	background-color: var(--color-appministra2-1)!important;
	border: 1px solid var(--color-appministra2-1)!important;
}

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

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

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

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

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

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

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

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

/* Igualado al alto de .form-control-md para que un boton mediano quede
   alineado con un campo mediano dentro de un input-group o de una misma fila. */
.btn-md {
	height: 30px;
	font-size: 12px!important;
	border-radius: 15px;
	padding: 1px 15px 0px 15px;
}

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

/* Igualado al alto de .form-control-sm para que un boton pequeño quede
   alineado con un campo pequeño dentro de un input-group o de una misma fila. */
.btn-sm {
	height: 28px;
	font-size: 11px;
	border-radius: 14px;
	padding: 1px 15px 0px 15px;
}

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

.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-appministra2-1 {
	color: var(--color-appministra2-1-hover)!important;
	background-color: color-mix(in srgb, var(--color-appministra2-1) 45%, white)!important;
	border-color: color-mix(in srgb, var(--color-appministra2-1-active) 60%, white)!important;
}

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

.alert-appministra2-3 {
	color: var(--color-appministra2-3-hover)!important;
	background-color: color-mix(in srgb, var(--color-appministra2-3) 45%, white)!important;
	border-color: color-mix(in srgb, var(--color-appministra2-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;
}


/*::::::::::::::::::::::::::::::::::::ESTADOS DE PANEL:::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*
| Panel que ocupa el sitio de un bloque que todavia no se puede mostrar: porque falta elegir
| algo, porque se esta trayendo del servidor o porque fallo. Sustituye al loader de pantalla
| completa cuando lo que carga es UNA seccion y no la pagina: el loader tapa el formulario
| entero para hablar de una parte, y al taparlo esconde justo el campo que el usuario acaba
| de tocar.
|
| El alto es el mismo de .fixed-header-table-md para que la seccion no pegue un salto al
| cambiar de estado.
*/
.panel-estado {
	min-height: calc(100vh - 300px);
}

.panel-estado .bi {
	font-size: 34px;
	line-height: 1;
}

/*:::::::::::::::::::::::::::::::::::::::::TOASTS::::::::::::::::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/*
| Aviso flotante que NO interrumpe. Lo pinta mostrarToast() en layouts/app.blade.php; aqui
| solo vive su apariencia.
|
| El color sale de la misma familia que usa .alert-estado (alert-success, alert-danger,
| alert-warning, alert-appministra2-1...). Ojo: en Bootstrap 5.3 esas clases SOLO declaran
| variables (--bs-alert-bg y compania) y quien las pinta es .alert, asi que el toast lleva
| siempre las dos clases. Por lo mismo NO usa la .toast de Bootstrap: su background-color
| tiene la misma especificidad que el de .alert y cual gana dependeria del orden de los
| archivos, que es justo lo que no se debe dejar al azar.
*/

/* Una pila por posicion, creada bajo demanda. z-index por encima del modal (1055) y del
   contenedor de opciones de Select2 (10000): un aviso que sale tapado no es un aviso.
   pointer-events: none para que el hueco vacio de la pila no intercepte los clics de lo
   que quede debajo; cada toast se los devuelve para su boton de cerrar. */
.contenedor-toast {
	position: fixed;
	z-index: 20000;
	display: flex;
	flex-direction: column;
	gap: 8px;
	padding: 16px;
	pointer-events: none;
	width: min(380px, calc(100vw - 32px));
}

.contenedor-toast.arriba-izquierda  { top: 0; left: 0; }
.contenedor-toast.arriba-centro     { top: 0; left: 50%; transform: translateX(-50%); }
.contenedor-toast.arriba-derecha    { top: 0; right: 0; }
.contenedor-toast.abajo-izquierda   { bottom: 0; left: 0; }
.contenedor-toast.abajo-centro      { bottom: 0; left: 50%; transform: translateX(-50%); }
.contenedor-toast.abajo-derecha     { bottom: 0; right: 0; }

/* .alert en el selector para ganarle a su padding y su margin-bottom de 1rem sin !important:
   dos clases contra una. */
.toast-app.alert {
	pointer-events: auto;
	width: 100%;
	margin-bottom: 0;
	padding: 10px 12px;
	border-radius: 12px;
	box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.18);
	opacity: 0;
	transform: scale(0.96);
	transition: opacity 180ms ease, transform 180ms ease;
}

/* La clase la pone el JS en el frame siguiente al de insertarlo: sin ese respiro el navegador
   pinta el estado final de una vez y no hay transicion que ver. La salida es la misma regla
   al reves, quitandola. */
.toast-app.alert.visible {
	opacity: 1;
	transform: scale(1);
}

.toast-app .icono-toast {
	font-size: 17px;
	line-height: 1;
}

/* Hereda el color del toast (el de .alert) en vez del gris de .btn-close, que sobre un fondo
   de color se pierde. */
.toast-app .cerrar-toast {
	cursor: pointer;
	line-height: 1;
	opacity: 0.55;
}

.toast-app .cerrar-toast:hover {
	opacity: 1;
}

/* El nombre de una referencia no cabe en una linea: se corta con puntos suspensivos en vez de
   estirar el toast o partirse en cinco renglones. */
.toast-app .titulo-toast,
.toast-app .subtitulo-toast {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}


/*:::::::::::::::::::::::::::::::::::::::::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 que quedo debajo de otro: deja de pintar su velo para no oscurecer el doble.
   La clase la conmuta el layout en show/hidden.bs.modal (ver app.blade.php). */
.modal.modal-apilado {
	background-color: transparent;
}

.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;
	margin: 1.55rem;
}

.modal-header {
	height: 50px;
	font-size: 14px;
	/* border-radius: 25px 25px 0px 0px; */
}

.modal-content {
	background-color: #A9AEB5;
    background-image: linear-gradient(to bottom, #0B0C0E 0%, #5E6673 30%, #494F5A 70%, #353941 100%);
    background-attachment: fixed;
    background-repeat: no-repeat;
	/*max-height: calc(100vh - 50px);*/
}

.modal-footer {
	/* border-radius: 0px 0px 25px 25px; */
}

.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: white;
	text-align: center;
	font-size: 16px;
	cursor: pointer;
	padding-top: 14px;
}

.cerrar-modal:hover {
	color: white;
	background-color: #861D30;
}

.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-appministra2-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: 1px solid var(--bg-2);
		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 - var(--altura-menu-superior) - 189px - 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 {
    	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-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-appministra2-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-appministra2-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-appministra2-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;
		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;
	}

	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: 0.5rem;
	}

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

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

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

	.table.no-datatables th {
	}

	.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)
	}

	/* Entre la altura completa y la -md. Es la de un modal SIN footer (.modal-body-no-footer):
	   sin la barra de botones abajo cabe mas tabla, y lo que hay que descontar es el margen del
	   modal, su cabecera, el relleno del cuerpo y la etiqueta del campo. Ingresos ya la pedia
	   antes de que existiera, asi que su tabla se estaba quedando con la altura base. */
	.fixed-header-table-lg {
		max-height: calc(100vh - 180px)
	}

	.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;
	}

	/* Al desplazar, las filas pasan por debajo del thead sticky y la cabecera se queda sin la
	   linea que traen las filas con .border-top. Se la damos con la misma sombra interior de
	   1px que DataTables dibuja en .dataTables_scrollHead, pero con el color del borde de las
	   filas para que se lea como la continuacion de la misma linea.

	   Va condicionada a .con-scroll (la pone sombraCabeceraFija() en layouts/app.blade.php)
	   porque arriba del todo la linea ya la aporta el border-top de la primera fila: las dos
	   juntas se verian como un borde doble.

	   SIN transition a proposito: con un fundido, al volver arriba la sombra sigue visible
	   mientras el border-top de la primera fila ya reaparecio, y esos 2 pixeles superpuestos
	   se ven como una franja oscura que se desvanece. Encendida y apagada en seco, el cambio
	   ocurre en el mismo frame en que scrollTop cruza 0 y nunca llegan a verse las dos. */
	.fixed-header-table.con-scroll thead th {
		box-shadow: inset 0px -1px 0px 0px var(--bs-border-color);
	}
	
	.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;
	}

	/*CABECERA CON COLOR DE MARCA*/

	/* Agregar bg-appministra2-1/2/3 -la misma utilidad de fondo de botones, insignias y encabezados
	   de modal- a la tabla (o a su envoltorio .table-responsive/.no-datatables/.fixed-header-table)
	   pinta SOLO el thead de ese color con texto blanco. Acotado a estos 4 selectores: la
	   utilidad tambien vive en <div> sueltos (tarjetas, fondo de body, encabezados de modal) que
	   no son tablas y que deben seguir tenidos enteros. */
	table.bg-appministra2-1, .table-responsive.bg-appministra2-1, .no-datatables.bg-appministra2-1, .fixed-header-table.bg-appministra2-1,
	table.bg-appministra2-2, .table-responsive.bg-appministra2-2, .no-datatables.bg-appministra2-2, .fixed-header-table.bg-appministra2-2,
	table.bg-appministra2-3, .table-responsive.bg-appministra2-3, .no-datatables.bg-appministra2-3, .fixed-header-table.bg-appministra2-3 {
		background-color: transparent!important;
	}

	.bg-appministra2-1 thead th, .bg-appministra2-1 thead td {
		background-color: var(--color-appministra2-1)!important;
		color: #fff!important;
	}

	.bg-appministra2-2 thead th, .bg-appministra2-2 thead td {
		background-color: var(--color-appministra2-2)!important;
		color: #fff!important;
	}

	.bg-appministra2-3 thead th, .bg-appministra2-3 thead td {
		background-color: var(--color-appministra2-3)!important;
		color: #fff!important;
	}


	/*ANIMACIONES DE FILAS*/

	/*
	| Realimentacion de las listas que el usuario arma en pantalla (el carrito de ventas y las
	| que sigan el mismo patron). Las clases las pone quien repinta la lista y se las lleva el
	| repintado siguiente: son de un solo uso, no estados.
	|
	| Van sobre los <td> y no sobre el <tr>: la fila es una caja de layout y el transform ahi
	| se comporta distinto entre navegadores; sobre la celda es predecible.
	*/

	/* Entrada: la fila baja unos pixeles y se revela. Corta, para no retrasar la lectura. */
	@keyframes fila-entra {
		from { opacity: 0; transform: translateY(-8px); }
		to   { opacity: 1; transform: translateY(0); }
	}

	/* Realce: un lavado del color de marca que se apaga solo. Es lo que contesta "donde quedo
	   lo que acabo de agregar" cuando la lista ya no cabe de un vistazo.

	   Va de color a BLANCO, no a transparente: asi los dos extremos son opacos y el navegador
	   interpola entre dos colores planos, sin arrastrar la mezcla con lo que haya detras. El
	   final coincide con el fondo de la fila, asi que al terminar la animacion no hay salto.
	   Si esto se reusa sobre filas que NO sean blancas, hay que ajustar el to. */
	@keyframes fila-realce {
		from { background-color: color-mix(in srgb, var(--color-appministra2-1) 16%, white); }
		to   { background-color: white; }
	}

	/* Salida: se va hacia la izquierda apagandose, en sentido contrario a la entrada.
	   Si cambia esta duracion hay que mover tambien el temporizador de quitarReferencia()
	   en ventas, que es el que espera a que termine para sacar la fila del DOM. */
	@keyframes fila-sale {
		from { opacity: 1; transform: translateX(0); }
		to   { opacity: 0; transform: translateX(-16px); }
	}

	.fila-entrando > td {
		animation: fila-entra 0.45s ease-out, fila-realce 1.4s ease-out;
	}

	/* Cuando lo agregado ya estaba en la lista no nace una fila: solo sube la cantidad, asi
	   que el aviso es unicamente el realce sobre la fila que cambio. */
	.fila-resaltada > td {
		animation: fila-realce 1.4s ease-out;
	}

	/* forwards: la fila tiene que quedarse apagada hasta que el repintado la saque del DOM,
	   si no reaparece un frame antes de desaparecer. */
	.fila-saliendo > td {
		animation: fila-sale 0.32s ease-in forwards;
	}

	/* Quien pidio menos movimiento conserva el realce, que informa, y pierde el desplazamiento,
	   que solo decora. */
	@media (prefers-reduced-motion: reduce) {
		.fila-entrando > td {
			animation: fila-realce 1.4s ease-out;
		}

		.fila-saliendo > td {
			animation: none;
			opacity: 0;
		}
	}

	/* Aparicion de un BLOQUE completo (no una fila de tabla): mismo keyframe que fila-entra,
	   aplicado sobre el propio contenedor en vez de sobre sus <td>. La usa la columna de
	   Ordenes de laboratorio en Ventas, que nace oculta (d-none) y solo se revela cuando el
	   carrito trae un lente. */
	.bloque-entrando {
		animation: fila-entra 0.45s ease-out;
	}

	@media (prefers-reduced-motion: reduce) {
		.bloque-entrando {
			animation: none;
		}
	}

	/*BARRA DE FILTROS*/

	/* 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. 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-appministra2-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;
	}

	/* En movil una barra de filtros se apila a ancho completo (fila-filtros ya separa cada
	   fila con su row-gap): los anchos fijos en px de escritorio dejarian un campo angosto
	   sobrando aire a los lados o, peor, mas ancho que la pantalla. Se listan los tamanos que
	   aparecen en una barra de filtros; si manana se usa otro ahi, hay que anadirlo aqui. */
	@media (max-width: 767.98px) {
		.fila-filtros .w-240px, .fila-filtros .w-200px, .fila-filtros .w-180px,
		.fila-filtros .w-140px, .fila-filtros .w-120px, .fila-filtros .w-110px,
		.fila-filtros .w-100px, .fila-filtros .w-90px, .fila-filtros .w-80px {
			width: auto!important;
			min-width: 0!important;
			max-width: 100%!important;
		}
	}

	/*AUTOCOMPLETADOS*/

	/*
	| Panel de opciones que cuelga de un input de busqueda (referencias, clientes) y ocupa
	| exactamente su ancho. Lo usan el POS de ventas y el ingreso de referencias; vive aqui
	| y no en la vista porque ya son dos los que lo comparten.
	|
	| El marcado es: .autocompletado > input.form-control + .opciones-autocompletado.
	*/
	.autocompletado {
		position: relative;
	}

	.autocompletado .opciones-autocompletado {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 20;
		max-height: 260px;
		overflow-y: auto;
		background-color: #fff;
		border: 1px solid var(--bs-border-color);
		/* Arriba no lleva borde ni esquinas: ahi es donde se une con el input. */
		border-top: 0;
		border-radius: 0 0 13px 13px;
	}

	/* Con opciones a la vista, el input pierde sus esquinas de abajo y los dos se leen
	   como una sola pieza. Se resuelve con :has() para no depender de que el JS agregue
	   y quite una clase en los sitios donde abre o cierra el panel. */
	.autocompletado:has(.opciones-autocompletado:not(.d-none)) .form-control {
		border-bottom-left-radius: 0;
		border-bottom-right-radius: 0;
	}

	/*
	| El panel solo se ve mientras hay una busqueda viva, asi que su borde es siempre el de
	| marca: colgarlo de :has(.form-control:focus) lo dejaba gris justo al hacer clic en una
	| opcion (el foco se va al boton de la opcion, que ya no esta en el campo) y el borde
	| cambiaba de tono a mitad de la caja durante ese instante.
	*/
	.autocompletado .opciones-autocompletado:not(.d-none) {
		border-color: var(--color-appministra2-1);
	}

	/* Las opciones no repiten el borde del panel: solo se separan entre si. */
	.autocompletado .opciones-autocompletado .list-group-item {
		border-left: 0;
		border-right: 0;
		border-radius: 0;
	}

	.autocompletado .opciones-autocompletado .list-group-item:first-child { border-top: 0; }
	.autocompletado .opciones-autocompletado .list-group-item:last-child { border-bottom: 0; }

	/*
	| Pareja tipo de documento + numero: una persona se identifica por las dos cosas, asi que
	| se muestran unidas como un solo control. El .autocompletado envuelve la PAREJA (no solo
	| el input), de modo que el panel de resultados cuelga de las dos y ocupa su ancho completo
	| sin tener que calcularlo a mano.
	|
	| El marcado es:
	|   .autocompletado > .row.gx-0 > [select.rounded-end-0] + [input.rounded-start-0]
	|                   + .opciones-autocompletado
	*/
	.autocompletado > .row { margin-left: 0; margin-right: 0; }

	/*
	| Envolviendo la pareja, el 100% del que cuelga el panel es el alto de las DOS columnas
	| .form-label, que reservan abajo el hueco del mensaje de error. Sin descontarlo, el panel
	| aparecia flotando a 22px del input. Se descuenta con las mismas variables que lo reservan.
	|
	| El .autocompletado de un input suelto (buscar referencia, paciente de la tarjeta de orden)
	| no lleva .row ni .form-label dentro, asi que ahi el 100% ya es el borde del input.
	*/
	.autocompletado:has(> .row > .form-label) .opciones-autocompletado {
		top: calc(100% - var(--relleno-error-campo) - var(--margen-error-campo));
	}

	/* Select2 pinta su propia caja: la regla de arriba (.form-control) no la alcanza, hay que
	   quitarle las esquinas de abajo aparte para que no quede un escalon sobre el panel. */
	.autocompletado:has(.opciones-autocompletado:not(.d-none)) .select2-container--default,
	.autocompletado:has(.opciones-autocompletado:not(.d-none)) .select2-container--default .select2-selection--single {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

	/*
	| La pareja se ilumina ENTERA, no el campo que tenga el foco: se muestran unidos porque son
	| un solo control, y con el borde de un lado en el color de marca y el del otro en gris la
	| caja se parte por la mitad.
	|
	| Ojo con donde va el borde del select2: el visible es el de .select2-container--default.
	| La .select2-selection--single lo tiene puesto a 0 mas abajo (bloque SELECT 2), asi que
	| tenirla a ella no pinta nada.
	|
	| Tres estados lo encienden, y hacen falta los tres:
	|   :focus                      - se esta escribiendo el numero, o el tipo tiene el foco;
	|   .select2-container--open    - desplegado el tipo, el foco se va al buscador que select2
	|                                 cuelga del body, asi que ya no hay :focus dentro;
	|   panel de resultados abierto - se eligio una opcion con el raton y el foco se perdio,
	|                                 pero la caja sigue siendo la misma pieza que el panel.
	*/
	.autocompletado:has(> .row :focus) > .row .select2-container--default,
	.autocompletado:has(> .row .select2-container--open) > .row .select2-container--default,
	.autocompletado:has(.opciones-autocompletado:not(.d-none)) > .row .select2-container--default {
		border-color: var(--color-appministra2-1) !important;
	}

	.autocompletado:has(> .row :focus) > .row .form-control,
	.autocompletado:has(> .row .select2-container--open) > .row .form-control,
	.autocompletado:has(.opciones-autocompletado:not(.d-none)) > .row .form-control {
		border-color: var(--color-appministra2-1) !important;
	}

	/* Scroll por dentro: sin la banda gris del track, que se leia como algo pegado por fuera. */
	.autocompletado .opciones-autocompletado { scrollbar-width: thin; scrollbar-color: rgba(50, 50, 50, 0.35) transparent; }
	.autocompletado .opciones-autocompletado::-webkit-scrollbar { width: 6px; }
	.autocompletado .opciones-autocompletado::-webkit-scrollbar-track { background: transparent; }
	.autocompletado .opciones-autocompletado::-webkit-scrollbar-thumb { background: rgba(50, 50, 50, 0.35); border-radius: 6px; }


	/*
	| Tarjeta de la persona ya identificada por el buscador. La pinta
	| mostrarPersonaSeleccionada() (layouts/app.blade.php) dentro del contenedor vacio que
	| declara cada vista con la clase .persona-seleccionada.
	|
	| Va tenida con el color de marca y no con un .alert de Bootstrap: no avisa de un problema,
	| confirma que se reconocio a alguien.
	*/
	.tarjeta-persona {
		display: flex;
		align-items: center;
		gap: 0.65rem;
		padding: 0.5rem 0.75rem;
		border: 1px solid color-mix(in srgb, var(--color-appministra2-1) 55%, white);
		border-radius: 0.375rem;
		background-color: color-mix(in srgb, var(--color-appministra2-1) 10%, white);
	}

	.tarjeta-persona > .bi-person-check-fill {
		font-size: 1.35rem;
		line-height: 1;
	}

	/* La X se apaga hasta que se la busca: quitar a la persona no es la accion principal. */
	.tarjeta-persona > .quitar-persona {
		color: var(--color-gray-1);
		line-height: 1;
	}

	.tarjeta-persona > .quitar-persona:hover {
		color: var(--color-appministra2-3);
	}

/*::::::::::::::::::::::::::::::::::::::::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-appministra2-2)!important; */
	    padding-top: 1px;
		padding-left: 4px;
	}

	.select2-selection__choice {
		background-color: var(--color-appministra2-2)!important;
		border-color: var(--color-appministra2-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-appministra2-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-appministra2-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-appministra2-2)!important;
	}
	.select2-search__field, .select2-search__field:focus {
	    font-size: 12px;
	    border-color: var(--color-appministra2-2)!important;
	    border-radius: 15px;
	    padding-left: 8px!important;
	    padding-top: 5px!important;
	    height: 32px;
	}

	.select2-results__option, .select2-results__message{
	    color: var(--color-appministra2-2)!important;
	    /* font-weight: 500!important; */
	    font-size: 12px!important;
	}
	.select2-results__option--selected{
	    background-color: var(--color-appministra2-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-appministra2-2)!important;
	    color: white!important;
	}

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

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

	/* jQuery Validate inserta su <label class="error"> justo despues del campo, o sea
	   ENTRE el <select> y el contenedor que dibuja Select2, y ahi se queda para siempre
	   (al corregir solo lo oculta, no lo saca del DOM). Eso rompe el combinador de
	   hermano adyacente y el select perdia el tamaño "sm": crecia de 28px a 32px y
	   descuadraba la fila. Por eso cada regla contempla tambien esa variante.

	   El alto interno es siempre el del contenedor menos 2px (el borde de
	   .select2-container--default), y la line-height se iguala a ese alto interno
	   para que el texto quede centrado sin depender de la line-height base. */
	.form-control-sm + .select2-container,
	.form-control-sm + label.error + .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,
	.form-control-sm + label.error + .select2-container .select2-selection--single,
	.form-control-sm + label.error + .select2-container .select2-selection__rendered,
	.form-control-sm + label.error + .select2-container .select2-selection__arrow {
		height: 26px!important;
		line-height: 26px!important;
		font-size: 11px!important;
		padding-top: 0px!important;
	}

	/* Mismo tratamiento para el tamaño intermedio (30px). */
	.form-control-md + .select2-container,
	.form-control-md + label.error + .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,
	.form-control-md + label.error + .select2-container .select2-selection--single,
	.form-control-md + label.error + .select2-container .select2-selection__rendered,
	.form-control-md + label.error + .select2-container .select2-selection__arrow {
		height: 28px!important;
		line-height: 28px!important;
		font-size: 12px!important;
		padding-top: 0px!important;
	}

	/* Mismo tratamiento para los tamaños extra pequeños (26px y 24px). El alto
	   interno vuelve a ser el del contenedor menos los 2px del borde. */
	.form-control-xs + .select2-container,
	.form-control-xs + label.error + .select2-container {
		height: 26px!important;
		font-size: 10px!important;
	}

	.form-control-xs + .select2-container .select2-selection--single,
	.form-control-xs + .select2-container .select2-selection__rendered,
	.form-control-xs + .select2-container .select2-selection__arrow,
	.form-control-xs + label.error + .select2-container .select2-selection--single,
	.form-control-xs + label.error + .select2-container .select2-selection__rendered,
	.form-control-xs + label.error + .select2-container .select2-selection__arrow {
		height: 24px!important;
		line-height: 24px!important;
		font-size: 10px!important;
		padding-top: 0px!important;
	}

	.form-control-xxs + .select2-container,
	.form-control-xxs + label.error + .select2-container {
		height: 24px!important;
		font-size: 9px!important;
	}

	.form-control-xxs + .select2-container .select2-selection--single,
	.form-control-xxs + .select2-container .select2-selection__rendered,
	.form-control-xxs + .select2-container .select2-selection__arrow,
	.form-control-xxs + label.error + .select2-container .select2-selection--single,
	.form-control-xxs + label.error + .select2-container .select2-selection__rendered,
	.form-control-xxs + label.error + .select2-container .select2-selection__arrow {
		height: 22px!important;
		line-height: 22px!important;
		font-size: 9px!important;
		padding-top: 0px!important;
	}

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

	th >.form-control-sm.select-filtro + .select2-container,
	th >.form-control-md.select-filtro + .select2-container,
	th >.form-control-xs.select-filtro + .select2-container,
	th >.form-control-xxs.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.rounded-bottom-0 + .select2-container {
		border-bottom-left-radius: 0 !important;
		border-bottom-right-radius: 0 !important;
	}

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

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

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

	/*
	| Las ocho reglas de arriba solo quitan el REDONDEO del lado pegado; el borde de 1px de
	| .select2-container--default (ver arriba) seguia puesto en las dos piezas de cada pareja, y
	| adosadas sin espacio (buscador de personas, lensometria OD/OI, RX final, comandos
	| hora+minutos...) se leian como una linea doble en la costura. Se le quita SIEMPRE a la
	| pieza de la DERECHA (rounded-start-0), nunca a la de la izquierda: mismo criterio que
	| .border-start-0 en edad_calculada (Pacientes) y en los campos sueltos que se editan aparte
	| (input junto a select2, boton junto a select2).
	*/
	.select2.rounded-start-0 + .select2-container,
	.rounded-start-0 ~ .select2-container--default {
		border-left: 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;
}

.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-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: 60!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;
}

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

/* Tooltip de AYUDA de un campo: explica para que sirve un interruptor, asi que es varias
   lineas y 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. Se pide por campo
   con data-bs-custom-class, porque el tooltip lo cuelga Bootstrap del body y no del icono. */
.tooltip-ayuda {
	--bs-tooltip-max-width: 320px;
}

.tooltip-ayuda .tooltip-inner {
	text-align: left!important;
	padding: 10px 14px!important;
}

/* Con data-bs-html el contenido es HTML y hereda estilos del sistema (el titulo salia en gris,
   sin contraste sobre el fondo oscuro), asi que el color se fija. Todo va bajo
   data-bs-custom-class: no afecta a los tooltips del resto del sistema. Portado de appministra. */
.tooltip-ayuda .tooltip-inner,
.tooltip-ayuda .tooltip-inner * {
	color: #fff!important;
}

/* Titulo del tooltip de ayuda (data-bs-html): separado del texto por una linea tenue, para
   que se lea como encabezado y no como la primera frase. Portado de appministra. */
.tooltip-ayuda .tooltip-inner .titulo-tooltip {
	padding-bottom: 4px;
	margin-bottom: 6px;
	border-bottom: 1px solid rgba(255, 255, 255, .25);
}

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

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

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


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


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


	/* En pantallas estrechas el menu superior se queda solo con lo que no se puede
	   deducir: el logo, las pestanas y el avatar. Las barras siguen desplazandose
	   en horizontal, que es lo que sustituye al menu desplegable de antes. */
	@media (max-width: 991px) {
		:root {
			--margen-lateral-menu: 8px;
		}

		.marca-menu .nombre-menu,
		.boton-usuario .datos-usuario {
			display: none;
		}
	}


	@media (max-width: 575px) {
	}


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


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


	@media (min-width: 768px) {
		
	}


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


	@media (min-width: 992px) {
		
	}


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


	@media (min-width: 1200px) {
		.border-xl-start {
			border-left: var(--bs-border-width) var(--bs-border-style) var(--bs-border-color) !important;
		}
		/* Para la tarjeta pegada al lado IZQUIERDO de un .border-xl-start: sin esto, la
		   esquina redondeada se aparta de la linea divisoria y deja un hueco arriba y abajo
		   justo donde la tarjeta deberia tocarla. */
		.rounded-xl-end-0 {
			border-top-right-radius: 0 !important;
			border-bottom-right-radius: 0 !important;
		}
		/* Pareja de la anterior, para la tarjeta pegada al lado DERECHO (la que trae el
		   .border-xl-start). */
		.rounded-xl-start-0 {
			border-top-left-radius: 0 !important;
			border-bottom-left-radius: 0 !important;
		}
	}


/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/
/*::::::::::::::::::::::::::: HOJA DE FACTURA (VER / PAGAR) :::::::::::::::::::::::::::*/
/*  Hoja con apariencia de factura impresa, lista para exportar a PDF (DomPDF).      */


.hoja-factura {
	background-color: #ffffff;
	color: #3f3a36;
	border-radius: 0;
	box-shadow: 0 0.6rem 1.6rem rgba(39, 36, 32, 0.10);
	overflow: hidden;
	font-size: 0.8rem;
	line-height: 1.35;
}

.hoja-factura__cuerpo {
	padding: 1.75rem 1.9rem 1.6rem;
}

.hoja-factura__titulo {
	font-weight: 300;
	letter-spacing: 0.55rem;
	font-size: 1.85rem;
	line-height: 1;
	color: var(--color-appministra2-2);
	margin: 0;
}

.hoja-factura__numero {
	font-size: 0.7rem;
	letter-spacing: 0.06rem;
	color: var(--color-gray-2);
	text-transform: uppercase;
}

.hoja-factura__logo {
	max-height: 60px;
	max-width: 170px;
	object-fit: contain;
}

.hoja-factura__emisor {
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--color-appministra2-2);
	text-transform: uppercase;
	letter-spacing: 0.02rem;
}

.hoja-factura__rotulo {
	font-size: 0.65rem;
	letter-spacing: 0.12rem;
	text-transform: uppercase;
	color: var(--color-appministra2-1);
	font-weight: 700;
	margin-bottom: 0.35rem;
}

.hoja-factura__dato-label {
	color: var(--color-gray-2);
	font-weight: 600;
	text-transform: uppercase;
	font-size: 0.62rem;
	letter-spacing: 0.04rem;
}

.hoja-factura__dato-valor {
	color: #3f3a36;
	font-weight: 600;
}

.hoja-factura__divisor {
	border: 0;
	border-top: 1px solid #ece7e3;
	margin: 1.1rem 0;
}

/* Tabla de servicios */
.hoja-factura__tabla {
	width: 100%;
	border-collapse: collapse;
}

.hoja-factura__tabla thead th {
	background-color: var(--color-appministra2-2);
	color: #ffffff;
	font-weight: 600;
	font-size: 0.64rem;
	letter-spacing: 0.05rem;
	text-transform: uppercase;
	padding: 0.6rem 0.85rem;
	text-align: left;
}

.hoja-factura__tabla thead th.text-end {
	text-align: right;
}

.hoja-factura__tabla tbody td {
	padding: 0.6rem 0.85rem;
	border-bottom: 1px solid #efeae6;
	vertical-align: top;
	font-size: 0.78rem;
}

.hoja-factura__tabla tbody tr:nth-child(even) td {
	background-color: #faf7f5;
}

.hoja-factura__nota {
	color: var(--color-gray-2);
	font-size: 0.62rem;
	font-style: italic;
	font-weight: 400;
}

/* Bloque de totales */
.hoja-factura__resumen-linea {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 1rem;
	padding: 0.32rem 0;
	font-size: 0.78rem;
}

.hoja-factura__resumen-linea + .hoja-factura__resumen-linea {
	border-top: 1px solid #f1ece8;
}

.hoja-factura__destacado {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	background-color: var(--color-appministra2-1);
	color: #ffffff;
	border-radius: 0.65rem;
	padding: 0.7rem 1.05rem;
	margin-top: 0.65rem;
	font-weight: 700;
	letter-spacing: 0.03rem;
}

.hoja-factura__destacado--pagado {
	background-color: #198754;
}

.hoja-factura__destacado--anulado {
	background-color: var(--color-gray-4);
}

.hoja-factura__destacado-label {
	font-size: 0.78rem;
	text-transform: uppercase;
}

.hoja-factura__destacado-valor {
	font-size: 1.15rem;
}

/* Sello tipo "PAGADA / VENCIDA / ANULADA" */
.hoja-factura__sello {
	display: inline-block;
	transform: rotate(-9deg);
	border: 0.18rem solid currentColor;
	border-radius: 0.45rem;
	padding: 0.1rem 0.85rem;
	font-weight: 800;
	letter-spacing: 0.18rem;
	text-transform: uppercase;
	font-size: 1.05rem;
	opacity: 0.85;
}

.hoja-factura__pie {
	color: var(--color-gray-2);
	font-size: 0.66rem;
	line-height: 1.4;
}

/* Panel lateral para registrar el pago */
.panel-pago {
	background-color: #ffffff;
	border: 1px solid #ece7e3;
	border-radius: 1rem;
	padding: 1.1rem 1.15rem;
}

@media (min-width: 992px) {
	.panel-pago--sticky {
		position: sticky;
		top: 0.5rem;
	}
}

/* Impresion / exportacion: solo la hoja de factura del modal visible */
@media print {
	body * {
		visibility: hidden;
	}
	.modal.show .hoja-factura, .modal.show .hoja-factura * {
		visibility: visible;
	}
	.modal.show .hoja-factura {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		box-shadow: none;
		border-radius: 0;
	}
}


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

/* Lo dibuja fuerza_contrasena.js (icono + chips), en Usuarios, la recuperacion de cuenta y el
   usuario de sucursal. Los colores del icono/nivel/chips no van aqui: son las utilitarias de
   Bootstrap (text-success/text-warning/text-danger/text-muted) que el JS agrega y quita. */
.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;
}

/*:::::::::::::::::::::::::::ESQUINAS REDONDEADAS (UTILIDADES):::::::::::::::::::::::::::::*/
/*:::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::::*/

/* Bootstrap ya trae estas clases, pero estilos.css se carga despues y varias de sus reglas
   fijan border-radius con !important, por lo que las utilidades de Bootstrap pierden.
   Se redeclaran aqui (al final del archivo y con la clase repetida para ganar especificidad)
   para que apliquen sobre cualquier elemento: cards, botones, inputs, tablas, modales, etc.
   Para los select2 ver las reglas .select2.rounded-* + .select2-container, que ademas
   redondean el contenedor que dibuja Select2 al lado del <select>. */

.rounded-0.rounded-0 {
	border-radius: 0 !important;
}

.rounded-top-0.rounded-top-0 {
	border-top-left-radius: 0 !important;
	border-top-right-radius: 0 !important;
}

.rounded-bottom-0.rounded-bottom-0 {
	border-bottom-left-radius: 0 !important;
	border-bottom-right-radius: 0 !important;
}

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

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