/* =========================================================
   SISTEMA DE ASISTENCIA ESCOLAR V3
   ARCHIVO: estilos.css
   ========================================================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  min-height: 100%;
}

body {
  font-family: Arial, Helvetica, sans-serif;
  background: #f4f6f9;
  color: #1f2937;
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  cursor: pointer;
}

.oculto {
  display: none !important;
}


/* =========================================================
   PANTALLA DE CARGA
   ========================================================= */

.pantalla-carga {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #ffffff;
}

.carga-contenido {
  text-align: center;
}

.spinner {
  width: 44px;
  height: 44px;

  margin: 0 auto 15px;

  border: 4px solid #e5e7eb;
  border-top-color: #2563eb;
  border-radius: 50%;

  animation: girar 0.8s linear infinite;
}

@keyframes girar {
  to {
    transform: rotate(360deg);
  }
}


/* =========================================================
   LOGIN
   ========================================================= */

.pantalla-login {
  min-height: 100vh;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background:
    linear-gradient(
      135deg,
      #0f172a,
      #1d4ed8
    );
}

.login-card {
  width: 100%;
  max-width: 410px;

  padding: 38px 32px;

  background: #ffffff;

  border-radius: 18px;

  box-shadow:
    0 20px 50px
    rgba(0, 0, 0, 0.22);

  text-align: center;
}

.login-logo {
  width: 72px;
  height: 72px;

  margin: 0 auto 18px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 38px;

  background: #eff6ff;
  border-radius: 50%;
}

.login-card h1 {
  margin: 0;

  font-size: 26px;
  color: #111827;
}

.login-subtitulo {
  margin: 8px 0 28px;

  color: #6b7280;
}

.campo {
  margin-bottom: 17px;
  text-align: left;
}

.campo label {
  display: block;

  margin-bottom: 7px;

  font-size: 14px;
  font-weight: 600;

  color: #374151;
}

.campo input {
  width: 100%;

  padding: 13px 14px;

  border: 1px solid #d1d5db;
  border-radius: 9px;

  outline: none;

  transition: 0.2s;
}

.campo input:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.12);
}

.btn-principal {
  width: 100%;

  margin-top: 4px;
  padding: 13px;

  border: 0;
  border-radius: 9px;

  background: #2563eb;
  color: #ffffff;

  font-weight: 700;
}

.btn-principal:hover {
  background: #1d4ed8;
}

.btn-principal:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.mensaje-login {
  min-height: 22px;

  margin-top: 16px;

  font-size: 14px;
}

.mensaje-login.error {
  color: #dc2626;
}

.mensaje-login.info {
  color: #2563eb;
}

.mensaje-login.exito {
  color: #15803d;
}


/* =========================================================
   ESTRUCTURA PRINCIPAL
   ========================================================= */

.sistema {
  min-height: 100vh;
}


/* =========================================================
   SIDEBAR
   ========================================================= */

.sidebar {
  position: fixed;

  top: 0;
  left: 0;
  bottom: 0;

  width: 260px;

  display: flex;
  flex-direction: column;

  background: #0f172a;
  color: #ffffff;

  z-index: 1000;
}

.sidebar-cabecera {
  min-height: 82px;

  display: flex;
  align-items: center;

  gap: 12px;

  padding: 16px 18px;

  border-bottom:
    1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-logo {
  width: 45px;
  height: 45px;

  flex: 0 0 45px;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 25px;

  background:
    rgba(255, 255, 255, 0.1);

  border-radius: 10px;
}

.sidebar-cabecera strong {
  display: block;

  font-size: 15px;
}

.sidebar-cabecera small {
  display: block;

  margin-top: 3px;

  color: #94a3b8;
}


/* =========================================================
   MENÚ
   ========================================================= */

.menu-principal {
  flex: 1;

  padding: 14px 10px;

  overflow-y: auto;
}

.menu-item {
  width: 100%;

  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 5px;

  padding: 12px 14px;

  border: 0;
  border-radius: 8px;

  background: transparent;
  color: #cbd5e1;

  text-align: left;

  transition: 0.2s;
}

.menu-item:hover {
  background:
    rgba(255, 255, 255, 0.08);

  color: #ffffff;
}

.menu-item.activo {
  background: #2563eb;
  color: #ffffff;
}

.menu-icono {
  width: 25px;

  text-align: center;

  font-size: 18px;
}

.menu-texto {
  font-size: 14px;
  font-weight: 600;
}


/* =========================================================
   PIE DEL SIDEBAR
   ========================================================= */

.sidebar-pie {
  padding: 12px;

  border-top:
    1px solid rgba(255, 255, 255, 0.1);
}

.btn-cerrar-sesion {
  width: 100%;

  padding: 11px;

  border: 0;
  border-radius: 8px;

  background:
    rgba(239, 68, 68, 0.12);

  color: #fecaca;

  font-weight: 600;
}

.btn-cerrar-sesion:hover {
  background:
    rgba(239, 68, 68, 0.22);
}


/* =========================================================
   ÁREA PRINCIPAL
   ========================================================= */

.area-principal {
  min-height: 100vh;

  margin-left: 260px;
}


/* =========================================================
   TOPBAR
   ========================================================= */

.topbar {
  min-height: 82px;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  padding: 12px 26px;

  background: #ffffff;

  border-bottom: 1px solid #e5e7eb;

  position: sticky;
  top: 0;

  z-index: 500;
}

.topbar-izquierda {
  display: flex;
  align-items: center;

  gap: 12px;

  min-width: 0;
}

.topbar h2 {
  margin: 0;

  font-size: 19px;
  color: #111827;
}

.institucion {
  display: block;

  margin-top: 4px;

  font-size: 13px;
  color: #6b7280;
}

.usuario-topbar {
  display: flex;
  align-items: center;

  gap: 10px;
}

.usuario-avatar {
  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  display: flex;
  align-items: center;
  justify-content: center;

  background: #eff6ff;

  border-radius: 50%;

  font-size: 20px;
}

.usuario-datos {
  min-width: 0;
}

.usuario-datos strong {
  display: block;

  max-width: 220px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  font-size: 14px;
}

.usuario-datos span {
  display: block;

  margin-top: 3px;

  font-size: 11px;
  font-weight: 700;

  color: #2563eb;
}


/* =========================================================
   BOTÓN MENÚ MÓVIL
   ========================================================= */

.btn-menu-movil {
  display: none;

  width: 42px;
  height: 42px;

  flex: 0 0 42px;

  border: 0;
  border-radius: 8px;

  background: #f1f5f9;
  color: #0f172a;

  font-size: 22px;
}


/* =========================================================
   CONTENIDO
   ========================================================= */

.contenido {
  width: 100%;

  padding: 26px;
}

.modulo {
  width: 100%;
  max-width: 1500px;

  margin: 0 auto;
}

.titulo-modulo {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 20px;
}

.titulo-modulo h1 {
  margin: 0;

  font-size: 24px;
  color: #111827;
}

.titulo-modulo p {
  margin: 6px 0 0;

  color: #6b7280;
}


/* =========================================================
   PLACEHOLDER DE MÓDULOS
   ========================================================= */

.modulo-placeholder {
  min-height: 330px;

  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  padding: 30px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 14px;

  box-shadow:
    0 2px 8px
    rgba(15, 23, 42, 0.04);

  text-align: center;
}

.modulo-placeholder > span {
  display: block;

  margin-bottom: 12px;

  font-size: 50px;
}

.modulo-placeholder h2 {
  margin: 0 0 8px;

  color: #111827;
}

.modulo-placeholder p {
  max-width: 500px;

  margin: 0;

  line-height: 1.6;

  color: #6b7280;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 900px) {

  .sidebar {
    width: 235px;
  }

  .area-principal {
    margin-left: 235px;
  }

  .topbar {
    padding-left: 18px;
    padding-right: 18px;
  }

  .contenido {
    padding: 20px;
  }

}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 700px) {

  .sidebar {
    width: 270px;

    transform:
      translateX(-100%);

    transition:
      transform 0.25s ease;

    box-shadow:
      8px 0 25px
      rgba(0, 0, 0, 0.18);
  }

  .sidebar.abierto {
    transform:
      translateX(0);
  }

  .area-principal {
    margin-left: 0;
  }

  .btn-menu-movil {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .topbar {
    min-height: 72px;

    padding: 10px 12px;
  }

  .topbar h2 {
    font-size: 15px;
  }

  .institucion {
    font-size: 11px;
  }

  .usuario-avatar {
    display: none;
  }

  .usuario-datos strong {
    max-width: 110px;

    font-size: 12px;
  }

  .usuario-datos span {
    font-size: 10px;
  }

  .contenido {
    padding: 16px 12px;
  }

  .titulo-modulo {
    align-items: flex-start;
  }

  .titulo-modulo h1 {
    font-size: 21px;
  }

  .titulo-modulo p {
    font-size: 13px;
  }

  .modulo-placeholder {
    min-height: 280px;

    padding: 22px 15px;
  }

}


/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 420px) {

  .login-card {
    padding: 30px 20px;
  }

  .login-card h1 {
    font-size: 23px;
  }

  .topbar h2 {
    max-width: 155px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .institucion {
    max-width: 155px;

    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

}


/* =========================================================
   PANEL GENERAL
   ========================================================= */

.btn-panel-actualizar {
  padding: 10px 16px;
  border: 0;
  border-radius: 8px;

  background: #2563eb;
  color: #ffffff;

  font-weight: 600;
}

.btn-panel-actualizar:hover {
  background: #1d4ed8;
}


/* FILTROS */

.panel-filtros {
  display: grid;

  grid-template-columns:
    repeat(5, minmax(130px, 1fr));

  gap: 14px;

  margin-bottom: 20px;

  padding: 18px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.panel-filtro label {
  display: block;

  margin-bottom: 6px;

  font-size: 12px;
  font-weight: 700;

  color: #4b5563;
}

.panel-filtro input,
.panel-filtro select {
  width: 100%;

  height: 42px;

  padding: 0 11px;

  border: 1px solid #d1d5db;
  border-radius: 8px;

  background: #ffffff;

  outline: none;
}

.panel-filtro input:focus,
.panel-filtro select:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.1);
}


/* MENSAJES */

.panel-mensaje {
  margin-bottom: 18px;

  padding: 12px 15px;

  border-radius: 8px;
}

.panel-mensaje.error {
  background: #fef2f2;
  color: #b91c1c;

  border: 1px solid #fecaca;
}


/* TARJETAS */

.panel-tarjetas {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(120px, 1fr));

  gap: 12px;

  margin-bottom: 20px;
}

.panel-tarjeta {
  min-height: 95px;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding: 16px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.04);
}

.panel-tarjeta span {
  margin-bottom: 7px;

  font-size: 12px;
  font-weight: 600;

  color: #6b7280;
}

.panel-tarjeta strong {
  font-size: 27px;

  color: #111827;
}

.panel-tarjeta-porcentaje strong {
  color: #2563eb;
}


/* TABLA */

