:root {
  --bs-font-sans-serif: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

  
  body,
        html {
            height: 100%;
            margin: 0;
            overflow: hidden;
        }

        /* Fondo general del body */
        body.sinfa-bg {
          height: 100%;
          margin: 0;
          background: url("../assets/bg-body.jpg") no-repeat center center fixed;
          background-size: cover;
        }

        /* En móviles evita el "salto" del fondo fijo */
        @media (max-width: 767.98px) {
          body.sinfa-bg {
            background-attachment: scroll;
          }
        }

        .container-flex {
            display: flex;
            height: 100vh;
            /* toda la pantalla */
        }
        
     

        /* === CSS LOGIN === */
        /* CENTRADO TOTAL EN PANTALLA LOGIN */
        .main-layout-login {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100vh;
        }

        .dashboard-main-login {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        background-color: #f5f7fa;
        }

        .login-container {
        display: flex;
        width: 850px;
        height: 600px;
        background-color: #fff;
        border-radius: 12px;
        overflow: hidden;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
        }

        /* Columna izquierda */
        .login-left {
        width: 50%;
        background-color: #09365c;
        color: #fff;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 10px;
        text-align: center;
        }

        .login-logo {
        width: 250px;
        margin-bottom: 30px;
        }

        /* Columna derecha */
        .login-right {
        width: 50%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;
        }

        .login-form-box {
        width: 80%;
        max-width: 350px;
        }

        .login-form-box h2 {
        margin-bottom: 10px;
        font-size: 26px;
        color: #0e4a7b;
        margin-top: -1.5rem;
        }

        .login-form-box label {
        display: flex;
        margin-bottom: 5px;
        font-weight: bold;
        align-items: center;
        }

        .login-form-box i {
        margin-right: 8px;
        }

        .login-form-box input {
        width: 95%;
        padding: 10px;
        margin-bottom: 10px;
        border: 1px solid #e0e0e0;
        border-radius: 10px;
        font-size: 16px;
        }

        .login-form-box button {
        width: 100%;
        padding: 12px;
        background-color: #0e4a7b;
        color: white;
        border: none;
        border-radius: 6px;
        font-size: 16px;
        cursor: pointer;
        transition: background-color 0.3s ease;
        }

        .login-form-box button:hover {
        background-color: #09365c;
        }

        /* Extras de login: recordarme + olvidar contraseña */
        .login-extras {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 10px;
          width: 100%;
          margin: 12px auto 0 auto;
        }

        .login-remember {
          display: flex;
          align-items: center;
          gap: 8px;
        }

        .login-remember .form-check-input {
          width: 16px;
          height: 16px;
          border-radius: 2px;
          cursor: pointer;
          margin: 0;
          border: 1px solid #b5b5b5;
          background-color: #fff;
          accent-color: #0e4a7b; /* color al estar activo en navegadores modernos */
        }

        .login-remember .form-check-input:checked {
          background-color: #0e4a7b;
          border-color: #0e4a7b;
        }

        .login-remember .form-check-label {
          font-size: 0.95rem;
          cursor: pointer;
        }

        .login-forgot-link {
          font-size: 0.9rem;
          color: #6c757d;
          text-decoration: none;
          font-weight: 400;
          text-align: center;
          width: 100%;
        }

        .login-forgot-link:hover {
          text-decoration: underline;
        }

        /* Responsive para móviles */
        @media (max-width: 768px) {
        .login-container {
            flex-direction: column;
            height: auto;
            width: 95%;
            border-radius: 12px;
        }

        .login-left,
        .login-right {
            width: 100%;
            height: auto;
        }

        .login-logo {
            width: 160px;
        }

        .login-form-box {
            width: 90%;
            max-width: 420px;
            padding: 20px 0 10px 0;
        }

        .login-right {
            padding: 12px 0 20px 0;
        }

        .login-left {
            height: 180px;
            padding: 16px 0;
        }

        .login-form-box h2 {
            margin-top: 0;
            margin-bottom: 12px;
            font-size: 24px;
        }

        .login-form-box input {
            width: 100%;
        }

        .main-layout-login {
            height: auto;
            min-height: 100vh;
            align-items: flex-start;
            padding: 16px 0;
        }

        .login-extras {
            width: 100%;
        }
        }

        @media (max-width: 575.98px) {
        .login-logo {
            width: 150px;
        }
        .login-form-box {
            width: 92%;
            max-width: none;
        }
        }
        /* === FIN CSS LOGIN === */

        /* Sidebar fijo vertical */
        .sidebar {
            width: 250px;
            background-color: none !important;
            /*border-right: 1px solid #dee2e6;*/
            display: flex;
            flex-direction: column;
            padding: 1rem;
            /* Para que ocupe toda la altura */
            height: 100vh;
            position: fixed;
            top: 0;
            left: 0;
            overflow-y: auto;
        }
        
        .sidebar .nav-link {
            color: #212529; /* color original */
            transition: background-color 0.3s, color 0.3s, border-radius 0.3s;
        }

        .sidebar .nav-link i {
          color:#212529 !important;

        }
        
        .sidebar .nav-link:hover {
            background-color: #e6eef3; /* turquesa */
            color: #212529 !important;
            border-radius: 0.5rem; /* más redondeado */
        }
        
        .sidebar .nav-link:hover i {
            color: white; /* Asegura que el ícono también sea blanco */
        }
        
        /* Estilos para el enlace activo */
        .sidebar .nav-link.active {
          background-color: #00abb6;
          color: white !important;
          border-radius: 0.5rem;
        }
        .sidebar .nav-link.active i {
          color: white !important;
        }

        /* Logo centrado dentro del sidebar */
        .sidebar-logo {
            text-align: center;
            margin-bottom: 1.5rem;
            font-size: 2.5rem;
            color: #563d7c;
        }


        /* Logo centrado dentro del sidebar */
        .sidebar-logo {
            text-align: center;
            margin-bottom: 1.5rem;
            font-size: 2.5rem;
            color: #563d7c;
        }

        /* Contenedor que incluye header + contenido, a la derecha del sidebar */
        .main-content {
            margin-left: 250px;
            /* igual al ancho del sidebar */
            display: flex;
            flex-direction: column;
            height: 100vh;
            width: calc(100% - 250px);
        }

        header {
            height: 75px;
            /*border-bottom: 1px solid #dee2e6;*/
            background: none !important;
            padding: 0 1rem;
            display: flex;
            align-items: center;
            justify-content: space-between;
        }

        /* Info tutor debajo del header */
        .tutor-info {
            display: flex;
            align-items: center;
            padding: 0.5rem 1rem;
            gap: 0.75rem;
            border-bottom: 1px solid #dee2e6;
            background: #f1f3f5;
            font-weight: 600;
        }

        .tutor-info img {
            width: 50px;
            height: 50px;
            object-fit: cover;
            border-radius: 50%;
        }

        main {
            padding: 1rem;
            flex-grow: 1;
            overflow-y: auto;
            background: none !important;
        }

        /* Nav links y submenu */
        .nav-link {
            font-weight: 500;
            cursor: pointer;
        }

        .submenu .nav-link {
            padding-left: 2rem;
            font-size: 0.95rem;
        }

        .icon-button {
            background: none;
            border: none;
            padding: 0.3rem;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            box-shadow: none;
            transition: background-color 0.2s, color 0.2s;
        }

        .icon-button:hover {
            background-color: transparent;
            /* sin sombra ni fondo */
        }

        .icon-button i {
            color: #413f3f;
            font-size: 1rem;
            transition: color 0.2s;
        }

        .icon-button:hover i {
            color: #00abb6;
            /* turquesa al pasar el mouse */
        }

        /* Clase para botón salir con hover rojo */
        .icon-button.exit-btn:hover i {
            color: #dc3545;
            /* icono blanco */
        }
        
        /* === RESPONSIVE DESIGN === */
        @media (max-width: 767.98px) {
          /* Ocultar sidebar por defecto en móviles */
          .sidebar {
            transform: translateX(-100%);
            transition: transform 0.3s ease-in-out;
            z-index: 1050;
          }
          
          /* Mostrar sidebar cuando esté activo */
          .sidebar.show {
            transform: translateX(0);
          }
          
          /* Ajustar main-content para ocupar toda la pantalla */
          .main-content {
            margin-left: 0;
            width: 100%;
          }
          
          /* Estilos para el botón hamburguesa */
          .sidebar-toggle {
            color: #333;
            text-decoration: none;
            padding: 0.5rem;
            border: none;
            background: transparent;
          }
          
          .sidebar-toggle:hover {
            color: #06ac9b;
          }
          
          /* Optimizar header en móviles */
          header {
            padding: 0.5rem 1rem;
          }
          
          /* Ajustar logo en móviles */
          .d-md-none img {
            max-width: 100px;
            height: auto;
          }
          
          /* Ajustar botones de acción en móviles */
          .d-flex.d-inline-block.gap-4 {
            gap: 1rem !important;
          }
          
          /* Overlay para cerrar sidebar al tocar fuera */
          .sidebar-overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1040;
            display: none;
          }
          
          .sidebar-overlay.show {
            display: block;
          }
        }

        /* Mantener comportamiento normal en desktop */
        @media (min-width: 768px) {
          .sidebar-toggle {
            display: none;
          }
        }

        /* === ESTILOS DEL SLIDER === */
        /* Indicadores personalizados - rectángulos finos y sutiles */
        #anunciosSlider .carousel-indicators {
          bottom: 10px;
        }

        #anunciosSlider .carousel-indicators button {
          width: 30px;
          height: 3px;
          border-radius: 0;
          margin: 0 3px;
          border: none;
          background-color: rgba(14, 74, 123, 0.3);
          transition: all 0.3s ease;
        }

        #anunciosSlider .carousel-indicators button.active {
          background-color: #0E4A7B;
          transform: none;
        }

        /* Transiciones más suaves y dinámicas */
        #anunciosSlider .carousel-item {
          transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
        }

        #anunciosSlider .carousel-inner {
          overflow: hidden;
        }
        
        /* Compactar espacio entre badge y título en slider */
        #anunciosSlider .carousel-item .col-md-9 .badge {
          margin-bottom: 2px !important;
        }
        #anunciosSlider .carousel-item .col-md-9 h4 {
          margin-top: 2px;
          margin-bottom: 6px;
          line-height: 1.2;
        }

        /* Botón del slider: texto mismo color que el h4 y tamaño menor */
        #anunciosSlider .carousel-item .col-md-9 .btn.btn-warning {
          color: inherit !important; /* mismo color que el texto del contenedor */
          font-size: 0.9rem;
          padding: 0.35rem 0.9rem;
          border-radius: 999px; /* mantener pill pero más discreto */
        }
        
        


