/* ============================================================
   ESTILOS DEL AULA VIRTUAL · INCANORT
   Misma identidad que el Sistema de Contratos:
   azul marino #173559 + dorado #ffd200 (acento) + blanco.
   ============================================================ */

:root{
  --azul:        #173559;
  --azul-osc:    #102a45;
  --azul-claro:  #2f6da8;
  --oro:         #ffd200;
  --gris-fondo:  #eef2f6;
  --gris-borde:  #d7dee6;
  --gris-texto:  #5a6573;
  --texto:       #1c2733;
  --blanco:      #ffffff;
  --verde:       #1f9d55;
  --amarillo:    #b8860b;
  --rojo:        #c53030;
  --sombra:      0 2px 12px rgba(16,42,69,.08);
  --radio:       12px;
}

*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  background:var(--gris-fondo); color:var(--texto); line-height:1.5;
  -webkit-font-smoothing:antialiased;
}

/* Barra de scroll siempre visible (no solo mientras se toca la pantalla),
   para que se note cuando algo es más ancho que la pantalla y hay que
   correrlo hacia el lado para verlo completo. En iPhone/iPad, Safari no
   deja personalizar esto (usa su propia barra angosta que aparece al
   tocar y se esconde sola), ahí no se puede hacer más. */
*{ scrollbar-width:thin; scrollbar-color:var(--gris-borde) transparent; }
*::-webkit-scrollbar{ height:9px; width:9px; }
*::-webkit-scrollbar-track{ background:transparent; }
*::-webkit-scrollbar-thumb{ background:var(--gris-borde); border-radius:10px; }
*::-webkit-scrollbar-thumb:hover{ background:var(--gris-texto); }

/* Campo de contraseña con botón de "ojo" para mostrar/ocultar lo escrito */
.campo-clave-wrap{ position:relative; }
.campo-clave-wrap input{ width:100%; padding-right:40px !important; }
.btn-ver-clave{ position:absolute; right:4px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; font-size:1.05rem; padding:6px 8px; line-height:1; opacity:.55; }
.btn-ver-clave:hover{ opacity:1; }