.panel-tabla-contenedor {
  width: 100%;

  overflow-x: auto;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.panel-tabla {
  width: 100%;

  min-width: 700px;

  border-collapse: collapse;
}

.panel-tabla th {
  padding: 13px 14px;

  background: #f8fafc;

  border-bottom: 1px solid #e5e7eb;

  text-align: left;

  font-size: 12px;
  color: #475569;

  white-space: nowrap;
}

.panel-tabla td {
  padding: 13px 14px;

  border-bottom: 1px solid #f1f5f9;

  font-size: 13px;

  vertical-align: middle;
}

.panel-tabla tbody tr:last-child td {
  border-bottom: 0;
}

.panel-tabla tbody tr:hover {
  background: #f8fafc;
}

.tabla-vacia {
  padding: 35px !important;

  text-align: center !important;

  color: #6b7280;
}


/* ESTADOS */

.estado-asistencia {
  display: inline-flex;

  min-width: 34px;
  height: 30px;

  align-items: center;
  justify-content: center;

  padding: 0 10px;

  border-radius: 20px;

  font-size: 12px;
  font-weight: 800;
}

.estado-puntual {
  background: #dcfce7;
  color: #166534;
}

.estado-tardanza {
  background: #fef3c7;
  color: #92400e;
}

.estado-falta {
  background: #fee2e2;
  color: #991b1b;
}

.estado-justificado {
  background: #dbeafe;
  color: #1e40af;
}


/* =========================================================
   PANEL - TABLET
   ========================================================= */

@media (max-width: 1200px) {

  .panel-tarjetas {
    grid-template-columns:
      repeat(4, 1fr);
  }

  .panel-filtros {
    grid-template-columns:
      repeat(3, 1fr);
  }

  .panel-filtro-buscar {
    grid-column: span 2;
  }
}


/* =========================================================
   PANEL - CELULAR
   ========================================================= */

@media (max-width: 700px) {

  .titulo-modulo {
    flex-wrap: wrap;
  }

  .btn-panel-actualizar {
    width: 100%;
  }

  .panel-filtros {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    padding: 12px;
    gap: 10px;
  }

  .panel-filtro-buscar {
    grid-column: 1 / -1;
  }

  .panel-tarjetas {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 9px;
  }

  .panel-tarjeta {
    min-height: 82px;

    padding: 12px;
  }

  .panel-tarjeta strong {
    font-size: 23px;
  }

  .panel-tabla {
    min-width: 650px;
  }
}


/* CELULAR PEQUEÑO */

@media (max-width: 420px) {

  .panel-filtros {
    grid-template-columns: 1fr;
  }

  .panel-filtro-buscar {
    grid-column: auto;
  }

  .panel-tarjetas {
    grid-template-columns:
      repeat(2, 1fr);
  }
}


/* =========================================================
   PAGINACIÓN DEL PANEL
   ========================================================= */

.panel-paginacion {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 15px;

  padding: 15px;

  border-top: 1px solid #e5e7eb;
}

.panel-paginacion button {
  padding: 9px 15px;

  border: 1px solid #d1d5db;
  border-radius: 7px;

  background: #ffffff;
  color: #374151;

  font-weight: 600;
}

.panel-paginacion button:hover:not(:disabled) {
  background: #f1f5f9;
}

.panel-paginacion button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.panel-paginacion span {
  font-size: 13px;
  font-weight: 600;

  color: #475569;
}

@media (max-width: 500px) {

  .panel-paginacion {
    gap: 8px;
  }

  .panel-paginacion button {
    padding: 8px 10px;
    font-size: 12px;
  }

  .panel-paginacion span {
    font-size: 11px;
    text-align: center;
  }
}

/* =========================================================
   MÓDULO ASISTENCIA - VERSIÓN LIMPIA
   ========================================================= */

.asistencia-contenedor {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.asistencia-modos {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.asistencia-modo {
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid #d1d5db;
  border-radius: 12px;
  background: #fff;
  color: #374151;
  text-align: left;
}

.asistencia-modo > span { font-size: 24px; }
.asistencia-modo strong { display: block; margin-bottom: 2px; }
.asistencia-modo small { display: block; color: #6b7280; }
.asistencia-modo.activo { border-color: #2563eb; background: #eff6ff; color: #1d4ed8; }

.asistencia-zona-principal {
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(300px, 2fr);
  gap: 16px;
  align-items: stretch;
}

.asistencia-zona-registro,
.asistencia-zona-resultado { min-width: 0; }

.asistencia-panel {
  width: 100%;
  height: 100%;
  padding: 22px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  text-align: center;
}

.asistencia-panel.oculto { display: none !important; }
.asistencia-panel-icono { font-size: 42px; margin-bottom: 7px; }
.asistencia-panel h2 { margin: 0 0 7px; }
.asistencia-panel p { margin: 0 0 18px; color: #6b7280; }

.asistencia-input-qr,
.asistencia-manual-buscador input {
  width: 100%;
  padding: 14px;
  border: 2px solid #cbd5e1;
  border-radius: 10px;
  outline: none;
  font-size: 17px;
}

.asistencia-input-qr { max-width: 550px; text-align: center; }
.asistencia-input-qr:focus,
.asistencia-manual-buscador input:focus { border-color: #2563eb; box-shadow: 0 0 0 4px rgba(37,99,235,.10); }

.asistencia-lector-estado {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin-top: 14px;
  font-size: 13px;
  color: #64748b;
}

.punto-activo {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #22c55e;
  box-shadow: 0 0 0 4px rgba(34,197,94,.12);
}

.asistencia-manual-buscador { margin-bottom: 12px; }
.asistencia-resultados-manual { max-height: 300px; overflow-y: auto; text-align: left; }
.asistencia-manual-vacio { padding: 18px; text-align: center; color: #64748b; }

.asistencia-camara-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
  text-align: left;
}

.asistencia-camara-cabecera strong { display: block; font-size: 17px; }
.asistencia-camara-cabecera small { display: block; margin-top: 2px; color: #64748b; }
.asistencia-selector-camara { display: flex; gap: 6px; }
.asistencia-selector-camara button {
  padding: 7px 9px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: #fff;
  white-space: nowrap;
}

.asistencia-camara {
  position: relative;
  width: 100%;
  height: 350px;
  overflow: hidden;
  border-radius: 14px;
  background: #111827;
}

.asistencia-camara video { width: 100%; height: 100%; display: block; object-fit: cover; }
.asistencia-marco-qr {
  position: absolute;
  width: min(220px, 60%);
  aspect-ratio: 1;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.esquina { position: absolute; width: 42px; height: 42px; border-color: #fff; border-style: solid; }
.e1 { top: 0; left: 0; border-width: 4px 0 0 4px; }
.e2 { top: 0; right: 0; border-width: 4px 4px 0 0; }
.e3 { bottom: 0; left: 0; border-width: 0 0 4px 4px; }
.e4 { right: 0; bottom: 0; border-width: 0 4px 4px 0; }

.asistencia-controles-camara { display: flex; justify-content: center; gap: 8px; margin-top: 8px; }
.btn-asistencia-camara,
.btn-asistencia-secundario { padding: 10px 16px; border: 0; border-radius: 8px; font-weight: 700; }
.btn-asistencia-camara { background: #2563eb; color: #fff; }
.btn-asistencia-secundario { background: #e5e7eb; color: #374151; }

.asistencia-zona-resultado { display: flex; flex-direction: column; position: relative; }
.asistencia-resultado {
  flex: 1;
  min-height: 430px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 22px;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}

.asistencia-resultado-icono {
  width: 70px;
  height: 70px;
  flex: 0 0 70px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 36px;
}

.asistencia-resultado-info { width: 100%; min-width: 0; }
.asistencia-resultado-etiqueta { display: block; margin-bottom: 6px; font-size: 12px; font-weight: 700; color: #64748b; letter-spacing: .06em; }
.asistencia-resultado h2 { margin: 0 0 12px; font-size: clamp(24px, 2.4vw, 36px); line-height: 1.08; overflow-wrap: anywhere; }
.asistencia-resultado-datos { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; }
.asistencia-resultado-datos span,
.asistencia-resultado-datos strong { padding: 6px 10px; border-radius: 7px; background: #f1f5f9; font-size: clamp(15px, 1.6vw, 21px); }

.asistencia-espera .asistencia-resultado-icono { background: #f1f5f9; color: #64748b; }
.asistencia-exito { border-color: #86efac; background: #f0fdf4; }
.asistencia-exito .asistencia-resultado-icono { background: #dcfce7; color: #15803d; }
.asistencia-exito #asistenciaResultadoEstado { background: #dcfce7; color: #166534; }
.asistencia-error { border-color: #fecaca; background: #fef2f2; }
.asistencia-error .asistencia-resultado-icono { background: #fee2e2; color: #dc2626; }
.asistencia-resultado.asistencia-duplicado { border: 3px solid #f59e0b; background: #fff7ed; }
.asistencia-resultado.asistencia-duplicado .asistencia-resultado-icono { font-size: 3rem; }

.asistencia-mensaje { margin-top: 10px; padding: 11px 14px; border-radius: 8px; text-align: center; font-size: 13px; }
.asistencia-mensaje.exito { background: #dcfce7; color: #166534; }
.asistencia-mensaje.error { background: #fee2e2; color: #991b1b; }
.asistencia-mensaje.info { background: #dbeafe; color: #1e40af; }
.asistencia-mensaje.advertencia { background: #fff3cd; color: #92400e; border: 2px solid #f59e0b; font-size: 1.1rem; font-weight: 800; }

/* PC */
@media (min-width: 901px) {
  .asistencia-zona-principal { min-height: 430px; }
  #asistenciaModoCamara { display: flex; flex-direction: column; }
  #asistenciaModoCamara.oculto { display: none !important; }
  #asistenciaModoCamara .asistencia-camara { flex: 1; min-height: 300px; }
}

/* TABLET / CELULAR */
@media (max-width: 900px) {
  .asistencia-modos { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
  .asistencia-modo { justify-content: center; padding: 8px 5px; text-align: center; }
  .asistencia-modo > span { font-size: 18px; }
  .asistencia-modo strong { font-size: 12px; margin: 0; }
  .asistencia-modo small { display: none; }
  .asistencia-zona-principal { grid-template-columns: 1fr; }
  .asistencia-resultado { min-height: 250px; }
}

/* MODO ESCÁNER DEDICADO EN MÓVIL/TABLET */
@media (max-width: 900px) {
  .area-principal:has(#modulo-asistencia.modo-escaner-activo) .topbar { display: none !important; }
  .area-principal:has(#modulo-asistencia.modo-escaner-activo) .contenido { padding: 0 !important; }

  #modulo-asistencia.modo-escaner-activo > .titulo-modulo,
  #modulo-asistencia.modo-escaner-activo .asistencia-modos { display: none !important; }

  #modulo-asistencia.modo-escaner-activo,
  #modulo-asistencia.modo-escaner-activo .asistencia-contenedor { width: 100%; max-width: none; height: 100dvh; margin: 0; padding: 0; }

  #modulo-asistencia.modo-escaner-activo .asistencia-zona-principal {
    width: 100%;
    height: 100dvh;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(0, 3fr) minmax(0, 2fr) !important;
    gap: 4px;
  }

  #modulo-asistencia.modo-escaner-activo .asistencia-zona-registro,
  #modulo-asistencia.modo-escaner-activo .asistencia-zona-resultado { min-height: 0; height: 100%; overflow: hidden; }

  #modulo-asistencia.modo-escaner-activo #asistenciaModoCamara {
    display: flex !important;
    flex-direction: column;
    height: 100% !important;
    min-height: 0;
    padding: 5px;
    border: 0;
    border-radius: 0;
    overflow: hidden;
  }

  #modulo-asistencia.modo-escaner-activo #asistenciaModoCamara > .asistencia-panel-icono,
  #modulo-asistencia.modo-escaner-activo #asistenciaModoCamara > h2,
  #modulo-asistencia.modo-escaner-activo #asistenciaModoCamara > p,
  #modulo-asistencia.modo-escaner-activo .asistencia-camara-cabecera > div:first-child { display: none !important; }

  #modulo-asistencia.modo-escaner-activo .asistencia-camara-cabecera { flex: 0 0 auto; margin: 0 0 4px; }
  #modulo-asistencia.modo-escaner-activo .asistencia-selector-camara { width: 100%; justify-content: center; }
  #modulo-asistencia.modo-escaner-activo .asistencia-selector-camara button { padding: 5px 10px; font-size: 12px; }

  #modulo-asistencia.modo-escaner-activo .asistencia-camara {
    flex: 1 1 0;
    width: 100%;
    height: 100% !important;
    min-height: 0;
    border-radius: 10px;
  }

  #modulo-asistencia.modo-escaner-activo .asistencia-controles-camara { flex: 0 0 auto; margin-top: 4px; }
  #modulo-asistencia.modo-escaner-activo .btn-asistencia-camara,
  #modulo-asistencia.modo-escaner-activo .btn-asistencia-secundario { min-height: 34px; padding: 6px 12px; font-size: 12px; }

  #modulo-asistencia.modo-escaner-activo .asistencia-resultado {
    width: 100%;
    height: 100%;
    min-height: 0;
    padding: 8px 10px;
    border-radius: 10px;
    overflow: hidden;
  }

  #modulo-asistencia.modo-escaner-activo .asistencia-resultado-icono { width: 52px; height: 52px; flex-basis: 52px; font-size: 30px; }
  #modulo-asistencia.modo-escaner-activo .asistencia-resultado-etiqueta { margin-bottom: 3px; font-size: 10px; }
  #modulo-asistencia.modo-escaner-activo .asistencia-resultado h2 { margin-bottom: 6px; font-size: clamp(21px, 6vw, 32px); }
  #modulo-asistencia.modo-escaner-activo .asistencia-resultado-datos span,
  #modulo-asistencia.modo-escaner-activo .asistencia-resultado-datos strong { font-size: clamp(15px, 4.5vw, 22px); }

  #modulo-asistencia.modo-escaner-activo .asistencia-mensaje {
    position: absolute;
    left: 8px;
    right: 8px;
    bottom: 8px;
    z-index: 20;
  }
}

@media (max-width: 480px) {
  .asistencia-modo { flex-direction: column; gap: 3px; }
  .asistencia-modo strong { font-size: 10px; }
}

/* =========================================================
   AJUSTE FINAL - MENSAJE ASISTENCIA EN PC
   ========================================================= */

@media (min-width: 901px) {

  .asistencia-zona-resultado {
    position: relative;
  }

  .asistencia-zona-resultado .asistencia-mensaje {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 14px;
    z-index: 20;

    margin: 0;

    box-sizing: border-box;
  }

  .asistencia-zona-resultado .asistencia-mensaje.advertencia {
    font-size: 17px;
    padding: 12px 15px;
  }
}
/* BOTÓN SALIR - ESCÁNER MÓVIL */

.btn-salir-escaner {
  display: none;
}

@media (max-width: 900px) {

  #modulo-asistencia.modo-escaner-activo
  .btn-salir-escaner {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    min-height: 42px;
    padding: 8px 14px;

    border: 1px solid #cbd5e1;
    border-radius: 10px;

    background: #ffffff;
    font-weight: 700;
    cursor: pointer;
  }

  #modulo-asistencia.modo-escaner-activo
  .asistencia-selector-camara {
    width: 100%;
    display: flex;
    justify-content: center;
    gap: 8px;
  }
}

/* =========================================================
   ESTUDIANTES V3
   ========================================================= */

.estudiantes-filtros {
  margin-bottom: 18px;
}

.estudiantes-buscador {
  max-width: 500px;
}

.estudiantes-buscador label {
  display: block;
  margin-bottom: 7px;
  font-weight: 700;
}

.estudiantes-buscador input {
  width: 100%;
  min-height: 44px;
  padding: 10px 13px;

  border: 1px solid #cbd5e1;
  border-radius: 9px;

  box-sizing: border-box;
  font: inherit;
}


.estudiantes-tabla-contenedor {
  width: 100%;
  overflow-x: auto;
}

.estudiantes-tabla {
  width: 100%;
  border-collapse: collapse;
}

.estudiantes-tabla th,
.estudiantes-tabla td {
  padding: 12px 10px;
  border-bottom: 1px solid #e5e7eb;
  text-align: left;
  vertical-align: middle;
}

.estudiantes-tabla th {
  font-size: 13px;
  font-weight: 700;
}


.estado-estudiante {
  display: inline-block;

  padding: 5px 9px;
  border-radius: 999px;

  font-size: 12px;
  font-weight: 700;
}

.estado-estudiante.activo {
  background: #dcfce7;
  color: #166534;
}

.estado-estudiante.inactivo {
  background: #fee2e2;
  color: #991b1b;
}


.estudiantes-paginacion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;

  padding-top: 16px;
}

.paginacion-botones {
  display: flex;
  align-items: center;
  gap: 12px;
}

.paginacion-botones button {
  min-height: 38px;
  padding: 7px 12px;

  border: 1px solid #cbd5e1;
  border-radius: 8px;

  background: #ffffff;
  cursor: pointer;
}

.paginacion-botones button:disabled {
  opacity: 0.45;
  cursor: default;
}


@media (max-width: 700px) {

  .estudiantes-paginacion {
    flex-direction: column;
    align-items: stretch;
  }

  .paginacion-botones {
    justify-content: space-between;
  }

  .estudiantes-tabla {
    min-width: 760px;
  }
}

/* =========================================================
   MODAL ESTUDIANTE
   ========================================================= */

.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;

  display: flex;
  align-items: center;
  justify-content: center;

  padding: 20px;

  background: rgba(15, 23, 42, 0.55);
}

.modal.oculto {
  display: none;
}

.modal-contenido {
  width: 100%;
  max-width: 650px;

  max-height: 90vh;
  overflow-y: auto;

  padding: 24px;

  background: #ffffff;
  border-radius: 14px;

  box-sizing: border-box;
}

.modal-cabecera {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;

  gap: 20px;
  margin-bottom: 22px;
}

.modal-cabecera h2 {
  margin: 0 0 5px;
}

.modal-cabecera p {
  margin: 0;
}

.modal-cerrar {
  border: 0;
  background: transparent;

  font-size: 20px;
  cursor: pointer;
}

.estudiante-form-grid {
  display: grid;

  grid-template-columns:
    repeat(2, minmax(0, 1fr));

  gap: 16px;
}

.estudiante-form-grid .campo input,
.estudiante-form-grid .campo select {
  width: 100%;
  box-sizing: border-box;
}

.modal-acciones {
  display: flex;
  justify-content: flex-end;

  gap: 10px;
  margin-top: 22px;
}


@media (max-width: 600px) {

  .modal {
    padding: 10px;
  }

  .modal-contenido {
    padding: 18px;
  }

  .estudiante-form-grid {
    grid-template-columns: 1fr;
  }

  .modal-acciones {
    flex-direction: column-reverse;
  }

  .modal-acciones button {
    width: 100%;
  }
}
/* =========================================================
   SELECT / COMBOBOX - ESTUDIANTES
   ========================================================= */

.estudiante-form-grid .campo select {
  width: 100%;
  min-height: 44px;

  padding: 10px 40px 10px 12px;

  border: 1px solid #cbd5e1;
  border-radius: 9px;

  background-color: #ffffff;

  font-family: inherit;
  font-size: 14px;
  color: #0f172a;

  cursor: pointer;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;

  appearance: auto;
  -webkit-appearance: auto;
}


/* AL PASAR EL MOUSE */

.estudiante-form-grid .campo select:hover {
  border-color: #94a3b8;
}


/* CUANDO ESTÁ SELECCIONADO */

.estudiante-form-grid .campo select:focus {
  outline: none;

  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.12);
}


/* OPCIONES */

.estudiante-form-grid .campo select option {
  background: #ffffff;
  color: #0f172a;

  font-size: 14px;
}

/* =========================================================
   ESTUDIANTES V3
   ========================================================= */

.estudiantes-titulo {
  margin-bottom: 18px;
}


/* =========================================================
   BOTONES SUPERIORES
   ========================================================= */

.estudiantes-acciones-superiores {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 18px;
}

.estudiantes-acciones-superiores button {
  min-height: 42px;
  white-space: nowrap;
}


/* =========================================================
   FILTROS
   ========================================================= */

.estudiantes-filtros-v3 {
  display: grid;
  grid-template-columns:
    minmax(240px, 2fr)
    repeat(3, minmax(140px, 1fr));
  gap: 14px;

  padding: 16px;
  margin-bottom: 14px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.estudiantes-filtro {
  min-width: 0;
}

.estudiantes-filtro label {
  display: block;

  margin-bottom: 6px;

  font-size: 13px;
  font-weight: 600;

  color: #374151;
}

.estudiantes-filtro input,
.estudiantes-filtro select {
  width: 100%;
  height: 42px;

  padding: 0 12px;

  font: inherit;

  color: #111827;
  background: #ffffff;

  border: 1px solid #d1d5db;
  border-radius: 8px;

  outline: none;

  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.estudiantes-filtro input:focus,
.estudiantes-filtro select:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* =========================================================
   CONTADOR
   ========================================================= */

.estudiantes-resumen {
  display: flex;
  align-items: center;
  justify-content: space-between;

  min-height: 36px;

  margin-bottom: 8px;

  color: #4b5563;
}

.estudiantes-resumen strong {
  font-size: 14px;
}


/* =========================================================
   CONTENEDOR TABLA
   ========================================================= */

.estudiantes-tabla-contenedor {
  width: 100%;

  overflow-x: auto;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;
}


/* =========================================================
   TABLA
   ========================================================= */

.estudiantes-tabla {
  width: 100%;

  min-width: 1000px;

  border-collapse: collapse;
}

.estudiantes-tabla thead {
  background: #f8fafc;
}

.estudiantes-tabla th {
  padding: 13px 12px;

  text-align: left;

  font-size: 12px;
  font-weight: 700;

  color: #475569;

  text-transform: uppercase;
  letter-spacing: 0.02em;

  border-bottom: 1px solid #e5e7eb;
}

.estudiantes-tabla td {
  padding: 12px;

  font-size: 13px;

  color: #1f2937;

  vertical-align: middle;

  border-bottom: 1px solid #f1f5f9;
}

.estudiantes-tabla tbody tr:last-child td {
  border-bottom: none;
}

.estudiantes-tabla tbody tr:hover {
  background: #f8fafc;
}


/* =========================================================
   ESTADO
   ========================================================= */

.estado-estudiante {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 76px;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 700;
}

.estado-estudiante.activo {
  color: #166534;
  background: #dcfce7;
}

.estado-estudiante.inactivo {
  color: #991b1b;
  background: #fee2e2;
}


/* =========================================================
   ACCIONES DE CADA ESTUDIANTE
   ========================================================= */

.acciones-estudiante {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
}

.btn-accion-estudiante {
  min-height: 32px;

  padding: 6px 9px;

  font-size: 12px;
  font-weight: 600;

  color: #334155;
  background: #ffffff;

  border: 1px solid #cbd5e1;
  border-radius: 6px;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.2s,
    border-color 0.2s,
    transform 0.1s;
}

.btn-accion-estudiante:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}

.btn-accion-estudiante:active {
  transform: scale(0.97);
}

.btn-accion-estudiante.editar {
  color: #1d4ed8;
  border-color: #bfdbfe;
  background: #eff6ff;
}

.btn-accion-estudiante.activar {
  color: #166534;
  border-color: #bbf7d0;
  background: #f0fdf4;
}

.btn-accion-estudiante.inactivar {
  color: #b91c1c;
  border-color: #fecaca;
  background: #fef2f2;
}


/* =========================================================
   PAGINACIÓN
   ========================================================= */

.estudiantes-paginacion {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 14px 16px;

  border-top: 1px solid #e5e7eb;

  background: #ffffff;
}

.paginacion-info {
  font-size: 13px;
  color: #64748b;
}

.paginacion-botones {
  display: flex;
  align-items: center;
  gap: 10px;
}

.paginacion-botones span {
  font-size: 13px;
  color: #475569;
}

.paginacion-botones button {
  min-height: 34px;

  padding: 6px 11px;

  color: #334155;
  background: #ffffff;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  cursor: pointer;
}

.paginacion-botones button:hover:not(:disabled) {
  background: #f8fafc;
}

.paginacion-botones button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}


/* =========================================================
   MODAL ESTUDIANTE
   ========================================================= */

.estudiante-modal {
  width: min(680px, calc(100vw - 32px));
  max-height: calc(100vh - 40px);

  overflow-y: auto;
}

.estudiante-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));

  gap: 16px;

  margin-top: 18px;
}

.estudiante-form-grid .campo {
  min-width: 0;
}

.estudiante-form-grid .campo label {
  display: block;

  margin-bottom: 6px;

  font-size: 13px;
  font-weight: 600;

  color: #374151;
}

.estudiante-form-grid .campo input,
.estudiante-form-grid .campo select {
  width: 100%;
  min-height: 42px;

  padding: 9px 11px;

  font: inherit;

  color: #111827;
  background: #ffffff;

  border: 1px solid #d1d5db;
  border-radius: 8px;

  outline: none;
}

.estudiante-form-grid .campo input:focus,
.estudiante-form-grid .campo select:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px rgba(37, 99, 235, 0.12);
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .estudiantes-filtros-v3 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .estudiantes-filtro-buscar {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 700px) {

  .estudiantes-titulo {
    margin-bottom: 14px;
  }


  /* BOTONES */

  .estudiantes-acciones-superiores {
    display: grid;
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 8px;
  }

  .estudiantes-acciones-superiores button {
    width: 100%;
    min-width: 0;

    padding-left: 8px;
    padding-right: 8px;

    font-size: 12px;

    white-space: normal;
  }

  #btnNuevoEstudiante {
    grid-column: 1 / -1;
  }


  /* FILTROS */

  .estudiantes-filtros-v3 {
    grid-template-columns: 1fr;

    gap: 10px;

    padding: 12px;
  }

  .estudiantes-filtro-buscar {
    grid-column: auto;
  }


  /* TABLA */

  .estudiantes-tabla {
    min-width: 920px;
  }

  .estudiantes-tabla th,
  .estudiantes-tabla td {
    padding: 10px 9px;
  }


  /* PAGINACIÓN */

  .estudiantes-paginacion {
    flex-direction: column;
    align-items: stretch;
  }

  .paginacion-info {
    text-align: center;
  }

  .paginacion-botones {
    justify-content: space-between;
  }


  /* MODAL */

  .estudiante-modal {
    width: calc(100vw - 20px);
    max-height: calc(100vh - 20px);
  }

  .estudiante-form-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }

}


/* =========================================================
   CELULARES PEQUEÑOS
   ========================================================= */

@media (max-width: 420px) {

  .estudiantes-acciones-superiores {
    grid-template-columns: 1fr;
  }

  #btnNuevoEstudiante {
    grid-column: auto;
  }

  .paginacion-botones {
    gap: 5px;
  }

  .paginacion-botones button {
    padding: 6px 8px;
    font-size: 11px;
  }

  .paginacion-botones span {
    font-size: 11px;
  }

}

/* =========================================================
   MODAL QR INDIVIDUAL - ESTUDIANTES V3
   ========================================================= */

.modal-qr-estudiante-v3 {

  width: min(430px, calc(100vw - 24px));

  padding: 0;

  overflow: hidden;

}


.qr-estudiante-v3-contenido {

  padding: 8px 28px 24px;

  text-align: center;

}


.qr-estudiante-v3-contenido h2 {

  margin:
    8px 0 7px;

  font-size: 20px;

  color: #1f2937;

}


.qr-estudiante-v3-contenido > p {

  margin: 0;

  color: #6b7280;

  font-size: 14px;

}


.qr-estudiante-datos-v3 {

  display: flex;

  justify-content: center;

  align-items: center;

  gap: 10px;

  margin-top: 15px;

  color: #6b7280;

  font-size: 14px;

}


.qr-estudiante-imagen-v3 {

  display: flex;

  justify-content: center;

  align-items: center;

  min-height: 250px;

  margin-top: 14px;

}


.qr-estudiante-imagen-v3 canvas,
.qr-estudiante-imagen-v3 img {

  display: block;

  width: 240px !important;

  height: 240px !important;

}


.qr-estudiante-codigo-v3 {

  margin-top: 4px;

}


.qr-estudiante-codigo-v3 span {

  display: block;

  color: #6b7280;

  font-size: 13px;

}


.qr-estudiante-codigo-v3 strong {

  display: block;

  margin-top: 5px;

  color: #374151;

  font-size: 13px;

  font-family: monospace;

}


.qr-estudiante-acciones-v3 {

  display: flex;

  justify-content: center;

  gap: 8px;

  padding:
    16px 20px 22px;

  border-top:
    1px solid #e5e7eb;

}


.qr-estudiante-acciones-v3 button {

  min-height: 40px;

  padding:
    8px 14px;

  border-radius: 7px;

  font-weight: 600;

  cursor: pointer;

}


.btn-qr-imprimir-v3 {

  color: #2563eb;

  background: white;

  border:
    1px solid #2563eb;

}


.btn-qr-descargar-v3 {

  color: white;

  background: #16a34a;

  border:
    1px solid #16a34a;

}


.btn-qr-cerrar-v3 {

  color: white;

  background: #6b7280;

  border:
    1px solid #6b7280;

}


@media (max-width: 500px) {

  .qr-estudiante-v3-contenido {

    padding-left: 16px;

    padding-right: 16px;

  }


  .qr-estudiante-imagen-v3 canvas,
  .qr-estudiante-imagen-v3 img {

    width: 210px !important;

    height: 210px !important;

  }


  .qr-estudiante-imagen-v3 {

    min-height: 220px;

  }


  .qr-estudiante-acciones-v3 {

    display: grid;

    grid-template-columns:
      1fr 1fr;

  }


  .btn-qr-cerrar-v3 {

    grid-column:
      1 / -1;

  }

}
/* =========================================================
   JUSTIFICACIONES V3 - DISEÑO FINAL
   ========================================================= */

/* ---------------------------------------------------------
   CABECERA DEL MÓDULO
   --------------------------------------------------------- */

#modulo-justificaciones .titulo-modulo {
  margin-bottom: 18px;
}

#modulo-justificaciones .titulo-modulo > div:first-child {
  min-width: 0;
}

#modulo-justificaciones .titulo-modulo h1 {
  display: flex;
  align-items: center;
  gap: 8px;
}

#modulo-justificaciones .titulo-modulo p {
  max-width: 520px;
  line-height: 1.4;
}


/* ---------------------------------------------------------
   BOTÓN NUEVA JUSTIFICACIÓN
   --------------------------------------------------------- */

#btnNuevaJustificacion,
.btn-nueva-justificacion-v3 {
  min-height: 42px;

  padding: 10px 18px;

  border: 0;
  border-radius: 9px;

  background: #2563eb;
  color: #ffffff;

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.2s ease,
    transform 0.1s ease,
    box-shadow 0.2s ease;
}

#btnNuevaJustificacion:hover,
.btn-nueva-justificacion-v3:hover {
  background: #1d4ed8;

  box-shadow:
    0 4px 12px
    rgba(37, 99, 235, 0.18);
}

#btnNuevaJustificacion:active,
.btn-nueva-justificacion-v3:active {
  transform: scale(0.98);
}


/* ---------------------------------------------------------
   BARRA HISTORIAL
   --------------------------------------------------------- */

.justificaciones-barra-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 16px;

  margin-top: 0;
  margin-bottom: 14px;

  padding: 17px 18px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.03);
}

.justificaciones-barra-v3 h3 {
  margin: 0 0 4px;

  font-size: 16px;
  color: #111827;
}

.justificaciones-barra-v3 p {
  margin: 0;

  font-size: 12px;
  color: #64748b;
}


/* ---------------------------------------------------------
   BOTÓN ACTUALIZAR
   --------------------------------------------------------- */

.justificaciones-barra-v3 button {
  min-height: 38px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  padding: 8px 13px;

  border: 1px solid #cbd5e1;
  border-radius: 8px;

  background: #ffffff;
  color: #334155;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

.justificaciones-barra-v3 button:hover {
  background: #f8fafc;
  border-color: #94a3b8;
}


/* ---------------------------------------------------------
   FILTROS
   --------------------------------------------------------- */

.justificaciones-filtros-v3 {
  display: grid;

  grid-template-columns:
    minmax(280px, 1fr)
    165px
    165px;

  gap: 14px;

  margin-bottom: 14px;

  padding: 16px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.03);
}

.campo-filtro-v3 {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 6px;
}

.campo-filtro-v3 label {
  font-size: 12px;
  font-weight: 700;

  color: #475569;
}

.campo-filtro-v3 input {
  width: 100%;
  height: 42px;

  padding: 0 12px;

  border: 1px solid #d1d5db;
  border-radius: 8px;

  background: #ffffff;
  color: #111827;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.campo-filtro-v3 input::placeholder {
  color: #9ca3af;
}

.campo-filtro-v3 input:hover {
  border-color: #94a3b8;
}

.campo-filtro-v3 input:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.1);
}


/* ---------------------------------------------------------
   CONTADOR
   --------------------------------------------------------- */

.tabla-cabecera-info-v3 {
  min-height: 34px;

  display: flex;
  align-items: center;
  justify-content: flex-end;

  margin: 0;

  padding: 0 3px;

  font-size: 12px;
  color: #64748b;
}


/* ---------------------------------------------------------
   TABLA JUSTIFICACIONES
   --------------------------------------------------------- */

/*
   Compatible tanto si tu HTML usa una clase propia como si
   actualmente está usando estudiantes-tabla.
*/

#modulo-justificaciones .estudiantes-tabla-contenedor,
.justificaciones-tabla-contenedor-v3 {
  width: 100%;

  overflow-x: auto;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.03);
}

#modulo-justificaciones .estudiantes-tabla,
.justificaciones-tabla-v3 {
  width: 100%;

  min-width: 900px;

  border-collapse: collapse;
}

#modulo-justificaciones .estudiantes-tabla thead,
.justificaciones-tabla-v3 thead {
  background: #f8fafc;
}

#modulo-justificaciones .estudiantes-tabla th,
.justificaciones-tabla-v3 th {
  padding: 12px 13px;

  border-bottom: 1px solid #e5e7eb;

  text-align: left;

  font-size: 12px;
  font-weight: 700;

  color: #475569;

  white-space: nowrap;
}

#modulo-justificaciones .estudiantes-tabla td,
.justificaciones-tabla-v3 td {
  padding: 12px 13px;

  border-bottom: 1px solid #f1f5f9;

  font-size: 13px;

  color: #1f2937;

  vertical-align: middle;
}

#modulo-justificaciones .estudiantes-tabla tbody tr:last-child td,
.justificaciones-tabla-v3 tbody tr:last-child td {
  border-bottom: 0;
}

#modulo-justificaciones .estudiantes-tabla tbody tr:hover,
.justificaciones-tabla-v3 tbody tr:hover {
  background: #f8fafc;
}


/* ---------------------------------------------------------
   ANCHOS DE COLUMNAS
   --------------------------------------------------------- */

#modulo-justificaciones table th:nth-child(1),
#modulo-justificaciones table td:nth-child(1) {
  width: 70px;
  text-align: center;
}

#modulo-justificaciones table th:nth-child(2),
#modulo-justificaciones table td:nth-child(2) {
  width: 110px;
  white-space: nowrap;
}

#modulo-justificaciones table th:nth-child(3),
#modulo-justificaciones table td:nth-child(3) {
  min-width: 230px;
}

#modulo-justificaciones table th:nth-child(4),
#modulo-justificaciones table td:nth-child(4) {
  width: 125px;
  white-space: nowrap;
}

