@charset "utf-8";

HTML {
	scroll-behavior: smooth; /* Funciona en enlaces con #id */
}

BODY {
	font-family:Arial, Helvetica, sans-serif;
	cursor:default;
	margin:55px 0 0 0;
	padding:0;
	background-color:rgba(240,240,240,1);
}

::selection {
	background: rgba(var(--color-theme_R),var(--color-theme_G),var(--color-theme_B),.3);
	color: var(--color-theme-background-text);
}

.Teclado_numerico_theme {
	font-size:1.8em;
	width:50px;
	height:50px;
	margin:0 3px 3px 0;
}

.Btn_Resaltar:hover{
	transform: scale(1.05);
	box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.Iconos_Menu_Principal {
	height:2em;
	margin:0 .5em 0 0;
}

.Iconos_Menu_Principal_Escritorio{
	height:5em;
}
.Iconos_btn {
	height:30px;
	font-size:24px;
	margin:.2px;
}
.Iconos_btn:hover{
	transform: scale(1.05);
	filter: brightness(110%);
}
.Iconos_en_texto{
	font-size:24px;
	margin:.2px;
}
.Iconos {
	height:1.2em;
}
TEXTAREA {
	resize: none;	
}
INPUT[type="number"]{
	text-align:right;
}

select[multiple] {
	height: calc(1.5em * 4 + 0.75em + 2px); /* Adjust height for 4 rows */
	overflow-y: auto; /* Enable vertical scrolling if needed */
}

select optgroup {
	color: var(--color-theme-background-text);
	background-color: var(--color-theme);
}

select optgroup option {
	color:black;
	background-color:#ffffff;
}


a {
	color: var(--color-theme);
	text-decoration: none;
	transition: color 0.3s ease;
}

a:hover {
	color: var(--color-theme);
	text-decoration: none;
}

a:focus {
	outline: none;
}
a:focus img {
	filter: brightness(130%);
}

.bi .bi-toggle2-off{
	color: var(--bg-secondary);
}

.bi .bi-toggle2-on{
	color: var(--color-theme);
}


.form-check-input{
	background-color: rgba(var(--color-theme), 0.3);
	border-color: rgba(var(--color-theme), 0.3);
	--thumb-color: var(--color-theme-background-text);
	--thumb-border: 1px solid var(--color-theme-background-text);
}
.form-check-input:checked {
	/* Color del check cuando está activo */
	background-color: var(--color-theme);
	border-color: var(--color-theme);
}


.form-switch .form-check-input {
	/* Color del track (barra) cuando NO está activo */
	background-color: rgba(var(--color-theme), 0.3);
	border-color: rgba(var(--color-theme), 0.3);
	--thumb-color: var(--color-theme-background-text);
	--thumb-border: 1px solid var(--color-theme-background-text);
}
  
.form-switch .form-check-input:checked {
	/* Color del track cuando está activo */
	background-color: var(--color-theme);
	border-color: var(--color-theme);
}
  
.form-switch .form-check-input:focus {
	/* Color del efecto focus */
	box-shadow: 0 0 0 0.25rem rgba(var(--color-theme), 0.25);
}



.accordion-button {
	background-color: var(--color-theme);
	color: var(--color-theme-background-text);
	border: none;
}

.accordion-button::after {
	color: var(--color-theme-background-text);
}

.accordion-button:focus::after {
	color: var(--color-theme);
}

.accordion-button:not(.collapsed) {
	color: var(--color-theme-background-text);
	background-color: var(--color-theme);
	box-shadow: inset 0 -1px 0 var(--color-theme);
}

.accordion-button:focus {
	box-shadow: 0 0 0 0.25rem var(--color-theme);
	filter: brightness(1.25);
}

.accordion-item {
	border: 1px solid var(--color-theme);
}

.accordion-body {
	background-color: rgba(255, 255, 255, 0.85);
}


/* DATOS TABLAS ------------------------------------------------------------------------------------------------------------------------------ */
#ID_Table thead {
	position: sticky;
	top: 45px;
	background-color: #f8f9fa;
	border-spacing: 0;
	z-index: 10; /* Ensure thead stays above other elements */
}
/* Elimina bordes internos de las celdas */
#ID_Table thead td,
#ID_Table thead th {
	border: none !important;
}
#ID_Table thead .input-group .btn {
	z-index: 5; /* Ensure buttons stay below thead */
}
#ID_Table tfoot {
	position: sticky;
	bottom: 0;
	background-color: #f8f9fa;
	border-spacing: 0;
	z-index: 5; /* Ensure tfoot stays above other elements */
	box-shadow: 0 -4px 7px rgba(var(--color-theme_R),var(--color-theme_G),var(--color-theme_B), 0.3); /* Add shadow to enhance visibility */
	font-weight: bold;
}
#ID_Table tfoot td,
#ID_Table tfoot th {
	border: none !important;
}





