:root {
    /* PRIMARY */
    --primary:                  #41528a;
    --primary-soft:             #6b7ab0;
    --primary-subtle:           #dadde8;
    --primary-hover:            #354579;
    --primary-active:           #2c3a66;
    --primary-focus:            #354579;
    --primary-subtle-focus:     #c4c9dd;

    /* SECONDARY */
    --secondary:                #3577f2;
    --secondary-soft:           #6d9cf4;
    --secondary-subtle:         #dce7fc;
    --secondary-hover:          #2d67d1;
    --secondary-active:         #2659b5;
    --secondary-focus:          #2d67d1;
    --secondary-subtle-focus:   #c8dbfb;

    /* SUCCESS */
    --success:                  #0bb39c;
    --success-soft:             #44c6b3;
    --success-subtle:           #ceede9;
    --success-hover:            #099881;
    --success-active:           #077c6a;
    --success-focus:            #099881;
    --success-subtle-focus:     #b7e4dd;

    /* INFO */
    --info:                     #2a9ddb;
    --info-soft:                #5ab4e3;
    --info-subtle:              #d9eefa;
    --info-hover:               #248bc4;
    --info-active:              #1d78aa;
    --info-focus:               #248bc4;
    --info-subtle-focus:        #c6e4f8;

    /* WARNING */
    --warning:                  #f7b84a;
    --warning-soft:             #f9c76d;
    --warning-subtle:           #faeedc;
    --warning-hover:            #dea741;
    --warning-active:           #c89038;
    --warning-focus:            #dea741;
    --warning-subtle-focus:     #f8e0bc;

    /* DANGER */
    --danger:                   #f06448;
    --danger-soft:              #f48671;
    --danger-subtle:            #fce3de;
    --danger-hover:             #d7583f;
    --danger-active:            #bd4832;
    --danger-focus:             #d7583f;
    --danger-subtle-focus:      #f8cec7;

    /* LIGHT */
    --light:                    #f5f7fa;
    --light-soft:               #fafbfd;
    --light-subtle:             #ffffff;
    --light-hover:              #e4e6eb;
    --light-active:             #d5d8dd;
    --light-focus:              #e4e6eb;
    --light-subtle-focus:       #f0f2f6;

    /* DARK */
    --dark:                     #212529;
    --dark-soft:                #4a4f56; 
    --dark-subtle:              #d6d6d6; 
    --dark-hover:               #1a1e23;
    --dark-active:              #111417;
    --dark-focus:               #1a1e23;
    --dark-subtle-focus:        #c0c0c0;
}
/*=============================================
Nav-pills, nav-link enlaces
=============================================*/
.overflow-hidden{
  overflow: hidden !important;
}

/*=============================================
Nav-pills, nav-link enlaces
=============================================*/
.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
    color: #fff;
    background-color: var(--color-secundario)
}

/*=============================================
enlaces - anclas
=============================================*/
a {
    color: var(--color-secundario);
    text-decoration: none;
    background-color: transparent;
}

a:hover {
    color: var(--color-secundario-hover);
    text-decoration: none;
}

a:active {
    color: var(--color-secundario-active);
    text-decoration: none;
}

/*=============================================
transición global para botones
=============================================*/
button, .btn {
    transition: all 0.15s ease-in-out;
    font-weight: 500;
}

/*=============================================
dropdown-item
=============================================*/
.dropdown-item.active, .dropdown-item:active {
    color: #fff;
    text-decoration: none;
    background-color: var(--color-secundario);
}


/*=============================================
Themas
=============================================*/
/* Modo Oscuro */

/* .dark-mode {
    background-color: #454d55 !important;
    color: #fff;
}

.dark-mode .content-wrapper {
    background-color: #454d55 !important;
    color: #fff;
} */

/* navbar */
/* .navbar-dark,
.dark-mode .navbar-dark {
    background-color: #1e1e2f !important;
    border-color: #4b545c;
} */

/* sidebar */
/* [class*=sidebar-dark-] {
    background-color: #343a40;
} */

/* control-sidebar */
/* .control-sidebar-dark {
    background-color: #343a40;
} */

/* footer */
/* .dark-mode .main-footer {
    background-color: #1e1e2f !important;
    border-color: #4b545c;
} */

/* //*Nuevo */