/*====INICIO CSS DASHBOARD ====*/

.contenedor-bienvenida-accesos {
    display: flex;
}

/* Welcome Section */
.welcome-section {
  margin-bottom: 2rem;
  width: 40%;
}

.titulos {
  font-weight: 700;
  font-size: 1.7rem;
  color: #1e4262;
  margin: 0;
}

.welcome-subtitle {
  font-size: 1rem;
  color: #555;
  margin-top: 0.25rem;
  line-height: 1.2;
}

/* ACCESOS DIRECTOS NEW */

.accesos-directos-2 {
  display: flex;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 20px;
  width: 60%;
  height: 30px;
  margin-top: 10px;
}

.acceso-card-2 {
  display: flex;
  align-items: center;
  gap: 15px;
  background-color: #fff !important;
  border: 1px solid #fff !important;
  border-radius: 12px;
  padding: 1rem 1rem 1rem 1rem;
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: box-shadow 0.2s ease;
  min-width: 100px;
  height: 40px;
}

.acceso-card-2:hover {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

/* ===== Panel con gradiente animado ===== */
.panel-dashboard {
  --panel-radius: 12px;
  --panel-padding-y: 16px;
  --panel-padding-x: 20px !important;

  position: relative;
  overflow: hidden; /* asegura que el gradiente no se desborde */
  border-radius: var(--panel-radius);
  padding: var(--panel-padding-y) var(--panel-padding-x);
  margin-bottom: 16px;
  z-index: 1;
}

/* Gradiente animado en el fondo */
.panel-dashboard::before {
  content: "";
  position: absolute;
  background-color: none;
  border-radius: inherit;
  z-index: -1;
}


/* Alineación interna */
.panel-dashboard .contenedor-bienvenida-accesos {
  align-items: center;
  gap: 16px;
}

/* Welcome Section */
.panel-dashboard .welcome-section {
  padding: 8px 4px;
}
.panel-dashboard .titulos {
  font-weight: 700;
  font-size: 1.7rem;
  color: #1e4262;
  margin: 0 0 2px 0;
}
.panel-dashboard .welcome-subtitle {
  font-size: 1rem;
  color: #555;
  margin: 0;
  line-height: 1.2;
}

/* Accesos */
.panel-dashboard .accesos-directos-2 {
  gap: 14px;
  margin-top: 0;
  height: auto;
}

/* Tarjetas */
.panel-dashboard .acceso-card-2 {
  --acceso-radius: 12px;
  --acceso-border: 1px solid #e0e0e0;
  --acceso-padding-y: 10px;
  --acceso-padding-x: 12px;
  --acceso-gap: 10px;

  border-radius: var(--acceso-radius);
  border: var(--acceso-border);
  padding: var(--acceso-padding-y) var(--acceso-padding-x);
  gap: var(--acceso-gap);
  min-width: 110px;
  height: 40px;
  display: flex;
  align-items: center;
  background-color: #fff; /* mantiene tarjetas legibles */
  text-decoration: none;
  color: #333;
  font-weight: 500;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.panel-dashboard .acceso-card-2:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.07);
  transform: translateY(-1px);
}

/* Iconos */
.panel-dashboard .icono-circulo-2 i {
  --icon-size: 1.15rem;
  --icon-color: #00abb6;
  font-size: var(--icon-size);
  color: var(--icon-color);
  line-height: 1;
}

/* Responsivo */
@media (max-width: 767.98px) {
  .panel-dashboard {
    --panel-padding-y: 14px;
    --panel-padding-x: 14px;
    margin-bottom: 12px;
  }
  .panel-dashboard .contenedor-bienvenida-accesos {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .panel-dashboard .accesos-directos-2 {
    width: 100%;
    justify-content: flex-start;
    gap: 10px;
  }
}



/* ====== CLASES DE HOY ====== */

/* Contenedor principal */
#docente-clases-hoy .card {
  border-radius: 12px;         /* control del radio de la tarjeta principal */
  border: 0px solid #fff;   /* borde sutil */
  overflow: hidden;            /* respeta los radios */
  box-shadow: 0 2px 20px rgba(0,0,0,0.05); /* sombra ligera */
}

