/* =====================================================================
   Escuela360 Lite - Estilos generales
   Paleta violeta. Fondo claro dentro del sistema.
   ===================================================================== */
:root {
  --lite-principal: #673DE6;
  --lite-hover: #5025D1;
  --lite-oscuro: #1D1238;
  --lite-secundario: #8C85FF;
  --lite-claro: #F4F1FF;
  --lite-texto-marca: #2F1C6A;
  --lite-fondo: #F7F6FB;
  --lite-borde: #E4E1EE;
  --lite-texto: #1F1B2D;
  --lite-gris: #6B6680;
  --lite-ok: #1E9E5A;
  --lite-ok-claro: #E6F6EC;
  --lite-error: #D93A3A;
  --lite-error-claro: #FCEBEB;
  --lite-aviso: #C98A0B;
  --lite-aviso-claro: #FFF5DD;
  --lite-info: #2D7FD3;
  --lite-info-claro: #E7F1FC;
  --lite-radio: 14px;
  --lite-menu-ancho: 250px;
}

* { box-sizing: border-box; }

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  background: var(--lite-fondo);
  color: var(--lite-texto);
  font-size: 14.5px;
  margin: 0;
}

a { color: var(--lite-principal); }
a:hover { color: var(--lite-hover); }

/* ---------- Botones ---------- */
.btn-lite {
  background: var(--lite-principal);
  border: 1px solid var(--lite-principal);
  color: #fff;
  border-radius: 10px;
  font-weight: 500;
  padding: .5rem 1rem;
}
.btn-lite:hover, .btn-lite:focus { background: var(--lite-hover); border-color: var(--lite-hover); color: #fff; }
.btn-lite-borde {
  background: #fff;
  border: 1px solid var(--lite-principal);
  color: var(--lite-hover);
  border-radius: 10px;
  font-weight: 500;
  padding: .5rem 1rem;
}
.btn-lite-borde:hover { background: var(--lite-claro); color: var(--lite-hover); }
.btn-icono {
  width: 34px; height: 34px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--lite-borde);
  background: #fff;
  color: var(--lite-gris);
  padding: 0;
}
.btn-icono:hover { background: var(--lite-claro); color: var(--lite-principal); border-color: var(--lite-secundario); }
.btn-icono.peligro:hover { background: var(--lite-error-claro); color: var(--lite-error); border-color: #F09595; }
.btn-icono.wa { color: #1EBE5A; border-color: #BDEFD0; }
.btn-icono.wa:hover { background: #EEFBF3; color: #128C4B; border-color: #7FDCA3; }

.form-control, .form-select {
  border-radius: 10px;
  border-color: var(--lite-borde);
  padding: .55rem .8rem;
}
.form-control:focus, .form-select:focus {
  border-color: var(--lite-secundario);
  box-shadow: 0 0 0 3px rgba(103, 61, 230, .15);
}
.form-label { font-weight: 500; font-size: 13px; color: var(--lite-texto-marca); margin-bottom: .3rem; }

/* ---------- Estructura de la app ---------- */
.lite-topbar {
  position: sticky; top: 0; z-index: 1030;
  height: 60px;
  background: var(--lite-oscuro);
  color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 1rem;
}
.lite-marca { display: flex; align-items: center; gap: .6rem; color: #fff; text-decoration: none; }
.lite-marca:hover { color: #fff; }
.lite-marca img { height: 32px; }
.lite-marca .marca-texto { font-weight: 600; font-size: 17px; letter-spacing: -.2px; }
.lite-marca .marca-lite {
  background: var(--lite-principal);
  color: #fff; font-size: 11px; font-weight: 600;
  padding: 2px 8px; border-radius: 6px; text-transform: uppercase; letter-spacing: .5px;
}
.lite-topbar .usuario { display: flex; align-items: center; gap: .6rem; font-size: 13px; }
.lite-avatar {
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--lite-principal); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 600; font-size: 13px;
}
.lite-topbar .btn-menu { color: #fff; border: 0; background: transparent; font-size: 22px; padding: 0 .4rem; }

.lite-cuerpo { display: flex; min-height: calc(100vh - 60px); }

.lite-menu {
  width: var(--lite-menu-ancho);
  background: #fff;
  border-right: 1px solid var(--lite-borde);
  padding: 1rem .75rem;
  flex-shrink: 0;
}
.lite-menu .grupo-titulo {
  font-size: 11px; text-transform: uppercase; letter-spacing: .6px;
  color: var(--lite-gris); font-weight: 600; margin: 1rem .75rem .4rem;
}
.lite-menu a.item {
  display: flex; align-items: center; gap: .7rem;
  padding: .6rem .8rem; border-radius: 10px;
  color: var(--lite-texto); text-decoration: none; font-weight: 500;
  margin-bottom: 2px;
}
.lite-menu a.item i { font-size: 18px; color: var(--lite-gris); }
.lite-menu a.item:hover { background: var(--lite-claro); }
.lite-menu a.item.activo { background: var(--lite-principal); color: #fff; }
.lite-menu a.item.activo i { color: #fff; }
.lite-menu a.item.proximo { opacity: .55; pointer-events: none; }
.lite-menu a.item .etiqueta-prox {
  margin-left: auto; font-size: 10px; background: var(--lite-claro);
  color: var(--lite-texto-marca); padding: 1px 6px; border-radius: 6px;
}

.lite-contenido { flex: 1; padding: 1.5rem; min-width: 0; }

/* ---------- Encabezado de página ---------- */
.lite-encabezado {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: 1rem; margin-bottom: 1.25rem; flex-wrap: wrap;
}
.lite-encabezado .ceja {
  font-size: 11px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--lite-principal); font-weight: 600; margin-bottom: 2px;
}
.lite-encabezado h1 { font-size: 22px; font-weight: 600; margin: 0; color: var(--lite-texto); }
.lite-encabezado p { margin: .25rem 0 0; color: var(--lite-gris); font-size: 13.5px; }
.lite-encabezado .acciones { display: flex; gap: .5rem; flex-wrap: wrap; }

/* ---------- Tarjetas ---------- */
.lite-card {
  background: #fff;
  border: 1px solid var(--lite-borde);
  border-radius: var(--lite-radio);
  padding: 1.25rem;
}
.lite-card + .lite-card { margin-top: 1rem; }
.lite-card h2 { font-size: 15px; font-weight: 600; margin: 0 0 .75rem; }

.lite-stat {
  background: #fff; border: 1px solid var(--lite-borde); border-radius: var(--lite-radio);
  padding: 1rem 1.1rem; display: flex; align-items: center; gap: .9rem; height: 100%;
}
.lite-stat .icono {
  width: 44px; height: 44px; border-radius: 12px;
  background: var(--lite-claro); color: var(--lite-principal);
  display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0;
}
.lite-stat .valor { font-size: 22px; font-weight: 600; line-height: 1.1; }
.lite-stat .rotulo { font-size: 12.5px; color: var(--lite-gris); }

/* ---------- Tablas ---------- */
.lite-tabla { margin: 0; }
.lite-tabla thead th {
  font-size: 11px; text-transform: uppercase; letter-spacing: .5px;
  color: var(--lite-gris); font-weight: 600;
  background: #FAF9FD; border-bottom: 1px solid var(--lite-borde);
  padding: .7rem .8rem; white-space: nowrap;
}
.lite-tabla td { padding: .7rem .8rem; vertical-align: middle; border-color: #F0EEF6; }
.lite-tabla tbody tr:hover { background: #FBFAFE; }
.lite-tabla-envoltura { border: 1px solid var(--lite-borde); border-radius: var(--lite-radio); overflow: hidden; background: #fff; }
.lite-tabla-envoltura .table-responsive { margin: 0; }

/* ---------- Insignias ---------- */
.insignia {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 20px; white-space: nowrap;
}
.insignia.violeta { background: var(--lite-claro); color: var(--lite-texto-marca); }
.insignia.ok      { background: var(--lite-ok-claro); color: #13663A; }
.insignia.error   { background: var(--lite-error-claro); color: #8F1F1F; }
.insignia.aviso   { background: var(--lite-aviso-claro); color: #7A5200; }
.insignia.info    { background: var(--lite-info-claro); color: #164E86; }
.insignia.gris    { background: #F0EEF4; color: #55506A; }

/* ---------- Estado vacío ---------- */
.estado-vacio { text-align: center; padding: 2.5rem 1rem; }
.estado-vacio .icono {
  width: 64px; height: 64px; border-radius: 18px; margin: 0 auto 1rem;
  background: var(--lite-claro); color: var(--lite-principal);
  display: flex; align-items: center; justify-content: center; font-size: 28px;
}
.estado-vacio h3 { font-size: 16px; font-weight: 600; }
.estado-vacio p { color: var(--lite-gris); max-width: 380px; margin: 0 auto 1rem; }

/* ---------- Asistencia ---------- */
.asis-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: .75rem; padding: .7rem .9rem; border-bottom: 1px solid #F0EEF6; flex-wrap: wrap;
}
.asis-fila:last-child { border-bottom: 0; }
.asis-nombre { display: flex; align-items: center; gap: .7rem; min-width: 200px; flex: 1; }
.asis-num { width: 26px; text-align: right; color: var(--lite-gris); font-size: 12.5px; }
.asis-opciones { display: flex; gap: 6px; }
.asis-opciones input { display: none; }
.asis-opciones label {
  cursor: pointer; user-select: none;
  min-width: 42px; height: 38px; padding: 0 .65rem;
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  border: 1px solid var(--lite-borde); border-radius: 10px; background: #fff;
  font-weight: 600; font-size: 13px; color: var(--lite-gris);
}
.asis-opciones label:hover { border-color: var(--lite-secundario); }
.asis-opciones input:checked + label.p { background: var(--lite-ok);    border-color: var(--lite-ok);    color: #fff; }
.asis-opciones input:checked + label.a { background: var(--lite-error); border-color: var(--lite-error); color: #fff; }
.asis-opciones input:checked + label.t { background: var(--lite-aviso); border-color: var(--lite-aviso); color: #fff; }
.asis-opciones input:checked + label.e { background: var(--lite-info);  border-color: var(--lite-info);  color: #fff; }
.asis-opciones .txt { display: none; }
.asis-barra-guardar {
  position: sticky; bottom: 0; background: #fff; border-top: 1px solid var(--lite-borde);
  padding: .8rem 1rem; display: flex; justify-content: space-between; align-items: center;
  gap: .75rem; flex-wrap: wrap; border-radius: 0 0 var(--lite-radio) var(--lite-radio);
}
.asis-contadores { display: flex; gap: .4rem; flex-wrap: wrap; }

/* ---------- Pantallas de acceso ---------- */
.acceso-fondo {
  min-height: 100vh; background: var(--lite-oscuro);
  display: flex; align-items: center; justify-content: center; padding: 2rem 1rem;
}
.acceso-caja {
  background: #fff; border-radius: 20px; padding: 2rem; width: 100%; max-width: 430px;
}
.acceso-caja h1 { font-size: 24px; font-weight: 600; text-align: center; margin-bottom: .25rem; }
.acceso-caja .sub { text-align: center; color: var(--lite-gris); margin-bottom: 1.5rem; }
.acceso-marca { display: flex; justify-content: center; align-items: center; gap: .6rem; margin-bottom: 1.5rem; color: #fff; text-decoration: none; }
.acceso-marca:hover { color: #fff; }
.acceso-marca img { height: 40px; }
.acceso-marca .marca-texto { font-weight: 600; font-size: 20px; }

.lite-alert { border-radius: 12px; font-size: 14px; }

/* ---------- Opción de modalidad (registro) ---------- */
.opcion-modalidad {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  height: 100%; min-height: 92px; padding: .7rem .4rem; text-align: center; cursor: pointer;
  border: 1.5px solid var(--lite-borde); border-radius: 14px; background: #fff;
  font-size: 12.5px; font-weight: 600; color: var(--lite-texto); line-height: 1.2;
}
.opcion-modalidad i { font-size: 24px; color: var(--lite-principal); }
.opcion-modalidad:hover { border-color: var(--lite-secundario); }
.btn-check:checked + .opcion-modalidad { border-color: var(--lite-principal); background: var(--lite-claro); box-shadow: 0 0 0 3px rgba(103,61,230,.15); }

/* ---------- Perfil: imágenes ---------- */
.img-perfil {
  width: 96px; height: 96px; border-radius: 50%; object-fit: cover;
  border: 3px solid #fff; box-shadow: 0 0 0 1px var(--lite-borde); background: var(--lite-claro);
}
.img-logo {
  width: 110px; height: 110px; object-fit: contain; border-radius: 14px; padding: 8px;
  border: 1px dashed var(--lite-borde); background: #FAF9FD;
}
.img-vacia {
  display: flex; align-items: center; justify-content: center; color: var(--lite-secundario); font-size: 32px;
}
.lite-tabs { border-bottom: 1px solid var(--lite-borde); gap: .25rem; margin-bottom: 1rem; flex-wrap: nowrap; overflow-x: auto; }
.lite-tabs .nav-link { color: var(--lite-gris); font-weight: 500; border: 0; border-bottom: 2px solid transparent; border-radius: 0; padding: .6rem .9rem; white-space: nowrap; }
.lite-tabs .nav-link.active { color: var(--lite-principal); border-bottom-color: var(--lite-principal); background: transparent; }
.lite-avatar img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }
.lite-avatar.con-foto { padding: 0; overflow: hidden; background: #fff; }

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .lite-menu {
    position: fixed; top: 60px; left: 0; bottom: 0; z-index: 1040;
    transform: translateX(-100%); transition: transform .2s ease; overflow-y: auto;
  }
  .lite-menu.abierto { transform: translateX(0); box-shadow: 0 10px 40px rgba(29, 18, 56, .25); }
  .lite-velo { display: none; position: fixed; inset: 60px 0 0 0; background: rgba(29, 18, 56, .35); z-index: 1035; }
  .lite-velo.visible { display: block; }
  .lite-contenido { padding: 1rem; }
}
@media (min-width: 992px) {
  .lite-topbar .btn-menu { display: none; }
  .lite-velo { display: none !important; }
}
@media (max-width: 575.98px) {
  .lite-topbar { padding: 0 .55rem; }
  .lite-topbar .usuario { gap: .35rem; }
  .lite-marca { gap: .35rem; }
  .lite-marca .marca-texto { font-size: 15px; }
  .lite-marca .marca-lite { padding: 2px 6px; font-size: 10px; }
  .lite-topbar .usuario .nombre { display: none; }
  .lite-encabezado .acciones { width: 100%; }
  .lite-encabezado .acciones .btn { flex: 1; }
  .asis-opciones { width: 100%; }
  .asis-opciones label { flex: 1; }
}
@media (min-width: 768px) {
  .asis-opciones .txt { display: inline; font-weight: 500; }
  .asis-opciones .cod { display: none; }
}