#modulo-justificaciones table th:nth-child(5),
#modulo-justificaciones table td:nth-child(5) {
  min-width: 160px;
}

#modulo-justificaciones table th:nth-child(6),
#modulo-justificaciones table td:nth-child(6) {
  min-width: 180px;
}

#modulo-justificaciones table th:nth-child(7),
#modulo-justificaciones table td:nth-child(7) {
  width: 100px;
  text-align: center;
}


/* ---------------------------------------------------------
   ESTADO J
   --------------------------------------------------------- */

.estado-justificado-v3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  padding: 0;

  border-radius: 50%;

  background: #dcfce7;
  color: #166534;

  font-size: 12px;
  font-weight: 800;

  box-shadow:
    inset 0 0 0 1px
    #bbf7d0;
}


/* ---------------------------------------------------------
   DATOS DEL ESTUDIANTE
   --------------------------------------------------------- */

#modulo-justificaciones table td:nth-child(3) {
  font-weight: 600;

  color: #111827;
}

.texto-secundario-v3 {
  display: block;

  margin-top: 4px;

  font-size: 11px;
  font-weight: 400;

  color: #64748b;
}


/* ---------------------------------------------------------
   MOTIVO Y OBSERVACIÓN
   --------------------------------------------------------- */

#modulo-justificaciones table td:nth-child(5),
#modulo-justificaciones table td:nth-child(6) {
  line-height: 1.4;

  overflow-wrap: anywhere;
}