/* Cabecera */
#docente-clases-hoy .card-header {
  background: #ffffff;
  border-bottom: 1px solid #e6eef3;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #1e4262;
  font-size: 1.2rem;
}

#docente-clases-hoy .card-header a {
  background: #1e4262 !important;
  color: #ffffff !important;
  border: 0px !important;
  padding: 4px 15px !important;
  border-radius: 999px !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

#docente-clases-hoy .card-header a:hover {
  background: #00abb6 !important;
  transform: translateY(-1px);
  border: 0px !important;
}

/* Grid */
.clases-hoy-grid {
  margin-top: auto;
}

/* Tarjeta individual de clase */
.clase-card {
  background: #f9fbfc;
  border: 1px solid #e6eef3;
  border-radius: 12px;        /* control del radio de las tarjetas */
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: box-shadow 0.2s ease, transform 0.15s ease;
}

.clase-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Cabecera de la clase */
.clase-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

/* Materia */
.clase-materia {
  color: #1e4262;
  font-weight: 600;
  font-size: 1rem;  /* editable */
}

/* Curso */
.clase-curso {
  background: #00abb6;
  color: #ffffff;
  padding: 2px 10px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Info de la clase (hora, aula) */
.clase-info {
  font-size: 0.85rem;
  color: #6c757d;
}

/* Botones */
.clase-card .clase-actions .btn {
  font-size: 0.8rem;
  padding: 0.35rem 0.9rem;
  border-radius: 8px; /* más suaves */
  transition: all 0.2s ease;
}

/* Botón asistencia */
.clase-card .clase-actions .btn-asistencia {
  background: #0E4A7B !important;
  color: #fff !important;
  border: none !important;
}
.clase-card .clase-actions .btn-asistencia:hover {
  background: #09365c !important;
}

/* Botón notas */
.clase-card .clase-actions .btn-notas {
  background: none !important;
  color: #0E4A7B !important;
  border: 1px solid #b5b5b5 !important;
}
.clase-card .clase-actions .btn-notas:hover {
  background: #f1f3f5 !important;
}



/* Anuncios (slider) consistente con tarjetas */
.anuncios-card {
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  overflow: hidden;
}

.anuncios-card .carousel .d-flex {
  border-radius: 0;
}

/* ===== Responsive Dashboard ===== */
@media (max-width: 1199.98px) {
  .perfil-container {
    flex-direction: column;
  }
  .resumen-dashboard,
  .perifl-usuario-caja {
    width: 100%;
  }
  .perfil-usuario {
    width: 100%;
    max-width: 100%;
  }
}

@media (max-width: 991.98px) {
  /* Clases de hoy grid: 2 columnas en tablet */
  .clases-hoy-grid .col-xl-4 { /* ancho de items en grid */
    width: 50%;
  }
  #docente-estado-calificaciones .card-body {
    padding-bottom: 16px;
  }
  .mini-calendar .calendar-row span {
    padding: 5px 0;
    font-size: 0.85rem;
  }
}

@media (max-width: 767.98px) {
  /* Stack de elementos y anchos completos en móvil */
  .resumen-dashboard,
  .perifl-usuario-caja {
    width: 100%;
  }
  .perfil-usuario {
    width: 100%;
    padding: 1rem;
  }
  /* Clases de hoy grid: 1 columna en móvil */
  .clases-hoy-grid .col-xl-4,
  .clases-hoy-grid .col-md-6,
  .clases-hoy-grid .col-12 {
    width: 100%;
  }
  .clase-card {
    padding: 12px;
    gap: 6px;
  }
  #docente-estado-calificaciones .card-body {
    padding: 14px;
  }
  .mini-calendar .calendar-grid {
    gap: 4px;
  }
  .mini-calendar .calendar-row {
    gap: 4px;
  }
  .mini-calendar .calendar-row span {
    padding: 4px 0;
    font-size: 0.8rem;
  }
  .anuncios-card .carousel .d-flex {
    padding: 16px !important;
  }

  /* Tipografías móviles: Slider */
  #anunciosSlider .carousel-item .col-md-9 h4 {
    font-size: 1.05rem;
    line-height: 1.25;
  }
  #anunciosSlider .carousel-item .col-md-9 .badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
  }
  #anunciosSlider .carousel-item .col-md-9 .btn.btn-warning {
    font-size: 0.85rem;
    padding: 0.3rem 0.75rem;
  }

  /* Tipografías móviles: Clases de hoy */
  .clase-materia {
    font-size: 0.95rem;
  }
  .clase-info {
    font-size: 0.8rem !important;
  }
  .clase-actions .btn {
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
  }
}

.icono-circulo-2 i {
  font-size: 1.1rem;
  color: #00abb6;
}

/* ===== Responsive: Bienvenida + Accesos ===== */
@media (max-width: 767.98px) {
  .contenedor-bienvenida-accesos {
    flex-direction: column;
    gap: 8px;
  }
  .welcome-section {
    width: 100%;
    margin-bottom: 0.75rem;
  }
  .accesos-directos-2 {
    width: 100%;
    justify-content: flex-start;
    gap: 12px;
    height: auto;
    margin-top: 0;
  }
  .acceso-card-2 {
    padding: 0.5rem 0.75rem;
    height: 36px;
    min-width: auto;
  }
  .acceso-card-2 span {
    display: none; /* ocultar textos en móviles */
  }
}

@media (min-width: 768px) {
  .acceso-card-2 span { display: inline; } /* mostrar textos en escritorio */
}

/* ===== Responsive: Estructura de secciones ===== */
@media (max-width: 767.98px) {
  .resumen-dashboard,
  .perifl-usuario-caja,
  #docente-calendario,
  #docente-clases-hoy {
    width: 100%;
  }
  .anuncios-card,
  #docente-clases-hoy .card,
  #docente-calendario .card,
  .perfil-usuario {
    border-radius: 12px;
    width: 100%;
  }
}

/* ================= PERFIL + CALENDARIO (columna derecha) ================= */

/* --- Layout: dos columnas (desk) / apilado (móvil) --- */
.perfil-container {
  display: flex;
  align-items: flex-start;
  gap: 16px;                       /* separación entre columnas */
}

.resumen-dashboard {
  flex: 1 1 auto;                  /* ocupa el espacio disponible */
  min-width: 0;
  order: 1;                        /* izquierda / arriba */
}

.perifl-usuario-caja {
  --aside-width: 360px;            /* controla el ancho en desktop */
  flex: 0 0 var(--aside-width);
  max-width: var(--aside-width);
  order: 2;                        /* derecha / abajo en móvil */
  display: flex;
  flex-direction: column;
  gap: 12px;                       /* espacio entre perfil y calendario */
}

/* En móviles apilar, y el perfil queda debajo de “Clases de hoy” */
@media (max-width: 991.98px) {
  .perfil-container { flex-direction: column; }
  .resumen-dashboard { order: 1; width: 100%; }
  .perifl-usuario-caja { order: 2; flex: 1 1 100%; max-width: 100%; }
}

