/*
 # ########*###########################
 Autor: José Luis Rodriguez
 Mail: jrodriguez@bincodex.com
 Web: https://bincodex.com
 Fecha: 2026-06-15 14:30:03
 Archivo: bse.css
 Codificación: UTF-8
 Editado en: Kate 25.04.3
 ####################################
 */



/* =========================================
   VARIABLES DE ESTILO MODERNAS (Basadas en Logo)
   ========================================= */
:root {
	/* Colores Principales */
	--color-primario-dark: #1e3a6d; /* Azul oscuro del texto 'Horizonte' */
	--color-secundario-green: #2ecc71; /* Verde brillante central */
	--color-secundario-lime: #a2d24a; /* Verde lima superior */
	--color-acento-coral: #ff8a75; /* Coral/Rosa derecho */

	/* Paleta de Grises y Fondos */
	--bg-gris-principal: #f4f7f6; /* Fondo de la app más limpio */
	--bg-panel: #ffffff;
	--bg-borde: #e1e8ed;
	--texto-principal: #333333;
	--texto-mutado: #757575;

	/* Tipografía */
	--fuente-principal: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

	/* Efectos */
	--sombra-suave: 0 4px 6px rgba(0, 0, 0, 0.05);
	--sombra-panel: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--radio-borde: 8px; /* Redondeado general */
	--radio-borde-lg: 16px; /* Redondeado para botones/paneles principales */
	--transicion: all 0.2s ease-in-out;
}


* {
	scrollbar-width: thin;
	scrollbar-color: var(--color-primario-dark) #f1f1f1;
	box-sizing: border-box; /* Mejor control de padding/width */
}

html, body {
	margin: 0px;
	padding: 0px;
	width: 100%;
	height: 100%;
	overflow: hidden;
	font-family: var(--fuente-principal);
}


/* Clases de alineación estándar */
.iz { text-align: left; }
.cn { text-align: center; }
.dr { text-align: right; }

/* Clases interactivas */
.lk, .cks_all_sel {
	cursor: pointer;
	user-select: none;
	color: var(--color-primario-dark);
	transition: var(--transicion);
}

.lk:hover {
	color: var(--color-secundario-green);
}



/*Cargador*/
#wait_sys {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(214, 214, 214, 0.63);
	z-index: 20;
	display: none;
	justify-content: center;
	align-items: center;
	font-size: 2.5em;
	color: #7b7b7b;
	backdrop-filter: blur(5px);
}

#modl_sys {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	background: rgba(214, 214, 214, 0.63);
	z-index: 19;
	display: none;
	justify-content: center;
	align-items: center;
	font-size: 2.5em;
	color: #7b7b7b;
	backdrop-filter: blur(5px);
}



/* =========================================
   ELEMENTOS DE UI COMUNES
   ========================================= */

/* Botón Horizonte Moderno */
.HM-button {
	padding: 10px 20px !important;
	/* Degradado usando los colores del logo */
	background: linear-gradient(135deg, var(--color-secundario-green) 0%, var(--color-primario-dark) 100%);
	border-radius: var(--radio-borde-lg) !important;
	border: 0px !important;
	color: white !important;
	cursor: pointer !important;
	font-size: 14px !important;
	font-weight: 600;
	letter-spacing: 0.5px;
	text-transform: uppercase;
	box-shadow: 0 4px 15px rgba(30, 58, 109, 0.2);
	transition: var(--transicion);
}

.HM-button:hover {
	box-shadow: 0 6px 20px rgba(30, 58, 109, 0.3);
	transform: translateY(-1px);
}

.HM-button:active {
	transform: translateY(1px);
	box-shadow: 0 2px 10px rgba(30, 58, 109, 0.2);
}





.card-llamada {
	border: 1px solid silver;
	padding: 7px;
	background: #fff;
	width: 300px;
	color: #000;
}


.logo-app {
	background: url('../img/logo2.png?v=5') no-repeat center center;
	background-size: contain;
	width: 240px;
	height: 65px;
	margin-bottom: 30px;
}

.aside_system .logo-app {
	background: url('../img/logo2.png?v=5') no-repeat center center #fff;
	background-size: contain;
	width: 240px;
	height: 65px;
	margin-bottom: 30px;
}






/*Dialog*/
dialog {
  border: none;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
}

#dlg-tit, #dlg-sti, .actions {
	text-align: center;
}

#dlg-tit {
	font-size: 1.6em;
}

#dlg-sti {
	font-size: 0.9em;
}

#dlg-btn {
	font-size: 1.1em;
	color: #fff;
	font-weight: bold;
	background: linear-gradient(to bottom, #258dc8 0%,#258dc8 63%);
	border: 0px;
	padding: 10px;
	min-width: 200px;
	border-radius: 8px;
}

.actions {
	padding: 5px;
}

/* El fondo detrás del modal */
dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px); /* Efecto de desenfoque */
}