#ID_Table_lista {
	animation: fadeIn 1s ease-in-out;
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}

/* Version Movil */
#ID_Table_lista_Menu_Movil{
	position: sticky !important;
	top: 45px;
	z-index: 999;
}
#ID_Table_lista_Menu_Movil .bi-list {
	font-size: 1.2em !important;
}

#ID_Table tr td .form-control { padding:3px; font-size:.8rem; background-color:transparent; }
#ID_Table tr td .form-control:hover { background-color:rgba(255,255,255,1); }
#ID_Table tr td .form-control:focus { background-color:rgba(255,255,255,1); }

#ID_Table tr td .form-select { padding-left:3px; font-size:.8rem; background-color:transparent; }
#ID_Table tr td .form-select:hover { background-color:rgba(255,255,255,1); }
#ID_Table tr td .form-select:focus { background-color:rgba(255,255,255,1); }

#ID_Table input[type=number]::-webkit-inner-spin-button, 
#ID_Table input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  margin: 0; 
}
#ID_Table input[type=date]{
	text-align:center;
}
#ID_Table TEXTAREA {
	text-align:justify;
	font-size:.9em;
}



/* SCROLLBAR PERSONALIZADO --------------------------------------------------------------------------------------------------------------- */
::-webkit-scrollbar {
	width: 8px;
}

::-webkit-scrollbar-track {
	background: rgba(var(--color-theme_R), var(--color-theme_G), var(--color-theme_B), .1);	
}

::-webkit-scrollbar-thumb {
	background-color: var(--color-theme); 
	border-radius: 5px; 
	transition: width 0.3s ease;
}

::-webkit-scrollbar-thumb:hover {
	background-color: rgba(var(--color-theme_R), var(--color-theme_G), var(--color-theme_B), .8);
	width: 16px; /* Increases width when hovered */
}

#ID_Catalogo_productos::-webkit-scrollbar {
	width: 20px;
}


/*  CONTAINER PRINCIPAL en Index (Solo se una una ves) ---------------------------------------------------------------------------------------  */
#ID_Container_Principal_CRM{
	max-width:1500px; 
}


/* AJUSTAR DISEÑO PERZONALIZADO DE BOOSTRAP ---------------------------------------------------------------------------------------------------- */
.text-theme {
	color: var(--color-theme);
}
.text-theme-input-background {
	color: var(--color-theme-background-text);
}

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

.border-theme {
	border-color: var(--color-theme);
}

.Theme_Color_Icono_Menu {
	color: var(--color-theme);
}

#Menu_Principal{
	background: linear-gradient(360deg, var(--color-theme) 0%, rgba(255,255,255,0) 1px);
}

.Theme_Color_Btn_Menu {
	background-color: var(--color-theme);
	border: var(--color-theme-input-bordes);
	color: var(--color-theme-background-text);
}

.Theme_Color_Btn_Menu:hover {
	background-color: var(--color-theme) !important;
	filter: brightness(112%);
	color: var(--color-theme-background-text);
}

.Theme_Color_Btn_Menu:active {
	background-color: var(--color-theme) !important;
	filter: brightness(100%) !important;
	color: var(--color-theme-background-text);
	transform: translateY(1px) scale(0.995);
}

.Theme_Color_Btn_Menu:focus {
	background-color: var(--color-theme) !important;
	filter: brightness(112%);
	color: var(--color-theme-background-text);
	box-shadow: 0 0 0 0.25rem rgba(var(--color-theme_R),var(--color-theme_G),var(--color-theme_B), 0.25);
}


/*   CLASES DE BOOSTRAP MODIFICADAS  */
.progress-bar-theme {
	background-color: var(--color-theme);
}

.btn {
	border-radius:.20em;
}