/* --- Tarjeta de PERFIL (estilo coherente con tarjetas) --- */
.perfil-usuario {
  /* variables para control rápido */
  --perfil-bg: url("../assets/bg-perfil.jpg") no-repeat center / cover;
  --perfil-radius: 12px;
  --perfil-border: 0px solid #fff;      /* sin borde visible (como clases-hoy) */
  --perfil-shadow: 0 2px 20px rgba(0,0,0,0.05);
  --perfil-pad: 20px;

  background: var(--perfil-bg);
  border-radius: var(--perfil-radius);
  border: var(--perfil-border);
  box-shadow: var(--perfil-shadow);
  padding: var(--perfil-pad);
  width: 100%;
  max-width: 100%;
  text-align: center;
  color: #1e4262;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.avatar-container {
  position: relative;
  --avatar-size: 140px;              /* controla tamaño del avatar */
  width: var(--avatar-size);
  height: var(--avatar-size);
}

.perfil-usuario .avatar-user {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

.editar-foto {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background-color: #00abb6;
  color: #fff;
  border-radius: 50%;
  padding: 7px;
  cursor: pointer;
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .2s ease, transform .15s ease;
  box-shadow: 0 0 8px rgba(0, 171, 182, 0.4);
  border: 2px solid #fff;
}
.editar-foto:hover { background-color: #00848a; transform: translateY(-1px); }

.nombre-usuario {
  /* tipografía controlable */
  font-weight: 700;
  font-size: 1.2rem;
  margin: 4px 0 2px 0;
  color: #fff;
}

.info-usuario {
  width: 100%;
  text-align: left;                 /* mejor lectura de los datos */
}
.info-usuario p {
  margin: 6px 0;
  font-size: 0.92rem;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 10px;
}
.info-usuario i {
  color: #fff;                   /* iconos a tu color base */
  min-width: 18px;
  text-align: center;
  font-size: 1rem;
}

/* --- Tarjeta del CALENDARIO (mismo “esqueleto” que Clases de hoy) --- */
#docente-calendario .card {
  border-radius: 12px;               /* igual que .card de clases de hoy */
  border: 0px solid #fff;            /* sin borde visible */
  overflow: hidden;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);   /* misma sombra */
}

/* Cabecera del calendario */
#docente-calendario .card-header {
  background: #ffffff;
  border-bottom: 1px solid #e6eef3;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #1e4262;
  font-size: 1rem;                   /* puedes subir/bajar esto */
}

/* Body del calendario: respiración */
#docente-calendario .card-body {
  padding: 1rem;
}

/* Mini calendario (mantengo tu estética, ajustable por variables) */
.mini-calendar {
  --primary: #0e4a7b;
  --accent:  #00abb6;
  --muted:   #131d25;
}

.mini-calendar .calendar-header .btn {
  border: none !important;
  color: var(--primary);
}
.mini-calendar .calendar-header .btn:hover {
  background-color: #F5F7FA !important;
  color: var(--primary);
}

.mini-calendar .calendar-grid {
  display: grid;
  grid-template-rows: repeat(6, auto);
  gap: 6px;
  background-color: #ffffff !important;
}

.mini-calendar .calendar-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.mini-calendar .calendar-weekdays span {
  color: #1e4262;
  font-weight: 600;
  text-align: center;
  background-color: #ffffff !important;
  border: none !important;
}

.mini-calendar .calendar-row span {
  display: block;
  text-align: center;
  padding: 6px 0;
  border: 1px solid #e6eef3;
  border-radius: 8px;
  background: #f9fbfc;
  color: #0e4a7b;
  font-size: 0.9rem;
}

.mini-calendar .calendar-row span.event {
  color: #ffffff;
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: inset 0 0 0 1px #bdeee6;
}

.mini-calendar .calendar-row span.muted {
  color: #c6ccd1;
  background: #f3f6f8;
  border: none !important;
  background-color: #ffffff !important;
}

/* Ajustes finos responsive del perfil */
@media (max-width: 575.98px) {
  .avatar-container { --avatar-size: 120px; }
  .nombre-usuario { font-size: 1rem; }
  .info-usuario p { font-size: 0.9rem; }
}

/* =========================
   CURSO TUTORÍA (DOCENTE)
   ========================= */

/* Botón de cabecera */
#curso-tutoria .card-header a {
  background: #1e4262 !important;
  color: #ffffff !important;
  border: 0px !important;
  padding: 4px 15px !important;
  border-radius: 12px !important;
  font-size: 0.75rem !important;
  font-weight: bold !important;
  text-decoration: none !important;
  transition: background-color 0.2s ease, transform 0.15s ease;
}
#curso-tutoria .card-header a:hover {
  background: #00abb6 !important;
  transform: translateY(-1px);
  border: 0px !important;
}

/* Contenedor principal de la tarjeta */
#curso-tutoria .card {
  border-radius: 12px !important;
  border: 0px solid #fff;
  overflow: visible;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}

/* Cabecera */
#curso-tutoria .card-header {
  background: #ffffff;
  border-bottom: 1px solid #e6eef3;
  border-radius: 12px !important;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #1e4262;
  font-size: 1.2rem;
}

/* ========= Variables ========= */
:root{
  --pastel-blue:   #cfe5ff;
  --pastel-pink:   #ffd7e6;
  --pastel-green:  #e7faed;
  --pastel-red:    #fde0e0;
  --pastel-purple: #eee4ff;

  --text-muted:    #6b7280;
  --icon-gray:     #9aa0a6;
  --row-bg:        #ffffff;
  --row-bg-hover:  #fafafa;
  --border-soft:   #edf0f2;
}

/* ========= GRID ========= */
/* Desktop: Cod (auto) | Estudiante (1fr) | Género (110px) | Estado (130px) | Acciones (auto) */
#curso-tutoria .tutoria-grid{
  display: grid;
  grid-template-columns: max-content 1fr 110px 130px max-content;
  gap: 12px;
  align-items: center;
}

/* Celdas por defecto: bloque, alineación base a la izquierda */
#curso-tutoria .tutoria-grid > *{
  display: block;
  text-align: left;
}

/* Encabezado: Acciones a la derecha */
#curso-tutoria .tutoria-head > *:last-child{
  text-align: right;
}

/* Género y Estado centrados visualmente */
#curso-tutoria .tutoria-grid > div:nth-child(3),
#curso-tutoria .tutoria-grid > div:nth-child(4){
  text-align: center;
}

/* Tablet */
@media (max-width: 992px){
  /* Ajustes suaves: reduce un poco Género/Estado si te hiciera falta */
  #curso-tutoria .tutoria-grid{
    grid-template-columns: max-content 1fr 100px 120px max-content;
    gap: 10px;
  }
}

/* Mobile */
@media (max-width: 680px){
  #curso-tutoria .tutoria-head{ display: none; }
  #curso-tutoria .tutoria-grid{
    grid-template-columns: max-content 1fr max-content;
  }
  #curso-tutoria .tutoria-row .actions,
  #curso-tutoria .tutoria-row > div:nth-child(4){
    display: none; /* oculta Acciones y Estado en móvil para la fila */
  }
  #curso-tutoria .tutoria-detail{
    grid-template-columns: max-content 1fr max-content;
  }
}

/* Encabezado de columnas */
#curso-tutoria .tutoria-head{
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-soft);
  margin-bottom: 6px;
}

/* Lista */
#curso-tutoria .tutoria-list{
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Item */
#curso-tutoria .tutoria-item{
  background: var(--row-bg);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(0,0,0,0.02);
  overflow: visible;
  position: relative;
}