/* Modo oscuro general */
.dark-mode {
    background-color: #2c2f3f !important; /* fondo general sobrio con toque púrpura */
    color: #f5f5f5;
}

/* Contenedor principal de contenido */
.dark-mode .content-wrapper {
    background-color: #3c4055 !important; /* fondo intermedio para el contenido */
    color: #f0f0f0;
}

/* Tarjetas */
.dark-mode .card {
    background-color: #2a2b3c !important;
    border: 1px solid rgba(255, 255, 255, 0.05) !important;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) !important;
}

.dark-mode .bg-light {
    background-color: #3c4055 !important; /*tono claro*/
    color: #fff!important;
}

/* tarjetas dentro de una tarjeta */
/* .dark-mode .card .card {
    background-color: #2c2f3f !important;
    color: #fff;
} */

/* Navbar */
.dark-mode .navbar-dark {
    background-color: #2c2f3f !important; /* tono sobrio y moderno */
    border-color: #3e4151;
}

/* Sidebar */
[class*="sidebar-dark-"] {
    background-color: #202233; /* más oscuro, da sensación de profundidad */
}

/* Control sidebar */
.control-sidebar-dark {
    background-color: #1a1b2e; /* fondo más profundo aún */
}

/* Footer */
.dark-mode .main-footer {
    background-color: #2c2f3f;
    border-color: #3e4151;
}

/* dropdown-menu */
.dark-mode .dropdown-menu {
    background-color: #202233;
    color: #fff;
}

.dark-mode .dropdown-item:focus, .dark-mode .dropdown-item:hover {
    background-color: #3c4055 ;
}

/* Paginacion */
.dark-mode .page-item .page-link {
    color: #3f6791;
}

.dark-mode .page-item:not(.active) .page-link {
    background-color: #202233;
    border-color: #6c757d;
}

.dark-mode .page-item:not(.active) .page-link:focus, 
.dark-mode .page-item:not(.active) .page-link:hover {
    color: #4774a3;
    background-color: #3c4055 !important;
}

/* Enlaces (a) en modo oscuro */
.dark-mode a:not(.btn):hover {
    color: var(--color-secundario);
}





/* Modo claro */


/* //*probar o eliminar */

/* .navbar-dark {
    background-color: #343a40;
    border-color: #4b545c;
}

.navbar-light {
    background-color: #f8f9fa;
} */

