/* =========================================
   ESTILOS DEL CONTENEDOR LOGIN
   ========================================= */


/* 1. Ajustes del contenedor*/
.login-content .logo {
    margin: 0 auto 0 auto !important; 
    padding: 0 !important;
    width: 100%;
    max-width: 370px; 
    display: flex !important;
    justify-content: center;
}

/* 2. estilo de  la imagen */
.app-header_logologin {
    width: 100%;
    height: auto;
    border-radius: 10px 10px 0 0 !important; 
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05); 
    object-fit: cover;
    display: block;
}

/* 3. Redondeo la caja  */
.login-content .login-box {
    border-radius: 0 0 10px 10px !important; 
    margin-top: 0 !important;
    box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.15) !important; 
}

/* Responsividad extra para móviles */
@media (max-width: 380px) {
  .login-content .logo {
    max-width: 100%;
  }
}

/* =========================================
   ESTILOS DEL DASHBOARD (HEADER)
   ========================================= */
.app-header__logo {
    padding: 0 !important; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; 
}

.app-header__logo_dashboard { 
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover; 
}




/*Tamaño Logo del Sidebar */
.app-sidebar__logo { width: 200px; }


/*Color de los botones*/
.nuevo{
	background: #00c4c7;
	color: red;
}

.required-label::after {
	content: " *";
	color: red;
  }

  .form-label.required::after {
    content: " *";
    color: red;
    font-weight: bold;
  }

/*INICIO ESTILO DE LOS CARDS DE PERFIL*/
  .card-tab {
    cursor: pointer;
    flex: 1;
    min-width: 150px;
    background-color: #fff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    transition: all 0.3s;
    text-align: center;
  }
  .card-tab.active-tab {
    background-color: #e3f2fd;
    transform: translateY(-3px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  .tab-card {
    background-color: #ffffff;
    border-radius: 0.5rem;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    margin-top: 10px;
  }

    /* Pequeños estilos para mantener apariencia de "card" en botones */
    #profileCards { display:flex; flex-wrap:wrap; gap:1rem; }
    .card.card-tab { min-width:150px; cursor:pointer; display:inline-block; }
    .card.card-tab .card-body { padding:1rem; }
    .card.card-tab.active,
    .card.card-tab[aria-selected="true"] {
      border: 2px solid #0d6efd;
      box-shadow: 0 4px 10px rgba(13,110,253,.08);
    }
    .card.card-tab:focus { outline: none; box-shadow: 0 0 0 .2rem rgba(13,110,253,.1); }



/*FIN ESTILO DE LOS CARDS DE PERFIL*/

/* PANEL COLORES DE LA PLANTILLA*/
/* =========================================================================
   PANEL MAESTRO DE COLORES (Control Total de la Plantilla)
   ========================================================================= */
:root {
  /* 1. COLORES NATIVOS BOOTSTRAP (Botones, Badges, Alertas, Textos) 
        Nota: Bootstrap exige el color Hexadecimal y su versión RGB para las transparencias.
  */
  --bs-primary: #0f618a;          /* Tu Azul principal */
  --bs-primary-rgb: 15, 97, 138;

  --bs-secondary: #6c757d;        /* Gris */
  --bs-secondary-rgb: 108, 117, 125;

  --bs-success: #198754;          /* Verde para Matriculados/Éxito */
  --bs-success-rgb: 25, 135, 84;

  --bs-info: #0dcaf0;             /* Celeste para Nuevos/Información */
  --bs-info-rgb: 13, 202, 240;

  --bs-warning: #ffc107;          /* Amarillo para Seguimiento/Alertas */
  --bs-warning-rgb: 255, 193, 7;

  --bs-danger: #dc3545;           /* Rojo para Descartados/Errores */
  --bs-danger-rgb: 220, 53, 69;


  /* 2. COLORES ESPECÍFICOS DE LA PLANTILLA (Menús, Topbar, Logos) */
  --sideber-fondo: #005580;       /* Fondo Barra Izquierda */
  
  --menu-texto: #ffffff; 
  --menu-texto-hover: #005580; 
  --menu-texto-hover-select: #ffffff; 
  --menu-texto-hover-p: #ffffff; 
  --menu-texto-hover-ph: #005580; 

  --menu-fondo: #0f618a; 
  --menu-fondo-desplegable: #11648d; 
  --menu-fondo-hover: #ffffff; 
  --menu-fondo-hover-p: #005580; 
  --menu-fondo-hover-ph: #ffffff; 
  --menu-fondo-select: #2695cc; 

  --menu-borde: #07dd00; 
  --menu-borde-select:#fe7b00; 
  --menu-borde-hover:#ff0000; 

  --submenu-fondo: #1572a1; 
  --submenu-texto: #ffffff; 
  --submenu-texto-hover: #005580; 
  --submenu-borde:#dd5d08; 
  --submenu-fondo-hover: #ffffff; 
  --submenu-borde-hover-p: #f1e315; 

  --logo-fondo: #006395; 
  --logo-fondo-hover: #005079; 
  --user-texto: #ffffff; 
  --hamburguesa-fondo-hover: #004F77; 
  --hamburguesa-texto-hover: #ffffff; 
  --barra-navegacion-top: #007cba; 
  --perfil-fondo: #ffffff; 
  --perfil-fondo-hover: #0022bb; 

  --login-fondo-superior: #bae4f8; 
  --login-fondo-inferior: #1a7fad; 
  --color-fondo-cajas: #ffffff; 
}

/* =========================================================================
   FORZADO DE ESTILOS "VALI ADMIN" HACIA EL PANEL MAESTRO
   ========================================================================= */

/* 1. Tarjetas del Dashboard (Widgets) forzadas a usar variables Bootstrap */
.widget-small.primary { background-color: var(--bs-primary) !important; }
.widget-small.primary.coloured-icon .icon { background-color: var(--bs-primary) !important; color: #fff !important; }

.widget-small.info { background-color: var(--bs-info) !important; }
.widget-small.info.coloured-icon .icon { background-color: var(--bs-info) !important; color: #fff !important; }

.widget-small.warning { background-color: var(--bs-warning) !important; }
.widget-small.warning.coloured-icon .icon { background-color: var(--bs-warning) !important; color: #fff !important; }

.widget-small.danger { background-color: var(--bs-danger) !important; }
.widget-small.danger.coloured-icon .icon { background-color: var(--bs-danger) !important; color: #fff !important; }

/* Creamos la tarjeta Success que le faltaba a Vali Admin */
.widget-small.success { background-color: var(--bs-success) !important; }
.widget-small.success.coloured-icon { background-color: #fff !important; color: #2a2a2a !important; }
.widget-small.success.coloured-icon .icon { background-color: var(--bs-success) !important; color: #fff !important; }


.lista-cursos-container {
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-height: 450px; /* opcional para scroll */
  
  overflow-y: auto;
}

.curso-box {
  padding: 10px 15px;
  background-color: #e9ecef;
  border-radius: 5px;
  transition: background-color 0.2s;
}

.curso-box:hover {
  background-color: #ced4da;
}

.curso-box.active {
  background-color: #0d6efd;
  color: white;
}

.detalle-curso-container {
  padding: 15px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background: white;
  max-height: 750px;
  overflow-y: auto;
}

  /* Línea separadora para pantallas grandes */
  @media (min-width: 992px) {
      .divisor-filtro {
          border-right: 1px solid #d1d3e2; /* Color de línea suave */
          padding-right: 1rem; /* Espacio antes de la línea */
      }
  }


/*ESTILOS PARA EL FORMUALRIO DE REGISTRO*/