/* Fila */
#curso-tutoria .tutoria-row{
  padding: 14px 12px;
  transition: background .2s ease;
  font-weight: 400;
  font-size: 0.95rem;
  color: #111827;
}
#curso-tutoria .tutoria-row:hover{
  background: var(--row-bg-hover);
}

/* Código */
#curso-tutoria .code{
  font-variant-numeric: tabular-nums;
  font-weight: 400 !important;
  letter-spacing: .2px;
  white-space: nowrap;
  width: max-content;
}

/* Estudiante */
#curso-tutoria .student-btn{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  cursor: pointer;
}
#curso-tutoria .student-btn .student-name{
  font-weight: 400; /* no bold */
}
#curso-tutoria .student-btn .avatar{
  width: 40px; height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #f1f3f5;
}

/* Género: color al texto (no fondo) y centrado */
#curso-tutoria .chip{
  font-size: .90rem;
  font-weight: 500;
  background: transparent;
  display: inline-block;
}
#curso-tutoria .chip-masculino{ color: #2563eb; }
#curso-tutoria .chip-femenino { color: #db2777; }

/* Estado: mantiene pasteles y centra */
#curso-tutoria .badge-status{
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: .85rem;
  font-weight: 600;
  text-align: center;
  color: #0E4A7B;
  white-space: nowrap;
}
#curso-tutoria .badge-deuda    { background: var(--pastel-red); }
#curso-tutoria .badge-parcial  { background: var(--pastel-purple); }
#curso-tutoria .badge-pagado   { background: var(--pastel-green); }
#curso-tutoria .badge-sin-pagos{ background: #e9ecef; color: #6c757d; }

/* Acciones + mini menú */
#curso-tutoria .actions{
  position: relative;  /* para anclar el menú */
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 8px;
}
#curso-tutoria .icon-btn{
  background: #fff;
  border: 1px solid var(--border-soft);
  width: 34px; height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  transition: background .15s ease, border-color .15s ease;
  cursor: pointer;
  z-index: 1;
}
#curso-tutoria .icon-btn:hover{
  background: #f7f7f9; border-color: #e7eaee;
}
#curso-tutoria .icon-btn .chevron{
  transition: transform .2s ease;
}

/* Mini menú (dropdown) */
#curso-tutoria .mini-menu{
  position: absolute;
  top: 38px;              /* debajo del botón */
  right: 0;
  min-width: 160px;
  background: #fff;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  box-shadow: 0 12px 24px rgba(0,0,0,.08);
  padding: 6px;
  display: none;          /* oculto por defecto */
  z-index: 50;
}
#curso-tutoria .mini-menu.open{ display: block; }

#curso-tutoria .mini-menu .menu-item{
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  text-align: left;
  font-size: 0.9rem;
  border-radius: 8px;
  color: #111827;
  cursor: pointer;
  z-index: 50;
}
#curso-tutoria .mini-menu .menu-item:hover{
  background: #f7f7f9;
}
#curso-tutoria .mini-menu .menu-item.danger{
  color: #b42318;
}
#curso-tutoria .mini-menu hr{
  margin: 6px 0;
  border: 0;
  border-top: 1px solid var(--border-soft);
}

/* Detalle expandible */
#curso-tutoria .tutoria-detail .spacer {
  grid-column: 1 / -1;              /* separador ocupa todo el ancho del grid */
  height: 1px;
  background: var(--border-soft);
  margin: 1px 0;
}

#curso-tutoria .tutoria-detail{
  padding: 0 12px 14px;
  display: none;
  color: var(--text-muted);
}
#curso-tutoria .tutoria-item.expanded .tutoria-detail{ display: grid; }
#curso-tutoria .tutoria-item.expanded .icon-btn .chevron{ transform: rotate(180deg); }
#curso-tutoria .detail-label{font-weight: 400; font-size: 0.85rem; text-align: center;}
#curso-tutoria .detail-amount{ font-weight: 500; font-size: 0.85rem; text-align: center; }
/* Asegura las 5 columnas del detalle, igual que la grid principal */
#curso-tutoria .tutoria-detail {
  grid-template-columns: max-content 1fr 110px 130px max-content;
}

/* Centrado perfecto del ESTADO en cada fila del detalle */
#curso-tutoria .tutoria-detail .detail-status {
  display: flex;
  justify-content: center;
  align-items: center;
}

#curso-tutoria .tutoria-detail .detail-status .badge-status{
  background: none !important;
  border: 1px solid #d6d6d6 !important;
}

#curso-tutoria .tutoria-detail .detail-status .badge-deuda  { color: rgb(228, 116, 116) !important; }
#curso-tutoria .tutoria-detail .detail-status .badge-parcial{ color: #a65cc6 !important; }
#curso-tutoria .tutoria-detail .detail-status .badge-pagado { color: #8cd0d4 !important; }

/* (Opcional) Si quieres igualar el alto de cada renglón de detalle */
#curso-tutoria .tutoria-detail > div {
  min-height: 1px; /* ajusta a gusto */
}

/* Paginación listado dirigencia (alineada con badges tutoría y paginación financiero) */
#curso-tutoria #tutoria-paginacion {
  color: var(--text-muted, #6b7280);
}
#curso-tutoria #tutoria-paginacion > small.text-muted {
  color: #6b7280 !important;
}
#curso-tutoria #tutoria-paginacion .pagination .page-link {
  color: #0e4a7b;
  border-color: #e6eef3;
  background-color: #fff;
}
#curso-tutoria #tutoria-paginacion .pagination .page-item:not(.disabled):not(.active) .page-link:hover {
  background-color: #e8f4fd;
  border-color: #0e4a7b;
  color: #09365c;
}
#curso-tutoria #tutoria-paginacion .pagination .page-item.active .page-link {
  background-color: #09365c;
  border-color: #09365c;
  color: #fff;
}
#curso-tutoria #tutoria-paginacion .pagination .page-item.disabled .page-link {
  color: #adb5bd;
  border-color: #e6eef3;
  background-color: #f8f9fa;
}


/* Drawer */
.drawer{
  position: fixed;
  top: 0; right: -420px; width: 420px; max-width: 90vw;
  height: 100vh; background: #fff; box-shadow: -16px 0 40px rgba(0,0,0,.08);
  transition: right .25s ease;
  z-index: 1055; display: flex; flex-direction: column;
}
.drawer.open{ right: 0; }
.drawer-header{
  padding: 16px 18px; border-bottom: 1px solid var(--border-soft);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-body{ padding: 16px 18px; overflow: auto; }
.drawer-backdrop{
  position: fixed; inset: 0; background: rgba(0,0,0,.25);
  opacity: 0; pointer-events: none; transition: opacity .25s ease; z-index: 1050;
}
.drawer-backdrop.show{ opacity: 1; pointer-events: all; }

/* Afecta solo los botones dentro del contenedor del paginador */
/* Paginacion Usuarios */
#paginacion-usuarios button.btn-outline-primary {
  border-color: #00abb6 !important;
  color: #00abb6 !important;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

#paginacion-usuarios button.btn-outline-primary:hover {
  background-color: #00abb6;
  color: #fff !important;
}

#paginacion-usuarios button.btn-secondary {
  background-color: #dee2e6;
  color: #6c757d;
  border-color: #dee2e6;
  font-weight: 500;
}

