/* crea variables de colores */
:root {
--color-primario: #8a0f09;
--color-secundario: #f13535;
--color-terciario: ##F2CB05;
--color-cuarteario:#14dc7c;
}
/* crea variables de colores */
.bg_pri {
background-color: var(--color-primario);
}
.bg_sec {
background-color: var(--color-secundario);
}
.bg_ter {
background-color: var(--color-terciario);
}
.bg_cua {
background-color: var(--color-cuarteario);
}
.color_pri{
color: var(--color-primario);
}
.color_sec{
color: var(--color-secundario);
}
.color_ter{
color: var(--color-terciario);
}
.btn_sec{
color: white;
background-color: var(--color-secundario);
}
.btn_sec:hover {
background-color: var(--color-primario); /* Cambia a un color diferente en hover */
color: white;
}

.btn_pri{
color: white;
background-color: var(--color-secundario);
}

 /* FUENTE DE TEXTO */
 body {
    font-family: 'Poppins', sans-serif !important;
    /* font-family: 'Inter', sans-serif; */
    /* font-family: 'Nunito', sans-serif; */
    /* font-family: 'Roboto', sans-serif; */
}

/* botones */

.btn-outline-success {
color: var(--color-primario);
border-color: var(--color-secudaria);
}
/* botones */


/* Estilos para las tarjetas */
.card-info {
background-color: #f8d7da;
border-color: #f5c6cb;
}

.card-info .card-block {
padding: 1.5rem;
}

.card-info .card-footer {
background-color: #f5c6cb;
text-align: center;
}

/* Iconos de la tarjeta */
.card-info .fa-user,
.card-info .fa-key {
font-size: 30px;
}

/* Estilos del gráfico */
#visitor {
height: 300px;
overflow: hidden;
text-align: left;
}

/* Estilos para los textos de la tarjeta */
.card-footer p {
font-size: 14px;
color: #000;
margin: 0;
}

.card-header-right ul li {
list-style: none;
display: inline-block;
padding: 10px;
}

.card-header-right ul li i {
font-size: 20px;
}


/* SOMBRAS */
.sombra{
box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.3); /* Sombra suave */
}
.sombra_b {
box-shadow: 0 -4px 8px rgb(255, 255, 255);
}
/* TABLA */
/* Fondo de la tabla */
.table-borderless {
/* border-radius: 20px !important; */
overflow: hidden;
border: 1px solid white;
}



@keyframes parpadeo {
0% {
opacity: 1; /* Fully visible */
}
100% {
opacity: 0; /* Fully invisible */
}
}

.notificacion {
animation: parpadeo 1s ease-in-out infinite alternate;
}
/* CONFIGURACION DE ADMINLTE */
/* colores para adminLTE */
/* Admin LTE Sidebar */
.sidebar-dark-info {
background: var(--color-primario) !important;
box-shadow: 0 0 10px #797979;
}

/* Admin LTE Navbar */
.navbar-white {
background: #f0f0f0 !important;
box-shadow: 0 0 10px #797979;
}
/* hover */
.sidebar-dark-info .nav-sidebar>.nav-item>.nav-link.active {
background-color: var(--color-secundario) !important;
font-size: 16px;
}
/* cambiar color del boton principal de bootstrap */
.btn-primary {
background-color: var(--color-primario);
border-color: var(--color-primario);
}
/* el hover */
.btn-primary:hover {
background-color: var(--color-secundario);
border-color: var(--color-secundario);
}
.btn-primary.focus, .btn-primary:focus {
box-shadow: 0 0 0 0.2rem rgba(141, 73, 37, 0.5);
}
.btn-primary.active, .btn-primary:active {
background-color: var(--color-primario);
border-color: var(--color-primario);
}
/* MODIFICAR QUE SEA FLOTANTE DEL SIDEBAR Y NAVAR */
/* Hacer el sidebar flotante y fijo */
/* Sidebar fijo */
aside.main-sidebar {
    position: fixed; /* Fijamos el sidebar */
    top: 0;
    left: 0;
    bottom: 0;
    width: 250px; /* Ajusta el ancho del sidebar */
    z-index: 999; /* Asegura que el sidebar quede por encima del contenido */
    height: 100vh; /* Hace que el sidebar ocupe toda la altura */
    overflow-y: auto; /* Permite hacer scroll dentro del sidebar si el contenido es largo */
}