#modulo-justificaciones table td:nth-child(6) {
  color: #475569;
}


/* ---------------------------------------------------------
   BOTÓN ANULAR
   --------------------------------------------------------- */

.btn-peligro-v3 {
  min-height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 11px;

  border: 1px solid #fecaca;
  border-radius: 7px;

  background: #fef2f2;
  color: #b91c1c;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.1s ease;
}

.btn-peligro-v3:hover {
  background: #fee2e2;
  border-color: #fca5a5;
}

.btn-peligro-v3:active {
  transform: scale(0.97);
}


/* ---------------------------------------------------------
   PAGINACIÓN
   --------------------------------------------------------- */

#modulo-justificaciones .estudiantes-paginacion {
  padding: 13px 15px;

  background: #ffffff;

  border-top: 1px solid #e5e7eb;
}

#modulo-justificaciones .paginacion-botones button {
  min-height: 34px;

  padding: 6px 11px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #ffffff;
  color: #334155;

  font-size: 12px;
  font-weight: 600;
}

#modulo-justificaciones
.paginacion-botones
button:hover:not(:disabled) {
  background: #f8fafc;
  border-color: #94a3b8;
}


/* =========================================================
   MODAL NUEVA JUSTIFICACIÓN
   ========================================================= */

.modal-justificacion-v3 {
  width: min(620px, calc(100vw - 28px));

  max-height: calc(100vh - 40px);

  overflow-y: auto;
}

.modal-justificacion-v3 .modal-cabecera {
  padding-bottom: 16px;

  margin-bottom: 20px;

  border-bottom: 1px solid #f1f5f9;
}

.modal-justificacion-v3 .modal-cabecera h2 {
  font-size: 22px;

  color: #111827;
}

.modal-justificacion-v3 .modal-cabecera p {
  margin-top: 5px;

  font-size: 13px;

  color: #64748b;
}


/* ---------------------------------------------------------
   CAMPOS DEL MODAL
   --------------------------------------------------------- */

.modal-justificacion-v3 .campo-formulario {
  position: relative;

  margin-bottom: 16px;
}

.modal-justificacion-v3 .campo-formulario label {
  display: block;

  margin-bottom: 7px;

  font-size: 13px;
  font-weight: 600;

  color: #374151;
}

.modal-justificacion-v3
.campo-formulario
input,
.modal-justificacion-v3
.campo-formulario
textarea {
  width: 100%;

  padding: 10px 12px;

  border: 1px solid #d1d5db;
  border-radius: 8px;

  background: #ffffff;
  color: #111827;

  outline: none;

  transition:
    border-color 0.2s ease,
    box-shadow 0.2s ease;
}

.modal-justificacion-v3
.campo-formulario
input {
  min-height: 42px;
}

.modal-justificacion-v3
.campo-formulario
textarea {
  min-height: 100px;

  resize: vertical;

  line-height: 1.45;
}

.modal-justificacion-v3
.campo-formulario
input:focus,
.modal-justificacion-v3
.campo-formulario
textarea:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.1);
}

.texto-opcional-v3 {
  color: #9ca3af;

  font-weight: 400;
}


/* =========================================================
   RESULTADOS DEL BUSCADOR DE ESTUDIANTES
   ========================================================= */

.resultados-estudiante-justificacion-v3 {
  position: absolute;

  top: calc(100% + 5px);
  left: 0;
  right: 0;

  z-index: 100;

  max-height: 290px;

  overflow-y: auto;

  background: #ffffff;

  border: 1px solid #d1d5db;
  border-radius: 10px;

  box-shadow:
    0 12px 30px
    rgba(15, 23, 42, 0.16);
}

.resultado-estudiante-v3 {
  width: 100%;

  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 12px 14px;

  border: 0;
  border-bottom: 1px solid #f1f5f9;

  background: #ffffff;

  text-align: left;

  cursor: pointer;

  transition: background 0.15s ease;
}

.resultado-estudiante-v3:last-child {
  border-bottom: 0;
}

.resultado-estudiante-v3:hover {
  background: #eff6ff;
}

.resultado-estudiante-v3 strong {
  display: block;

  margin-bottom: 4px;

  font-size: 13px;

  color: #111827;
}

.resultado-estudiante-v3 span {
  display: block;

  font-size: 11px;

  color: #64748b;
}

.resultado-grado-v3 {
  flex: 0 0 auto;

  padding: 6px 9px;

  border-radius: 7px;

  background: #f1f5f9;
  color: #334155;

  font-size: 11px;
  font-weight: 700;

  white-space: nowrap;
}


/* ---------------------------------------------------------
   BUSCANDO / VACÍO / ERROR
   --------------------------------------------------------- */

.resultado-buscando-v3,
.resultado-vacio-v3,
.resultado-error-v3 {
  padding: 16px;

  text-align: center;

  font-size: 13px;

  color: #64748b;
}

.resultado-error-v3 {
  color: #b91c1c;

  background: #fef2f2;
}


/* =========================================================
   ESTUDIANTE SELECCIONADO
   ========================================================= */

.alumno-seleccionado-justificacion-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin: -3px 0 17px;

  padding: 12px 14px;

  border: 1px solid #bbf7d0;
  border-radius: 10px;

  background: #f0fdf4;
}

.alumno-seleccionado-justificacion-v3 > div {
  min-width: 0;

  display: flex;
  align-items: center;

  gap: 10px;
}

.alumno-seleccionado-justificacion-v3 strong {
  display: block;

  overflow: hidden;

  font-size: 13px;

  color: #14532d;

  text-overflow: ellipsis;
  white-space: nowrap;
}

.alumno-seleccionado-justificacion-v3 span {
  display: block;

  margin-top: 3px;

  font-size: 11px;

  color: #64748b;
}

.alumno-seleccionado-justificacion-v3 button {
  flex: 0 0 auto;

  padding: 6px 9px;

  border: 0;
  border-radius: 6px;

  background: transparent;
  color: #475569;

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;
}

.alumno-seleccionado-justificacion-v3 button:hover {
  background: #dcfce7;
}

.alumno-check-v3 {
  width: 32px !important;
  height: 32px !important;

  flex: 0 0 32px;

  display: flex !important;
  align-items: center;
  justify-content: center;

  margin: 0 !important;

  border-radius: 50%;

  background: #dcfce7;

  color: #166534 !important;

  font-size: 16px !important;
  font-weight: 800;
}


/* =========================================================
   MENSAJES DEL FORMULARIO
   ========================================================= */

.mensaje-formulario-v3 {
  margin: 10px 0 15px;

  padding: 11px 13px;

  border-radius: 8px;

  font-size: 13px;
  line-height: 1.4;
}

.mensaje-error-v3 {
  background: #fef2f2;
  color: #b91c1c;

  border: 1px solid #fecaca;
}

.mensaje-exito-v3 {
  background: #f0fdf4;
  color: #166534;

  border: 1px solid #bbf7d0;
}


/* =========================================================
   BOTONES DEL MODAL
   ========================================================= */

.modal-justificacion-v3 .modal-acciones {
  padding-top: 17px;

  border-top: 1px solid #f1f5f9;
}

.modal-justificacion-v3
.modal-acciones
button {
  min-height: 42px;

  padding: 9px 16px;

  border-radius: 8px;

  font-weight: 700;
}

.modal-justificacion-v3
.modal-acciones
.btn-principal {
  width: auto;

  min-width: 190px;

  margin: 0;
}

.modal-justificacion-v3
.modal-acciones
button:not(.btn-principal) {
  border: 1px solid #cbd5e1;

  background: #ffffff;
  color: #334155;
}


/* =========================================================
   AVISO FLOTANTE
   ========================================================= */

.aviso-flotante-v3 {
  position: fixed;

  right: 20px;
  bottom: 20px;

  z-index: 99999;

  max-width: 390px;

  padding: 13px 18px;

  border-radius: 10px;

  box-shadow:
    0 10px 30px
    rgba(0, 0, 0, 0.18);

  opacity: 0;

  transform: translateY(20px);

  pointer-events: none;

  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
}

.aviso-flotante-v3.mostrar {
  opacity: 1;

  transform: translateY(0);
}

.aviso-exito-v3 {
  background: #166534;
  color: #ffffff;
}

.aviso-error-v3 {
  background: #b91c1c;
  color: #ffffff;
}


/* =========================================================
   JUSTIFICACIONES - TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .justificaciones-filtros-v3 {
    grid-template-columns:
      minmax(220px, 1fr)
      150px
      150px;
  }

}


/* =========================================================
   JUSTIFICACIONES - CELULAR
   ========================================================= */

@media (max-width: 720px) {

  #modulo-justificaciones .titulo-modulo {
    flex-direction: column;
    align-items: stretch;
  }

  #btnNuevaJustificacion,
  .btn-nueva-justificacion-v3 {
    width: 100%;
  }


  /* HISTORIAL */

  .justificaciones-barra-v3 {
    align-items: stretch;

    flex-direction: column;

    padding: 14px;
  }

  .justificaciones-barra-v3 button {
    width: 100%;
  }


  /* FILTROS */

  .justificaciones-filtros-v3 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));

    gap: 10px;

    padding: 12px;
  }

  .justificaciones-filtros-v3
  .campo-filtro-v3:first-child {
    grid-column: 1 / -1;
  }


  /* TABLA */

  #modulo-justificaciones .estudiantes-tabla,
  .justificaciones-tabla-v3 {
    min-width: 880px;
  }

  #modulo-justificaciones .estudiantes-tabla th,
  #modulo-justificaciones .estudiantes-tabla td,
  .justificaciones-tabla-v3 th,
  .justificaciones-tabla-v3 td {
    padding: 10px 9px;
  }


  /* PAGINACIÓN */

  #modulo-justificaciones
  .estudiantes-paginacion {
    flex-direction: column;

    align-items: stretch;
  }

  #modulo-justificaciones
  .paginacion-info {
    text-align: center;
  }

  #modulo-justificaciones
  .paginacion-botones {
    justify-content: space-between;
  }


  /* MODAL */

  .modal-justificacion-v3 {
    width: calc(100vw - 20px);

    max-height: calc(100dvh - 20px);
  }

  .modal-justificacion-v3
  .modal-cabecera h2 {
    font-size: 20px;
  }

  .modal-justificacion-v3
  .modal-acciones {
    flex-direction: column-reverse;
  }

  .modal-justificacion-v3
  .modal-acciones
  button,
  .modal-justificacion-v3
  .modal-acciones
  .btn-principal {
    width: 100%;

    min-width: 0;
  }


  /* RESULTADOS */

  .resultado-estudiante-v3 {
    align-items: flex-start;
  }

  .alumno-seleccionado-justificacion-v3 {
    align-items: flex-start;
  }


  /* AVISO */

  .aviso-flotante-v3 {
    left: 12px;
    right: 12px;
    bottom: 12px;

    max-width: none;
  }

}


/* =========================================================
   JUSTIFICACIONES - CELULAR PEQUEÑO
   ========================================================= */

@media (max-width: 430px) {

  .justificaciones-filtros-v3 {
    grid-template-columns: 1fr;
  }

  .justificaciones-filtros-v3
  .campo-filtro-v3:first-child {
    grid-column: auto;
  }

  .justificaciones-barra-v3 {
    padding: 13px;
  }

  .tabla-cabecera-info-v3 {
    justify-content: center;
  }

  .alumno-seleccionado-justificacion-v3 {
    flex-direction: column;
  }

  .alumno-seleccionado-justificacion-v3
  button {
    align-self: flex-end;
  }

  .resultado-estudiante-v3 {
    gap: 8px;

    padding: 11px;
  }

  .resultado-grado-v3 {
    padding: 5px 7px;
  }
  

}
/* =========================================================
   JUSTIFICACIONES V3
   CORRECCIÓN FINAL DE TABLA REAL
   ========================================================= */


/* ---------------------------------------------------------
   CONTENEDOR REAL DE LA TABLA
   --------------------------------------------------------- */

#modulo-justificaciones table {
  width: 100%;
  min-width: 930px;

  border-collapse: collapse;

  background: #ffffff;
}