#paginacion-usuarios span {
  color: #6c757d;
  font-weight: bold;
}

/* Paginacion Estudiantes */
#paginacion-estudiantes button.btn-outline-primary {
  border-color: #00abb6 !important;
  color: #00abb6 !important;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

#paginacion-estudiantes button.btn-outline-primary:hover {
  background-color: #00abb6;
  color: #fff !important;
}

#paginacion-estudiantes button.btn-secondary {
  background-color: #dee2e6;
  color: #6c757d;
  border-color: #dee2e6;
  font-weight: 500;
}

#paginacion-estudiantes span {
  color: #6c757d;
  font-weight: bold;
}

/* Paginacion PPFF */
#paginacion-padres button.btn-outline-primary {
  border-color: #00abb6 !important;
  color: #00abb6 !important;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

#paginacion-padres button.btn-outline-primary:hover {
  background-color: #00abb6;
  color: #fff !important;
}

#paginacion-padres button.btn-secondary {
  background-color: #dee2e6;
  color: #6c757d;
  border-color: #dee2e6;
  font-weight: 500;
}

#paginacion-padres span {
  color: #6c757d;
  font-weight: bold;
}

/* Paginacion Docentes */
#paginacion-docentes button.btn-outline-primary {
  border-color: #00abb6 !important;
  color: #00abb6 !important;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

#paginacion-docentes button.btn-outline-primary:hover {
  background-color: #00abb6;
  color: #fff !important;
}

#paginacion-docentes button.btn-secondary {
  background-color: #dee2e6;
  color: #6c757d;
  border-color: #dee2e6;
  font-weight: 500;
}

/* Paginacion Asistencia */
#paginacion-asistencia button.btn-outline-primary {
  border-color: #00abb6 !important;
  color: #00abb6 !important;
  font-weight: 500;
  transition: all 0.2s ease-in-out;
}

#paginacion-asistencia button.btn-outline-primary:hover {
  background-color: #00abb6;
  color: #fff !important;
}

#paginacion-asistencia button.btn-primary {
  background-color: #00abb6 !important;
  border-color: #00abb6 !important;
  color: #fff !important;
  font-weight: 500;
}

#paginacion-asistencia button.btn-secondary {
  background-color: #dee2e6;
  color: #6c757d;
  border-color: #dee2e6;
  font-weight: 500;
}

#paginacion-docentes span {
  color: #6c757d;
  font-weight: bold;
}


/* NUEVO CSS PARA NUEVO ESTILO */
/* Botón salir: icono + texto en rojo al hover */
.icon-button.exit-btn {
  color: inherit; /* mantiene color normal */
}

.icon-button.exit-btn:hover,
.icon-button.exit-btn:hover i {
  color: #dc3545 !important; /* rojo bootstrap */
}

/* ===== Header cluster (solo desktop) ===== */
@media (min-width: 768px) {
  /* Empuja un poco hacia la izquierda (separación del borde derecho) */
  .header-right {
    gap: 1.25rem;          /* más compacto que gap-4 (1.5rem) */
    margin-right: 20px;    /* crea aire a la derecha => se “ve” más a la izquierda */
  }

  /* Bloque perfil */
  .header-profile img {
    width: 44px;           /* tamaño foto */
    height: 44px;
    object-fit: cover;
  }

  /* Tipografías */
  .header-name {           /* nombre */
    font-size: 0.95rem;
    line-height: 1.1;
    color: #212529;        /* legible sobre header oscuro/transparente */
  }
  .header-role {           /* rol */
    font-size: 0.78rem;
    line-height: 1.1;
    color: #b5b5b5 !important;
  }

  /* Espaciado fino entre imagen y textos */
  .header-profile .me-2 {
    margin-right: 0.5rem !important;
  }
}

/* Hover sutil en el bloque de perfil (opcional) */
@media (hover:hover) {
  .header-profile:hover .header-name {
    opacity: 0.95;
  }
}

/* ===== ESTILOS PARA PÁGINA LLAVERO ===== */

/* Subtítulo principal */
.consulta-permisos .subtitulo-principal {
  color: #6c757d;
  font-size: 0.9rem;
  font-weight: 400;
  margin-bottom: 0;
  margin-top: 4px;
}

/* Estilos para contraseñas */
.consulta-permisos .password-text {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  color: #495057;
  background-color: #f8f9fa;
  padding: 4px 8px;
  border-radius: 4px;
  border: 1px solid #e9ecef;
  min-width: 80px;
  display: inline-block;
}

/* Botón de mostrar/ocultar contraseña */
.consulta-permisos .btn-outline-secondary.btn-sm {
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #e9ecef;
  background-color: #fff;
  color: #6c757d;
  transition: all 0.2s ease;
}

.consulta-permisos .btn-outline-secondary.btn-sm:hover {
  background-color: #f8f9fa;
  border-color: #0e4a7b;
  color: #0e4a7b;
}

.consulta-permisos .btn-outline-secondary.btn-sm i {
  font-size: 0.9rem;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .consulta-permisos .password-text {
    font-size: 0.8rem;
    min-width: 60px;
    padding: 3px 6px;
  }
  
  .consulta-permisos .btn-outline-secondary.btn-sm {
    width: 28px;
    height: 28px;
  }
}

/* ===== ESTILOS PARA PÁGINA CONFIG-USERS ===== */

/* Variables CSS para control total del contenedor principal */
.consulta-permisos .contenedor-permisos {
  /* Espaciado interno */
  --padding-top: 20px;
  --padding-bottom: 20px;
  --padding-left: 20px;
  --padding-right: 20px;
  
  /* Bordes */
  --border-width: 1px;
  --border-style: solid;
  --border-color: #e0e0e0;
  --border-radius: 12px;
  
  /* Sombra */
  --shadow: 0 2px 20px rgba(0,0,0,0.05);
  --shadow-hover: 0 4px 12px rgba(0,0,0,0.08);
  
  /* Fondo */
  --background: #ffffff;
  --background-hover: #fafbfc;
  
  /* Transiciones */
  --transition: all 0.2s ease;
  
  /* Aplicar variables */
  padding: var(--padding-top) var(--padding-right) var(--padding-bottom) var(--padding-left);
  border: var(--border-width) var(--border-style) var(--border-color);
  border-radius: var(--border-radius);
  box-shadow: none !important;
  background: none !important;
  transition: var(--transition);
}

.consulta-permisos .contenedor-permisos:hover {
  box-shadow: var(--shadow-hover);
  background: var(--background-hover);
}

/* Contenedor principal con sidebar */
.consulta-permisos .config-container {
  display: flex;
  gap: 24px;
  min-height: 500px;
}

/* Sidebar */
.consulta-permisos .config-sidebar {
  width: 250px;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  height: fit-content;
}

.consulta-permisos .sidebar-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.consulta-permisos .menu-item {
  padding: 12px 16px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  color: #6c757d;
  font-weight: 500;
  display: flex;
  align-items: center;
}

.consulta-permisos .menu-item:hover {
  background-color: #f8f9fa;
  color: #0e4a7b;
}

.consulta-permisos .menu-item.active {
  background-color: #0e4a7b;
  color: #ffffff;
}

/* Contenido principal */
.consulta-permisos .config-content {
  flex: 1;
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
}

/* Headers de sección */
.consulta-permisos .section-header {
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e9ecef;
}

