/*
 # ########*###########################
 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);
}




/* =========================================
   PALETA DE COLORES DE FONDO (Actualizada)
   ========================================= */
.bckRed { background: #e74c3c !important; color: white !important; }
.bckGreen { background: var(--color-secundario-green) !important; color: white; }
.bckOrange { background: #f39c12 !important; color: white; }
.bckBlue { background: var(--color-primario-dark) !important; color: white; }
.bckSilver { background: #95a5a6 !important; color: white; }
.bckPurple { background: #8e44ad !important; color: white; }




/* Alertas modernas */
.alert {
	font-size: 1.2em;
	padding: 15px;
	border-radius: var(--radio-borde);
	background-color: #fef9c3; /* Amarillo pastel suave */
	color: #854d0e;
	border: 1px solid #fde047;
}


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


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