#modulo-justificaciones table thead {
  background: #f8fafc;
}

#modulo-justificaciones table th {
  padding: 13px 14px;

  border-bottom: 1px solid #e5e7eb;

  text-align: left;

  font-size: 12px;
  font-weight: 700;

  color: #475569;

  white-space: nowrap;
}

#modulo-justificaciones table td {
  padding: 13px 14px;

  border-bottom: 1px solid #f1f5f9;

  font-size: 13px;

  color: #1f2937;

  vertical-align: middle;
}

#modulo-justificaciones table tbody tr {
  transition: background 0.15s ease;
}

#modulo-justificaciones table tbody tr:hover {
  background: #f8fafc;
}

#modulo-justificaciones table tbody tr:last-child td {
  border-bottom: 0;
}


/* ---------------------------------------------------------
   SI LA TABLA ESTÁ DENTRO DE UN DIV
   --------------------------------------------------------- */

#modulo-justificaciones table {
  border: 1px solid #e5e7eb;

  border-radius: 12px;
}


/* ---------------------------------------------------------
   ESTADO J
   --------------------------------------------------------- */

#modulo-justificaciones .estado-justificado-v3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  min-width: 32px;

  padding: 0;

  border: 1px solid #bbf7d0;
  border-radius: 50%;

  background: #dcfce7;
  color: #166534;

  font-size: 12px;
  font-weight: 800;
}


/* ---------------------------------------------------------
   ESTUDIANTE
   --------------------------------------------------------- */

#modulo-justificaciones
.estudiante-justificacion-v3 {
  min-width: 210px;
}

#modulo-justificaciones
.estudiante-justificacion-v3 strong {
  display: block;

  margin: 0 0 4px;

  font-size: 13px;
  font-weight: 700;

  line-height: 1.3;

  color: #111827;
}

#modulo-justificaciones
.estudiante-justificacion-v3 span {
  display: block;

  font-size: 11px;
  font-weight: 400;

  color: #64748b;
}


/* ---------------------------------------------------------
   GRADO / SECCIÓN
   --------------------------------------------------------- */

#modulo-justificaciones
table td:nth-child(4) {
  font-weight: 600;

  color: #334155;

  white-space: nowrap;
}


/* ---------------------------------------------------------
   MOTIVO
   --------------------------------------------------------- */

#modulo-justificaciones
table td:nth-child(5) {
  min-width: 150px;

  line-height: 1.4;
}


/* ---------------------------------------------------------
   OBSERVACIÓN
   --------------------------------------------------------- */

#modulo-justificaciones
table td:nth-child(6) {
  min-width: 190px;

  line-height: 1.4;

  color: #475569;
}


/* ---------------------------------------------------------
   BOTÓN REAL ANULAR
   --------------------------------------------------------- */

#modulo-justificaciones
.btn-anular-justificacion-v3 {
  min-height: 32px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 6px 11px;

  border: 1px solid #fecaca;
  border-radius: 7px;

  background: #fef2f2;
  color: #b91c1c;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  white-space: nowrap;

  transition:
    background 0.2s ease,
    border-color 0.2s ease,
    transform 0.1s ease;
}

#modulo-justificaciones
.btn-anular-justificacion-v3:hover {
  background: #fee2e2;

  border-color: #fca5a5;
}

#modulo-justificaciones
.btn-anular-justificacion-v3:active {
  transform: scale(0.96);
}


/* ---------------------------------------------------------
   CELDA ACCIÓN
   --------------------------------------------------------- */

#modulo-justificaciones
table th:last-child,
#modulo-justificaciones
table td:last-child {
  text-align: center;

  white-space: nowrap;
}


/* ---------------------------------------------------------
   FECHA
   --------------------------------------------------------- */

#modulo-justificaciones
table td:nth-child(2) {
  white-space: nowrap;

  color: #334155;
}


/* =========================================================
   PAGINACIÓN REAL DE JUSTIFICACIONES
   ========================================================= */

#justificacionesPaginacion {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  padding: 15px;

  margin-top: 0;

  background: #ffffff;

  border-top: 1px solid #e5e7eb;
}

#justificacionesPaginacion button {
  min-height: 36px;

  padding: 7px 13px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #ffffff;
  color: #334155;

  font-family: inherit;
  font-size: 12px;
  font-weight: 600;

  cursor: pointer;

  transition:
    background 0.2s ease,
    border-color 0.2s ease;
}

#justificacionesPaginacion
button:hover:not(:disabled) {
  background: #f8fafc;

  border-color: #94a3b8;
}

#justificacionesPaginacion
button:disabled {
  opacity: 0.45;

  cursor: not-allowed;

  background: #f8fafc;
}

#justificacionesPaginacion
.paginacion-info {
  min-width: 95px;

  text-align: center;

  font-size: 12px;
  font-weight: 600;

  color: #475569;
}


/* =========================================================
   TABLA VACÍA / CARGANDO
   ========================================================= */

#modulo-justificaciones
.tabla-vacia {
  padding: 35px 20px !important;

  text-align: center !important;

  color: #64748b !important;

  font-weight: 400 !important;
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 720px) {

  #modulo-justificaciones table {
    min-width: 880px;
  }

  #modulo-justificaciones table th,
  #modulo-justificaciones table td {
    padding: 10px 9px;
  }

  #modulo-justificaciones
  .estudiante-justificacion-v3 {
    min-width: 190px;
  }

  #justificacionesPaginacion {
    gap: 6px;

    padding: 12px 8px;
  }

  #justificacionesPaginacion button {
    padding: 7px 9px;

    font-size: 11px;
  }

  #justificacionesPaginacion
  .paginacion-info {
    min-width: 80px;

    font-size: 11px;
  }

}

/* =========================================================
   CALENDARIO V3
   ========================================================= */


/* BOTÓN NUEVA FECHA */

.btn-nuevo-calendario-v3 {
  min-height: 42px;

  padding: 10px 18px;

  border: 0;
  border-radius: 9px;

  background: #2563eb;
  color: #ffffff;

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.2s ease,
    box-shadow 0.2s ease,
    transform 0.1s ease;
}

.btn-nuevo-calendario-v3:hover {
  background: #1d4ed8;

  box-shadow:
    0 4px 12px
    rgba(37, 99, 235, 0.18);
}

.btn-nuevo-calendario-v3:active {
  transform: scale(0.98);
}


/* INFORMACIÓN */

.calendario-info-v3 {
  display: flex;
  align-items: center;

  gap: 13px;

  margin-bottom: 14px;

  padding: 15px 17px;

  background: #eff6ff;

  border: 1px solid #bfdbfe;
  border-radius: 11px;
}

.calendario-info-icono-v3 {
  width: 40px;
  height: 40px;

  flex: 0 0 40px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 9px;

  background: #dbeafe;

  font-size: 20px;
}

.calendario-info-v3 strong {
  display: block;

  margin-bottom: 3px;

  color: #1e3a8a;

  font-size: 14px;
}

.calendario-info-v3 p {
  margin: 0;

  color: #475569;

  font-size: 12px;
  line-height: 1.4;
}


/* BARRA */

.calendario-barra-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 14px;

  padding: 17px 18px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.03);
}

.calendario-barra-v3 h3 {
  margin: 0 0 4px;

  font-size: 16px;

  color: #111827;
}

.calendario-barra-v3 p {
  margin: 0;

  font-size: 12px;

  color: #64748b;
}

.calendario-barra-v3 button {
  min-height: 38px;

  padding: 8px 13px;

  border: 1px solid #cbd5e1;
  border-radius: 8px;

  background: #ffffff;
  color: #334155;

  font-weight: 600;

  cursor: pointer;
}

.calendario-barra-v3 button:hover {
  background: #f8fafc;

  border-color: #94a3b8;
}


/* FILTROS */

.calendario-filtros-v3 {
  display: grid;

  grid-template-columns:
    minmax(180px, 1fr)
    minmax(180px, 1fr)
    minmax(180px, 1fr);

  gap: 14px;

  margin-bottom: 14px;

  padding: 16px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.03);
}

.calendario-filtros-v3
.campo-filtro-v3 {
  display: flex;
  flex-direction: column;

  gap: 6px;
}

.calendario-filtros-v3 label {
  font-size: 12px;
  font-weight: 700;

  color: #475569;
}

.calendario-filtros-v3 input,
.calendario-filtros-v3 select {
  width: 100%;
  height: 42px;

  padding: 0 12px;

  border: 1px solid #d1d5db;
  border-radius: 8px;

  background: #ffffff;
  color: #111827;

  outline: none;
}

.calendario-filtros-v3 input:focus,
.calendario-filtros-v3 select:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.1);
}


/* TABLA */

.calendario-tabla-contenedor-v3 {
  width: 100%;

  overflow-x: auto;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.03);
}

.calendario-tabla-v3 {
  width: 100%;

  min-width: 850px;

  border-collapse: collapse;
}

.calendario-tabla-v3 thead {
  background: #f8fafc;
}

.calendario-tabla-v3 th {
  padding: 13px 14px;

  border-bottom: 1px solid #e5e7eb;

  text-align: left;

  font-size: 12px;
  font-weight: 700;

  color: #475569;

  white-space: nowrap;
}

.calendario-tabla-v3 td {
  padding: 13px 14px;

  border-bottom: 1px solid #f1f5f9;

  font-size: 13px;

  color: #1f2937;

  vertical-align: middle;
}

.calendario-tabla-v3 tbody tr:hover {
  background: #f8fafc;
}

.calendario-tabla-v3 tbody tr:last-child td {
  border-bottom: 0;
}

.calendario-tabla-v3
th:last-child,
.calendario-tabla-v3
td:last-child {
  text-align: center;
}


/* FECHA */

.calendario-fecha-v3 {
  color: #111827;

  white-space: nowrap;
}


/* BADGES */

.badge-clase-v3,
.badge-no-clase-v3,
.badge-activo-calendario-v3,
.badge-inactivo-calendario-v3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 5px 9px;

  border-radius: 999px;

  font-size: 11px;
  font-weight: 800;

  white-space: nowrap;
}

.badge-clase-v3 {
  background: #dcfce7;
  color: #166534;
}

.badge-no-clase-v3 {
  background: #fee2e2;
  color: #991b1b;
}

.badge-activo-calendario-v3 {
  background: #dcfce7;
  color: #166534;
}

.badge-inactivo-calendario-v3 {
  background: #f1f5f9;
  color: #64748b;
}


/* DESCRIPCIÓN */

.calendario-descripcion-v3 {
  display: block;

  min-width: 190px;

  line-height: 1.4;

  color: #475569;
}


/* BOTONES ESTADO */

.btn-desactivar-calendario-v3,
.btn-activar-calendario-v3 {
  min-height: 32px;

  padding: 6px 11px;

  border-radius: 7px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.btn-desactivar-calendario-v3 {
  border: 1px solid #fecaca;

  background: #fef2f2;
  color: #b91c1c;
}

.btn-desactivar-calendario-v3:hover {
  background: #fee2e2;
}

.btn-activar-calendario-v3 {
  border: 1px solid #bbf7d0;

  background: #f0fdf4;
  color: #166534;
}

.btn-activar-calendario-v3:hover {
  background: #dcfce7;
}


/* PAGINACIÓN */

.calendario-paginacion-v3 {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  padding: 14px;

  border-top: 1px solid #e5e7eb;

  background: #ffffff;
}

.calendario-paginacion-v3 button {
  min-height: 36px;

  padding: 7px 13px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #ffffff;
  color: #334155;

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;
}

.calendario-paginacion-v3
button:hover:not(:disabled) {
  background: #f8fafc;

  border-color: #94a3b8;
}

.calendario-paginacion-v3
button:disabled {
  opacity: 0.45;

  cursor: not-allowed;
}

.calendario-paginacion-v3
.paginacion-info {
  min-width: 95px;

  text-align: center;

  font-size: 12px;
  font-weight: 600;

  color: #475569;
}


/* MODAL */

.modal-calendario-v3 {
  width: min(
    560px,
    calc(100vw - 28px)
  );

  max-height:
    calc(100vh - 40px);

  overflow-y: auto;
}

.modal-calendario-v3
.modal-cabecera {
  padding-bottom: 16px;

  margin-bottom: 20px;

  border-bottom: 1px solid #f1f5f9;
}

.modal-calendario-v3
.modal-cabecera h2 {
  font-size: 22px;

  color: #111827;
}

.modal-calendario-v3
.modal-cabecera p {
  margin-top: 5px;

  font-size: 13px;

  color: #64748b;
}

.modal-calendario-v3
.campo-formulario {
  margin-bottom: 16px;
}

.modal-calendario-v3
.campo-formulario label {
  display: block;

  margin-bottom: 7px;

  font-size: 13px;
  font-weight: 600;

  color: #374151;
}

.modal-calendario-v3
.campo-formulario input,
.modal-calendario-v3
.campo-formulario select {
  width: 100%;
  min-height: 42px;

  padding: 9px 12px;

  border: 1px solid #d1d5db;
  border-radius: 8px;

  background: #ffffff;
  color: #111827;

  outline: none;
}

.modal-calendario-v3
.campo-formulario input:focus,
.modal-calendario-v3
.campo-formulario select:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.1);
}

.ayuda-calendario-v3 {
  display: block;

  margin-top: 6px;

  font-size: 11px;
  line-height: 1.4;

  color: #64748b;
}


/* RESPONSIVE */

@media (max-width: 720px) {

  #modulo-calendario
  .titulo-modulo {
    flex-direction: column;
    align-items: stretch;
  }

  .btn-nuevo-calendario-v3 {
    width: 100%;
  }

  .calendario-info-v3 {
    align-items: flex-start;
  }

  .calendario-barra-v3 {
    flex-direction: column;
    align-items: stretch;
  }

  .calendario-barra-v3 button {
    width: 100%;
  }

  .calendario-filtros-v3 {
    grid-template-columns:
      1fr 1fr;
  }

  .calendario-filtros-v3
  .campo-filtro-v3:first-child {
    grid-column: 1 / -1;
  }

  .modal-calendario-v3 {
    width:
      calc(100vw - 20px);

    max-height:
      calc(100dvh - 20px);
  }

  .modal-calendario-v3
  .modal-acciones {
    flex-direction: column-reverse;
  }

  .modal-calendario-v3
  .modal-acciones button {
    width: 100%;
  }
}


@media (max-width: 430px) {

  .calendario-filtros-v3 {
    grid-template-columns: 1fr;
  }

  .calendario-filtros-v3
  .campo-filtro-v3:first-child {
    grid-column: auto;
  }

  .calendario-info-v3 {
    padding: 13px;
  }

  .calendario-paginacion-v3 {
    gap: 6px;

    padding: 11px 7px;
  }

  .calendario-paginacion-v3
  button {
    padding: 7px 9px;

    font-size: 11px;
  }

  .calendario-paginacion-v3
  .paginacion-info {
    min-width: 78px;

    font-size: 11px;
  }
}


/* =========================================================
   REPORTES V3
   ========================================================= */