.consulta-permisos .section-title {
  color: #0e4a7b;
  font-weight: 600;
  font-size: 1.25rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
}

.consulta-permisos .section-subtitle {
  color: #6c757d;
  font-size: 0.9rem;
  margin-bottom: 0;
}

/* Contenedor de formulario */
.consulta-permisos .form-container {
  max-width: 500px;
}

/* Grupos de input de contraseña */
.consulta-permisos .password-input-group {
  position: relative;
  display: flex;
  align-items: center;
}

.consulta-permisos .password-input-group .form-control {
  padding-right: 50px;
}

.consulta-permisos .password-input-group .btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

.consulta-permisos .password-input-group .btn:hover {
  background: rgba(0,0,0,0.05) !important;
  border: none !important;
}

/* Requisitos de contraseña */
.consulta-permisos .password-requirements {
  margin-top: 12px;
  padding: 12px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e9ecef;
}

.consulta-permisos .requirement {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-size: 0.85rem;
  color: #6c757d;
}

.consulta-permisos .requirement:last-child {
  margin-bottom: 0;
}

.consulta-permisos .requirement i {
  font-size: 0.9rem;
}

.consulta-permisos .requirement.valid {
  color: #198754;
}

/* Acciones del formulario */
.consulta-permisos .form-actions {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px solid #e9ecef;
}

.consulta-permisos .form-actions .btn-primary {
  background-color: #0e4a7b;
  border-color: #0e4a7b;
  padding: 10px 24px;
  font-weight: 500;
}

.consulta-permisos .form-actions .btn-primary:hover {
  background-color: #0a3a66;
  border-color: #0a3a66;
}

.consulta-permisos .form-actions .btn-primary:disabled {
  background-color: #6c757d;
  border-color: #6c757d;
  opacity: 0.6;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .consulta-permisos .config-container {
    flex-direction: column;
    gap: 16px;
  }
  
  .consulta-permisos .config-sidebar {
    width: 100%;
  }
  
  .consulta-permisos .config-content {
    padding: 16px;
  }
  
  .consulta-permisos .form-container {
    max-width: 100%;
  }
}

/* ===== ESTILOS PARA HORARIO ESTUDIANTE DASHBOARD ===== */

/* Contenedor principal del horario */
.horario-estudiante-dashboard {
  margin-bottom: 0;
}

/* Tarjeta del horario */
.horario-estudiante-card {
  border-radius: 12px;
  border: 0px solid #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  background: #ffffff;
  overflow: hidden;
}

/* Cabecera del horario */
.horario-estudiante-header {
  background: #ffffff;
  border-bottom: 1px solid #e6eef3;
  padding: 0.75rem 1rem;
  font-weight: 600;
  color: #1e4262;
  font-size: 1rem;
}

.horario-estudiante-header h5 {
  margin: 0;
  color: #1e4262;
  font-weight: 600;
  display: flex;
  align-items: center;
}

.horario-estudiante-header i {
  color: #00abb6;
}

/* Body del horario */
.horario-estudiante-body {
  padding: 1rem;
}

/* Contenedor de la tabla */
.horario-estudiante-table-wrapper {
  overflow-x: auto;
  border-radius: 8px;
}

/* Tabla del horario - Minimalista */
.horario-estudiante-table {
  width: 100%;
  margin: 0;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 0.875rem;
  background: #ffffff;
}

.horario-estudiante-table thead {
  background: #f8f9fa;
}

.horario-estudiante-table thead th {
  padding: 10px 8px;
  text-align: center;
  font-weight: 600;
  color: #1e4262;
  font-size: 0.85rem;
  border-bottom: 2px solid #e6eef3;
  border-right: 1px solid #e6eef3;
  white-space: nowrap;
}

.horario-estudiante-table thead th:first-child {
  text-align: left;
  padding-left: 12px;
}

.horario-estudiante-table thead th:last-child {
  border-right: none;
}

/* Columna de hora */
.horario-estudiante-table .horario-hora {
  background: #f8f9fa;
  font-weight: 600;
  color: #1e4262;
  padding: 10px 12px;
  text-align: left;
  font-size: 0.85rem;
  border-right: 2px solid #e6eef3;
  width: 80px;
  min-width: 80px;
}

/* Celdas del cuerpo */
.horario-estudiante-table tbody td {
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  border-right: 1px solid #e6eef3;
  border-bottom: 1px solid #e6eef3;
  background: #ffffff;
  min-height: 50px;
}

.horario-estudiante-table tbody td:last-child {
  border-right: none;
}

.horario-estudiante-table tbody tr:last-child td {
  border-bottom: none;
}

/* Item de asignatura dentro de la celda */
.horario-asignatura-item {
  padding: 6px 8px;
  background: #f9fbfc;
  border-left: 3px solid #00abb6;
  border-radius: 6px;
  text-align: left;
  transition: all 0.2s ease;
}

.horario-asignatura-item:hover {
  background: #f0f4f8;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}

/* Nombre de la asignatura */
.horario-asignatura-nombre {
  font-weight: 600;
  color: #1e4262;
  font-size: 0.85rem;
  line-height: 1.3;
  margin-bottom: 2px;
}

/* Curso/Paralelo */
.horario-asignatura-curso {
  font-size: 0.75rem;
  color: #6c757d;
  line-height: 1.2;
}

/* Filas del cuerpo */
.horario-estudiante-table tbody tr {
  transition: background-color 0.15s ease;
}

.horario-estudiante-table tbody tr:hover {
  background-color: #fafbfc;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .horario-estudiante-body {
    padding: 0.75rem;
  }
  
  .horario-estudiante-table {
    font-size: 0.8rem;
  }
  
  .horario-estudiante-table thead th {
    padding: 8px 6px;
    font-size: 0.8rem;
  }
  
  .horario-estudiante-table .horario-hora {
    padding: 8px 10px;
    font-size: 0.8rem;
    width: 70px;
    min-width: 70px;
  }
  
  .horario-estudiante-table tbody td {
    padding: 6px 4px;
  }
  
  .horario-asignatura-item {
    padding: 5px 6px;
  }
  
  .horario-asignatura-nombre {
    font-size: 0.8rem;
  }
  
  .horario-asignatura-curso {
    font-size: 0.7rem;
  }
}

/* ===== ESTILOS PARA TARJETAS ESTUDIANTE DASHBOARD ===== */

/* Contenedor de tarjetas */
.tarjetas-estudiante-dashboard {
  margin-bottom: 0;
}

/* Asegurar que las columnas se muestren correctamente */
.tarjetas-estudiante-dashboard > [class*="col-"] {
  display: flex;
  flex-direction: column;
}

/* Asegurar que las cards ocupen todo el espacio disponible */
.tarjetas-estudiante-dashboard .card {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Tarjetas base */
.tarjeta-estado-estudiante,
.tarjeta-notificaciones-estudiante,
.tarjeta-pago-estudiante {
  border-radius: 12px;
  border: 0px solid #fff;
  box-shadow: 0 2px 20px rgba(0,0,0,0.05);
  background: #ffffff;
  transition: all 0.2s ease;
  height: 100%;
}

.tarjeta-estado-estudiante:hover,
.tarjeta-notificaciones-estudiante:hover,
.tarjeta-pago-estudiante:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}

