/* ==========================================================================
   Anima Mundi · Panel
   ========================================================================== */

:root{
  --ivory:#E6DAC3; --camel:#D5C3A3; --choco:#5B3626;
  --naranja:#AA531D; --terra:#8C4121; --mostaza:#C0882F;
  --salvia:#758775; --oliva:#4E5A36; --teal:#1B414B;
  --berenjena:#482C3A; --rubor:#D79F86; --palis:#6E332F;
  --papel:#F4ECDD; --linea:rgba(91,54,38,.16); --texto:#3D2A20;
  --ok:#3F6B4A; --pend:#B07415; --mal:#9C3021;
  --radio:10px; --sombra:0 2px 10px rgba(61,42,32,.08);
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  --serif:"Cormorant Garamond",Georgia,serif;
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--papel);
  color:var(--texto);
  font-family:var(--sans);
  font-size:16px;
  line-height:1.55;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:600;line-height:1.15;margin:0 0 .4em;color:var(--choco)}
h1{font-size:1.9rem}
h2{font-size:1.5rem}
h3{font-size:1.25rem}
a{color:var(--terra)}
img{max-width:100%}

/* ---------- barra superior ---------- */
.topbar{background:var(--teal);color:var(--ivory);position:sticky;top:0;z-index:30;box-shadow:var(--sombra)}
.topbar__inner{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:18px;min-height:62px;flex-wrap:wrap}
.marca{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--mostaza);font-family:var(--serif);font-size:1.3rem;letter-spacing:.06em}
.marca .punto{width:12px;height:12px;border:1.5px solid currentColor;transform:rotate(45deg)}
.nav-panel{display:flex;gap:4px;flex-wrap:wrap;margin-left:auto}
.nav-panel a{color:var(--ivory);text-decoration:none;padding:8px 12px;border-radius:6px;font-size:.92rem}
.nav-panel a:hover{background:rgba(255,255,255,.1)}
.nav-panel a.activo{background:rgba(192,136,47,.22);color:#fff}
.topbar .quien{font-size:.85rem;color:var(--camel)}
.topbar .salir{color:var(--rubor);text-decoration:none;font-size:.9rem}
.topbar .salir:hover{text-decoration:underline}

/* ---------- contenedor ---------- */
.contenedor{max-width:1180px;margin:22px auto 70px;padding:0 22px}
.encabezado{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.encabezado p{margin:.1em 0 0;color:#7a6152}
.migas{font-size:.85rem;color:#8a7161;margin:0 0 10px}
.migas a{color:var(--terra);text-decoration:none}
.migas a:hover{text-decoration:underline}

/* ---------- tarjetas ---------- */
.tarjeta{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:22px;box-shadow:var(--sombra);margin-bottom:22px}
.tarjeta > h2:first-child,.tarjeta > h3:first-child{margin-top:0}
.tarjeta--plana{box-shadow:none}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}

.stat{background:#fff;border:1px solid var(--linea);border-radius:var(--radio);padding:18px;box-shadow:var(--sombra)}
.stat .num{font-family:var(--serif);font-size:2.1rem;color:var(--terra);line-height:1}
.stat .eti{font-size:.85rem;color:#7a6152;margin-top:6px}
.stat a{font-size:.85rem}

/* ---------- botones ---------- */
.btn{display:inline-block;font:inherit;font-size:.95rem;padding:9px 18px;border-radius:8px;
     border:1px solid var(--terra);background:transparent;color:var(--terra);
     text-decoration:none;cursor:pointer;transition:background .15s,color .15s}
.btn:hover{background:rgba(140,65,33,.08)}
.btn--solid{background:var(--naranja);border-color:var(--naranja);color:#fff}
.btn--solid:hover{background:var(--terra);border-color:var(--terra)}
.btn--sutil{border-color:var(--linea);color:var(--choco)}
.btn--sutil:hover{background:rgba(91,54,38,.06)}
.btn--peligro{border-color:var(--mal);color:var(--mal)}
.btn--peligro:hover{background:rgba(156,48,33,.1)}
.btn--chico{padding:5px 11px;font-size:.82rem;border-radius:6px}
.btn--bloque{display:block;width:100%;text-align:center}
.botones-fila{display:flex;gap:10px;flex-wrap:wrap;align-items:center}

/* ---------- formularios ---------- */
.form label{display:block;margin-bottom:14px;font-size:.9rem;color:#5a4336}
.form input[type=text],.form input[type=email],.form input[type=password],
.form input[type=number],.form input[type=date],.form input[type=url],
.form select,.form textarea{
  display:block;width:100%;margin-top:5px;font:inherit;font-size:.98rem;
  padding:9px 11px;border:1px solid var(--linea);border-radius:8px;background:#fff;color:var(--texto);
}
.form textarea{min-height:90px;resize:vertical}
.form input:focus,.form select:focus,.form textarea:focus{outline:2px solid rgba(192,136,47,.5);outline-offset:1px}
.form .campo-fila{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form .ayuda{font-size:.8rem;color:#8a7161;margin-top:4px}
.checkbox{display:flex;gap:10px;align-items:flex-start;margin-bottom:10px}
.checkbox input{margin-top:4px}

/* ---------- tablas ---------- */
.tabla-scroll{overflow-x:auto}
.tabla{width:100%;border-collapse:collapse;font-size:.93rem;background:#fff}
.tabla th,.tabla td{text-align:left;padding:11px 12px;border-bottom:1px solid var(--linea);vertical-align:middle}
.tabla th{font-size:.78rem;text-transform:uppercase;letter-spacing:.05em;color:#7a6152;background:rgba(91,54,38,.04)}
.tabla tr:hover td{background:rgba(192,136,47,.05)}
.tabla .acciones{white-space:nowrap;display:flex;gap:6px}

/* ---------- etiquetas de estado ---------- */
.badge{display:inline-block;font-size:.75rem;padding:3px 10px;border-radius:999px;border:1px solid transparent;white-space:nowrap}
.badge--ok{background:rgba(63,107,74,.12);color:var(--ok);border-color:rgba(63,107,74,.3)}
.badge--pend{background:rgba(176,116,21,.13);color:var(--pend);border-color:rgba(176,116,21,.3)}
.badge--mal{background:rgba(156,48,33,.12);color:var(--mal);border-color:rgba(156,48,33,.3)}
.badge--neutro{background:rgba(91,54,38,.08);color:#6b5244;border-color:var(--linea)}

/* ---------- avisos ---------- */
.alerta{padding:12px 16px;border-radius:8px;margin-bottom:16px;font-size:.94rem;border:1px solid}
.alerta--ok{background:#EDF4EE;border-color:#C6DBC9;color:#2F5238}
.alerta--error{background:#F7E9E6;border-color:#E4C3BC;color:#8A2B1E}
.alerta--info{background:#EEF3F4;border-color:#C9DADB;color:#1B414B}
.alerta--aviso{background:#FBF3E4;border-color:#EBD9B6;color:#7A560F}

/* ---------- login / registro ---------- */
.centrado{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 18px;background:
  radial-gradient(circle at 50% 0%,rgba(27,65,75,.10),transparent 60%),var(--papel)}
.acceso{width:100%;max-width:430px;background:#fff;border:1px solid var(--linea);border-radius:14px;
  padding:34px 32px;box-shadow:0 10px 40px rgba(61,42,32,.14)}
.acceso__logo{display:flex;justify-content:center;margin-bottom:10px}
.acceso__logo .logo-word{
  display:block;width:200px;aspect-ratio:1000/269;background:var(--teal);
  -webkit-mask:url(../img/logo-word.png) center/contain no-repeat;
          mask:url(../img/logo-word.png) center/contain no-repeat;
}
.acceso h1{text-align:center;font-size:1.7rem}
.acceso .sub{text-align:center;color:#7a6152;margin:0 0 22px;font-size:.92rem}
.acceso .pie{text-align:center;margin-top:18px;font-size:.9rem;color:#7a6152}
.acceso .pie a{color:var(--terra);text-decoration:none;font-weight:600}
.acceso .pie a:hover{text-decoration:underline}

/* ---------- instalador ---------- */
.instalador{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:30px 18px;background:var(--teal)}
.caja-instalar{width:100%;max-width:560px;background:#fff;border-radius:14px;padding:34px 32px;box-shadow:0 10px 40px rgba(0,0,0,.3)}
.caja-instalar h1{text-align:center;margin-bottom:0}
.caja-instalar .sub{text-align:center;color:#7a6152;margin:0 0 20px}
.caja-instalar code{background:rgba(91,54,38,.08);padding:1px 6px;border-radius:4px;font-size:.9em}
.credenciales{background:var(--papel);border:1px solid var(--linea);border-radius:8px;padding:14px 18px;margin:14px 0}
.credenciales p{margin:4px 0}
.nota{font-size:.87rem;color:#7a6152}
.nota.grave{color:var(--mal);font-weight:600}

/* ---------- listas de contenido ---------- */
.vacio{text-align:center;color:#8a7161;padding:34px 10px;font-style:italic}
.lista-lim{list-style:none;margin:0;padding:0}
.lista-lim li{padding:12px 0;border-bottom:1px solid var(--linea);display:flex;gap:14px;align-items:flex-start}
.lista-lim li:last-child{border-bottom:0}

.modulo{border:1px solid var(--linea);border-radius:10px;margin-bottom:14px;overflow:hidden;background:#fff}
.modulo__cab{display:flex;align-items:center;gap:12px;padding:14px 18px;background:rgba(91,54,38,.05);cursor:pointer}
.modulo__cab h3{margin:0;font-size:1.1rem}
.modulo__cab .num{font-family:var(--serif);color:var(--mostaza);font-size:1.2rem}
.modulo__cab .mas{margin-left:auto;color:#7a6152;transition:transform .2s}
.modulo.abierto .modulo__cab .mas{transform:rotate(180deg)}
.modulo__cuerpo{padding:16px 18px;display:none}
.modulo.abierto .modulo__cuerpo{display:block}

.video{border:1px solid var(--linea);border-radius:10px;overflow:hidden;background:#fff;margin-bottom:16px}
.video__marco{position:relative;aspect-ratio:16/9;background:#12232a}
.video__marco iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video__play{position:absolute;inset:0;width:100%;height:100%;border:0;padding:0;margin:0;cursor:pointer;background:#000}
.video__play img{width:100%;height:100%;object-fit:cover;opacity:.82}
.video__play::after{content:"";position:absolute;left:50%;top:50%;width:72px;height:72px;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(0,0,0,.55);
  background-image:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));}
.video__play::before{content:"";position:absolute;left:50%;top:50%;transform:translate(-38%,-50%);
  border-left:26px solid #fff;border-top:16px solid transparent;border-bottom:16px solid transparent;z-index:2}
.video__info{padding:14px 16px}
.video__info h4{margin:0 0 4px}
.video__info p{margin:0;color:#7a6152;font-size:.92rem}
.video__info .dur{font-size:.82rem;color:#8a7161;margin-top:4px}

/* ---------- detalle de alumno ---------- */
.datos-alumno{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;margin-bottom:6px}
.datos-alumno div{background:rgba(91,54,38,.04);border-radius:8px;padding:10px 14px}
.datos-alumno b{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;color:#7a6152;font-weight:600}

/* ---------- utilidades ---------- */
.mt-0{margin-top:0}.mt-1{margin-top:10px}.mt-2{margin-top:20px}.mb-0{margin-bottom:0}.mb-1{margin-bottom:10px}
.tenue{color:#8a7161}
.chico{font-size:.87rem}
.texto-centro{text-align:center}
.oculto{display:none}

@media (max-width:820px){
  .grid-2,.grid-3,.grid-4{grid-template-columns:1fr}
  .form .campo-fila{grid-template-columns:1fr}
  .nav-panel{width:100%;margin:6px 0 10px;order:5}
  .topbar__inner{padding-bottom:8px}
}