.reporte-acciones-superiores-v3 {
  display: flex;
  align-items: center;
  gap: 9px;
}

.btn-reporte-secundario-v3,
.btn-reporte-excel-v3 {
  min-height: 41px;
  padding: 9px 14px;

  border-radius: 8px;

  font-family: inherit;
  font-size: 12px;
  font-weight: 700;

  cursor: pointer;
}

.btn-reporte-secundario-v3 {
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
}

.btn-reporte-secundario-v3:hover {
  background: #f8fafc;
}

.btn-reporte-excel-v3 {
  border: 1px solid #15803d;
  background: #16a34a;
  color: #ffffff;
}

.btn-reporte-excel-v3:hover {
  background: #15803d;
}


/* FILTROS */

.reporte-filtros-v3 {
  display: grid;

  grid-template-columns:
    minmax(150px, 0.8fr)
    minmax(120px, 0.55fr)
    minmax(120px, 0.55fr)
    minmax(220px, 1.3fr)
    auto;

  align-items: end;

  gap: 12px;

  margin-bottom: 14px;

  padding: 16px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 12px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.03);
}

.reporte-campo-v3 {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.reporte-campo-v3 label {
  font-size: 12px;
  font-weight: 700;
  color: #475569;
}

.reporte-campo-v3 input,
.reporte-campo-v3 select {
  width: 100%;
  height: 42px;

  padding: 0 11px;

  border: 1px solid #d1d5db;
  border-radius: 8px;

  background: #ffffff;
  color: #111827;

  outline: none;
}

.reporte-campo-v3 input:focus,
.reporte-campo-v3 select:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.1);
}

.btn-buscar-reporte-v3 {
  height: 42px;

  padding: 0 17px;

  border: 0;
  border-radius: 8px;

  background: #2563eb;
  color: #ffffff;

  font-weight: 700;

  cursor: pointer;
}

.btn-buscar-reporte-v3:hover {
  background: #1d4ed8;
}


/* DÍA */

.reporte-dia-v3 {
  display: flex;
  align-items: center;

  gap: 12px;

  margin-bottom: 14px;

  padding: 13px 16px;

  border-radius: 10px;
}

.reporte-dia-icono-v3 {
  width: 38px;
  height: 38px;

  flex: 0 0 38px;

  display: flex;
  align-items: center;
  justify-content: center;

  border-radius: 8px;

  font-size: 18px;
  font-weight: 800;
}

.reporte-dia-v3 strong {
  display: block;

  margin-bottom: 2px;

  font-size: 13px;
}

.reporte-dia-v3 p {
  margin: 0;

  font-size: 12px;

  color: #475569;
}

.reporte-dia-clase-v3 {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.reporte-dia-clase-v3
.reporte-dia-icono-v3 {
  background: #dcfce7;
  color: #166534;
}

.reporte-dia-clase-v3 strong {
  color: #166534;
}

.reporte-dia-no-clase-v3 {
  background: #fff7ed;
  border: 1px solid #fed7aa;
}

.reporte-dia-no-clase-v3
.reporte-dia-icono-v3 {
  background: #ffedd5;
}

.reporte-dia-no-clase-v3 strong {
  color: #9a3412;
}


/* RESUMEN */

.reporte-resumen-v3 {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(100px, 1fr));

  gap: 9px;

  margin-bottom: 14px;
}

.reporte-tarjeta-v3 {
  min-width: 0;

  padding: 13px 11px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-radius: 10px;

  box-shadow:
    0 2px 6px
    rgba(15, 23, 42, 0.03);
}

.reporte-tarjeta-v3 span {
  display: block;

  margin-bottom: 5px;

  font-size: 11px;
  font-weight: 600;

  color: #64748b;
}

.reporte-tarjeta-v3 strong {
  font-size: 22px;

  color: #111827;
}

.reporte-p-v3 {
  border-left: 4px solid #16a34a;
}

.reporte-t-v3 {
  border-left: 4px solid #f59e0b;
}

.reporte-f-v3 {
  border-left: 4px solid #dc2626;
}

.reporte-j-v3 {
  border-left: 4px solid #2563eb;
}

.reporte-porcentaje-v3 {
  border-left: 4px solid #7c3aed;
}


/* BARRA */

.reporte-barra-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 12px;

  padding: 14px 16px;

  background: #ffffff;

  border: 1px solid #e5e7eb;
  border-bottom: 0;

  border-radius: 12px 12px 0 0;
}

.reporte-barra-v3 h3 {
  margin: 0 0 3px;

  font-size: 15px;

  color: #111827;
}

.reporte-barra-v3 span {
  font-size: 11px;

  color: #64748b;
}

.reporte-barra-v3 button {
  min-height: 36px;

  padding: 7px 12px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #ffffff;
  color: #334155;

  font-size: 12px;
  font-weight: 600;

  cursor: pointer;
}

.reporte-barra-v3 button:hover {
  background: #f8fafc;
}


/* TABLA */

.reporte-tabla-contenedor-v3 {
  width: 100%;

  overflow-x: auto;

  background: #ffffff;

  border: 1px solid #e5e7eb;

  border-radius: 0 0 12px 12px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, 0.03);
}

.reporte-tabla-v3 {
  width: 100%;

  min-width: 850px;

  border-collapse: collapse;
}

.reporte-tabla-v3 thead {
  background: #f8fafc;
}

.reporte-tabla-v3 th {
  padding: 12px 13px;

  border-bottom: 1px solid #e5e7eb;

  text-align: left;

  font-size: 11px;
  font-weight: 700;

  color: #475569;

  white-space: nowrap;
}

.reporte-tabla-v3 td {
  padding: 12px 13px;

  border-bottom: 1px solid #f1f5f9;

  font-size: 12px;

  color: #334155;

  vertical-align: middle;
}

.reporte-tabla-v3 tbody tr:hover {
  background: #f8fafc;
}

.reporte-tabla-v3 tbody tr:last-child td {
  border-bottom: 0;
}

.reporte-estudiante-v3 {
  color: #111827;
}


/* ESTADOS */

.reporte-estado-v3 {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  padding: 5px 8px;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;

  white-space: nowrap;
}

.reporte-estado-v3 strong {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 18px;
  height: 18px;

  border-radius: 50%;

  background: rgba(255,255,255,0.75);

  font-size: 10px;
}

.reporte-estado-p-v3 {
  background: #dcfce7;
  color: #166534;
}

.reporte-estado-t-v3 {
  background: #fef3c7;
  color: #92400e;
}

.reporte-estado-f-v3 {
  background: #fee2e2;
  color: #991b1b;
}

.reporte-estado-j-v3 {
  background: #dbeafe;
  color: #1e40af;
}

.codigo-reporte-v3 {
  font-size: 13px;
}


/* PAGINACIÓN */

.reporte-paginacion-v3 {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  padding: 13px;

  border-top: 1px solid #e5e7eb;
}

.reporte-paginacion-v3 button {
  min-height: 35px;

  padding: 7px 12px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #ffffff;
  color: #334155;

  font-size: 11px;
  font-weight: 600;

  cursor: pointer;
}

.reporte-paginacion-v3
button:disabled {
  opacity: 0.45;

  cursor: not-allowed;
}

.reporte-paginacion-v3
.paginacion-info {
  min-width: 95px;

  text-align: center;

  font-size: 11px;
  font-weight: 600;

  color: #475569;
}


/* TABLET */

@media (max-width: 1050px) {

  .reporte-resumen-v3 {
    grid-template-columns:
      repeat(4, 1fr);
  }

  .reporte-filtros-v3 {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .reporte-buscar-v3 {
    grid-column: 1 / -1;
  }

  .btn-buscar-reporte-v3 {
    grid-column: 1 / -1;
  }
}


/* CELULAR */

@media (max-width: 720px) {

  #modulo-reportes
  .titulo-modulo {
    flex-direction: column;
    align-items: stretch;
  }

  .reporte-acciones-superiores-v3 {
    display: grid;

    grid-template-columns:
      1fr 1fr;
  }

  .reporte-filtros-v3 {
    grid-template-columns:
      1fr 1fr;
  }

  .reporte-buscar-v3 {
    grid-column: 1 / -1;
  }

  .btn-buscar-reporte-v3 {
    grid-column: 1 / -1;
  }

  .reporte-resumen-v3 {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .reporte-porcentaje-v3 {
    grid-column: 1 / -1;
  }

  .reporte-dia-v3 {
    align-items: flex-start;
  }
}


@media (max-width: 430px) {

  .reporte-acciones-superiores-v3 {
    grid-template-columns: 1fr;
  }

  .reporte-filtros-v3 {
    grid-template-columns: 1fr;
  }

  .reporte-buscar-v3,
  .btn-buscar-reporte-v3 {
    grid-column: auto;
  }

  .reporte-resumen-v3 {
    gap: 7px;
  }

  .reporte-tarjeta-v3 {
    padding: 11px 9px;
  }

  .reporte-tarjeta-v3 strong {
    font-size: 19px;
  }

  .reporte-barra-v3 {
    align-items: flex-start;
  }

  .reporte-paginacion-v3 {
    gap: 6px;

    padding: 10px 6px;
  }

  .reporte-paginacion-v3 button {
    padding: 6px 8px;
  }

  .reporte-paginacion-v3
  .paginacion-info {
    min-width: 75px;
  }
}


/* =========================================================
   REPORTES V3 COMPLETO
   ========================================================= */

#modulo-reportes {
  width: 100%;
}


/* SELECTOR */

.reportes-selector-v3 {
  display: inline-flex;

  gap: 5px;

  margin-bottom: 16px;

  padding: 4px;

  background: #eef2f7;

  border-radius: 10px;
}

.reporte-selector-btn-v3 {
  min-height: 39px;

  padding: 8px 16px;

  border: 0;
  border-radius: 7px;

  background: transparent;
  color: #475569;

  font-weight: 700;

  cursor: pointer;
}

.reporte-selector-btn-v3.activo {
  background: #ffffff;
  color: #2563eb;

  box-shadow:
    0 1px 4px
    rgba(15, 23, 42, 0.12);
}


/* PANEL */

.reporte-panel-v3 {
  margin-bottom: 14px;

  padding: 18px;

  background: #ffffff;

  border: 1px solid #e2e8f0;
  border-radius: 12px;

  box-shadow:
    0 2px 8px
    rgba(15, 23, 42, 0.04);
}

.reporte-panel-titulo-v3 {
  margin-bottom: 15px;
}

.reporte-panel-titulo-v3 h3 {
  margin: 0 0 4px;

  font-size: 16px;

  color: #0f172a;
}

.reporte-panel-titulo-v3 p {
  margin: 0;

  font-size: 12px;

  color: #64748b;
}


/* FILTROS */

.reporte-filtros-completo-v3 {
  display: grid;

  grid-template-columns:
    160px
    120px
    120px
    155px
    minmax(220px, 1fr);

  gap: 12px;
}

.reporte-filtros-periodo-v3 {
  display: grid;

  grid-template-columns:
    155px
    155px
    115px
    115px
    minmax(220px, 1fr);

  gap: 12px;
}

.reporte-campo-v3 {
  min-width: 0;
}

.reporte-campo-v3 label {
  display: block;

  margin-bottom: 6px;

  font-size: 12px;
  font-weight: 700;

  color: #475569;
}

.reporte-campo-v3 input,
.reporte-campo-v3 select {
  width: 100%;
  height: 41px;

  padding: 0 11px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #ffffff;
  color: #0f172a;

  outline: none;
}

.reporte-campo-v3 input:focus,
.reporte-campo-v3 select:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, 0.1);
}


/* BOTONES FILTROS */

.reporte-botones-filtro-v3 {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 14px;
}

.btn-limpiar-reporte-v3,
.btn-consultar-reporte-v3 {
  min-height: 39px;

  padding: 8px 15px;

  border-radius: 7px;

  font-weight: 700;

  cursor: pointer;
}

.btn-limpiar-reporte-v3 {
  border: 1px solid #cbd5e1;

  background: #ffffff;
  color: #475569;
}

.btn-consultar-reporte-v3 {
  border: 1px solid #2563eb;

  background: #2563eb;
  color: #ffffff;
}

.btn-consultar-reporte-v3:hover {
  background: #1d4ed8;
}


/* DÍA DE CLASE */

.reporte-alerta-dia-v3 {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 14px;

  padding: 11px 15px;

  border-radius: 9px;
}

.reporte-alerta-dia-v3.clase {
  background: #f0fdf4;

  border: 1px solid #bbf7d0;
}

.reporte-alerta-dia-v3.no-clase {
  background: #fff7ed;

  border: 1px solid #fed7aa;
}

.reporte-alerta-icono-v3 {
  width: 34px;
  height: 34px;

  display: flex;
  align-items: center;
  justify-content: center;

  flex: 0 0 34px;

  border-radius: 8px;

  background: rgba(255,255,255,.7);
}

.reporte-alerta-dia-v3 strong {
  display: block;

  margin-bottom: 2px;

  font-size: 13px;
}

.reporte-alerta-dia-v3 span {
  display: block;

  font-size: 11px;

  color: #64748b;
}


/* TARJETAS */

.reporte-resumen-grande-v3 {
  display: grid;

  grid-template-columns:
    repeat(7, minmax(95px, 1fr));

  gap: 9px;

  margin-bottom: 15px;
}

.reporte-card-v3 {
  padding: 13px 12px;

  background: #ffffff;

  border: 1px solid #e2e8f0;
  border-top: 3px solid #64748b;

  border-radius: 9px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, .04);
}

.reporte-card-v3 span {
  display: block;

  margin-bottom: 5px;

  font-size: 10px;
  font-weight: 700;

  color: #64748b;
}

.reporte-card-v3 strong {
  font-size: 21px;

  color: #0f172a;
}

.reporte-card-v3.presente {
  border-top-color: #0ea5e9;
}

.reporte-card-v3.puntual {
  border-top-color: #16a34a;
}

.reporte-card-v3.tardanza {
  border-top-color: #f59e0b;
}

.reporte-card-v3.justificado {
  border-top-color: #2563eb;
}

.reporte-card-v3.falta {
  border-top-color: #dc2626;
}

.reporte-card-v3.porcentaje {
  border-top-color: #7c3aed;
}


/* CABECERA TABLA */

.reporte-cabecera-tabla-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  padding: 14px 16px;

  background: #ffffff;

  border: 1px solid #e2e8f0;
  border-bottom: 0;

  border-radius: 11px 11px 0 0;
}

.reporte-cabecera-tabla-v3 h3 {
  margin: 0 0 3px;

  font-size: 15px;

  color: #0f172a;
}

.reporte-cabecera-tabla-v3 span {
  font-size: 11px;

  color: #64748b;
}

.reporte-exportar-v3 {
  display: flex;

  gap: 8px;
}

.btn-excel-reporte-v3,
.btn-imprimir-reporte-v3 {
  min-height: 36px;

  padding: 7px 12px;

  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}

.btn-excel-reporte-v3 {
  border: 1px solid #16a34a;

  background: #16a34a;
  color: #ffffff;
}