/* ---------- Encabezado (igual que Contratos) ---------- */
.barra{
  background:var(--azul); color:var(--blanco);
  padding:0 22px; border-bottom:3px solid var(--oro);
  display:flex; align-items:center; justify-content:space-between;
  box-shadow:var(--sombra); min-height:64px; flex-wrap:wrap; gap:10px;
}
.barra .marca{ display:flex; align-items:center; gap:14px; padding:10px 0; }
.barra .marca img{ height:42px; width:auto; display:block; }
.barra .marca .div{ width:1px; height:30px; background:rgba(255,255,255,.25); }
.barra .marca .sub{ font-size:.82rem; opacity:.9; line-height:1.2; }
.barra nav{ display:flex; gap:6px; flex-wrap:wrap; }
.barra nav a{
  color:#dbe6f1; text-decoration:none; font-size:.92rem; font-weight:600;
  padding:8px 14px; border-radius:8px;
}
.barra nav a:hover{ background:rgba(255,255,255,.10); color:#fff; }
.barra nav a.activo{ color:#fff; background:rgba(255,255,255,.12); }
.barra .usuario{ display:flex; align-items:center; gap:12px; font-size:.9rem; }
/* En escritorio, este agrupador de campanita+foto+Salir es "invisible"
   para el layout: sus hijos se comportan como si fueran hijos directos
   de .usuario, o sea, se ve igual que si no existiera el div. Sirve
   para poder reorganizarlos como fila propia solo en celular (ver
   media query más abajo). */
.usuario-top{ display:contents; }
.barra .usuario .quien{ text-align:right; line-height:1.15; }
.barra .usuario .quien b{ font-weight:600; }
.barra .usuario .quien span{ font-size:.76rem; opacity:.8; display:block; }
.barra .usuario a.salir{ color:#dbe6f1; text-decoration:none; }
.barra .usuario a.salir:hover{ color:#fff; text-decoration:underline; }

/* En pantallas de escritorio, el usuario (nombre + foto) siempre queda a la
   derecha, en la misma fila que el menú, igual que en Contratos. Si el menú
   tiene demasiadas pestañas para caber todas (como en el admin del Aula), se
   desplaza horizontalmente en vez de empujar al usuario a una segunda fila. */
@media (min-width:641px){
  .barra{ flex-wrap:nowrap; }
  .barra .marca{ flex-shrink:0; }
  .barra .usuario{ flex-shrink:0; }
  .barra nav{ flex:1 1 auto; min-width:0; flex-wrap:nowrap; overflow-x:auto; scrollbar-width:thin; }
  .barra nav a{ white-space:nowrap; flex-shrink:0; }
  .barra nav::-webkit-scrollbar{ height:4px; }
  .barra nav::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.25); border-radius:4px; }
}

/* Botón "tiempo conectado" (punto verde + nombre del alumno + reloj del
   tiempo activo en el Aula; el reloj se pausa solo si cambia de pestaña,
   ver JS en cabecera.php). */
.tiempo-conectado{
  display:flex; align-items:center; gap:8px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.18);
  color:#fff; border-radius:20px; padding:7px 14px; cursor:default;
  font-size:.82rem; font-weight:600; white-space:nowrap;
}
.tiempo-conectado .tc-punto{
  width:9px; height:9px; border-radius:50%; background:#3ecf6f; flex-shrink:0;
}
.tiempo-conectado .tc-texto{ opacity:.92; }
.tiempo-conectado .tc-reloj{ color:var(--oro); font-variant-numeric:tabular-nums; }

/* Campanita de recordatorios */
.notif-wrap{ position:relative; }
.notif-btn{
  background:rgba(255,255,255,.12); border:none; color:var(--oro); cursor:pointer;
  width:36px; height:36px; border-radius:50%; position:relative;
  display:flex; align-items:center; justify-content:center;
}
.notif-btn:hover{ background:rgba(255,255,255,.2); }
.notif-btn.sonando{ animation:campanaSonar .5s ease-in-out 2; }
@keyframes campanaSonar{ 0%,100%{ transform:rotate(0);} 25%{ transform:rotate(-14deg);} 75%{ transform:rotate(14deg);} }
.notif-badge{
  position:absolute; top:-2px; right:-2px; background:var(--rojo); color:#fff;
  font-size:.7rem; font-weight:700; border-radius:10px; min-width:18px; height:18px;
  padding:0 4px; display:flex; align-items:center; justify-content:center; line-height:1;
  border:2px solid var(--azul);
}
.notif-drop{
  display:none; position:absolute; top:44px; right:0; width:320px; max-width:calc(100vw - 24px); max-height:400px;
  overflow-y:auto; background:#fff; border:1px solid var(--gris-borde); border-radius:10px;
  box-shadow:0 8px 24px rgba(16,42,69,.18); z-index:50; color:var(--texto);
}
.notif-drop.abierto{ display:block; }
/* En celulares, el header apila ".usuario" (donde vive la campanita) debajo
   del menú cuando no caben todos en una fila, y eso corría el ancla de la
   campanita hacia la izquierda, el cuadro del dropdown (320px fijo,
   pegado a la derecha de la campanita) terminaba saliéndose de la pantalla
   y tapando el contenido de abajo. Con position:fixed se ancla directo a
   la pantalla, no a la campanita, así que no importa dónde quede ella. */
@media (max-width:640px){
  .notif-drop{ position:fixed; top:auto; left:12px; right:12px; width:auto; max-width:none; }
}
.notif-head{ display:flex; align-items:center; justify-content:space-between; padding:10px 14px; border-bottom:1px solid var(--gris-borde); font-size:.88rem; }
.notif-head a{ color:var(--azul-claro); text-decoration:none; font-size:.78rem; }
.notif-vacio{ padding:18px 14px; color:var(--gris-texto); font-size:.85rem; text-align:center; }
.notif-item{ display:block; padding:10px 14px; border-bottom:1px solid #eef2f6; text-decoration:none; color:var(--texto); }
.notif-item:hover{ background:#f4f7fa; }
.notif-item div{ font-size:.85rem; line-height:1.35; }
.notif-item span{ font-size:.72rem; color:var(--gris-texto); }
.notif-item.sin-leer{ background:#f0f6ff; }
.notif-item.sin-leer div{ font-weight:600; }

.avatar{
  width:38px; height:38px; border-radius:50%; object-fit:cover;
  background:var(--oro); color:var(--azul); font-weight:700; font-size:.9rem;
  display:flex; align-items:center; justify-content:center; border:2px solid rgba(255,255,255,.5);
}

.contenedor{ max-width:1080px; margin:26px auto; padding:0 18px; }
.contenedor-ancho{ max-width:1240px; margin:26px auto; padding:0 18px; }

/* ---------- Login ---------- */
.centro{ min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px; background:var(--azul); }
.tarjeta{ background:var(--blanco); border-radius:var(--radio); box-shadow:0 16px 48px rgba(0,0,0,.22); padding:34px 30px; width:100%; max-width:410px; border-top:4px solid var(--oro); }
.tarjeta .logo{ text-align:center; margin-bottom:20px; }
.tarjeta .logo img{ height:62px; width:auto; }
.tarjeta h1{ margin:0 0 4px; font-size:1.35rem; color:var(--azul); text-align:center; }
.tarjeta .sub{ margin:0 0 20px; color:var(--gris-texto); font-size:.9rem; text-align:center; }

/* ---------- Formularios ---------- */
label{ display:block; font-size:.85rem; font-weight:600; color:var(--gris-texto); margin:14px 0 6px; }
input[type=text],input[type=password],input[type=email],input[type=tel],input[type=number],input[type=date],textarea,select{
  width:100%; padding:11px 12px; font-size:1rem; color:var(--texto);
  border:1px solid var(--gris-borde); border-radius:8px; background:#fbfcfe; font-family:inherit;
}
textarea{ resize:vertical; min-height:90px; }
input:focus,select:focus,textarea:focus{ outline:none; border-color:var(--azul-claro); box-shadow:0 0 0 3px rgba(47,109,168,.16); }

/* ---------- Botones ---------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:8px; padding:10px 17px; font-size:.95rem; font-weight:600; border:none; border-radius:8px; cursor:pointer; text-decoration:none; transition:filter .15s; }
.btn:hover{ filter:brightness(1.07); }
.btn-azul{ background:var(--azul); color:#fff; }
.btn-oro{ background:var(--oro); color:var(--azul); }
.btn-borde{ background:#fff; color:var(--azul); border:1px solid var(--gris-borde); }
.btn-rojo{ background:#fdeaea; color:var(--rojo); }
.btn-ancho{ width:100%; }
.btn-chico{ padding:7px 13px; font-size:.85rem; }
.btn-wa{ background:#25D366; color:#fff; }
.btn[disabled]{ opacity:.5; cursor:not-allowed; }

/* ---------- Mensajes ---------- */
.aviso{ padding:11px 14px; border-radius:8px; font-size:.9rem; margin:12px 0; }
.aviso-error{ background:#fdeaea; color:var(--rojo); border:1px solid #f5c2c2; }
.aviso-ok{ background:#e7f7ee; color:var(--verde); border:1px solid #bce6cd; }
.aviso-info{ background:#e9f2fb; color:var(--azul-claro); border:1px solid #c3ddf3; }

.seccion-top{ display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:12px; }
.seccion-top h2{ margin:0; color:var(--azul); font-size:1.3rem; }
.acciones{ display:flex; gap:8px; flex-wrap:wrap; }

.tabla-wrap{ background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); overflow:hidden; }
table{ width:100%; border-collapse:collapse; }
thead th{ background:#f4f7fa; text-align:left; padding:12px 14px; font-size:.76rem; text-transform:uppercase; letter-spacing:.4px; color:var(--gris-texto); border-bottom:1px solid var(--gris-borde); }
tbody td{ padding:13px 14px; border-bottom:1px solid #eef2f6; font-size:.92rem; }
tbody tr:last-child td{ border-bottom:none; }
tbody tr:hover{ background:#f8fafc; }

.badge{ display:inline-block; padding:4px 10px; border-radius:999px; font-size:.74rem; font-weight:700; }
.badge-bloqueado{ background:#ececec; color:#777; }
.badge-disponible{ background:#e3eefb; color:var(--azul-claro); }
.badge-completado{ background:#dff5e7; color:var(--verde); }
.badge-vencido{ background:#fdeaea; color:var(--rojo); }
.badge-pagado{ background:#dff5e7; color:var(--verde); }
.badge-saldo{ background:#fdeaea; color:var(--rojo); }

.vacio{ text-align:center; padding:50px 20px; color:var(--gris-texto); }
.vacio .grande{ font-size:2.4rem; margin-bottom:8px; }

/* ---------- Ficha (misma estética que las fichas del PDF de contratos) ---------- */
.ficha{ background:#fff; border:1px solid var(--gris-borde); border-radius:var(--radio); box-shadow:var(--sombra); overflow:hidden; margin-bottom:18px; }
.ficha-titulo{ background:var(--azul); color:#fff; padding:12px 18px; font-weight:700; font-size:1rem; border-bottom:3px solid var(--oro); }
.ficha-body{ padding:18px; }
.ficha-fila{ display:flex; justify-content:space-between; gap:14px; padding:8px 0; border-bottom:1px solid #f0f3f6; font-size:.92rem; }
.ficha-fila:last-child{ border-bottom:none; }
.ficha-fila .et{ color:var(--gris-texto); }
.ficha-fila .val{ font-weight:700; text-align:right; }

/* ---------- Curso: resumen inicial ---------- */
.curso-grid{ display:grid; grid-template-columns:1.3fr 1fr; gap:20px; align-items:start; }
.video-bienvenida{ width:100%; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); background:#000; aspect-ratio:16/9; }
.video-bienvenida video{ width:100%; height:100%; display:block; }
.curso-banner{ width:100%; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); margin-bottom:18px; }
.curso-banner img{ width:100%; height:340px; object-fit:cover; object-position:center; display:block; }
@media (max-width:640px){ .curso-banner img{ height:200px; } }
.contacto-card a{ color:var(--azul-claro); text-decoration:none; }
.contacto-card a:hover{ text-decoration:underline; }

/* ---------- Barra de progreso ---------- */
.progreso-wrap{ background:#e6ebf1; border-radius:999px; height:14px; overflow:hidden; margin:8px 0 4px; }
.progreso-fill{ background:linear-gradient(90deg,var(--azul-claro),var(--azul)); height:100%; border-radius:999px; transition:width .4s ease; }
.progreso-txt{ font-size:.82rem; color:var(--gris-texto); }

/* ---------- Módulos ---------- */
.modulos-lista{ display:flex; flex-direction:column; gap:12px; }
.modulo-card{ display:flex; align-items:center; gap:16px; background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); padding:16px 18px; text-decoration:none; color:var(--texto); border-left:5px solid var(--gris-borde); }
.modulo-card.disponible{ border-left-color:var(--azul-claro); }
.modulo-card.completado{ border-left-color:var(--verde); }
.modulo-card.bloqueado{ opacity:.62; cursor:not-allowed; }
.modulo-num{ width:40px; height:40px; border-radius:50%; background:var(--gris-fondo); color:var(--azul); font-weight:700; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.modulo-card.completado .modulo-num{ background:var(--verde); color:#fff; }
.modulo-card.disponible .modulo-num{ background:var(--azul); color:#fff; }
.modulo-info{ flex:1; min-width:0; }
.modulo-info h3{ margin:0 0 3px; font-size:1rem; }
.modulo-info p{ margin:0; font-size:.85rem; color:var(--gris-texto); }
.modulo-estado{ flex-shrink:0; }

/* ---------- Material del módulo ---------- */
.material-item{ display:flex; align-items:center; flex-wrap:wrap; gap:10px 12px; background:#fff; border:1px solid var(--gris-borde); border-radius:10px; padding:12px 14px; margin-bottom:10px; }
.material-item .icono{ width:38px; height:38px; border-radius:8px; background:var(--gris-fondo); color:var(--azul); display:flex; align-items:center; justify-content:center; flex-shrink:0; font-size:1.1rem; }
.material-item .nombre{ flex:1 1 160px; min-width:120px; font-weight:600; overflow-wrap:anywhere; }
.material-bloque{ margin-bottom:22px; }
.material-bloque-titulo{ font-weight:700; color:var(--azul); font-size:.95rem; margin-bottom:10px; padding-bottom:6px; border-bottom:2px solid var(--gris-borde); }

@media (max-width: 480px) {
  .material-item{ flex-direction:column; align-items:stretch; }
  .material-item .icono{ margin-bottom:2px; }
  .material-item .nombre{ width:100%; flex:none; min-width:0; }
  .material-item .btn{ width:100%; justify-content:center; }
  .material-item .material-visto{ align-self:flex-start; }
}

/* ---------- Video protegido con marca de agua ---------- */
.video-protegido{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border-radius:var(--radio); overflow:hidden; box-shadow:var(--sombra); user-select:none; }
.video-protegido video{ width:100%; height:100%; display:block; }
.marca-agua{ position:absolute; pointer-events:none; color:rgba(255,255,255,.55); font-size:.85rem; font-weight:700; text-shadow:0 1px 3px rgba(0,0,0,.6); white-space:nowrap; transition:top 6s linear, left 6s linear; }
.video-aviso{ font-size:.78rem; color:var(--gris-texto); margin-top:8px; text-align:center; }

/* ---------- Evaluación ---------- */
.eval-timer{ position:sticky; top:0; z-index:20; background:var(--azul); color:#fff; text-align:center; padding:10px 14px; border-radius:0 0 10px 10px; font-weight:700; margin-bottom:18px; box-shadow:var(--sombra); }
.eval-timer.urgente{ background:var(--rojo); animation:pulso 1s infinite; }
@keyframes pulso{ 0%,100%{opacity:1;} 50%{opacity:.75;} }
.pregunta-card{ background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); padding:18px 20px; margin-bottom:14px; }
.pregunta-card h4{ margin:0 0 12px; font-size:.98rem; }
.alt-opcion{ display:flex; align-items:flex-start; gap:10px; padding:9px 10px; border-radius:8px; cursor:pointer; }
.alt-opcion:hover{ background:#f4f7fa; }
.alt-opcion input{ width:auto; margin-top:3px; }
.resultado-nota{ font-size:3rem; font-weight:800; color:var(--azul); text-align:center; }
.resultado-nota.aprobado{ color:var(--verde); }
.resultado-nota.reprobado{ color:var(--rojo); }

/* ---------- Botón flotante de WhatsApp ---------- */
.wa-flotante{ position:fixed; bottom:22px; right:22px; background:#25D366; color:#fff; width:56px; height:56px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 18px rgba(0,0,0,.25); text-decoration:none; z-index:40; }
.wa-flotante:hover{ filter:brightness(1.06); }

/* ---------- Perfil / grillas ---------- */
.perfil-grid{ display:grid; grid-template-columns:280px 1fr; gap:20px; align-items:start; }
.panel-card{ background:#fff; border-radius:var(--radio); box-shadow:var(--sombra); padding:22px; min-width:0; overflow-wrap:anywhere; word-break:break-word; }
.panel-card h3{ margin:0 0 14px; color:var(--azul); font-size:1.05rem; }

/* ---------- Responsive ---------- */
@media (max-width:900px){
  .curso-grid{ grid-template-columns:1fr; }
}
@media (max-width:760px){
  .perfil-grid{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .barra .marca .sub{ display:none; }
  thead{ display:none; }
  tbody td{ display:block; border:none; padding:5px 14px; }
  tbody tr{ display:block; border-bottom:1px solid var(--gris-borde); padding:10px 0; }
  tbody td::before{ content:attr(data-label); font-weight:700; color:var(--gris-texto); display:inline-block; width:120px; }
  .modulo-card{ flex-wrap:wrap; }

  /* En celular, la cabecera pasa a grilla (grid) en vez de flexbox con
     wrap: con flexbox, calzar "logo a la izquierda + campanita/foto/
     Salir arriba a la derecha, con el menú siempre en su propia fila
     debajo" dependía de que los anchos calzaran justo, y cualquier
     ajuste (achicar una columna, ensanchar otra) rompía alguna de las
     dos cosas. Con grid, las filas y columnas quedan fijas de entrada:
     fila 1 = logo | campanita+foto+Salir (columna acotada a 62% para
     que el nombre del curso se ajuste en varias líneas si hace falta),
     fila 2 = "tiempo conectado", de punta a punta de todo el ancho del
     encabezado (abarca las dos columnas), fila 3 = menú, también
     completo. */
  .barra{
    display:grid; grid-template-columns:1fr minmax(0,62%);
    grid-template-areas:"marca usuario" "conectado conectado" "nav nav";
    padding:10px 16px; gap:6px 10px; box-sizing:border-box; align-items:start;
  }
  .barra .marca{ grid-area:marca; min-width:0; overflow:hidden; padding:2px 0; gap:8px; }
  .barra .marca img{ max-width:100%; width:auto; max-height:32px; height:auto; }
  .barra .usuario{
    grid-area:usuario; display:flex; flex-direction:column; align-items:stretch; gap:5px;
  }
  .usuario-top{ display:flex; align-items:center; justify-content:flex-end; gap:10px; order:1; flex-wrap:nowrap; }
  .barra .usuario .quien{ order:2; text-align:right; overflow-wrap:break-word; }
  .barra .usuario .quien b{ display:none; }
  .barra .usuario .quien span{ font-size:.7rem; }
  .barra nav{ grid-area:nav; gap:4px; }
  .barra nav a{ padding:6px 10px; font-size:.84rem; }
  .avatar{ width:32px; height:32px; font-size:.8rem; flex-shrink:0; }
  .notif-btn{ width:32px; height:32px; flex-shrink:0; }
  .barra .usuario a.salir{ font-size:.82rem; flex-shrink:0; white-space:nowrap; }

  /* "Tiempo conectado" ahora es hermano directo de .marca/.usuario/nav
     (ver cabecera.php), así puede tomar su propia fila de grid que
     abarca las DOS columnas: de punta a punta del encabezado, no solo
     del ancho de la columna derecha. */
  .tiempo-conectado{ grid-area:conectado; box-sizing:border-box; justify-content:center; padding:6px 10px; font-size:.76rem; }
}