/* Body de las tarjetas */
.tarjeta-estado-estudiante .card-body,
.tarjeta-notificaciones-estudiante .card-body,
.tarjeta-pago-estudiante .card-body {
  padding: 1.25rem;
}

/* Subtítulos */
.tarjeta-estado-estudiante .card-subtitle,
.tarjeta-notificaciones-estudiante .card-subtitle,
.tarjeta-pago-estudiante .card-subtitle {
  font-size: 0.85rem;
  font-weight: 500;
  color: #6c757d;
  margin-bottom: 0.75rem;
}

/* Iconos */
.icono-tarjeta-estudiante {
  color: #00abb6;
  opacity: 0.8;
}

/* Badge Estado Matrícula */
.badge-estado-matricula {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: capitalize;
}

.estado-activa {
  background-color: #e7faed;
  color: #0f6c37;
}

.estado-en-proceso {
  background-color: #fff2e6;
  color: #b65e09;
}

.estado-condicional {
  background-color: #fff4e6;
  color: #b3470b;
}

.estado-suspendida {
  background-color: #fde0e0;
  color: #b42318;
}

.estado-en-licencia {
  background-color: #eee4ff;
  color: #5b3ab7;
}

.estado-finalizada {
  background-color: #e7faed;
  color: #0f6c37;
}

.estado-cancelada {
  background-color: #fde0e0;
  color: #b42318;
}

.estado-expulsada {
  background-color: #fde0e0;
  color: #b42318;
}

.estado-transferida {
  background-color: #fff2e6;
  color: #b65e09;
}

.estado-graduada {
  background-color: #e7faed;
  color: #0f6c37;
}

.estado-repitente {
  background-color: #fff4e6;
  color: #b3470b;
}

.estado-no-disponible {
  background-color: #f3f4f6;
  color: #6b7280;
}

/* Contador de notificaciones */
.contador-notificaciones {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1e4262;
  margin-right: 4px;
}

/* Enlace de card clickeable */
.card-link-estudiante {
  text-decoration: none;
  color: inherit;
  display: block;
  transition: all 0.2s ease;
}

.card-link-estudiante:hover {
  text-decoration: none;
  color: inherit;
  transform: translateY(-2px);
}

.card-link-estudiante:hover .tarjeta-notificaciones-estudiante,
.card-link-estudiante:hover .tarjeta-pago-estudiante {
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}

/* Badge Estado de Pago */
.badge-estado-pago {
  display: inline-block;
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
}

.estado-al-dia {
  background-color: #e7faed;
  color: #0f6c37;
}

/* Responsive para móviles */
@media (max-width: 768px) {
  .tarjetas-estudiante-dashboard {
    margin-bottom: 1rem;
  }
  
  .tarjeta-estado-estudiante .card-body,
  .tarjeta-notificaciones-estudiante .card-body,
  .tarjeta-pago-estudiante .card-body {
    padding: 1rem;
  }
  
  .icono-tarjeta-estudiante i {
    font-size: 1.5rem !important;
  }
  
  .contador-notificaciones {
    font-size: 1.25rem;
  }
  
  .badge-estado-matricula,
  .badge-estado-pago {
    font-size: 0.85rem;
    padding: 5px 10px;
  }
}

/* =========================
   LISTADO ASISTENCIAS (DOCENTE / USERS)
   pages/users/listado-asistencia-estudiante.php
   Paleta SINFA (#09365c, #0e4a7b, #e8f4fd) — scoped, no afecta otras tablas
   ========================= */
.asistencias-estudiante.listado-asistencias-sinfa .titulo-listado-asistencias-sinfa {
  color: #09365c !important;
  font-weight: 600 !important;
  font-size: 1.35rem;
}

.asistencias-estudiante.listado-asistencias-sinfa > p.text-muted {
  color: #6b7280 !important;
}

.asistencias-estudiante.listado-asistencias-sinfa .tabla-academica {
  border: 1px solid #e6eef3 !important;
  border-radius: 10px !important;
  overflow: hidden !important;
  box-shadow: 0 2px 12px rgba(9, 54, 92, 0.06) !important;
}

.asistencias-estudiante.listado-asistencias-sinfa .tabla-academica thead {
  background-color: #09365c !important;
  background: #09365c !important;
  color: #fff !important;
}

.asistencias-estudiante.listado-asistencias-sinfa .tabla-academica thead th {
  color: #fff !important;
  background-color: #09365c !important;
  border-color: rgba(255, 255, 255, 0.2) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.25) !important;
  font-weight: 600 !important;
  padding: 12px 14px !important;
}

.asistencias-estudiante.listado-asistencias-sinfa .tabla-academica tbody td {
  border-color: #e6eef3 !important;
  background-color: #fff !important;
  color: #333 !important;
}

.asistencias-estudiante.listado-asistencias-sinfa .tabla-academica tbody tr:hover td {
  background-color: #e8f4fd !important;
}

.asistencias-estudiante.listado-asistencias-sinfa .tabla-academica tbody tr:nth-child(even) td {
  background-color: #f8fafc !important;
}

.asistencias-estudiante.listado-asistencias-sinfa .tabla-academica tbody tr:nth-child(even):hover td {
  background-color: #e8f4fd !important;
}

.asistencias-estudiante.listado-asistencias-sinfa .link-listado-asistencia-sinfa {
  color: #0e4a7b !important;
  text-decoration: none !important;
  font-weight: 500;
}

.asistencias-estudiante.listado-asistencias-sinfa .link-listado-asistencia-sinfa:hover {
  color: #09365c !important;
  text-decoration: underline !important;
}

/* =========================
   PALETA SINFA — utilidades reutilizables
   (#09365c azul institucional, #00abb6 acento, #e8f4fd fondo suave)
   ========================= */

.sinfa-alert-informativo {
  background-color: #e8f4fd;
  border: 1px solid #c5d9eb;
  color: #09365c;
  border-left: 4px solid #00abb6;
}

.sinfa-alert-informativo .alert-link {
  color: #09365c;
  font-weight: 600;
}

.sinfa-alert-informativo .alert-link:hover {
  color: #00abb6;
}

.sinfa-btn-outline-accent {
  color: #09365c !important;
  border-color: #00abb6 !important;
  background-color: #fff;
}

.sinfa-btn-outline-accent:hover {
  background-color: #00abb6 !important;
  border-color: #00abb6 !important;
  color: #fff !important;
}

.btn.sinfa-btn-primary {
  background-color: #09365c;
  border-color: #09365c;
  color: #fff;
}

.btn.sinfa-btn-primary:hover {
  background-color: #062847;
  border-color: #062847;
  color: #fff;
}

/* Dashboard — accesos Inspector / Supervisor */
.sinfa-inspeccion-dashboard .sinfa-inspeccion-heading {
  color: #09365c;
  font-weight: 700;
}

.sinfa-inspeccion-dashboard .sinfa-acc-ins-card {
  border: 1px solid #e6eef3;
  transition: box-shadow 0.2s ease, border-color 0.2s ease;
}

.sinfa-inspeccion-dashboard .sinfa-acc-ins-card:hover {
  border-color: #00abb6;
  box-shadow: 0 4px 16px rgba(0, 171, 182, 0.12);
}

.sinfa-inspeccion-dashboard .sinfa-acc-ins-icon {
  color: #00abb6;
}

.sinfa-inspeccion-dashboard .sinfa-acc-ins-title {
  color: #09365c;
  font-weight: 600;
}