.btn-imprimir-reporte-v3 {
  border: 1px solid #cbd5e1;

  background: #ffffff;
  color: #334155;
}


/* TABLA DIARIA */

.reporte-tabla-scroll-v3 {
  overflow-x: auto;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 0 0 11px 11px;
}

.reporte-tabla-v3 {
  width: 100%;

  min-width: 800px;

  border-collapse: collapse;
}

.reporte-tabla-v3 th {
  padding: 11px 12px;

  background: #f8fafc;

  border-bottom: 1px solid #e2e8f0;

  text-align: left;

  font-size: 11px;

  color: #475569;
}

.reporte-tabla-v3 td {
  padding: 11px 12px;

  border-bottom: 1px solid #f1f5f9;

  font-size: 12px;

  color: #334155;
}

.reporte-tabla-v3 tbody tr:hover {
  background: #f8fafc;
}

.reporte-alumno-v3 strong {
  display: block;

  margin-bottom: 2px;

  color: #0f172a;
}

.reporte-alumno-v3 span {
  font-size: 10px;

  color: #94a3b8;
}


/* P T J F */

.codigo-asistencia-v3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 25px;
  height: 25px;

  border-radius: 6px;

  font-size: 11px;
  font-weight: 900;
}

.codigo-p-v3 {
  background: #dcfce7;
  color: #166534;
}

.codigo-t-v3 {
  background: #fef3c7;
  color: #92400e;
}

.codigo-j-v3 {
  background: #dbeafe;
  color: #1d4ed8;
}

.codigo-f-v3 {
  background: #fee2e2;
  color: #b91c1c;
}

.codigo-asistencia-v3.neutro {
  background: #f1f5f9;
  color: #64748b;
}

.estado-reporte-v3 {
  display: inline-flex;
  align-items: center;

  gap: 6px;

  font-size: 11px;
  font-weight: 700;
}


/* PAGINACIÓN */

.reporte-paginacion-v3 {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  padding: 12px;

  border-top: 1px solid #e2e8f0;
}

.reporte-paginacion-v3 button {
  min-height: 34px;

  padding: 6px 11px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #ffffff;

  cursor: pointer;
}

.reporte-paginacion-v3 button:disabled {
  opacity: .45;

  cursor: not-allowed;
}

.reporte-paginacion-v3 span {
  font-size: 11px;

  color: #64748b;
}


/* LEYENDA PERIODO */

.reporte-leyenda-v3 {
  display: flex;
  flex-wrap: wrap;

  gap: 15px;

  padding: 10px 14px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;
  border-bottom: 0;
}

.reporte-leyenda-v3 span {
  display: inline-flex;
  align-items: center;

  gap: 5px;

  font-size: 10px;

  color: #475569;
}

.reporte-leyenda-v3 b {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 21px;
  height: 21px;

  border-radius: 5px;
}

.leyenda-p-v3 {
  background: #dcfce7;
  color: #166534;
}

.leyenda-t-v3 {
  background: #fef3c7;
  color: #92400e;
}

.leyenda-j-v3 {
  background: #dbeafe;
  color: #1d4ed8;
}

.leyenda-f-v3 {
  background: #fee2e2;
  color: #b91c1c;
}

.leyenda-n-v3 {
  background: #e2e8f0;
  color: #475569;
}


/* MATRIZ PERIODO */

.reporte-periodo-scroll-v3 {
  width: 100%;

  overflow-x: auto;

  background: #ffffff;

  border: 1px solid #e2e8f0;

  border-radius: 0 0 11px 11px;
}

.reporte-periodo-tabla-v3 {
  width: 100%;

  min-width: 900px;

  border-collapse: collapse;
}

.reporte-periodo-tabla-v3 th {
  padding: 8px 7px;

  background: #f8fafc;

  border-right: 1px solid #e2e8f0;
  border-bottom: 1px solid #cbd5e1;

  font-size: 10px;
  font-weight: 800;

  color: #475569;

  white-space: nowrap;
}

.reporte-periodo-tabla-v3 td {
  padding: 8px 7px;

  border-right: 1px solid #f1f5f9;
  border-bottom: 1px solid #f1f5f9;

  text-align: center;

  font-size: 11px;

  white-space: nowrap;
}

.reporte-periodo-tabla-v3
td:nth-child(2) {
  min-width: 220px;

  text-align: left;
}

.reporte-periodo-tabla-v3 tbody tr:hover {
  background: #f8fafc;
}

.reporte-dia-col-v3 {
  min-width: 44px;

  text-align: center !important;
}

.reporte-dia-col-v3 span {
  display: block;

  font-size: 11px;
}

.reporte-dia-col-v3 small {
  display: block;

  margin-top: 2px;

  font-size: 8px;

  color: #94a3b8;
}

.reporte-dia-no-clase-col-v3 {
  background: #f1f5f9 !important;
}

.celda-no-clase-v3 {
  background: #f8fafc;

  color: #94a3b8;
}

.total-p-v3 {
  color: #166534;

  font-weight: 800;
}

.total-t-v3 {
  color: #92400e;

  font-weight: 800;
}

.total-j-v3 {
  color: #1d4ed8;

  font-weight: 800;
}

.total-f-v3 {
  color: #b91c1c;

  font-weight: 800;
}


/* TABLET */

@media (max-width: 1100px) {

  .reporte-filtros-completo-v3,
  .reporte-filtros-periodo-v3 {
    grid-template-columns:
      repeat(2, minmax(0, 1fr));
  }

  .reporte-busqueda-grande-v3 {
    grid-column: 1 / -1;
  }

  .reporte-resumen-grande-v3 {
    grid-template-columns:
      repeat(4, 1fr);
  }
}


/* CELULAR */

@media (max-width: 700px) {

  .reportes-selector-v3 {
    display: grid;

    grid-template-columns:
      1fr 1fr;

    width: 100%;
  }

  .reporte-selector-btn-v3 {
    padding-left: 8px;
    padding-right: 8px;

    font-size: 11px;
  }

  .reporte-panel-v3 {
    padding: 14px;
  }

  .reporte-filtros-completo-v3,
  .reporte-filtros-periodo-v3 {
    grid-template-columns: 1fr;
  }

  .reporte-busqueda-grande-v3 {
    grid-column: auto;
  }

  .reporte-botones-filtro-v3 {
    display: grid;

    grid-template-columns:
      1fr 1fr;
  }

  .reporte-resumen-grande-v3 {
    grid-template-columns:
      repeat(2, 1fr);
  }

  .reporte-card-v3.porcentaje {
    grid-column: 1 / -1;
  }

  .reporte-cabecera-tabla-v3 {
    flex-direction: column;
    align-items: stretch;
  }

  .reporte-exportar-v3 {
    display: grid;

    grid-template-columns:
      1fr 1fr;
  }

  .btn-excel-reporte-v3,
  .btn-imprimir-reporte-v3 {
    width: 100%;
  }

  .reporte-leyenda-v3 {
    gap: 8px 12px;
  }
}


@media (max-width: 430px) {

  .reporte-resumen-grande-v3 {
    gap: 7px;
  }

  .reporte-card-v3 {
    padding: 10px;
  }

  .reporte-card-v3 strong {
    font-size: 18px;
  }

  .reporte-exportar-v3 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   USUARIOS V3
   ========================================================= */

#modulo-usuarios {
  width: 100%;
}


/* CABECERA */

.usuarios-cabecera-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 20px;

  margin-bottom: 16px;
}

.usuarios-cabecera-v3 h1 {
  margin: 0 0 4px;

  font-size: 21px;
  color: #0f172a;
}

.usuarios-cabecera-v3 p {
  margin: 0;

  font-size: 12px;
  color: #64748b;
}

.btn-nuevo-usuario-v3 {
  min-height: 40px;

  padding: 8px 15px;

  border: 0;
  border-radius: 8px;

  background: #2563eb;
  color: #ffffff;

  font-size: 12px;
  font-weight: 700;

  cursor: pointer;

  box-shadow:
    0 2px 5px
    rgba(37, 99, 235, .18);
}

.btn-nuevo-usuario-v3:hover {
  background: #1d4ed8;
}


/* FILTROS */

.usuarios-filtros-v3 {
  display: grid;

  grid-template-columns:
    minmax(280px, 1fr)
    180px
    180px
    auto;

  gap: 10px;

  margin-bottom: 14px;

  padding: 12px;

  background: #ffffff;

  border: 1px solid #e2e8f0;
  border-radius: 10px;

  box-shadow:
    0 2px 7px
    rgba(15, 23, 42, .04);
}

.usuarios-busqueda-v3 {
  position: relative;
}

.usuarios-busqueda-v3 span {
  position: absolute;

  left: 11px;
  top: 50%;

  transform: translateY(-50%);

  font-size: 12px;

  pointer-events: none;
}

.usuarios-busqueda-v3 input {
  padding-left: 34px !important;
}

.usuarios-filtros-v3 input,
.usuarios-filtros-v3 select {
  width: 100%;
  height: 39px;

  padding: 0 11px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #ffffff;
  color: #334155;

  font-size: 12px;

  outline: none;
}

.usuarios-filtros-v3 input:focus,
.usuarios-filtros-v3 select:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, .09);
}

.btn-limpiar-usuarios-v3 {
  height: 39px;

  padding: 0 14px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #ffffff;
  color: #475569;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}


/* CARD */

.usuarios-card-v3 {
  overflow: hidden;

  background: #ffffff;

  border: 1px solid #e2e8f0;
  border-radius: 10px;

  box-shadow:
    0 2px 8px
    rgba(15, 23, 42, .04);
}

.usuarios-card-cabecera-v3 {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 13px 15px;

  border-bottom: 1px solid #e2e8f0;
}

.usuarios-card-cabecera-v3 h3 {
  margin: 0 0 3px;

  font-size: 14px;
  color: #0f172a;
}

.usuarios-card-cabecera-v3 span {
  font-size: 10px;
  color: #64748b;
}


/* TABLA */

.usuarios-tabla-scroll-v3 {
  width: 100%;

  overflow-x: auto;
}

.usuarios-tabla-v3 {
  width: 100%;
  min-width: 850px;

  border-collapse: collapse;
}

.usuarios-tabla-v3 th {
  padding: 10px 12px;

  background: #f8fafc;

  border-bottom: 1px solid #cbd5e1;

  text-align: left;

  font-size: 10px;
  font-weight: 800;

  color: #475569;

  white-space: nowrap;
}

.usuarios-tabla-v3 td {
  padding: 10px 12px;

  border-bottom: 1px solid #e2e8f0;

  font-size: 11px;

  color: #334155;

  vertical-align: middle;
}

.usuarios-tabla-v3 tbody tr:hover {
  background: #f8fafc;
}

.usuario-dni-v3 {
  font-weight: 700;

  color: #0f172a;
}

.usuario-persona-v3 strong {
  display: block;

  margin-bottom: 2px;

  font-size: 11px;

  color: #0f172a;
}

.usuario-persona-v3 span {
  display: block;

  font-size: 9px;

  color: #94a3b8;
}

.usuario-login-v3 {
  font-weight: 600;

  color: #334155;
}


/* ROLES */

.usuario-rol-v3 {
  display: inline-flex;
  align-items: center;

  min-height: 22px;

  padding: 3px 7px;

  border-radius: 5px;

  background: #64748b;
  color: #ffffff;

  font-size: 8px;
  font-weight: 800;
}

.usuario-rol-v3.rol-administrador {
  background: #475569;
}

.usuario-rol-v3.rol-director {
  background: #1d4ed8;
}

.usuario-rol-v3.rol-auxiliar {
  background: #7c3aed;
}

.usuario-rol-v3.rol-docente {
  background: #0891b2;
}

.usuario-rol-v3.rol-brigadier {
  background: #d97706;
}

.usuario-rol-v3.rol-apoyo {
  background: #64748b;
}


/* ESTADOS */

.usuario-estado-v3 {
  display: inline-flex;
  align-items: center;

  padding: 3px 7px;

  border-radius: 999px;

  font-size: 8px;
  font-weight: 900;
}

.usuario-estado-v3.activo {
  background: #dcfce7;
  color: #15803d;
}

.usuario-estado-v3.inactivo {
  background: #fee2e2;
  color: #dc2626;
}


/* ACCIONES */

.usuario-acciones-v3 {
  display: flex;
  align-items: center;

  gap: 5px;
}

.usuario-accion-v3 {
  width: 30px;
  height: 29px;

  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0;

  border-radius: 6px;

  background: #ffffff;

  font-size: 12px;

  cursor: pointer;
}

.usuario-accion-v3.editar {
  border: 1px solid #2563eb;
}

.usuario-accion-v3.password {
  border: 1px solid #94a3b8;
}

.usuario-accion-v3.desactivar {
  border: 1px solid #f43f5e;
}

.usuario-accion-v3.activar {
  border: 1px solid #10b981;
}

.usuario-accion-v3:hover {
  background: #f8fafc;

  transform: translateY(-1px);
}


/* VACÍO */

.usuarios-vacio-v3 {
  padding: 30px !important;

  text-align: center !important;

  color: #64748b !important;
}

.usuarios-vacio-v3.error {
  color: #dc2626 !important;
}


/* PAGINACIÓN */

.usuarios-paginacion-v3 {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 12px;

  min-height: 50px;

  padding: 9px 12px;

  background: #ffffff;

  border-top: 1px solid #e2e8f0;
}

.usuarios-paginacion-v3 button {
  min-height: 32px;

  padding: 5px 11px;

  border: 1px solid #cbd5e1;
  border-radius: 6px;

  background: #ffffff;
  color: #475569;

  font-size: 10px;
  font-weight: 700;

  cursor: pointer;
}

.usuarios-paginacion-v3 button:disabled {
  opacity: .4;

  cursor: not-allowed;
}

.usuarios-paginacion-v3 span {
  font-size: 10px;

  color: #64748b;
}


/* =========================================================
   MODALES
   ========================================================= */

.modal-usuario-fondo-v3 {
  position: fixed;
  inset: 0;

  z-index: 9999;

  display: none;
  align-items: center;
  justify-content: center;

  padding: 18px;

  background:
    rgba(15, 23, 42, .55);

  backdrop-filter:
    blur(2px);
}

.modal-usuario-fondo-v3.mostrar {
  display: flex;
}

.modal-usuario-v3,
.modal-password-usuario-v3 {
  width: min(
    100%,
    620px
  );

  max-height: calc(
    100vh - 35px
  );

  overflow-y: auto;

  background: #ffffff;

  border-radius: 13px;

  box-shadow:
    0 20px 50px
    rgba(15, 23, 42, .25);

  animation:
    usuarioModalEntradaV3
    .18s ease;
}

.modal-password-usuario-v3 {
  width: min(
    100%,
    460px
  );
}

@keyframes usuarioModalEntradaV3 {

  from {
    opacity: 0;

    transform:
      translateY(8px)
      scale(.985);
  }

  to {
    opacity: 1;

    transform:
      translateY(0)
      scale(1);
  }
}


/* CABECERA MODAL */

.modal-usuario-cabecera-v3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;

  gap: 20px;

  padding: 18px 20px;

  border-bottom: 1px solid #e2e8f0;
}