.table thead {
	background: linear-gradient(360deg, var(--color-theme) 0%, rgba(255,255,255,0) 4px);
	/*filter: brightness(10000%);*/
}

.dropdown-item.active, .dropdown-item:active {
  color: var(--bs-dropdown-link-active-color);
  text-decoration: none;
  background-color: var(--color-theme);
}

.modal .modal-header {
	background-color:var(--color-theme); 
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
	color:rgba(255,255,255,1);
	/*border-bottom: var(--color-theme) 2px solid;*/
}
.modal .modal-content {
	border:none !important;
}

.modal .modal-footer {
	border-top:none;
}

.Titulo_Separardor_Datos_Modal {
	margin-top: 1rem;
	margin-left: 0;
	margin-right: 0;
	margin-bottom: 0.5rem;
	font-size: 1.25rem;
	position: sticky;
	top: 0;
	background-color: #f8f9fa;
	padding: 0.5rem;
	border: 1px solid #dee2e6;
	border-radius: 0.25rem;
	box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
	z-index: 10;
}

.offcanvas .offcanvas-header {
	background-color:var(--color-theme); 
	background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.35), rgba(255, 255, 255, 0));
	color:rgba(255,255,255,1);
}

.tooltip {
  --bs-tooltip-bg: var(--color-theme-tooltip);
  --bs-tooltip-color: var(--bs-white);
}


textarea:active, 
textarea:focus, 
select:active, 
select:focus, 
input:focus, 
input[type]:focus {
    border-color: var(--color-theme) !important;
    box-shadow: 0 1px 1px rgba(0,0,0,0)inset, 0 0 6px var(--color-theme-input-bordes) !important;
    /* outline: 0 none; Desactivado para validar porque los <a> no obtienenle foco */
}

.Alert_required { /* input textarea, select */
	/* _JS/_Inputs_Patters.js */
	border-left: 3px solid;
}

.navbar-toggler {
	transition: transform 0.3s ease-in-out;
}

.navbar-toggler.collapsing {
	transform: rotate(90deg);
}

.dropdown-menu {
	max-height: 45vh; 
	overflow-y: auto;
	overflow-x: hidden; 
	width:auto; 
	max-width:60vw;
	z-index: 20;
	opacity: 0;
}

.dropdown-menu.show {
	opacity: 1;
}

.dropdown-item:hover {
	background-color: var(--color-theme);
	filter: brightness(110%);
	color:#FFFFFF;
}

.dropdown-item:hover img, .dropdown-item:hover a, .dropdown-item:hover button {
	filter: none;
}


.badge_theme {
	background-color: var(--color-theme);
	color: var(--color-theme-background-text);
}

.fade {
	backdrop-filter: blur(2px);
	-webkit-backdrop-filter: blur(8px);
}





/* CHAT ------------------------------------------------------------------------------------------------------------------------------ */
.msj_cuadro_Izq{
	display:block;
	border-radius: 0 .5em .6em .5em;
	border:solid 1px #CCCCCC;
	padding:.3em;
	margin-left:0;
	margin-right:20%;
	background-color:rgba(234,234,234,1);
	margin-top:5px;
}
.msj_cuadro_Der{
	display:block;
	border-radius:.5em 0 .5em .6em;
	border:solid 1px #CCCCCC;
	padding:.3em;
	margin-left:20%;
	margin-right:0;
	background-color:var(--color-theme);
	box-shadow: 0px 0px 400px 400px rgba(255,255,255,0.7) inset;
	margin-top:5px;
}
msj_nick{
	display:block;
	font-size:.8em;
	font-weight:bold;
}
msj_msj{
	display:block;
}
msj_fecha{
	display:block;
	text-align:right;
	font-size:.7em;
	font-style:oblique;
}

#loader_general {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: rgba(0, 0, 0, 0.3);
	z-index: 9999;
	display: none;
}

@media (max-width: 767px) {
	#whatsapp-help {
		display: none !important;
	}
}


.Ico_msjs_pendientes{
	height:1rem; 
	top:-10px; 
	right:-10px; z-index:1;
}
.Ico_documentos_cargados{
	height:1rem; 
	top:5px; 
	right:-10px; z-index:1;
}	

/* IDIOMA ----------------------------------- */
.class_Idioma_Espanol {  }
.class_Idioma_Ingles  { display:none; }
.class_Idioma_Chino   { display:none; }