/* ===== Academia EDUCAR-IA — Identidad "Bright Luxury Tech" v3 ===== */
:root {
  --bg-main: #eef2f9;            /* fondo suave con más contraste para tarjetas blancas */
  --card-bg: #ffffff;
  --primary: #2563eb;            /* Azul cobalto */
  --purple: #7c3aed;             /* Púrpura vivo */
  --pink: #ec4899;               /* Magenta (degradados) */
  --green: #10b981;              /* Verde menta éxito */
  --amber: #f59e0b;
  --text-dark: #0f172a;
  --text-muted: #5b6b83;
  --border: #e5eaf3;
  /* sombras premium: multi-capa para profundidad real */
  --shadow: 0 1px 2px rgba(15,23,42,.05), 0 10px 24px -6px rgba(37,99,235,.10), 0 24px 48px -12px rgba(15,23,42,.12);
  --shadow-hover: 0 4px 8px rgba(15,23,42,.06), 0 18px 36px -8px rgba(37,99,235,.16), 0 34px 60px -16px rgba(15,23,42,.18);
  --shadow-glow: 0 10px 30px -6px rgba(37,99,235,.35);
  --radius: 22px;
  --radius-sm: 14px;
  --grad: linear-gradient(135deg, #2563eb, #7c3aed);
  --grad-soft: linear-gradient(135deg, #0ea5e9, #2563eb);
  --grad-pink: linear-gradient(135deg, #7c3aed, #ec4899);
  --grad-green: linear-gradient(135deg, #10b981, #0ea5e9);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  background: var(--bg-main);
  color: var(--text-dark);
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh; display: flex; flex-direction: column;
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

/* ===== Header ===== */
header.top {
  background: rgba(255,255,255,.86); backdrop-filter: blur(10px);
  padding: 12px 30px; display: flex; align-items: center; justify-content: space-between;
  gap: 16px; position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid var(--border);
  box-shadow: 0 4px 20px -8px rgba(15,23,42,.08);
}
.logo { display: flex; align-items: center; gap: 11px; font-weight: 800; font-size: 17.5px; color: var(--primary); letter-spacing: -.2px; }
.logo img { height: 38px; width: auto; }
.logo small { display: block; font-weight: 500; font-size: 10.8px; color: var(--text-muted); line-height: 1.15; }
.userbox { display: flex; align-items: center; gap: 10px; font-size: 13.5px; }
.userbox b { color: var(--text-dark); }
main { flex: 1; width: 100%; max-width: 1160px; margin: 0 auto; padding: 28px 22px 52px; }
h1 { font-size: 25px; font-weight: 800; letter-spacing: -.4px; }
h2 { font-size: 17.5px; font-weight: 800; margin: 26px 0 14px; color: var(--text-dark); letter-spacing: -.2px; }
.sub { color: var(--text-muted); font-size: 14px; margin-bottom: 8px; }

/* ===== Tarjetas premium (profundidad real) ===== */
.premium {
  background: var(--card-bg); border-radius: var(--radius); border: 1px solid rgba(229,234,243,.9);
  box-shadow: var(--shadow); padding: 22px; transition: transform .25s ease, box-shadow .25s ease;
}
.premium:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); }

/* ===== Hero (saludo / encabezados) ===== */
.hero {
  background: linear-gradient(120deg, #1e3a8a 0%, var(--primary) 45%, var(--purple) 100%);
  color: #fff; border-radius: var(--radius); padding: 30px 34px; margin-bottom: 20px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  position: relative; overflow: hidden;
  box-shadow: 0 18px 40px -12px rgba(37,99,235,.45);
}
.hero::after { /* destello decorativo */
  content: ''; position: absolute; width: 340px; height: 340px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.16), transparent 65%);
  top: -140px; right: -70px; pointer-events: none;
}
.hero h1 { color: #fff; font-size: 24px; position: relative; }
.hero p { opacity: .94; font-size: 14.5px; margin-top: 5px; position: relative; }
.badge-level {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.32); border-radius: 40px;
  padding: 9px 20px; font-weight: 700; font-size: 13.5px; display: flex; align-items: center; gap: 8px;
  white-space: nowrap; backdrop-filter: blur(4px); position: relative;
}

/* ===== Progreso (degradado + brillo) ===== */
.pbar-bg { background: #e6ecf5; border-radius: 99px; height: 11px; width: 100%; overflow: hidden; box-shadow: inset 0 1px 2px rgba(15,23,42,.08); }
.pbar-fill { background: linear-gradient(90deg, var(--primary), #38bdf8 60%, var(--green)); height: 100%; border-radius: 99px; transition: width .6s cubic-bezier(.4,0,.2,1); position: relative; }
.pbar-fill::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.28), transparent 55%); border-radius: 99px; }

/* ===== Botones ===== */
.btn {
  background: var(--grad); color: #fff; font-weight: 700; border: none; border-radius: 14px; padding: 11px 22px;
  cursor: pointer; font-size: 14px; display: inline-block; text-align: center; position: relative;
  box-shadow: 0 6px 18px -4px rgba(37,99,235,.4), inset 0 1px 0 rgba(255,255,255,.25);
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.btn:hover { opacity: .96; transform: translateY(-1px); box-shadow: 0 10px 24px -6px rgba(37,99,235,.5), inset 0 1px 0 rgba(255,255,255,.25); }
.btn.ghost { background: #eef2ff; color: var(--primary); box-shadow: none; }
.btn.ghost:hover { background: #e4eaff; }
.btn.small { padding: 7px 15px; font-size: 12.5px; border-radius: 11px; }
.btn-link { color: var(--primary); font-weight: 600; font-size: 13.5px; }

/* ===== Dashboard: tarjetas de curso con portada ===== */
.grid-cursos { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 20px; }
.curso-card { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.curso-card .portada {
  height: 118px; display: flex; align-items: center; justify-content: center; gap: 14px;
  color: #fff; position: relative; overflow: hidden; flex-shrink: 0;
}
.curso-card .portada.g1 { background: linear-gradient(120deg, #2563eb, #7c3aed); }
.curso-card .portada.g2 { background: linear-gradient(120deg, #0ea5e9, #2563eb); }
.curso-card .portada.g3 { background: linear-gradient(120deg, #7c3aed, #ec4899); }
.curso-card .portada.g4 { background: linear-gradient(120deg, #10b981, #0ea5e9); }
.curso-card .portada .port-emoji { font-size: 46px; filter: drop-shadow(0 6px 12px rgba(0,0,0,.22)); }
.curso-card .portada .port-nivel {
  background: rgba(255,255,255,.18); border: 1px solid rgba(255,255,255,.3); border-radius: 30px;
  padding: 4px 14px; font-size: 12px; font-weight: 700; backdrop-filter: blur(3px);
}
.curso-card .portada::after { content: ''; position: absolute; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,.14), transparent 60%); top: -70px; right: -40px; }
.curso-card .cuerpo { padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 12px; flex: 1; }
.curso-card .cabeza { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.curso-card h3 { font-size: 16.5px; font-weight: 800; line-height: 1.25; letter-spacing: -.2px; }
.curso-card .meta { font-size: 12.5px; color: var(--text-muted); }
.curso-card .pct { font-weight: 800; color: var(--primary); font-size: 13.5px; white-space: nowrap; }
.curso-card .btn { margin-top: auto; align-self: flex-start; }

/* ===== Tarjetas con FOTO real de portada (premium) ===== */
.curso-card.foto .portada-img {
  height: 168px; position: relative; overflow: hidden; flex-shrink: 0;
  background-size: cover; background-position: center 30%;
  background-color: linear-gradient(120deg, #2563eb, #7c3aed); /* fallback si no hay foto */
}
.curso-card.foto .portada-img.grad { background: linear-gradient(120deg, #2563eb, #7c3aed); }
.curso-card.foto .portada-img::after { /* velo suave abajo para el texto de progreso */
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10,18,40,.05) 40%, rgba(10,18,40,.55) 100%);
}
.curso-card.foto .chip-nivel {
  position: absolute; top: 12px; left: 12px; z-index: 3;
  background: rgba(255,255,255,.92); color: var(--azul, #1e3a5f);
  font-size: 11px; font-weight: 800; letter-spacing: .4px; text-transform: uppercase;
  padding: 4px 12px; border-radius: 30px; box-shadow: 0 4px 12px -2px rgba(15,23,42,.35);
}
.curso-card.foto .port-emoji { position: absolute; z-index: 2; font-size: 54px; top: 50%; left: 50%; transform: translate(-50%,-50%); }
.curso-card.foto .velo-inf {
  position: absolute; bottom: 10px; right: 14px; left: 14px; z-index: 3; text-align: right;
}
.curso-card.foto .velo-inf .meta {
  color: #fff; font-size: 12.5px; font-weight: 700; text-shadow: 0 1px 6px rgba(0,0,0,.5);
  background: rgba(10,18,40,.45); padding: 3px 11px; border-radius: 20px; backdrop-filter: blur(3px);
  display: inline-block;
}
.curso-card.foto .candado {
  position: absolute; top: 10px; right: 12px; z-index: 3; font-size: 20px;
  background: rgba(255,255,255,.88); width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 14px -2px rgba(15,23,42,.4);
}
.curso-card.foto .curso-desc { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin: -4px 0 2px; }
.curso-card.foto .btn-continuar { width: 100%; text-align: center; }
.curso-card.foto.bloqueado .portada-img { filter: saturate(.5) brightness(.85); }
.curso-card.foto .bloq-msg { font-size: 11.5px; color: var(--text-muted); background: #f1f5f9; border-radius: 10px; padding: 7px 11px; margin-top: auto; }

/* ===== Avisos ===== */
.grid-avisos { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.aviso { border-radius: var(--radius); padding: 17px 19px; color: #fff; border: 0; box-shadow: 0 12px 26px -10px rgba(15,23,42,.25); position: relative; overflow: hidden; }
.aviso.aviso { background: var(--grad-soft); }
.aviso.evento { background: var(--grad-pink); }
.aviso.logro { background: var(--grad-green); }
.aviso h4 { font-size: 14.5px; margin-bottom: 4px; }
.aviso p { font-size: 12.8px; opacity: .95; }

/* ===== Detalle curso: 2 columnas ===== */
.detalle { display: grid; grid-template-columns: 400px 1fr; gap: 22px; align-items: start; }
@media (max-width: 940px) { .detalle { grid-template-columns: 1fr; } }
.modulos {
  border-radius: var(--radius); background: var(--card-bg); border: 1px solid var(--border);
  box-shadow: var(--shadow); overflow: hidden; position: sticky; top: 80px;
}
@media (max-width: 940px) { .modulos { position: static; } }
details.mes { border-bottom: 1px solid var(--border); }
details.mes:last-child { border-bottom: 0; }
details.mes summary {
  cursor: pointer; padding: 13px 16px; font-weight: 700; font-size: 13.5px; list-style: none;
  display: flex; flex-direction: column; gap: 7px; background: #fbfdff; transition: background .15s;
}
details.mes summary:hover { background: #f5f9ff; }
details.mes summary::-webkit-details-marker { display: none; }
details.mes[open] summary { background: linear-gradient(120deg, #eef4ff, #f6f1ff); }
details.mes .mes-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; }
details.mes .mes-info { display: flex; align-items: center; gap: 10px; }
.mes-num {
  width: 32px; height: 32px; border-radius: 11px; background: var(--grad); color: #fff; font-weight: 800;
  font-size: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  box-shadow: 0 4px 10px -2px rgba(37,99,235,.35);
}
details.mes .flecha { transition: transform .2s; color: var(--text-muted); font-size: 11px; }
details.mes[open] .flecha { transform: rotate(90deg); }
.mes-pbar { height: 5px; border-radius: 99px; background: #e6ecf5; overflow: hidden; width: 100%; }
.mes-pbar div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--primary), var(--green)); }
.lista-clases { padding: 0; }
.clase-item {
  display: flex; align-items: center; gap: 10px; padding: 10px 16px 10px 58px; font-size: 13px;
  border-top: 1px solid #f1f5f9; cursor: pointer; color: var(--text-dark); transition: background .12s;
}
.clase-item:hover { background: #f6f9ff; }
.clase-item.activa { background: #eaf2ff; box-shadow: inset 3px 0 0 var(--primary); font-weight: 600; }
.clase-item .ok { color: var(--green); font-weight: 800; width: 16px; }
.clase-item .pend { color: #cbd5e1; width: 16px; }
.clase-item .sub-num { color: var(--text-muted); font-weight: 700; min-width: 46px; font-size: 11.5px; }

/* ===== Reproductor / material ===== */
.zona-clase { display: flex; flex-direction: column; gap: 16px; }
.player-wrap {
  border-radius: var(--radius); overflow: hidden; background: #000; aspect-ratio: 16/9; position: relative;
  box-shadow: 0 24px 50px -16px rgba(15,23,42,.5), 0 0 0 1px rgba(255,255,255,.06) inset;
}
.player-wrap video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.btn-full {
  position: absolute; top: 10px; right: 10px; z-index: 20; width: 34px; height: 34px;
  border-radius: 9px; border: 0; background: rgba(15,23,42,.5); color: #fff; font-size: 15px; line-height: 1;
  cursor: pointer; opacity: 0; transition: opacity .2s; display: flex; align-items: center; justify-content: center;
}
.player-wrap:hover .btn-full, .player-wrap:fullscreen .btn-full { opacity: 1; }
.btn-full:hover { background: rgba(15,23,42,.8); }
.player-wrap:fullscreen { width: 100vw; height: 100vh; border-radius: 0; display: flex; align-items: center; justify-content: center; background: #000; }
.player-wrap:fullscreen video { width: 100%; height: 100%; }
.player-wrap:fullscreen .wm { font-size: 22px; }
.player-wrap:fullscreen .btn-full { top: 14px; right: 14px; }
.player-wrap:fullscreen::-webkit-fullscreen { width: 100vw; height: 100vh; }
video::-webkit-media-controls-fullscreen-button { display: none !important; }
.wm {
  position: absolute; inset: 0; pointer-events: none; z-index: 5;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.17); font-weight: 700; letter-spacing: 1px;
  text-shadow: 0 1px 3px rgba(0,0,0,.35); user-select: none;
  transform: rotate(-24deg); white-space: nowrap; overflow: hidden;
  font-size: clamp(12px, 1.6vw, 20px);
}
.player-wrap:fullscreen .wm { font-size: clamp(18px, 3.2vmin, 42px); color: rgba(255,255,255,.22); }
.player-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #0f172a, #1e3a8a); color: #fff; gap: 10px; text-align: center; padding: 20px;
}
.player-placeholder .ico { font-size: 46px; }
.player-placeholder p { font-size: 14px; opacity: .85; max-width: 420px; }
.titulo-clase { font-size: 19.5px; font-weight: 800; letter-spacing: -.2px; }
.barra-clase { margin: 8px 0 0; }

/* ===== Materiales ===== */
.materiales-zona { margin-top: 4px; }
.sin-material {
  background: #f8fafc; border: 1.5px dashed var(--border); border-radius: 16px;
  padding: 18px; text-align: center; color: var(--text-muted); font-size: 13px;
}
.grid-materiales { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.mat-card {
  background: var(--card-bg); border: 1px solid var(--border); border-radius: 16px; padding: 15px 17px;
  display: flex; align-items: flex-start; gap: 12px; box-shadow: 0 4px 14px -6px rgba(15,23,42,.08);
  transition: transform .15s, box-shadow .15s;
}
.mat-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.mat-card .mi {
  width: 40px; height: 40px; border-radius: 13px; background: linear-gradient(135deg,#eef2ff,#f3efff);
  color: var(--primary); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0;
}
.mat-card b { font-size: 13px; display: block; line-height: 1.3; }
.mat-card small { color: var(--text-muted); font-size: 11.5px; }

/* ===== LOGIN v5: banner FULL-WIDTH pegado arriba + form+mascota en 1 pantalla ===== */
.login-body {
  background:
    radial-gradient(900px 500px at 85% -10%, rgba(124,58,237,.12), transparent 60%),
    radial-gradient(800px 460px at -10% 20%, rgba(37,99,235,.14), transparent 55%),
    var(--bg-main);
  display: flex; flex-direction: column; min-height: 100vh; padding: 0;
}

/* Carrusel: ancho TOTAL (pegado a los bordes), pegado arriba, bajo */
.banner-hero {
  width: 100%; height: 215px; position: relative; overflow: hidden; flex-shrink: 0;
  border-radius: 0; box-shadow: 0 14px 34px -14px rgba(37,99,235,.35);
}
.banner-hero .slides { position: relative; height: 100%; }
.banner-slide {
  display: none; position: absolute; inset: 0; padding: 0; color: #fff; overflow: hidden;
}
.banner-slide.activo { display: block; }
.banner-slide .b-foto {
  position: absolute; inset: 0; background-size: cover; background-position: center 30%;
  width: 100%; height: 100%;
}
/* texto en ESQUINA INFERIOR IZQUIERDA, velo LOCALIZADO solo detrás del texto */
.banner-slide .b-contenido {
  position: absolute; left: 0; bottom: 0; z-index: 3; max-width: 640px;
  padding: 18px 30px 30px 34px;
  background: linear-gradient(90deg, rgba(8,14,35,.72) 0%, rgba(8,14,35,.45) 55%, rgba(8,14,35,0) 100%);
}
.banner-slide h2 { color: #fff; font-size: clamp(19px, 2.2vw, 25px); margin: 0 0 6px; font-weight: 800; letter-spacing: -.3px; line-height: 1.16; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.banner-slide p { font-size: 13.5px; opacity: .98; max-width: 500px; font-weight: 500; text-shadow: 0 1px 3px rgba(0,0,0,.45); }
.banner-slide .b-link {
  display: inline-block; margin-top: 9px; color: #fff; font-weight: 700; font-size: 12.5px;
  background: rgba(255,255,255,.2); padding: 6px 15px; border-radius: 30px;
  border: 1px solid rgba(255,255,255,.4); transition: background .15s;
}
.banner-slide .b-link:hover { background: rgba(255,255,255,.32); }
.banner-slide .b-icono { position: absolute; right: 30px; top: 50%; transform: translateY(-50%); font-size: 60px; opacity: .85; z-index: 2; }
.banner-dots { display: flex; gap: 7px; position: absolute; bottom: 12px; right: 24px; z-index: 10; }
.banner-dots span { width: 22px; height: 4.5px; border-radius: 20px; background: rgba(255,255,255,.55); cursor: pointer; transition: background .2s, width .2s; }
.banner-dots span.activo { background: #fff; width: 30px; }
.banner-dots span:hover { background: rgba(255,255,255,.9); }

/* Zona inferior centrada: form + mascota lado a lado, con separación sutil del banner */
.login-zona { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: 18px 18px 8px; gap: 4px; }
.login-wrap { display: flex; align-items: center; justify-content: center; gap: 26px; }
.login-card {
  background: var(--card-bg); border-radius: var(--radius); border: 1px solid rgba(229,234,243,.9);
  box-shadow: var(--shadow); padding: 18px 28px 16px; width: 100%; max-width: 390px;
}
.login-logo-arriba { text-align: center; margin-bottom: 2px; }
.login-logo-arriba img { height: 46px; width: auto; }
.login-card h2 { text-align: center; margin: 2px 0 2px; font-size: 19px; }
.login-card .tag { text-align: center; color: var(--text-muted); font-size: 12.5px; margin-bottom: 2px; }
label { display: block; font-size: 12px; font-weight: 700; margin: 9px 0 4px; letter-spacing: .2px; }
input[type=email], input[type=password], input[type=text], input[type=url] {
  width: 100%; padding: 10px 14px; border: 1.5px solid var(--border); border-radius: 12px; font-size: 14px;
  font-family: inherit; background: #f8fafd; transition: border-color .15s, box-shadow .15s, background .15s;
}
input:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 4px rgba(37,99,235,.12); background: #fff; }
.btn-full-login { width: 100%; margin-top: 13px; padding: 11px; font-size: 14.5px; }
.err-box { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; padding: 9px 13px; border-radius: 11px; font-size: 12.5px; margin-top: 11px; }
.login-pie { text-align: center; margin-top: 10px; font-size: 11.5px; color: var(--text-muted); line-height: 1.6; }
.login-pie a { color: var(--primary); font-weight: 600; }
/* globo de diálogo del saludo, pegado a la mascota con colita */
.login-lado { display: flex; flex-direction: column; align-items: center; gap: 0; }
.mascota-login img { width: 165px; height: auto; filter: drop-shadow(0 12px 22px rgba(37,99,235,.25)); animation: flotarM 3.6s ease-in-out infinite; }
@keyframes flotarM { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.mascota-nombre {
  position: relative; text-align: center; background: var(--grad); color: #fff;
  padding: 6px 16px 7px; border-radius: 16px; margin-top: -10px;
  box-shadow: 0 8px 20px -6px rgba(37,99,235,.5);
  animation: flotarM 3.6s ease-in-out infinite;
}
.mascota-nombre::before { /* colita del globo apuntando a la mascota */
  content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%);
  border-left: 8px solid transparent; border-right: 8px solid transparent;
  border-bottom: 8px solid var(--primary);
}
.mascota-nombre b { font-size: 13px; font-weight: 800; letter-spacing: .1px; white-space: nowrap; }
/* logo al pie del formulario */
.login-logo-pie { text-align: center; margin-top: 12px; padding-top: 10px; border-top: 1px solid #eef2f7; }
.login-logo-pie img { height: 30px; width: auto; opacity: .92; }
.login-copy { text-align: center; font-size: 10.5px; color: var(--text-muted); padding-bottom: 6px; }
.login-copy b { color: var(--azul, #1e3a5f); }

/* ===== Ruta de aprendizaje ===== */
.mini-curso { display: flex; flex-direction: column; gap: 10px; padding: 0; overflow: hidden; }
.mini-curso .portada { height: 96px; background: linear-gradient(120deg, #64748b, #94a3b8); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 34px; position: relative; overflow: hidden; flex-shrink: 0; }
.mini-curso .cuerpo { padding: 16px 20px 20px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.mini-curso .cabeza { display: flex; justify-content: space-between; gap: 8px; }
.mini-curso h4 { font-size: 15px; font-weight: 800; }
.mini-curso .nivel-tag { font-size: 11px; font-weight: 700; color: var(--purple); background: #f3efff; padding: 3px 10px; border-radius: 20px; }
.mini-curso .bloq-msg { font-size: 11.5px; color: var(--text-muted); background: #f1f5f9; border-radius: 10px; padding: 7px 11px; margin-top: auto; }

footer { text-align: center; padding: 20px; color: var(--text-muted); font-size: 12.5px; border-top: 1px solid var(--border); background: rgba(255,255,255,.8); }
.bloqueado { opacity: .78; filter: saturate(.72); }
.bloqueado:hover { opacity: .9; }

/* ===== Responsive (general + login v5) ===== */
@media (max-width: 900px) {
  main { padding: 18px 14px 40px; }
  header.top { padding: 10px 16px; }
  .banner-hero { height: 200px; }
  .banner-slide h2 { font-size: 18px; }
  .banner-slide p { font-size: 12.5px; }
  .login-wrap { gap: 14px; }
  .mascota-login img { width: 130px; }
}
@media (max-width: 680px) {
  .banner-hero { height: 190px; }
  .banner-slide .b-contenido { padding: 12px 16px 22px; max-width: 100%; }
  .banner-slide h2 { font-size: 17px; }
  .banner-slide p { font-size: 12px; }
  .banner-dots { right: 14px; bottom: 8px; }
  .login-zona { padding: 12px 10px 8px; }
  .login-wrap { flex-direction: column; gap: 10px; width: 100%; }
  .login-card { max-width: 400px; }
  .login-lado { flex-direction: row; gap: 12px; }
  .mascota-login img { width: 90px; }
  .mascota-nombre b { font-size: 11px; }
  .login-copy { font-size: 9.5px; line-height: 1.5; padding: 0 8px 8px; }
}

/* ===== HOME (2ª pantalla): ajustes premium pag-home ===== */
/* 1) Header: logo más grande + Bienvenid@ (sin texto Academia al lado) */
.pag-home header.top { padding: 10px 30px; }
.pag-home .logo img { height: 50px; }
.pag-home .logo { font-size: 20px; color: var(--text-dark); gap: 12px; }
.pag-home .logo small { display: none; }
.pag-home .bienvenida-txt { font-size: 22px; font-weight: 800; color: var(--primary); letter-spacing: -.3px; background: linear-gradient(90deg, var(--primary), var(--purple)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

/* 2) Menos espacio encima del hero */
.pag-home main { padding-top: 8px; }

/* 3) Hero más bajo (≥20% menos) */
.pag-home .hero { padding: 16px 30px; margin-bottom: 10px; }
.pag-home .hero h1 { font-size: 21px; margin: 0; }
.pag-home .hero p { font-size: 13.5px; margin-top: 3px; }

/* 4) Avisos más anchos y bajos, pegados al hero */
.pag-home .grid-avisos { grid-template-columns: repeat(auto-fit, minmax(420px, 1fr)); gap: 12px; margin-top: 0; }
.pag-home .aviso { padding: 12px 20px; display: flex; align-items: center; gap: 14px; border-radius: 16px; }
.pag-home .aviso h4 { font-size: 13.5px; margin: 0; white-space: nowrap; flex-shrink: 0; }
.pag-home .aviso p { font-size: 12.3px; margin: 0; opacity: .96; }

/* 5) Línea separadora gris antes de secciones (visible) */
.pag-home .seccion-titulo { border-top: 2px solid #d5dce8; padding-top: 24px; margin-top: 30px; }
.pag-home .seccion-titulo::after { content: ''; display: block; width: 64px; height: 3px; border-radius: 4px; background: linear-gradient(90deg, var(--primary), var(--purple)); margin-top: 10px; }
.pag-home .sub { margin-top: 10px; }

/* Tarjetas de curso: más anchas y efecto 3D premium */
.pag-home .grid-cursos { grid-template-columns: repeat(auto-fill, minmax(430px, 1fr)); gap: 18px; }
.pag-home .curso-card.foto { transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s; box-shadow: 0 6px 16px -6px rgba(15,23,42,.14), 0 1px 3px rgba(15,23,42,.06); }
.pag-home .curso-card.foto:hover { transform: translateY(-7px); box-shadow: 0 26px 48px -14px rgba(37,99,235,.34), 0 10px 22px -8px rgba(15,23,42,.16); }
.pag-home .curso-card.foto .portada-img { height: 158px; }

/* 6) Candado-leyenda sobre la foto (bloqueados a color, sin gris) */
.pag-home .curso-card.foto .candado-leyenda {
  position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); z-index: 3;
  background: rgba(255,255,255,.94); color: var(--azul, #1e3a5f); font-size: 12px; font-weight: 700;
  padding: 6px 14px; border-radius: 30px; white-space: nowrap;
  box-shadow: 0 6px 16px -4px rgba(15,23,42,.4); display: flex; align-items: center; gap: 6px;
  backdrop-filter: blur(4px);
}
.pag-home .curso-card.foto .candado-leyenda.suelto { color: #047857; }
.pag-home .curso-card.foto.bloqueado .portada-img { filter: none; }
.pag-home .bloqueado { opacity: 1; filter: none; }

/* Bloqueados: eliminar leyenda inferior vieja y candado circular */
.pag-home .curso-card.foto .candado { display: none; }
.pag-home .curso-card.foto .bloq-msg { display: none; }

/* ===== Responsive home ===== */
@media (max-width: 900px) {
  .pag-home .grid-avisos { grid-template-columns: 1fr; }
  .pag-home .grid-cursos { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
  .pag-home .aviso { flex-wrap: wrap; gap: 4px; }
  .pag-home .aviso h4 { white-space: normal; }
}
@media (max-width: 620px) {
  .pag-home .logo img { height: 40px; }
  .pag-home .bienvenida-txt { font-size: 17px; }
  .pag-home .hero { padding: 14px 18px; }
  .pag-home .hero h1 { font-size: 17.5px; }
  .pag-home .badge-level { font-size: 11px; }
}

/* ===== CURSO (3ª pantalla): ajustes premium pag-curso ===== */
/* 1) Header: logo más grande + "Aula de IA" (sin Academia al lado) */
.pag-curso header.top { padding: 10px 30px; }
.pag-curso .logo img { height: 50px; }
.pag-curso .logo { gap: 12px; }
.pag-curso .logo small { display: block; font-weight: 600; font-size: 12px; color: var(--primary); letter-spacing: -.1px; }
.pag-curso .curso-txt { font-size: 20px; font-weight: 800; color: var(--text-dark); letter-spacing: -.3px; line-height: 1.1; }

/* 2) Hero del curso: pegado arriba y ~20% más bajo */
.pag-curso main { padding-top: 6px; }
.pag-curso .volver { margin: 0 0 8px; font-size: 13px; }
.pag-curso .curso-hero { padding: 18px 28px 20px; margin-bottom: 14px; display: flex; flex-direction: column; gap: 0; }
.pag-curso .curso-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; width: 100%; flex-wrap: wrap; }
.pag-curso .curso-hero h1 { font-size: 22px; margin: 0; }
.pag-curso .curso-hero p { font-size: 13.5px; margin-top: 3px; }

/* 3) Barra de progreso a TODO el ancho de la tarjeta (hijo directo del hero) */
.pag-curso .curso-pbar { margin-top: 16px; width: 100%; max-width: none; }
.pag-curso .curso-hero .pbar-bg { height: 12px; }

/* 4) Línea gris separadora antes de Material de apoyo */
.pag-curso .materiales-zona { border-top: 2px solid #d5dce8; padding-top: 18px; margin-top: 22px; }
.pag-curso .materiales-zona h2::after { content: ''; display: block; width: 56px; height: 3px; border-radius: 4px; background: linear-gradient(90deg, var(--primary), var(--purple)); margin-top: 8px; }
.pag-curso .materiales-zona h2 { display: inline-block; }

/* footer con leyenda */
footer b { color: var(--azul, #1e3a5f); }
@media (max-width: 620px) {
  .pag-curso .logo img { height: 40px; }
  .pag-curso .curso-txt { font-size: 16px; }
  .pag-curso .curso-txt small { font-size: 10.5px; }
  .pag-curso .curso-hero { padding: 13px 16px; }
  .pag-curso .curso-hero h1 { font-size: 17.5px; }
}

/* ===== Navegación rápida entre clases (nav-clases) ===== */
.nav-clases { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #f4f7fc; border: 1px solid #e6ecf5; border-radius: 14px; padding: 10px 14px; }
.nav-clases .nav-pos { font-size: 12.5px; font-weight: 800; color: var(--primary); letter-spacing: .5px; }
.nav-clases .btn { margin: 0; }
.nav-clases .disabled { opacity: .45; pointer-events: none; }

/* ===== RESPONSIVE GLOBAL: header compacto sin overflow (móvil) ===== */
@media (max-width: 720px) {
  header.top { padding: 8px 14px; gap: 8px; }
  .logo img { height: 32px; }
  .logo { font-size: 15px; gap: 8px; }
  .logo small { font-size: 9.5px; }
  .userbox { font-size: 12px; gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .userbox .btn, .userbox a.btn { padding: 5px 9px; font-size: 11.5px; }
  .userbox b { font-size: 12px; }
}
/* pag-home / pag-curso heredan tamaño grande en desktop pero se compactan en móvil */
@media (max-width: 720px) {
  .pag-home .logo img, .pag-curso .logo img { height: 30px; }
  .pag-home .bienvenida-txt { font-size: 15px; }
  .pag-curso .curso-txt { font-size: 15px; }
  .pag-curso .curso-txt small { font-size: 9.5px; }
}

/* ===== P3 MÓVIL: reproductor (zona-clase) PRIMERO, acordeón después ===== */
@media (max-width: 940px) {
  .detalle { display: flex; flex-direction: column; }
  .zona-clase { order: -1; }
  .modulos { order: 2; }
}

/* ===== Mejoras táctiles OMNI (móvil) ===== */
@media (max-width: 720px) {
  /* botones de navegación de clases: área táctil cómoda */
  .nav-clases { padding: 8px; gap: 6px; }
  .nav-clases .btn { flex: 1; text-align: center; padding: 12px 10px; font-size: 13px; border-radius: 11px; }
  .nav-clases .nav-pos { font-size: 11.5px; padding: 0 2px; }
  /* header en UNA línea (sin apilar): nombre oculto, Clave = icono, Salir compacto */
  header.top { flex-wrap: nowrap; gap: 6px; }
  .userbox span b { display: none; }
  .userbox span { font-size: 0; }
  .userbox span::before { content: '👤'; font-size: 17px; }
  .userbox a.btn.ghost.small { font-size: 0; padding: 6px 8px; }
  .userbox a.btn.ghost.small::before { content: '🔑'; font-size: 15px; }
  .userbox a.btn.small { padding: 7px 11px; font-size: 12.5px; white-space: nowrap; }
}
@media (max-width: 560px) {
  .pag-home .logo img, .pag-curso .logo img { height: 26px; }
  .pag-home .logo, .pag-curso .logo { gap: 6px; }
  .pag-home .bienvenida-txt { font-size: 13px; }
  .pag-curso .curso-txt { font-size: 13px; }
  .pag-curso .curso-txt small { display: none; }
}

/* ===== Portal suspendido (inquilino inactivo/mora) ===== */
.login-shell .card-suspendido {
  background: var(--card-bg); border-radius: var(--radius); max-width: 480px; margin: 60px auto 14px;
  padding: 40px 36px; text-align: center; border: 1px solid rgba(229,234,243,.9); box-shadow: var(--shadow);
}
.card-suspendido .ico { font-size: 52px; margin-bottom: 10px; }
.card-suspendido h2 { font-size: 22px; margin: 0 0 10px; color: var(--text-dark); }
.card-suspendido p { font-size: 14.5px; color: var(--text-muted); margin: 6px 0; }
.card-suspendido .sub { font-size: 13px; }
.card-suspendido .tag { font-size: 12px; margin-top: 16px; font-weight: 700; color: var(--primary); }

/* ===== Logo por inquilino: sin logo propio → nombre del colegio en texto ===== */
.logo-fallback {
  font-weight: 800; font-size: 17px; letter-spacing: -.3px;
  color: var(--primary);
  background: linear-gradient(90deg, var(--primary), var(--purple));
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  white-space: nowrap;
  max-width: 38vw; overflow: hidden; text-overflow: ellipsis;
}
header.top .logo img { height: 46px; width: auto; }
@media (max-width: 560px) {
  .logo-fallback { font-size: 14px; max-width: 30vw; }
}

/* ===== Logos de inquilinos (subidos, suelen ser cuadrados) ===== */
header.top .logo img[src*="/tenant-logo/"] { height: 76px; width: auto; }
.login-logo-pie img[src*="/tenant-logo/"] { height: 64px; width: auto; }
@media (max-width: 560px) {
  header.top .logo img[src*="/tenant-logo/"] { height: 52px; }
  .login-logo-pie img[src*="/tenant-logo/"] { height: 48px; }
}