.modal-usuario-cabecera-v3 h2 {
  margin: 0 0 4px;

  font-size: 18px;

  color: #0f172a;
}

.modal-usuario-cabecera-v3 p {
  margin: 0;

  font-size: 11px;

  color: #64748b;
}

.modal-usuario-cerrar-v3 {
  width: 31px;
  height: 31px;

  flex: 0 0 31px;

  border: 0;
  border-radius: 7px;

  background: #f1f5f9;
  color: #475569;

  font-size: 21px;
  line-height: 1;

  cursor: pointer;
}


/* FORMULARIO */

#formUsuarioV3,
#formPasswordUsuarioV3 {
  padding: 20px;
}

.modal-usuario-grid-v3 {
  display: grid;

  grid-template-columns:
    1fr 1fr;

  gap: 14px;
}

.campo-usuario-v3 {
  margin-bottom: 14px;
}

.modal-usuario-grid-v3
.campo-usuario-v3 {
  margin-bottom: 0;
}

.campo-ancho-v3 {
  grid-column: 1 / -1;
}

.campo-usuario-v3 label {
  display: block;

  margin-bottom: 6px;

  font-size: 11px;
  font-weight: 700;

  color: #334155;
}

.campo-usuario-v3 label b {
  color: #dc2626;
}

.campo-usuario-v3 input,
.campo-usuario-v3 select {
  width: 100%;
  height: 41px;

  padding: 0 11px;

  border: 1px solid #cbd5e1;
  border-radius: 7px;

  background: #ffffff;
  color: #0f172a;

  font-size: 12px;

  outline: none;
}

.campo-usuario-v3 input:focus,
.campo-usuario-v3 select:focus {
  border-color: #2563eb;

  box-shadow:
    0 0 0 3px
    rgba(37, 99, 235, .1);
}

.campo-usuario-v3 small {
  display: block;

  margin-top: 5px;

  font-size: 9px;

  color: #64748b;
}


/* NOTA */

.modal-usuario-nota-v3 {
  margin-top: 16px;

  padding: 10px 12px;

  border: 1px solid #bfdbfe;
  border-radius: 7px;

  background: #eff6ff;

  font-size: 10px;
  line-height: 1.45;

  color: #1e40af;
}


/* BOTONES */

.modal-usuario-botones-v3 {
  display: flex;
  justify-content: flex-end;

  gap: 9px;

  margin-top: 19px;

  padding-top: 15px;

  border-top: 1px solid #e2e8f0;
}

.btn-cancelar-usuario-v3,
.btn-guardar-usuario-v3 {
  min-height: 38px;

  padding: 7px 14px;

  border-radius: 7px;

  font-size: 11px;
  font-weight: 700;

  cursor: pointer;
}

.btn-cancelar-usuario-v3 {
  border: 1px solid #cbd5e1;

  background: #ffffff;
  color: #475569;
}

.btn-guardar-usuario-v3 {
  border: 1px solid #2563eb;

  background: #2563eb;
  color: #ffffff;
}

.btn-guardar-usuario-v3:hover {
  background: #1d4ed8;
}

.btn-guardar-usuario-v3:disabled {
  opacity: .6;

  cursor: wait;
}


/* PASSWORD */

.password-usuario-identidad-v3 {
  margin: 17px 20px 0;

  padding: 11px 13px;

  border-radius: 8px;

  background: #f8fafc;

  border: 1px solid #e2e8f0;
}

.password-usuario-identidad-v3 strong {
  display: block;

  margin-bottom: 3px;

  font-size: 12px;

  color: #0f172a;
}

.password-usuario-identidad-v3 span {
  font-size: 10px;

  color: #64748b;
}


/* AVISO */

.aviso-usuario-v3 {
  position: fixed;

  top: 18px;
  right: 18px;

  z-index: 12000;

  max-width: 390px;

  padding: 11px 15px;

  border-radius: 8px;

  color: #ffffff;

  font-size: 11px;
  font-weight: 700;

  box-shadow:
    0 8px 25px
    rgba(15, 23, 42, .22);

  opacity: 0;

  pointer-events: none;

  transform:
    translateY(-10px);

  transition:
    .2s ease;
}

.aviso-usuario-v3.mostrar {
  opacity: 1;

  transform:
    translateY(0);
}

.aviso-usuario-v3.exito {
  background: #15803d;
}

.aviso-usuario-v3.error {
  background: #dc2626;
}


/* =========================================================
   TABLET
   ========================================================= */

@media (max-width: 1000px) {

  .usuarios-filtros-v3 {
    grid-template-columns:
      1fr 1fr;
  }

  .usuarios-busqueda-v3 {
    grid-column: 1 / -1;
  }
}


/* =========================================================
   CELULAR
   ========================================================= */

@media (max-width: 700px) {

  .usuarios-cabecera-v3 {
    align-items: flex-start;

    gap: 12px;
  }

  .usuarios-cabecera-v3 h1 {
    font-size: 18px;
  }

  .btn-nuevo-usuario-v3 {
    flex: 0 0 auto;

    padding-left: 11px;
    padding-right: 11px;

    font-size: 10px;
  }


  .usuarios-filtros-v3 {
    grid-template-columns: 1fr;
  }

  .usuarios-busqueda-v3 {
    grid-column: auto;
  }


  /*
   * En celular transformamos cada fila
   * en una tarjeta.
   */

  .usuarios-tabla-scroll-v3 {
    overflow: visible;
  }

  .usuarios-tabla-v3 {
    min-width: 0;
  }

  .usuarios-tabla-v3 thead {
    display: none;
  }

  .usuarios-tabla-v3,
  .usuarios-tabla-v3 tbody,
  .usuarios-tabla-v3 tr,
  .usuarios-tabla-v3 td {
    display: block;

    width: 100%;
  }

  .usuarios-tabla-v3 tbody {
    padding: 10px;
  }

  .usuarios-tabla-v3 tr {
    margin-bottom: 10px;

    padding: 11px;

    border: 1px solid #e2e8f0;
    border-radius: 9px;

    background: #ffffff;
  }

  .usuarios-tabla-v3 td {
    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 12px;

    padding: 7px 0;

    border: 0;
    border-bottom: 1px dashed #e2e8f0;

    text-align: right;
  }

  .usuarios-tabla-v3 td:last-child {
    border-bottom: 0;
  }

  .usuarios-tabla-v3 td::before {
    content:
      attr(data-label);

    flex: 0 0 80px;

    text-align: left;

    font-size: 9px;
    font-weight: 800;

    color: #64748b;
  }

  .usuario-persona-v3 {
    text-align: right;
  }

  .usuario-acciones-v3 {
    justify-content: flex-end;
  }


  .modal-usuario-grid-v3 {
    grid-template-columns: 1fr;
  }

  .campo-ancho-v3 {
    grid-column: auto;
  }

  .modal-usuario-v3,
  .modal-password-usuario-v3 {
    max-height:
      calc(100vh - 20px);

    border-radius: 10px;
  }

  .modal-usuario-cabecera-v3 {
    padding: 15px;
  }

  #formUsuarioV3,
  #formPasswordUsuarioV3 {
    padding: 15px;
  }

  .password-usuario-identidad-v3 {
    margin:
      14px 15px 0;
  }

  .modal-usuario-botones-v3 {
    display: grid;

    grid-template-columns:
      1fr 1fr;
  }


  .aviso-usuario-v3 {
    top: 10px;
    left: 10px;
    right: 10px;

    max-width: none;

    text-align: center;
  }
}


/* CELULAR PEQUEÑO */

@media (max-width: 430px) {

  .usuarios-cabecera-v3 {
    flex-direction: column;
  }

  .btn-nuevo-usuario-v3 {
    width: 100%;
  }

  .modal-usuario-botones-v3 {
    grid-template-columns: 1fr;
  }
}

/* =========================================================
   CONFIGURACIÓN V3
   ========================================================= */

.configuracion-cabecera-v3 {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 24px;
}

.configuracion-cabecera-v3 h1 {
  margin: 0 0 6px;
  font-size: 28px;
  color: #1f2937;
}

.configuracion-cabecera-v3 p {
  margin: 0;
  color: #6b7280;
  line-height: 1.5;
}

.btn-actualizar-configuracion-v3 {
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
  padding: 10px 16px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.btn-actualizar-configuracion-v3:hover {
  background: #f9fafb;
}

.btn-actualizar-configuracion-v3:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* SOLO LECTURA */

.configuracion-aviso-v3 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px;
  margin-bottom: 20px;
  border: 1px solid #bfdbfe;
  background: #eff6ff;
  border-radius: 12px;
}

.configuracion-aviso-icono-v3 {
  font-size: 24px;
}

.configuracion-aviso-v3 strong {
  display: block;
  color: #1e3a8a;
  margin-bottom: 3px;
}

.configuracion-aviso-v3 p {
  margin: 0;
  color: #1e40af;
  font-size: 14px;
}


/* GRID */

.configuracion-grid-v3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}


/* TARJETAS */

.configuracion-card-v3 {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.configuracion-card-cabecera-v3 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 18px;
  margin-bottom: 20px;
  border-bottom: 1px solid #e5e7eb;
}

.configuracion-card-icono-v3 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border-radius: 12px;
  background: #f3f4f6;
  font-size: 23px;
}

.configuracion-card-cabecera-v3 h3 {
  margin: 0 0 5px;
  color: #111827;
  font-size: 18px;
}

.configuracion-card-cabecera-v3 p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.4;
}


/* CAMPOS */

.configuracion-campos-v3 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

.configuracion-campo-v3 {
  min-width: 0;
}

.configuracion-campo-ancho-v3 {
  grid-column: 1 / -1;
}

.configuracion-campo-v3 label {
  display: block;
  margin-bottom: 7px;
  color: #374151;
  font-size: 14px;
  font-weight: 600;
}

.configuracion-campo-v3 input {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 9px;
  background: #ffffff;
  color: #111827;
  font-size: 15px;
  outline: none;
  transition:
    border-color 0.2s,
    box-shadow 0.2s;
}

.configuracion-campo-v3 input:focus {
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

.configuracion-campo-v3 input:disabled {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

.configuracion-campo-v3 small {
  display: block;
  margin-top: 7px;
  color: #6b7280;
  font-size: 12px;
  line-height: 1.4;
}


/* INFORMACIÓN */

.configuracion-info-v3 {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-top: 20px;
  padding: 16px 18px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.configuracion-info-icono-v3 {
  font-size: 21px;
}

.configuracion-info-v3 strong {
  display: block;
  margin-bottom: 4px;
  color: #374151;
}

.configuracion-info-v3 p {
  margin: 0;
  color: #6b7280;
  font-size: 14px;
  line-height: 1.5;
}


/* MENSAJES */

.configuracion-mensaje-v3 {
  margin-top: 20px;
  padding: 13px 16px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
}

.configuracion-mensaje-v3.exito {
  color: #166534;
  background: #dcfce7;
  border: 1px solid #bbf7d0;
}

.configuracion-mensaje-v3.error {
  color: #991b1b;
  background: #fee2e2;
  border: 1px solid #fecaca;
}

.configuracion-mensaje-v3.info {
  color: #1e40af;
  background: #dbeafe;
  border: 1px solid #bfdbfe;
}


/* ACCIONES */

.configuracion-acciones-v3 {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 22px;
}

.btn-restablecer-configuracion-v3,
.btn-guardar-configuracion-v3 {
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 10px;
  font-weight: 600;
  cursor: pointer;
}

.btn-restablecer-configuracion-v3 {
  border: 1px solid #d1d5db;
  background: #ffffff;
  color: #374151;
}

.btn-restablecer-configuracion-v3:hover {
  background: #f9fafb;
}

.btn-guardar-configuracion-v3 {
  border: 1px solid #2563eb;
  background: #2563eb;
  color: #ffffff;
}

.btn-guardar-configuracion-v3:hover {
  background: #1d4ed8;
}

.btn-guardar-configuracion-v3:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}


/* =========================================================
   CONFIGURACIÓN - TABLET
   ========================================================= */

@media (max-width: 1050px) {

  .configuracion-grid-v3 {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   CONFIGURACIÓN - CELULAR
   ========================================================= */

@media (max-width: 700px) {

  .configuracion-cabecera-v3 {
    flex-direction: column;
    gap: 14px;
  }

  .configuracion-cabecera-v3 h1 {
    font-size: 24px;
  }

  .btn-actualizar-configuracion-v3 {
    width: 100%;
  }

  .configuracion-card-v3 {
    padding: 16px;
    border-radius: 13px;
  }

  .configuracion-card-cabecera-v3 {
    gap: 11px;
  }

  .configuracion-card-icono-v3 {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
    font-size: 20px;
  }

  .configuracion-campos-v3 {
    grid-template-columns: 1fr;
  }

  .configuracion-campo-ancho-v3 {
    grid-column: auto;
  }

  .configuracion-info-v3,
  .configuracion-aviso-v3 {
    padding: 14px;
  }

  .configuracion-acciones-v3 {
    flex-direction: column-reverse;
  }

  .btn-restablecer-configuracion-v3,
  .btn-guardar-configuracion-v3 {
    width: 100%;
  }
}
/* =====================================================
   ASISTENCIA - BOTÓN REGISTRAR MANUAL
   ===================================================== */

.btn-registrar-manual {
  border: none;
  background: #2563eb;
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  padding: 9px 18px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.12);
}

.btn-registrar-manual:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

.btn-registrar-manual:active {
  transform: translateY(0);
}

.btn-registrar-manual:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
}

@media (max-width: 700px) {
  .btn-registrar-manual {
    width: 100%;
    padding: 11px 16px;
    font-size: 15px;
    margin-top: 6px;
  }
}

/* =====================================================
   ASISTENCIA V3 - BOTÓN REGISTRAR MANUAL
   ===================================================== */

.btn-registrar-manual-v3 {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 105px;
  min-height: 38px;

  padding: 9px 18px;

  border: none;
  border-radius: 9px;

  background: #2563eb;
  color: #ffffff;

  font-size: 14px;
  font-weight: 700;

  cursor: pointer;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);

  transition:
    background 0.2s ease,
    transform 0.15s ease,
    box-shadow 0.2s ease;
}

.btn-registrar-manual-v3:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 4px 9px rgba(0, 0, 0, 0.16);
}

.btn-registrar-manual-v3:active {
  transform: translateY(0);
}

.btn-registrar-manual-v3:disabled {
  opacity: 0.55;
  cursor: not-allowed;
  transform: none;
}

/* CELULAR */
@media (max-width: 700px) {

  .btn-registrar-manual-v3 {
    min-width: 95px;
    min-height: 40px;
    padding: 9px 14px;
    font-size: 14px;
  }

}

/* =====================================================
   ESTUDIANTES V3 - QR AUTOMÁTICO
   ===================================================== */

.qr-automatico-aviso-v3 {
  min-height: 42px;
  display: flex;
  align-items: center;

  padding: 10px 14px;

  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 9px;

  color: #475569;
  font-size: 14px;
  font-weight: 600;
}