/*=============================================
Backgrounds
=============================================*/
.bg-primario           {background-color: var(--color-primario); color: #ffffff;}
.bg-secundario         {background-color: var(--color-secundario);}
.bg-auxiliar           {background-color: var(--color-auxiliar);}

.bg-primario-subtle    {background-color: var(--color-primario-subtle);}
.bg-secundario-subtle  {background-color: var(--color-secundario-subtle);}
.bg-auxiliar-subtle    {background-color: var(--color-auxiliar-subtle);}

/*=============================================
Backgrounds
=============================================*/
.text-primario           {color: var(--color-primario) !important;}
.text-secundario         {color: var(--color-secundario) !important;}
.text-auxiliar           {color: var(--color-auxiliar) !important;}
.text-primario-subtle    {color: var(--color-primario-subtle) !important;}
.text-secundario-subtle  {color: var(--color-secundario-subtle) !important;}
.text-auxiliar-subtle    {color: var(--color-auxiliar-subtle) !important;}


/*=============================================
Botones
=============================================*/

/* .sidebar-dark-info .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-info .nav-sidebar>.nav-item>.nav-link.active {
    background-color: #17a2b8;
    color: #fff;
} */


/* Botón Primario */
.btn-primario,
.sidebar-dark-primario .nav-sidebar>.nav-item>.nav-link.active, .sidebar-light-primario .nav-sidebar>.nav-item>.nav-link.active  {
    background-color: var(--color-primario); /* Color base */
    color: #ffffff; /* Texto blanco */
    border: 1px solid var(--color-primario);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-primario:hover {
    background-color: var(--color-primario-hover); /* Hover */
    border-color: var(--color-primario-hover);
    color: #ffffff;
    transform: scale(1.05); /* Efecto sutil de zoom */
}

.btn-primario:active {
    background-color: var(--color-primario-active)!important; /* Active */
    border-color: var(--color-primario-active);
}

.btn-primario:focus {
    box-shadow: 0 0 0 0.2rem var(--color-primario-focus);; /* Focus */
}

.btn-primario-subtle {
    background-color: var(--color-primario-subtle);
    color: var(--color-primario);
    border: 1px solid var(--color-primario);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-primario-subtle:hover {
    background-color: var(--color-primario-subtle); /* Hover */
    border-color: var(--color-primario-subtle);
    transform: scale(1.05); /* Efecto sutil de zoom */
}

.btn-primario-subtle:active {
    background-color: #A1B2C1 !important; /* Active */
    border-color: #A1B2C1;
}

.btn-primario-subtle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-primario-subtle-focus); /* Focus */
}

/* Botón Secundario */
.btn-secundario {
    background-color: var(--color-secundario);
    color: #ffffff;
    border: 1px solid var(--color-secundario);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-secundario:hover {
    background-color: var(--color-secundario-hover);
    border-color: var(--color-secundario-hover);
    color: #ffffff;
    transform: scale(1.05);
}

.btn-secundario:active {
    background-color: var(--color-secundario-active)!important;
    border-color: var(--color-secundario-active);
}

.btn-secundario:focus {
    box-shadow: 0 0 0 0.2rem var(--color-secundario-focus);
}

.btn-secundario-subtle {
    background-color: var(--color-secundario-subtle);
    color: var(--color-secundario);
    border: 1px solid var(--color-secundario);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-secundario-subtle:hover {
    background-color: var(--color-secundario-subtle);
    color: var(--color-secundario);
    border-color: var(--color-secundario-subtle);
    transform: scale(1.05);
}

.btn-secundario-subtle:active {
    background-color: var(--color-secundario-subtle) !important;
    border-color: var(--color-secundario-subtle);
}

.btn-secundario-subtle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-secundario-subtle-focus);
}

/* Botón Auxiliar */
.btn-auxiliar {
    background-color: var(--color-auxiliar);
    color: #ffffff;
    border: 1px solid var(--color-auxiliar);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-auxiliar:hover {
    background-color: var(--color-auxiliar-hover);
    border-color: var(--color-auxiliar-hover);
    color: #ffffff;
    transform: scale(1.05);
}

.btn-auxiliar:active {
    background-color: var(--color-auxiliar-active)!important;
    border-color: var(--color-auxiliar-active);
}

.btn-auxiliar:focus {
    box-shadow: 0 0 0 0.2rem var(--color-auxiliar-focus);
}

.btn-auxiliar-subtle {
    background-color: var(--color-auxiliar-subtle);
    color: var(--color-auxiliar);
    border: 1px solid var(--color-auxiliar);
    transition: background-color 0.3s, border-color 0.3s, transform 0.2s ease-in-out;
}

.btn-auxiliar-subtle:hover {
    background-color: var(--color-auxiliar-subtle);
    color: var(--color-auxiliar);
    border-color: var(--color-auxiliar-subtle);
    transform: scale(1.05);
}

.btn-auxiliar-subtle:active {
    background-color: var(--color-auxiliar) !important;
    border-color: var(--color-auxiliar);
}

.btn-auxiliar-subtle:focus {
    box-shadow: 0 0 0 0.2rem var(--color-auxiliar-subtle-focus);
}


/* //*AdminLte */
/* === Estilos personalizados para sistema con AdminLTE === */

/* === Colores de tarjetas === */
/* ===== Variables CSS por defecto (reemplazadas por tus valores en línea) ===== */
.card-primario {
  background-color: var(--color-primario);
  color: #ffffff;
  border: 1px solid var(--color-primario);
}

.card-primario-subtle {
  background-color: var(--color-primario-subtle);
  color: var(--color-primario);
  border: 1px solid var(--color-primario);
}

.card-secundario {
  background-color: var(--color-secundario);
  color: #ffffff;
  border: 1px solid var(--color-secundario);
}

.card-secundario-subtle {
  background-color: var(--color-secundario-subtle);
  color: var(--color-secundario);
  border: 1px solid var(--color-secundario);
}

.card-auxiliar {
  background-color: var(--color-auxiliar);
  color: #ffffff;
  border: 1px solid var(--color-auxiliar);
}

.card-auxiliar-subtle {
  background-color: var(--color-auxiliar-subtle);
  color: var(--color-auxiliar);
  border: 1px solid var(--color-auxiliar);
}

/* Badges */
.badge-primario {
  background-color: var(--color-primario);
  color: #fff;
}

.badge-secundario {
  background-color: var(--color-secundario);
  color: #fff;
}

.badge-auxiliar {
  background-color: var(--color-auxiliar);
  color: #fff;
}

/* Alertas */
.alert-primario {
  background-color: var(--color-primario-subtle);
  border-left: 5px solid var(--color-primario);
  color: var(--color-primario);
}

.alert-secundario {
  background-color: var(--color-secundario-subtle);
  border-left: 5px solid var(--color-secundario);
  color: var(--color-secundario);
}

.alert-auxiliar {
  background-color: var(--color-auxiliar-subtle);
  border-left: 5px solid var(--color-auxiliar);
  color: var(--color-auxiliar);
}

/* Navegacion activa */
.sidebar-dark-primario .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-primario .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--color-primario);
  color: #ffffff;
}

