/* ----------------------------------------------------------------
	Custom CSS

	Add all your Custom Styled CSS here for New Styles or
	Overwriting Default Theme Styles for Better Handling Updates
-----------------------------------------------------------------*/

/* ----------------------------------------------------------------
	Hector Academy - Color Variables
-----------------------------------------------------------------*/
:root {
	/* Colores Corporativos Principales */
	--cnvs-themecolor: #1B9CD9; /* Azul Brillante (Cyan) - Color principal */
	--cnvs-themecolor-rgb: 27, 156, 217;

	/* Azul Corporativo (Navy) */
	--hector-navy: #005A8D;
	--hector-navy-rgb: 0, 90, 141;

	/* Azul Brillante (Cyan) - Gorro de graduación */
	--hector-cyan: #1B9CD9;
	--hector-cyan-rgb: 27, 156, 217;

	/* Colores Complementarios */
	--hector-light-blue: #4DB8E8; /* Azul Claro */
	--hector-dark-blue: #003D5C; /* Azul Oscuro */

	/* Colores Neutros */
	--hector-white: #FFFFFF;
	--hector-light-gray: #F5F7FA;
	--hector-medium-gray: #8B95A5;
	--hector-dark-gray: #2C3E50;

	/* Colores de Acento (Acciones) */
	--hector-success: #27AE60; /* Verde */
	--hector-warning: #F39C12; /* Naranja */
	--hector-error: #E74C3C; /* Rojo */
	--hector-info: #1B9CD9; /* Cyan */

	/* Canvas Theme Compatibility */
	--cnvs-body-color: #2C3E50; /* Gris Oscuro para textos */
	--cnvs-secondary-color: #8B95A5; /* Gris Medio */

	/* Fuentes */
	--cnvs-body-font: "Inter", sans-serif;
	--cnvs-primary-font: "Inter", sans-serif;
	--cnvs-secondary-font: "Playfair Display", serif;
}

/* ----------------------------------------------------------------
	Loading Screen / Spinner Styles
-----------------------------------------------------------------*/

/* Contenedor principal del loading - Pantalla completa centrada */
#loading {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #fff;
	z-index: 9999;
	display: flex;
	align-items: center;
	justify-content: center;
}

.loading-content {
	text-align: center;
}

.loading-text {
	margin-top: 20px;
	font-size: 16px;
	color: #666;
	font-weight: 500;
	letter-spacing: 0.5px;
}

/* Estilos para el spinner CSS3 de Canvas */
.css3-spinner {
	margin: 50px auto;
	width: 50px;
	height: 40px;
	text-align: center;
	font-size: 10px;
}

.css3-spinner > div {
	background-color: var(--cnvs-themecolor);
	height: 100%;
	width: 6px;
	display: inline-block;
	margin: 0 1px;
	-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
	animation: sk-stretchdelay 1.2s infinite ease-in-out;
}

.css3-spinner .css3-spinner-rect2 {
	-webkit-animation-delay: -1.1s;
	animation-delay: -1.1s;
}

.css3-spinner .css3-spinner-rect3 {
	-webkit-animation-delay: -1.0s;
	animation-delay: -1.0s;
}

.css3-spinner .css3-spinner-rect4 {
	-webkit-animation-delay: -0.9s;
	animation-delay: -0.9s;
}

.css3-spinner .css3-spinner-rect5 {
	-webkit-animation-delay: -0.8s;
	animation-delay: -0.8s;
}

@-webkit-keyframes sk-stretchdelay {
	0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
	20% { -webkit-transform: scaleY(1.0) }
}

@keyframes sk-stretchdelay {
	0%, 40%, 100% {
		transform: scaleY(0.4);
		-webkit-transform: scaleY(0.4);
	}
	20% {
		transform: scaleY(1.0);
		-webkit-transform: scaleY(1.0);
	}
}

/* ----------------------------------------------------------------
	Hector Academy - Custom Styles with Brand Colors
-----------------------------------------------------------------*/

/* Títulos y Encabezados - Navy */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
	color: var(--hector-navy);
}

/* Links - Cyan con hover Light Blue */
a {
	color: var(--hector-cyan);
}

a:hover {
	color: var(--hector-light-blue);
}

/* Botones Primarios - Cyan */
.btn-primary,
.button {
	background-color: var(--hector-cyan);
	border-color: var(--hector-cyan);
	color: white;
}

.btn-primary:hover,
.button:hover {
	background-color: var(--hector-light-blue);
	border-color: var(--hector-light-blue);
}

/* Botones Secundarios - Navy */
.btn-secondary {
	background-color: var(--hector-navy);
	border-color: var(--hector-navy);
	color: white;
}

.btn-secondary:hover {
	background-color: var(--hector-dark-blue);
	border-color: var(--hector-dark-blue);
}

/* Header/Navegación - Navy */
#header {
	background-color: var(--hector-white);
	border-bottom: 1px solid var(--hector-light-gray);
}

#header .menu-link {
	color: var(--hector-navy);
}

#header .menu-link:hover {
	color: var(--hector-cyan);
}

/* Logo - Espaciado */
#logo {
	padding: 15px 0;
}

#logo img {
	max-height: 60px;
}

/* Top Bar */
#top-bar {
	background-color: var(--hector-navy);
	color: white;
}

/* Top Bar Sticky */
.top-bar-sticky {
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

#top-bar a {
	color: white;
	transition: color 0.3s ease;
}

#top-bar a:hover {
	color: var(--hector-light-blue);
}

#top-bar a i {
	transition: transform 0.3s ease;
}

#top-bar a:hover i {
	transform: scale(1.1);
}

/* Footer - Dark Blue */
#footer {
	background-color: var(--hector-dark-blue);
	color: white;
}

#footer h4,
#footer .widget-title {
	color: white;
}

#footer a {
	color: var(--hector-light-gray);
}

#footer a:hover {
	color: var(--hector-cyan);
}

/* Secciones con fondo alterno */
.bg-light-section {
	background-color: var(--hector-light-gray);
}

/* Textos */
body {
	color: var(--hector-dark-gray);
}

.text-secondary,
.text-muted {
	color: var(--hector-medium-gray) !important;
}

/* Cards con hover - Cyan accent */
.card:hover,
.product-card:hover {
	border-color: var(--hector-cyan);
	box-shadow: 0 0 20px rgba(27, 156, 217, 0.2);
}

/* Badges y Pills */
.badge-primary {
	background-color: var(--hector-cyan);
}

.badge-success {
	background-color: var(--hector-success);
}

.badge-warning {
	background-color: var(--hector-warning);
}

.badge-danger {
	background-color: var(--hector-error);
}

.badge-info {
	background-color: var(--hector-info);
}

/* Alerts */
.alert-success {
	background-color: rgba(39, 174, 96, 0.1);
	border-color: var(--hector-success);
	color: var(--hector-success);
}

.alert-warning {
	background-color: rgba(243, 156, 18, 0.1);
	border-color: var(--hector-warning);
	color: var(--hector-warning);
}

.alert-danger {
	background-color: rgba(231, 76, 60, 0.1);
	border-color: var(--hector-error);
	color: var(--hector-error);
}

.alert-info {
	background-color: rgba(27, 156, 217, 0.1);
	border-color: var(--hector-info);
	color: var(--hector-info);
}


/* Footer Responsive - Center lists on mobile */
@media (max-width: 991px) {
	#footer .widget ul {
		list-style: none;
		padding-left: 0;
	}
}