/* Ajustar el contenido para que no se solape con el sidebar */
.content-wrapper {
    margin-left: 250px; /* Deja espacio suficiente para el sidebar */
    padding-top: 50px; /* Si el navbar es fijo, ajusta este valor para el contenido */
    overflow-y: auto; /* Permite que el contenido haga scroll */
    height: 100vh; /* Garantiza que el contenido ocupe toda la pantalla y haga scroll */
}

/* Navbar fijo */
.main-header {
    position: fixed; /* Fija el navbar en la parte superior */
    top: 0;
    left: 0;
    width: calc(100% - 250px);
    z-index: 1050; /* Asegura que el navbar quede encima de otros elementos */
    padding: 10px; /* Ajusta el padding si es necesario */
}
/* En pantallas medianas (tabletas) */
@media (max-width: 768px) {
    .main-header {
        width: 100%; /* En dispositivos más pequeños, el navbar debe ocupar todo el ancho */
    }
}

/* En pantallas pequeñas (móviles) */
@media (max-width: 480px) {
    .main-header {
        width: 100%; /* En dispositivos móviles, el navbar debe ocupar todo el ancho */
    }
}

/* CAMBIAR EL PREOLOADER */
/* Estilo para el preloader */
.preloader {
    background-color:rgba(0, 0, 0, 0.541); /* Color de fondo semi-transparente */
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    opacity: 1; /* Asegúrate de que el preloader sea visible */
    animation: fadeOut 15s ease-in-out forwards; /* Duración de desvanecimiento de 15 segundos */
}

/* Animación para desaparecer el fondo (desvanecimiento) */
@keyframes fadeOut {
    0% {
        opacity: 1; /* Al principio, es completamente visible */
    }
    100% {
        opacity: 0; /* Al final, se desvanece completamente */
    }
}



/* animar check box para inscripciones */
.check_animate {
animation: zoomBounce 0.6s ease-out;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* sombra verde suave */
border-radius: 50%; /* opcional: bordes redondeados */
background-color: white; /* para que se note la sombra */
padding: 5px; /* espaciado interno */
transition: transform 0.3s ease;
}

@keyframes zoomBounce {
0% {
transform: scale(0.3);
opacity: 0;
}
50% {
transform: scale(1.2);
opacity: 1;
}
70% {
transform: scale(0.95);
}
100% {
transform: scale(1);
}
}
/* card - inscripciones */
.card_hover:hover{
cursor: pointer;
}

/* PLAN DE PAGOS MONTOS COLOR */
.price-tag {
background-color: #10b981; /* emerald-500 */
color: white;
font-weight: bold;
padding: 0.4rem 0.8rem;
border-radius: 999px;
font-size: 0.95rem;
position: absolute;
top: 1rem;
right: 1rem;
margin: 0 50px 0 0 ;
}
/* PLAN DE PAGOS MONTOS COLOR */
/* CAR DE SEMESTRE */
.card-verde {
    border: 2px solid #10b981;
    background: #10b981;
    color: white;
    transition: all 0.3s ease;
}

.card-verde:hover {
    background: #059669;
    border-color: #059669;
    color: white;
}
.card_verde:hover{
    background: #059669;
    border-color: #059669;
    color: white;
}


/* ---- */
/* Menú lateral */
.nav-sidebar .nav-link {
    border-radius: 8px;
    margin: 2px 8px;
    transition: all .2s ease;
}

/* Opción activa */
.nav-sidebar .nav-link.active {
    background: #800020 !important;
    color: #fff !important;
    font-weight: 600;
    box-shadow: 0 3px 8px rgba(128, 0, 32, .30);
}

/* Hover */
.nav-sidebar .nav-link:hover {
    background: rgba(128, 0, 32, .15);
}

/* Encabezados */
.nav-header {
    color: #d1d5db !important;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: 1px;
}

/* Logo */
.brand-link {
    border-bottom: 1px solid rgba(255,255,255,.1);
}

/* Datalist con apariencia de Select */
.form-select-datalist {
    position: relative;
    display: block;
    width: 100%;
    padding: 0.375rem 2.25rem 0.375rem 0.75rem;
    -moz-padding-start: calc(0.75rem - 3px);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #212529;
    background-color: #f8f9fa;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e") !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 12px !important;
    border-radius: 0.375rem;
    transition: border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    cursor: pointer;
}

.form-select-datalist:focus {
    border-color: #86b7fe;
    outline: 0;
    box-shadow: 0 0 0 0.25rem rgba(13, 110, 253, 0.25);
    cursor: text;
}

.form-select-datalist:disabled {
    background-color: #e9ecef !important;
    cursor: not-allowed;
    opacity: 0.75;
}

.form-select-datalist::-webkit-calendar-picker-indicator {
    cursor: pointer;
}