.sidebar-dark-secundario .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-secundario .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--color-secundario);
  color: #ffffff;
}

.sidebar-dark-auxiliar .nav-sidebar > .nav-item > .nav-link.active,
.sidebar-light-auxiliar .nav-sidebar > .nav-item > .nav-link.active {
  background-color: var(--color-auxiliar);
  color: #ffffff;
}

/* progreso progress bar */
.progress-bar-primario {
  background-color: var(--color-primario);
}

.progress-bar-secundario {
  background-color: var(--color-secundario);
}

.progress-bar-auxiliar {
  background-color: var(--color-auxiliar);
}

/* bordes */
.border-primario {
  border: 1px solid var(--color-primario);
}

.border-secundario {
  border: 1px solid var(--color-secundario);
}

.border-auxiliar {
  border: 1px solid var(--color-auxiliar);
}

/* 🎯 7. Tabs activos */

.nav-tabs .nav-link.active.bg-primario {
  background-color: var(--color-primario);
  color: #fff;
  border-color: var(--color-primario);
}

.nav-tabs .nav-link.active.bg-secundario {
  background-color: var(--color-secundario);
  color: #fff;
  border-color: var(--color-secundario);
}

.nav-tabs .nav-link.active.bg-auxiliar {
  background-color: var(--color-auxiliar);
  color: #fff;
  border-color: var(--color-auxiliar);
}


/*  8. Toggle switches, checkbox y radio inputs personalizados (si los usas con Bootstrap) */
.form-check-input:checked.bg-primario {
  background-color: var(--color-primario);
  border-color: var(--color-primario);
}

.form-check-input:checked.bg-secundario {
  background-color: var(--color-secundario);
  border-color: var(--color-secundario);
}

.form-check-input:checked.bg-auxiliar {
  background-color: var(--color-auxiliar);
  border-color: var(--color-auxiliar);
}

/*=============================================
Botones tablas
=============================================*/
/* Estilo base para botones DataTables */
.dt-button {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  font-weight: 500;
  padding: 0.45rem 0.85rem;
  font-size: 0.875rem;
  border: none;
  border-radius: 6px;
  color: #fff !important;
  transition: background-color 0.2s ease-in-out;
  margin-right: 0.4rem;
  margin-bottom: 0.4rem;
}

