@font-face {
    font-family: 'roboto_medium_regular';
    src: url('../webfonts/roboto-medium-webfont.woff2') format('woff2'),
         url('../webfonts/roboto-medium-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

@font-face {
    font-family: 'roboto_condensed_light';
    src: url('../webfonts/robotocondensed-light-webfont.woff2') format('woff2'),
         url('../webfonts/robotocondensed-light-webfont.woff') format('woff'),
         url('../webfonts/robotocondensed-light-webfont.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'roboto_condensed_regular';
    src: url('../webfonts/robotocondensed-regular-webfont.woff2') format('woff2'),
         url('../webfonts/robotocondensed-regular-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;

}

:root{
	--color-one: #F5F5F5;
	--color-two: #24292E;
	--color-three: #0366D6;

	--form-color: #14111A;

	--accent-color: #455A64;
	--border-color: #D8D8D8;
}

body,html{
	font-family: 'roboto_condensed_light';
	width: 100vw;
	height: 100vh;
	background-color: var(--color-one);
	color: #333;
	font-size: 16px;
}

.full-box{
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	width: 100%;
}

.form-neon{
	border: 1px solid var(--border-color);
	background-color: #FFF;
	padding: 15px;
	border-radius: 3px;
}

.radio-avatar-form{
	padding: 30px 7px;
}
.img-avatar-form{
	max-width: 100px;
}

/*  Scrolls */
.scroll::-webkit-scrollbar{
	width: 8px;
}
.scroll::-webkit-scrollbar-thumb{
	background: rgba(102,107,122,1);
}
.scroll::-webkit-scrollbar-thumb:active,
.scroll::-webkit-scrollbar-thumb:hover{
	background: rgba(102,107,122,1);
} 
.scroll::-webkit-scrollbar-track{
	background: rgba(29, 30, 34, 1);
}
.scroll::-webkit-scrollbar-track:hover, 
.scroll::-webkit-scrollbar-track:active{
	background: rgba(29, 30, 34, 1);
}

/*----------  Page headers styles  ----------*/
.page-header{
	padding: 30px 20px 60px 20px;
}
.page-header > :nth-child(1){
	padding-bottom: 7px;
}
.page-header > :nth-child(2){
	font-size: 18px;
}

/*----------  Page nav tabs  ----------*/
.page-nav-tabs{
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin-bottom: 30px;
}
.page-nav-tabs li,
.page-nav-tabs li a{
	height: 40px;
	line-height: 40px;
}
.page-nav-tabs li{
	margin: 5px 20px;
}
.page-nav-tabs li a{
	color: var(--accent-color);
	font-size: 17px;
	min-width: 200px;
	width: auto;
	display: block;
	text-align: center;
	user-select: none;
	transition: all .2s ease-in-out;
	border-bottom: 2px solid transparent;
}
.page-nav-tabs li a.active{
	color: var(--color-three);
	cursor: none;
	pointer-events: none;
}
.page-nav-tabs li a:hover{
	text-decoration: none;
	color: #333;
	border-bottom: 2px solid #333;
}
/*----------  Page 404 styles  ----------*/
.container-404{
	background: #000428;
	background: linear-gradient(to right, #004e92, #000428);
	color: #fff;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}
/*----------  Edit bootstrap styles  ----------*/
.form-control[readonly]{
	background-color: transparent;
}
.form-control:focus,
.form-control:active{
	outline: none;
	box-shadow: none;
	border: none;
}
.form-control-file:active,
.form-control-file:focus{
	outline: none;
}
.table .btn{
	margin-bottom: 0;
}
.table thead th{
	color: #FFF;
}
.table tbody tr{
	color: #333;
	transition: all .2s ease-in-out;
}
.table-dark,
.table{
	background-color: #fff;
}
.table-dark{
	border: 1px solid var(--accent-color);
}
.table-dark thead tr{
	background-color: var(--accent-color);
}
.table-dark td,
.table-dark thead th,
.table-dark th{
	border: none;
}
.table-dark tbody tr:hover{
	color: var(--color-three);
	background-color: #F5F5F5;
	font-weight: bold;
}
.page-link{
	transition: all .2s ease-in-out;
}
.page-link:hover,
.page-link.active{
	background-color: var(--color-three);
	color: #FFF;
}
table form{
	margin-bottom: 0;
}
/*----------  Text Styles  ----------*/
.roboto-medium{
	font-family: 'roboto_medium_regular';
}
.roboto-condensed-light{
	font-family: 'roboto_condensed_light';
}
.roboto-condensed-regular{
	font-family: 'roboto_condensed_regular';
}

/*----------  login Styles  ----------*/
.login-container{
	width: 100vw;
	height: 100vh;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #43C6AC;
	background: -webkit-linear-gradient(to right, #191654, #43C6AC);
	background: linear-gradient(to right, #191654, #43C6AC);
}
.login-content{
	width: 95%;
	max-width: 320px;
	height: auto;
	border: 1px solid var(--border-color);
	background-color: #FFF;
	border-radius: 4px;
	padding: 15px;
	color: var(--accent-color);
}
.btn-login{
	width: 90%;
	padding: 10px 0;
	display: block;
	margin: 0 auto;
	border-radius: 3px;
	margin-top: 30px;
	background-color: transparent;
	color: var(--accent-color);
	border: 1px solid var(--accent-color);
	transition: all .2s ease-out;
}
.btn-login:hover{
	background-color: var(--color-three);
	border: 1px solid var(--color-three);
	text-decoration: none;
	color: #fff;
}
.btn-login:active,
.btn-login:focus{
	outline: none;
}
/* Canvas de orbes para el login */
.login-container{ position: relative; overflow: hidden; } /* ancla el canvas */
.login-content{ position: relative; z-index: 2; }        /* por encima del canvas */

.spark-canvas{
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: .35;                 /* ajustá intensidad */
  mix-blend-mode: screen;       /* como en el hero */
  pointer-events: none;
}
.login-content .ax-logo{
  width: 72px;               /* similar a fa-5x */
  height: auto;
  display: inline-block;
  transform: translateY(2px);/* micro ajuste óptico */
}
/* Botón de recuperar contraseña (solo en el login) */
.login-content .btn-forgot{
  width: 90%;
  padding: 10px 0;
  display: block;
  margin: 10px auto 0;
  border-radius: 3px;
  background-color: transparent;
  color: var(--accent-color);
  border: 1px dashed var(--accent-color);
  opacity: .9;
  text-align: center;
  text-decoration: none;
  transition: all .2s ease-out;
  font-size: 0.95rem;
}
.login-content .btn-forgot:hover{
  background-color: var(--color-three);
  border-color: var(--color-three);
  color: #fff;
  opacity: 1;
  text-decoration: none;
}
.login-content .btn-forgot:focus{
  outline: none;
  box-shadow: 0 0 0 3px rgba(18,212,199,.25);
}
.login-content .pass-toggle{
  position:absolute;
  right:10px; bottom:10px;   /* ajustá si tu input es más alto/bajo */
  border:0; background:transparent; cursor:pointer;
  color: var(--accent-color); opacity:.7; padding:4px;
}
.login-content .pass-toggle:hover{ opacity:1 }



/*----------  Page layout Styles  ----------*/
.main-container{
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	overflow: hidden;
}
.page-content,
.nav-lateral{
	height: 100%;
	overflow: hidden;
}
.page-content,
.nav-lateral-content{
	overflow: auto;
}
.page-content{
	position: relative;
	padding-left: 270px;
	transition: all .2s ease-in-out;
	padding-bottom: 20px;
}
/*  Nav Lateral */
.nav-lateral{
	width: 270px;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1002;
	transition: all .2s ease-in-out;
	background-image: url('../assets/img/nav-font.jpg');
	background-position: center center;
	background-size: cover;
}
.nav-lateral-bg{ display: none; }
.nav-lateral-content{
	max-width: 270px;
	height: 100%;
	background-color: var(--color-two);
	background-color: rgba(36, 41, 46, .94);
	overflow-y: scroll;
	padding-bottom: 50px;
}
.nav-lateral-bar{
	height: 3px;
	background-color: var(--color-three);
}
.nav-lateral-avatar{
	padding: 40px 0;
}
.nav-lateral-avatar i{
	display: none;
}
.nav-lateral-avatar img{
	width: 50%;
	margin: 0 auto;
	display: block;
	border: 4px solid #FFF;
	border-radius: 100%;
}
.nav-lateral-avatar figcaption{
	margin-top: 20px;
	color: #FFF;
}
.nav-lateral-menu{
	height: auto;
}
.nav-lateral-menu ul{
	margin: 0;
	padding: 0;
	list-style: none;
}
.nav-lateral-menu ul li{
	width: 100%;
	height: auto;
}
.nav-lateral-menu ul li a{
	display: block;
	width: 100%;
	height: 45px;
	line-height: 45px;
	text-decoration: none;
	color: #FFF;
	font-size: 15px;
	box-sizing: border-box;
	padding-left: 20px;
	transition: all .2s ease-in-out;
}
.nav-lateral-menu ul li a.active{
	color: #FFF;
	background-color: var(--color-three);
}
.nav-lateral-menu ul li a:hover{
	color: #fff;
	background-image: linear-gradient(to right, transparent, rgba(255, 255, 255, .1) 50%, transparent);
}
.nav-lateral-menu ul li ul{
	display: none;
	border: 1px solid var(--color-three);
	background: rgba(20, 30, 48, .5);
}
.nav-lateral-menu ul li ul a{
	padding-left: 35px;
}
.show-nav-lateral-submenu{
	display: block !important;
}
.nav-lateral-menu .fa-chevron-down,
.nav-lateral-menu .fa-chevron-up{
	float: right;
	height: 45px;
	line-height: 45px;
	margin-right: 7px;
	transition: all .2s ease-in-out;
}

/*  Page content */
.navbar-info{
	height: 50px;
	border-bottom: 1px solid var(--border-color);
	text-align: right;
	padding-right: 10px;
}

.navbar-info a{
	color: var(--accent-color);
	height: 50px;
	min-width: 40px;
	text-align: center;
	line-height: 50px;
	display: inline-block;
	transition: all .2s ease-out;
	user-select: none;
}
.navbar-info a:hover{
	color: var(--color-three);
	background-image: radial-gradient(circle,rgba(250, 30, 78, .1), transparent 80%);
}
.navbar-info a:active,
.navbar-info a:focus{
	outline: none;
}
/* contenedor con gradiente del login */
.nav-lateral-content.scroll{
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #191654 0%, #43C6AC 100%);
}

/* capa oscura para legibilidad */
.nav-lateral-content.scroll::before{
  content:""; position:absolute; inset:0;
  background: rgba(8,12,18,.55); /* sube/baja 0.40–0.65 */
  z-index:0;
}

/* partículas */
.nav-lateral-content.scroll .spark-canvas{
  position:absolute; inset:0;
  z-index:1; opacity:.28;       /* un poco más opaco que en login */
  mix-blend-mode:screen; pointer-events:none;
}

/* todo el resto por encima */
.nav-lateral-content.scroll > *:not(.spark-canvas){
  position:relative; z-index:2;
}
/* Aísla el sidebar y baja el canvas detrás de todo su contenido */
.nav-lateral-content.scroll{
  position: relative;
  isolation: isolate;     /* stacking propio, no invade el header */
  overflow: hidden;
}

/* El canvas nunca debe recibir clics ni estar por encima */
.nav-lateral-content.scroll .spark-canvas{
  position: absolute;
  inset: 0;
  z-index: 0 !important;
  pointer-events: none !important;
}

/* Todo lo demás del sidebar por encima del canvas */
.nav-lateral-content.scroll > *:not(.spark-canvas){
  position: relative;
  z-index: 1;
}

/* Asegura que los triggers queden arriba */
.show-nav-lateral{ position: relative; z-index: 5; }
.nav-lateral-bg{ z-index: 4; } /* overlay para cerrar en mobile */
/* el contenedor del menú con gradiente + aislamiento de capas */
.nav-lateral-content.scroll{
  position: relative;
  isolation: isolate;     /* evita que hijos "salten" de z-index */
  overflow-y: auto;       /* recupera el scroll vertical */
  background: linear-gradient(135deg, #191654 0%, #43C6AC 100%);
}

/* capa oscura para legibilidad, debajo del contenido */
.nav-lateral-content.scroll::before{
  content:"";
  position:absolute; inset:0;
  background: rgba(8,12,18,.55);
  z-index: 0;
}

/* el canvas SIEMPRE detrás y sin capturar toques */
.nav-lateral-content.scroll .spark-canvas{
  position:absolute; inset:0;
  z-index: 0 !important;
  pointer-events: none !important;
  mix-blend-mode: screen;
  opacity: .28;
}

/* todo lo demás del menú por encima del canvas */
.nav-lateral-content.scroll > *:not(.spark-canvas){
  position: relative;
  z-index: 1;
}
/* Footer de marca en el sidebar */
.ax-nav-footer{
  position: sticky;          /* se queda pegado al fondo del panel */
  bottom: 8px;
  z-index: 2;                /* por encima del canvas */
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(8,12,18,.35);        /* opaco para legibilidad */
  color: #DCE7F2;
  pointer-events: none;                  /* no interfiere con taps */
}
.ax-nav-footer img{
  width: 22px; height: 22px; flex: 0 0 auto;
  opacity: .95; filter: drop-shadow(0 1px 1px rgba(0,0,0,.25));
}
.ax-nav-footer .brand{
  display: block;
  font-weight: 600;
  font-size: 13px;
  color: #fff;
  line-height: 1.15;
}
.ax-nav-footer small{
  display: block;
  font-size: 11px;
  opacity: .85;
  line-height: 1.15;
}

/* asegura espacio al final para que no lo tape el scroll */
.nav-lateral-content.scroll{ padding-bottom: 72px; }

/* los triggers (hamburguesa/cerrar) bien arriba */
.show-nav-lateral{ position: relative; z-index: 1003; }



/*----------  Home Styles  ----------*/
.table-dashboard{
	background-color: #fff;
	color: #333;
}
.table-dashboard thead tr th{
	color: #333;
	font-weight: bolder;
	text-transform: uppercase;
}
.tile-container{
	text-align: center;
	padding: 20px 25px;
}
.tile{
	height: 200px;
	width: 200px;
	margin: 10px;
	display: inline-block;
	text-decoration: none;
	color: var(--accent-color);
	border: 1px solid var(--border-color);
	border-radius: 3px;
	user-select: none;
	transition: all .2s ease-in-out;
	background-color: #FFF;
}
.tile:hover{
	text-decoration: none;
	border-color: var(--color-three);
}
.tile:focus,
.tile:active{
	outline: none;
}
.tile-tittle{
	margin: 0;
	width: 100%;
	padding: 0;
	height: 40px;
	line-height: 40px;
	box-sizing: border-box;
	text-transform: uppercase;
	border-bottom: 1px solid var(--border-color);
	transition: all .2s ease-in-out;
	font-family: 'roboto_medium_regular';
}
.tile:hover .tile-tittle{
	color: #FFF;
	border-color: var(--color-three);
	background-color: var(--color-three);
}
.tile-icon{
	width: 100%;
	height: 160px;
	box-sizing: border-box;
	padding-top: 22px;
}
.tile-icon > i{
	font-size: 80px;
}
.tile-icon > p{
	font-family: 'roboto_medium_regular';
	height: 35px;
	line-height: 35px;
}
.tile:hover .tile-icon > i,
.tile:hover .tile-icon > p{
	color: var(--color-three);
}

/*----------  Product  ----------*/
.product-container{
	width: 100%;
	height: auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: row;
}
.product-list,
.product-category{
	box-sizing: border-box;
	background-color: #FFF;
	border: 1px solid #E1E1E1;
}
.product-list{
	width: calc(100% - 250px);
	padding: 20px;
}
.product-category{
	flex-grow: 0;
	width: 250px;
}
.product-category h5{
	color: var(--color-three);
	padding: 15px 0;
	margin: 0;
	border-bottom: 1px solid #E1E1E1;
}
.product-category-list{
	width: 100%;
	height: auto;
}
.product-category-list a{
	padding: 10px 0;
	border-left: 4px solid transparent;
	display: block;
	color: #333;
	position: relative;
	transition: all .2s ease-in-out;
}
.product-category-list a:hover{
	text-decoration: none;
	color: var(--color-three);
	border-left: 4px solid var(--color-three);
	font-weight: bolder;
}
.img-product-list{
	max-width: 160px;
	max-height: 160px;
	min-width: 100px;
	min-height: 100px;
	border-right: 1px solid #E1E1E1;
	display: block;
	margin: 0;
	padding: 0;
	margin-right: 0 !important;
	background-color: rgba(2, 133, 255, 0.05);
}
.table-product{
	width: 100%;
}
.table-product td{
	padding: 9px 0;
}
.form-product{
	display: inline-block;
	margin: 0;
}
.media-product{
	padding: 0;
	background-color: #FFF;
	border: 1px solid #E1E1E1;
	margin-bottom: 25px;
}
.media-product:hover{
	background-color: rgba(2, 133, 255, 0.05);
}
.product-media-body{
	position: relative;
}
.media-product-title{
	color: var(--color-three);
	padding: 5px;
	margin: 0;
	border-bottom: 1px solid #E1E1E1;
}
.media-product-options{
	border-top: 1px solid #E1E1E1;
}

.img-product-info{
	max-width: 200px;
	max-height: 200px;
	display: block;
	margin: 0 auto;
	margin-bottom: 20px;
}

/*----------  Sale  ----------*/
.sale_input-cant{
	width: 40px;
	margin: 0 auto;
	padding: 0;
	padding-right: 0;
	height: auto;
	text-align: center;
}
.btn-sale-options{
	padding: 0;
	width: 35px;
	height: 35px;
	line-height: 35px;
}

/*----------  Breakpoints personalizados  ----------*/
@media(max-width: 992px){
	.nav-lateral{
		width: 100%;
		overflow: hidden;
		display: none;
		background-image: none;
	}
	.nav-lateral.active{
		display: block;
		z-index: 9999;
	}
	.nav-lateral-bg{
		width: 100%;
		height: 100%;
		background-color: rgba(3, 3, 3, .4);
		position: fixed;
		display: none;
		z-index: 1001;
	}
	.nav-lateral-content{
		position: absolute;
		left: 0;
		top: 0;
		z-index: 3;
		transform: translateX(-400px);
		transition: all .3s ease-in-out;
		background-color: var(--color-two);
	}
	.nav-lateral.active .nav-lateral-content{
		transform: translateX(0);
	}
	.nav-lateral-avatar i{
		height: 50px;
		width: 50px;
		line-height: 50px;
		color: #FFF;
		cursor: pointer;
		font-size: 25px;
		position: absolute;
		top: 5px;
		right: 0;
		text-align: center;
		display: block;
		transition: all .2s ease-out;
	}
	.nav-lateral-avatar i:hover{
		color: var(--color-three);
	}
	.page-content{
		padding-left: 0;
	}
	.product-container{
		flex-direction: column;
	}
	.product-list{
		padding: 15px;
		width: 100%;
		
	}
	.product-category{
		flex-grow: 0;
		width: 100%;
	}
}
@media(min-width: 993px){
	.nav-lateral.active{
		transform: translateX(-400px);
	}
	.page-content.active{
		padding-left: 0;
	}
}
@media(min-width: 1200px){
	.col-product{
		padding: 9px 0;
		text-align: center;
	}
}
.ax-page-footer{
  position: fixed; right: 12px; bottom: 10px; z-index: 900;
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 10px;
  background: rgba(8,12,18,.35); backdrop-filter: blur(4px);
  color: #E6EEF7; pointer-events: none;
}
.ax-page-footer img{ width:18px; height:18px; opacity:.95; }
.ax-page-footer .brand{ font-weight:600; font-size:12px; color:#fff; line-height:1.15; }
.ax-page-footer small{ font-size:11px; opacity:.85; line-height:1.15; }
@media (max-width: 420px){
  .ax-page-footer{ right:8px; bottom:8px; padding:7px 8px; gap:8px; }
  .ax-page-footer img{ width:16px; height:16px; }
  .ax-page-footer small{ display:none; }
}
/* ===== Axora hover palette (drop-in) ===== */
:root{
  --axora-blue: #1F3A8A;
  --axora-blue-12: rgba(31,58,138,.12);
  --axora-turq: #12D4C7;
  --axora-turq-12: rgba(18,212,199,.12);
  /* usa el azul Axora como “accent” global de tu tema */
  --color-three: var(--axora-blue);
}

/* Sidebar: hover más limpio (sin ese azul marino feo) */
.nav-lateral-menu ul li a:hover{
  background-image: none !important;
  background: linear-gradient(90deg, var(--axora-blue-12), transparent 65%) !important;
  color: #fff;
}

/* Top navbar (iconos a la derecha) */
.navbar-info a:hover{
  color: var(--axora-turq) !important;
  background-image: radial-gradient(circle, var(--axora-turq-12), transparent 80%) !important;
}

/* Tarjetas / recuadros del dashboard */
.card:hover,
.panel:hover,
.tile:hover,
.widget:hover,
.stats:hover,
.dash-tile:hover{
  background: linear-gradient(135deg, var(--axora-blue-12), var(--axora-turq-12)) !important;
  border-color: rgba(31,58,138,.35) !important;
  box-shadow: 0 8px 20px rgba(18,212,199,.15);
  transition: background .12s ease, box-shadow .12s ease, border-color .12s ease;
}
/* ===== Submenú más legible ===== */

/* Fondo del submenú un poco más oscuro para contraste */
.nav-lateral-menu ul li ul{
  background: rgba(10,17,28,.65) !important;
  border-color: rgba(31,58,138,.35) !important;
}

/* Texto más nítido en todos los sub-items */
.nav-lateral-menu ul li ul a{
  color: #F4F8FF !important;          /* blanco frío */
  opacity: 1 !important;              /* quita “suave” */
  text-shadow: 0 1px 0 rgba(0,0,0,.25);/* levanta sobre el fondo */
}

/* Hover de sub-item (paleta Axora) */
.nav-lateral-menu ul li ul a:hover{
  background: linear-gradient(90deg, rgba(18,212,199,.18), transparent 60%) !important;
  color: #fff !important;
}

/* Activo en submenú (barrita + fondo sutil) */
.nav-lateral-menu ul li ul a.active{
  border-left: 3px solid #12D4C7 !important;
  background: linear-gradient(90deg, rgba(31,58,138,.28), transparent) !important;
  color:#fff !important;
}

/* (por si el último quedaba más “lavado”) */
.nav-lateral-menu ul li ul li:last-child a{
  color:#FFFFFF !important;
  opacity:1 !important;
}