/* Colores por tipo */
.dt-button.buttons-copy { background-color: #6c5ce7; }
.dt-button.buttons-csv { background-color: #00cec9; }
.dt-button.buttons-excel { background-color: #00b894; }
.dt-button.buttons-pdf { background-color: #d63031; }
.dt-button.buttons-print { background-color: #0984e3; }
.dt-button.buttons-colvis { background-color: #636e72; }

.dt-button:hover {
  filter: brightness(1.1);
}

/* Íconos alineados */
.dt-button i {
  font-size: 1rem;
}

/*=============================================
Campos integrados con el ícono
=============================================*/





/* Estilo base del ícono */
/* .input-group-text {
  background-color: transparent;
  border-left: 0;
  color: #6c757d;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
} */

/* Input sin borde derecho (porque lo tiene el ícono) */
/* .input-group .form-control {
  border-right: 0;
  z-index: 2;
  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
} */

/* Input enfocado: borde azul como AdminLTE */
/* .input-group .form-control:focus {
  border-color: #80bdff;
  z-index: 3;
} */

/* Ícono con borde azul cuando el input está enfocado */
/* .input-group .form-control:focus ~ .input-group-append .input-group-text {
  border: 1px solid #80bdff;
  border-left: 0;

  z-index: 3;
} */

/* Ícono en rojo cuando hay error */
/* .input-group .form-control.is-invalid ~ .input-group-append .input-group-text {
  border: 1px solid var(--danger, #dc3545);
  border-left: 0;
  color: var(--danger, #dc3545);
} */


/* ==== INPUT Y BOTÓN EN GRUPOS ==== */

/* ==== INPUT Y BOTÓN EN GRUPOS ==== */

/* === BASE === */
.input-group .form-control {
  border: 1px solid #ced4da;
  border-right: 0;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  z-index: 2;
  transition: box-shadow 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

.input-group .input-group-text {
  background-color: transparent;
  border: 1px solid #ced4da;
  border-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  color: #6c757d;
  cursor: pointer;
  z-index: 2;
  transition: color 0.15s ease-in-out, border-color 0.15s ease-in-out;
}

/* === FOCUS (azul) === */
.input-group .form-control:focus {
  border-color: #80bdff;
  outline: 0;
  z-index: 3;
}

.input-group .form-control:focus ~ .input-group-text {
  border-color: #80bdff;
  z-index: 3;
}

/* === ERROR === */
.input-group .form-control.is-invalid {
  border-color: var(--danger, #dc3545);
  z-index: 2;
}

.input-group .form-control.is-invalid ~ .input-group-text {
  border-color: var(--danger, #dc3545);
  color: var(--danger, #dc3545);
  z-index: 3;
}

/* === SUCCESS (forzado a neutral, sin verde) === */
.input-group .form-control.is-valid {
  border-color: var(--color-secundario, --success) !important;
  /*background-image: none !important;  quita el check ✅ si se quiere */
  z-index: 2;
}

.input-group .form-control.is-valid ~ .input-group-text {
  border-color: var(--color-secundario, --success) !important;
  color: #6c757d !important;
  z-index: 2;
}

/* === Mensaje de error debajo === */
.input-group + .invalid-feedback {
  display: block;
}

    /*=============================================
    Ribbon
    =============================================*/
    .ribbon-box .ribbon {
        position: absolute;
        right: -5px;
        top: -5px;
        z-index: 1;
        overflow: hidden;
        width: 75px;
        height: 75px;
        text-align: left;
    }
    .ribbon-box .ribbon span {
        font-size: 13px;
        color: #fff;
        text-align: center;
        line-height: 20px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 100px;
        display: block;
        position: absolute;
        top: 19px;
        right: -21px;
        font-weight: 600;
    }
    .ribbon-box .ribbon span:before {
        content: "";
        position: absolute;
        right: 0;
        top: 100%;
        z-index: -1;
        border-left: 3px solid transparent;
        border-bottom: 3px solid transparent;
    }
    .ribbon-box .ribbon span:after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        z-index: -1;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
    }


  .slide-box img {
    display: block;
    aspect-ratio: 4 / 3; /* o 16/9, según el formato de tus imágenes */
    width: 100%;
    height: auto;
  }

  .swiper-container {
    min-height: 300px;
  }
    /*=============================================
    Ribbon
    =============================================*/
    .ribbon-box .ribbon {
        position: absolute;
        right: -5px;
        top: -5px;
        z-index: 1;
        overflow: hidden;
        width: 75px;
        height: 75px;
        text-align: left;
    }
    .ribbon-box .ribbon span {
        font-size: 13px;
        color: #fff;
        text-align: center;
        line-height: 20px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 100px;
        display: block;
        position: absolute;
        top: 19px;
        right: -21px;
        font-weight: 600;
    }
    .ribbon-box .ribbon span:before {
        content: "";
        position: absolute;
        right: 0;
        top: 100%;
        z-index: -1;
        border-left: 3px solid transparent;
        border-bottom: 3px solid transparent;
    }
    .ribbon-box .ribbon span:after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        z-index: -1;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
    }


  .slide-box img {
    display: block;
    aspect-ratio: 4 / 3; /* o 16/9, según el formato de tus imágenes */
    width: 100%;
    height: auto;
  }

  .swiper-container {
    min-height: 300px;
  }