/* ===========================================================
   Letícia Valim — PORTAL (administración + área de alumnos)
   Hoja de estilos AUTÓNOMA: el portal NO carga /styles.css.
   Mismo lenguaje de marca que la web pública, pero en modo
   herramienta de trabajo: sobrio, claro, rápido, con alma.

   Fuentes: las carga el shell HTML (Google Fonts)
     Cormorant Garamond 300/400/500 · Inter 300/400/500/600

   ÍNDICE
     01 Tokens · 02 Reset y base · 03 Header · 04 Shell y tipografía
     05 Cards y cursos · 06 Botones · 07 Badges · 08 Formularios
     09 Tablas · 10 Tabs · 11 Estado vacío · 12 Alertas · 13 Toasts
     14 Modales · 15 Auth · 16 Módulos y lecciones · 17 Video
     18 Materiales · 19 Steps · 20 Chips · 21 Dropzone · 22 Spinner
     23 Footer · 24 Utilidades · 25 Responsive · 26 Reduced motion
   =========================================================== */


/* ===========================================================
   01. TOKENS
   =========================================================== */
:root{
  /* superficies */
  --cream:#faf6f0;
  --cream-deep:#f3ece1;
  --white:#fffdfa;

  /* tinta */
  --ink:#2a2118;
  --ink-soft:#5d5145;
  --ink-mute:#8a7c6d;

  /* acentos de la firma de la clienta */
  --aqua:#9ec9c4;        /* agua: líneas, fondos, subrayados — NUNCA texto sobre crema */
  --aqua-deep:#5f9d97;   /* agua profunda: foco, botón acento, bordes */
  --lila:#7d6da5;        /* lila: texto de acento (contraste AA sobre crema) */
  --nude:#f2d6c2;
  --nude-deep:#e5b795;

  --line:rgba(42,33,24,.12);
  --line-soft:rgba(42,33,24,.07);

  /* semánticos */
  --ok-ink:#3d6f6a;      --ok-bg:rgba(95,157,151,.14);
  --warn-ink:#8a5626;    --warn-bg:rgba(229,183,149,.30);
  --danger:#a8443c;      --danger-bg:rgba(168,68,60,.09);
  --lila-bg:rgba(125,109,165,.12);
  --mute-bg:rgba(42,33,24,.06);

  /* forma */
  --r-xs:6px; --r-s:8px; --r:10px; --r-m:14px; --r-l:18px; --r-pill:999px;

  /* sombra */
  --sh-1:0 1px 2px rgba(42,33,24,.04),0 2px 8px -5px rgba(42,33,24,.14);
  --sh-2:0 8px 24px -14px rgba(42,33,24,.30);
  --sh-3:0 30px 70px -32px rgba(42,33,24,.45);

  /* movimiento */
  --ease:cubic-bezier(0.16,1,0.3,1);
  --t-fast:.18s; --t:.32s;

  /* tipografía */
  --serif:"Cormorant Garamond",Georgia,serif;
  --sans:"Inter","Helvetica Neue",Arial,sans-serif;

  /* métricas de layout */
  --hd-h:112px;                  /* mobile: header de 2 filas (marca + nav) */
  --gut:clamp(16px,4vw,40px);
}
@media(min-width:860px){ :root{--hd-h:66px} }   /* desktop: 1 sola fila */


/* ===========================================================
   02. RESET Y BASE
   =========================================================== */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:auto;-webkit-text-size-adjust:100%}  /* NO smooth: traba la rueda en Chrome */

body.portal{
  margin:0;background:var(--cream);color:var(--ink);
  font-family:var(--sans);font-size:15px;line-height:1.6;font-weight:400;
  -webkit-font-smoothing:antialiased;overflow-x:clip;min-height:100vh;
}

img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-family:var(--serif);font-weight:300;line-height:1.1;letter-spacing:-.01em}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
button{font-family:inherit}
hr{height:1px;border:0;background:var(--line);margin:0}
::selection{background:var(--aqua);color:var(--ink)}

[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--lila);outline-offset:2px;border-radius:var(--r-xs)}

/* scrollbar oculta donde scrolleamos a mano */
.no-bar{scrollbar-width:none;-ms-overflow-style:none}
.no-bar::-webkit-scrollbar{display:none}


/* ===========================================================
   03. HEADER  (.p-header · .p-sig · .p-nav · .p-user · .p-logout)
   =========================================================== */
.p-header{
  position:fixed;top:0;left:0;right:0;z-index:50;
  background:rgba(250,246,240,.92);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
  display:grid;grid-template-columns:auto 1fr;
  grid-template-areas:"sig user" "nav nav";
  align-items:center;gap:6px 14px;padding:10px var(--gut) 0;
}

.p-sig{grid-area:sig;display:flex;align-items:center;flex:none}
.p-sig img,img.p-sig{height:30px;width:auto;max-width:190px;object-fit:contain;object-position:left center}

/* --- nav: fila scrolleable en mobile, nunca desborda la página --- */
.p-nav{
  grid-area:nav;display:flex;align-items:center;gap:22px;
  overflow-x:auto;overflow-y:hidden;white-space:nowrap;max-width:100%;
  /* `min-width:0` es indispensable: la nav abarca las dos columnas del grid y,
     sin esto, su contenido en `nowrap` fija el ancho MINIMO del header y estira
     la pagina (medido: 396px de scroll a 390px de viewport). `max-width:100%`
     no alcanza, porque la contribucion intrinseca se calcula antes. */
  min-width:0;
  scrollbar-width:none;-ms-overflow-style:none;
  margin:0 calc(var(--gut) * -1);
  padding:2px var(--gut) 0;
}
.p-nav::-webkit-scrollbar{display:none}
.p-nav a{
  flex:none;position:relative;display:inline-block;padding:10px 0 11px;
  font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:500;
  color:var(--ink-mute);transition:color var(--t) ease;
}
.p-nav a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--aqua-deep);transition:width .45s var(--ease);
}
.p-nav a:hover{color:var(--ink)}
.p-nav a:hover::after{width:100%}
.p-nav a.on{color:var(--ink)}
.p-nav a.on::after{width:100%}

/* --- usuario + logout --- */
.p-user{
  grid-area:user;display:flex;align-items:center;justify-content:flex-end;
  gap:10px;min-width:0;font-size:13px;color:var(--ink-soft);
}
.p-user>span,.p-user b{
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  max-width:min(42vw,220px);font-weight:500;
}
.p-logout{
  flex:none;background:transparent;border:1px solid var(--line);border-radius:var(--r-pill);
  color:var(--ink-soft);font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;
  padding:7px 14px;cursor:pointer;
  transition:background var(--t) ease,color var(--t) ease,border-color var(--t) ease;
}
.p-logout:hover{background:var(--ink);color:var(--cream);border-color:var(--ink)}

@media(min-width:860px){
  .p-header{
    grid-template-columns:auto 1fr auto;grid-template-areas:"sig nav user";
    gap:0 clamp(18px,3vw,40px);padding:0 var(--gut);min-height:var(--hd-h);
  }
  .p-nav{margin:0;padding:0;justify-content:flex-end;gap:clamp(18px,2.4vw,32px)}
  .p-nav a{padding:22px 0 21px}
}


/* ===========================================================
   04. SHELL Y TIPOGRAFÍA DE PÁGINA
   =========================================================== */
.p-shell{max-width:1180px;margin:0 auto;padding:0 var(--gut);width:100%}
.p-main{padding-top:calc(var(--hd-h) + 26px);padding-bottom:clamp(48px,8vw,90px);min-height:60vh}

.p-eyebrow{
  display:block;font-family:var(--sans);font-size:11px;letter-spacing:.3em;
  text-transform:uppercase;font-weight:500;color:var(--lila);margin-bottom:10px;
}
.p-title{
  font-family:var(--serif);font-weight:300;font-size:clamp(28px,4vw,44px);
  line-height:1.06;letter-spacing:-.015em;color:var(--ink);
}
.p-title i{font-style:italic;color:var(--lila)}
.p-sub{margin-top:10px;max-width:62ch;color:var(--ink-mute);font-size:14.5px;line-height:1.65}

.p-section{margin:clamp(30px,5vw,52px) 0 0}
.p-section:first-child{margin-top:0}
.p-section-head{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:14px 20px;flex-wrap:wrap;margin-bottom:18px;
}
.p-section-head h2{font-size:clamp(22px,2.6vw,30px);font-weight:300}
/* La accion de la derecha no se ESTIRA, pero tiene que poder ENCOGERSE.
   `flex:none` (que ademas fija flex-shrink:0) hacia que, cuando el encabezado no
   lleva boton, el bloque de titulo+bajada quedara como :last-child y tomara su
   ancho de max-content: la bajada en una sola linea estiraba la pagina a 396px
   en un viewport de 390. Medido con biseccion en Chrome.
   `:not(:first-child)` deja fuera el caso de un solo hijo. */
.p-section-head>:last-child:not(:first-child){flex:0 1 auto}
/* Los flex items nacen con `min-width:auto` y no bajan de su contenido. */
.p-section-head>*{min-width:0}


/* ===========================================================
   05. CARDS Y CURSOS
   =========================================================== */
.card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  padding:clamp(18px,2.4vw,24px);box-shadow:var(--sh-1);
}
.card.pad-0{padding:0;overflow:hidden}
.card+.card{margin-top:16px}
.card>h3{font-size:22px;margin-bottom:8px}
.card>h3+p{color:var(--ink-soft);font-size:14.5px}

.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}

.course-card{
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-m);
  overflow:hidden;box-shadow:var(--sh-1);display:flex;flex-direction:column;
  transition:transform .5s var(--ease),box-shadow .5s var(--ease),border-color var(--t) ease;
}
.course-card:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:rgba(42,33,24,.18)}

.course-cover{
  display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  background:var(--cream-deep);border-bottom:1px solid var(--line-soft);
}
/* sin imagen: degradé agua → nude */
.course-cover.empty{background:linear-gradient(135deg,var(--aqua) 0%,var(--cream-deep) 48%,var(--nude) 100%)}

.course-body{padding:18px 18px 0;flex:1 1 auto;min-width:0}
.course-body h3{font-family:var(--serif);font-weight:400;font-size:23px;line-height:1.15;letter-spacing:-.01em}
.course-desc{
  margin-top:9px;color:var(--ink-soft);font-size:14px;line-height:1.55;
  display:-webkit-box;-webkit-line-clamp:3;line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;
}
.course-foot{
  padding:14px 18px 18px;margin-top:14px;display:flex;align-items:center;
  justify-content:space-between;gap:10px;flex-wrap:wrap;border-top:1px solid var(--line-soft);
}
.course-foot .badge+.badge{margin-left:6px}


/* ===========================================================
   06. BOTONES
   =========================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 22px;border-radius:var(--r-pill);border:1px solid var(--ink);
  background:var(--ink);color:var(--white);
  font-family:var(--sans);font-size:13px;font-weight:500;letter-spacing:.04em;
  line-height:1.2;text-align:center;cursor:pointer;white-space:nowrap;
  transition:transform var(--t) var(--ease),background var(--t) ease,color var(--t) ease,
             border-color var(--t) ease,box-shadow var(--t) var(--ease),opacity var(--t) ease;
}
.btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px -10px rgba(42,33,24,.55)}
.btn:active{transform:translateY(0)}
.btn:focus-visible{outline:2px solid var(--lila);outline-offset:2px}

.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{background:var(--cream-deep);border-color:rgba(42,33,24,.2);box-shadow:none}

.btn.accent{background:var(--aqua-deep);border-color:var(--aqua-deep);color:#fff}
.btn.accent:hover{background:#527f7b;border-color:#527f7b;box-shadow:0 8px 20px -10px rgba(95,157,151,.75)}

.btn.danger{background:transparent;color:var(--danger);border-color:rgba(168,68,60,.4)}
.btn.danger:hover{background:var(--danger-bg);border-color:var(--danger);box-shadow:none}

.btn.sm{padding:7px 15px;font-size:12px;letter-spacing:.05em}
.btn.block{display:flex;width:100%}

/* acción secundaria dentro de tablas/listas */
.btn.link{
  background:transparent;border-color:transparent;color:var(--lila);
  padding:6px 4px;text-decoration:underline;text-underline-offset:3px;
}
.btn.link:hover{color:var(--ink);box-shadow:none;transform:none}

.btn:disabled,.btn[disabled],.btn[aria-disabled="true"]{
  opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;
}

.btn-row{display:flex;flex-wrap:wrap;gap:10px;align-items:center}


/* ===========================================================
   07. BADGES
   =========================================================== */
.badge{
  display:inline-flex;align-items:center;gap:5px;padding:4px 11px;border-radius:var(--r-pill);
  font-size:11px;font-weight:500;letter-spacing:.09em;text-transform:uppercase;line-height:1.5;
  background:var(--mute-bg);color:var(--ink-soft);white-space:nowrap;
  /* Un badge con `nowrap` fija el ancho MINIMO de toda la pagina: una etiqueta
     larga como "ROSACEA / ENROJECIMIENTO" estiraba el documento a 396px en un
     viewport de 390. Se acota al contenedor y se permite partir la palabra. */
  max-width:100%;overflow-wrap:anywhere;
}
/* En pantallas chicas el espacio manda sobre la estetica de la pastilla: antes
   que romper la pagina, el badge largo envuelve en dos lineas. */
@media(max-width:640px){ .badge{white-space:normal} }
.badge.ok{background:var(--ok-bg);color:var(--ok-ink)}
.badge.warn{background:var(--warn-bg);color:var(--warn-ink)}
.badge.mute{background:var(--mute-bg);color:var(--ink-mute)}
.badge.new{background:var(--lila-bg);color:var(--lila)}


/* ===========================================================
   08. FORMULARIOS
   =========================================================== */
.field{display:block;margin-bottom:16px;min-width:0}
.field:last-child{margin-bottom:0}
/* :not(.chip) — sin esto la etiqueta del campo le gana en especificidad a .chip
   y los chips dentro de un .field se renderizan como bloque gris en mayúsculas */
.field label:not(.chip){
  display:block;margin-bottom:7px;font-size:12px;font-weight:500;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-mute);
}
.field input,.field textarea,.field select{
  display:block;width:100%;background:var(--white);border:1px solid var(--line);
  border-radius:var(--r);padding:11px 14px;
  font-family:inherit;font-size:15px;line-height:1.5;color:var(--ink);
  -webkit-appearance:none;appearance:none;
  transition:border-color var(--t) ease,box-shadow var(--t) ease,background var(--t) ease;
}
.field textarea{min-height:120px;resize:vertical}
.field select{
  cursor:pointer;padding-right:38px;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-mute) 50%),
                   linear-gradient(135deg,var(--ink-mute) 50%,transparent 50%);
  background-position:calc(100% - 19px) calc(50% + 1px),calc(100% - 14px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-mute);opacity:.7}

.field input:focus,.field textarea:focus,.field select:focus{
  outline:none;border-color:var(--aqua-deep);box-shadow:0 0 0 3px rgba(95,157,151,.18);
}
.field input:focus-visible,.field textarea:focus-visible,.field select:focus-visible{outline:none}

.field input:disabled,.field textarea:disabled,.field select:disabled{
  background:var(--cream-deep);color:var(--ink-mute);cursor:not-allowed;
}
.field input[type="checkbox"],.field input[type="radio"]{
  width:17px;height:17px;display:inline-block;padding:0;
  accent-color:var(--aqua-deep);vertical-align:-3px;cursor:pointer;
}

.field.error input,.field.error textarea,.field.error select{
  border-color:var(--danger);background:rgba(168,68,60,.03);
}
.field.error input:focus,.field.error textarea:focus,.field.error select:focus{
  box-shadow:0 0 0 3px rgba(168,68,60,.15);
}

.field-hint{display:block;margin-top:6px;font-size:12px;line-height:1.5;color:var(--ink-mute)}
.field-error{display:block;margin-top:6px;font-size:12px;line-height:1.5;font-weight:500;color:var(--danger)}

.form-row{display:grid;grid-template-columns:1fr;gap:0 16px}
@media(min-width:640px){ .form-row{grid-template-columns:1fr 1fr} }


/* ===========================================================
   09. TABLAS — la tabla scrollea dentro de .table-wrap,
   la página NUNCA scrollea horizontal
   =========================================================== */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:var(--r-m)}

.table{width:100%;min-width:560px;border-collapse:collapse;font-size:14px;background:var(--white)}
.table th{
  background:var(--cream-deep);text-align:left;font-weight:500;font-size:11.5px;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ink-soft);
  padding:12px 14px;white-space:nowrap;border-bottom:1px solid var(--line);
}
.table td{padding:12px 14px;border-bottom:1px solid var(--line);color:var(--ink-soft);vertical-align:middle}
.table td b,.table td strong{color:var(--ink);font-weight:500}
.table tbody tr:last-child td{border-bottom:0}
.table tbody tr{transition:background var(--t-fast) ease}
.table tbody tr:hover{background:var(--cream)}
.table td.num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.table td.act{text-align:right;white-space:nowrap}


/* ===========================================================
   10. TABS
   =========================================================== */
.tabs{
  display:flex;align-items:center;gap:clamp(14px,2.4vw,28px);
  border-bottom:1px solid var(--line);margin-bottom:22px;
  overflow-x:auto;white-space:nowrap;scrollbar-width:none;-ms-overflow-style:none;
}
.tabs::-webkit-scrollbar{display:none}
.tab{
  flex:none;position:relative;background:none;border:0;padding:11px 0 12px;
  font-family:var(--sans);font-size:12.5px;font-weight:500;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-mute);cursor:pointer;transition:color var(--t) ease;
}
.tab::after{
  content:"";position:absolute;left:0;bottom:-1px;height:2px;width:0;
  background:var(--aqua-deep);transition:width .45s var(--ease);
}
.tab:hover{color:var(--ink)}
.tab.on{color:var(--ink)}
.tab.on::after{width:100%}


/* ===========================================================
   11. ESTADO VACÍO
   =========================================================== */
.empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  text-align:center;padding:clamp(34px,6vw,62px) 22px;
  color:var(--ink-mute);font-size:14.5px;line-height:1.6;
  border:1px dashed var(--line);border-radius:var(--r-m);background:rgba(255,253,250,.5);
}
.empty svg,.empty .ico{width:34px;height:34px;color:var(--aqua-deep);opacity:.8}
.empty b{
  display:block;font-family:var(--serif);font-weight:400;font-size:21px;
  color:var(--ink);letter-spacing:-.01em;
}
.empty .btn{margin-top:8px}


/* ===========================================================
   12. ALERTAS
   =========================================================== */
.alert{
  border:1px solid var(--line);border-left:3px solid var(--ink-mute);border-radius:var(--r);
  background:var(--white);padding:13px 16px;font-size:14px;line-height:1.6;
  color:var(--ink-soft);margin-bottom:16px;
}
.alert b{color:var(--ink);font-weight:500}
.alert.ok{background:var(--ok-bg);border-color:rgba(95,157,151,.32);border-left-color:var(--aqua-deep);color:var(--ok-ink)}
.alert.err{background:var(--danger-bg);border-color:rgba(168,68,60,.28);border-left-color:var(--danger);color:var(--danger)}
.alert.info{background:var(--lila-bg);border-color:rgba(125,109,165,.28);border-left-color:var(--lila);color:var(--lila)}


/* ===========================================================
   13. TOASTS
   =========================================================== */
.toast-wrap{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:flex;flex-direction:column;align-items:flex-end;gap:10px;
  width:min(94vw,360px);pointer-events:none;
}
.toast{
  pointer-events:auto;width:100%;background:var(--white);
  border:1px solid var(--line);border-left:3px solid var(--aqua-deep);
  border-radius:var(--r);box-shadow:var(--sh-2);padding:12px 15px;
  font-size:14px;line-height:1.55;color:var(--ink-soft);
  animation:toastIn .45s var(--ease) both;
}
.toast b{display:block;color:var(--ink);font-weight:500;font-size:13.5px;margin-bottom:2px}
.toast.err{border-left-color:var(--danger);color:var(--danger)}
.toast.err b{color:var(--danger)}
.toast.out{animation:toastOut .3s var(--ease) both}

@keyframes toastIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes toastOut{from{opacity:1;transform:none}to{opacity:0;transform:translateY(8px)}}


/* ===========================================================
   14. MODALES
   =========================================================== */
.modal-back{
  position:fixed;inset:0;z-index:70;display:grid;place-items:center;padding:16px;
  background:rgba(30,23,16,.5);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  animation:fadeIn .25s ease both;
}
.modal{
  width:min(94vw,640px);max-width:640px;max-height:88vh;overflow:auto;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r-l);
  box-shadow:var(--sh-3);animation:modalIn .45s var(--ease) both;
}
.modal-head{
  position:sticky;top:0;z-index:1;background:var(--white);
  padding:20px clamp(18px,3vw,26px) 14px;border-bottom:1px solid var(--line);
  display:flex;align-items:flex-start;justify-content:space-between;gap:14px;
}
.modal-head h3{font-size:24px;font-weight:400;letter-spacing:-.01em}
.modal-head p{margin-top:5px;font-size:13.5px;color:var(--ink-mute)}
.modal-head .x{
  flex:none;width:32px;height:32px;display:grid;place-items:center;
  border:1px solid var(--line);border-radius:50%;background:transparent;
  color:var(--ink-soft);font-size:15px;line-height:1;cursor:pointer;
  transition:background var(--t) ease,color var(--t) ease;
}
.modal-head .x:hover{background:var(--ink);color:var(--cream)}
.modal-body{padding:18px clamp(18px,3vw,26px)}
.modal-foot{
  position:sticky;bottom:0;background:var(--white);
  padding:14px clamp(18px,3vw,26px) 20px;border-top:1px solid var(--line);
  display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap;
}

@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes modalIn{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}


/* ===========================================================
   15. AUTH (login / registro)
   =========================================================== */
.auth-wrap{
  min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;
  padding:36px var(--gut);
  background:radial-gradient(120% 80% at 80% 8%,rgba(242,214,194,.55) 0%,rgba(250,246,240,0) 60%),var(--cream);
}
.auth-wrap .p-sig{justify-content:center}
.auth-wrap .p-sig img,.auth-wrap img.p-sig{height:44px;max-width:min(74vw,300px);margin:0 auto}
.auth-wrap .card{width:100%;max-width:420px;padding:clamp(22px,4vw,30px);box-shadow:var(--sh-2)}
.auth-wrap .p-title{font-size:clamp(26px,5vw,34px);text-align:center}
.auth-wrap .p-sub{text-align:center;margin:8px auto 22px;font-size:14px}
.auth-wrap .btn.block{margin-top:6px}

.auth-alt{margin-top:18px;text-align:center;font-size:13.5px;color:var(--ink-mute)}
.auth-alt a{color:var(--lila);font-weight:500;text-decoration:underline;text-underline-offset:3px}


/* ===========================================================
   16. MÓDULOS Y LECCIONES
   =========================================================== */
.module-head{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap;
  margin:26px 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);
}
.module-head h3{font-family:var(--serif);font-weight:400;font-size:clamp(20px,2.4vw,26px);letter-spacing:-.01em}
.module-head small{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-mute)}

.lesson-list{
  display:flex;flex-direction:column;background:var(--white);
  border:1px solid var(--line);border-radius:var(--r-m);overflow:hidden;
}
.lesson-item{
  position:relative;display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:14px 42px 14px 16px;border:0;border-bottom:1px solid var(--line-soft);
  background:transparent;color:inherit;font-family:inherit;font-size:14.5px;
  cursor:pointer;transition:background var(--t-fast) ease;
}
.lesson-item:last-child{border-bottom:0}
.lesson-item:hover{background:var(--cream-deep)}
.lesson-item.on{background:var(--cream-deep)}
.lesson-item[aria-disabled="true"],.lesson-item:disabled{opacity:.55;cursor:not-allowed}

/* chevron dibujado en CSS — no requiere markup extra */
.lesson-item::after{
  content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;
  border-right:1.5px solid var(--ink-mute);border-bottom:1.5px solid var(--ink-mute);
  transform:translateY(-50%) rotate(-45deg);
  transition:transform .35s var(--ease),border-color var(--t) ease;
}
.lesson-item:hover::after{border-color:var(--ink);transform:translateY(-50%) translateX(3px) rotate(-45deg)}

.lesson-num{
  flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:var(--cream-deep);border:1px solid var(--line);
  font-size:12px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-soft);
}
.lesson-item.on .lesson-num,.lesson-item:hover .lesson-num{
  background:var(--aqua);border-color:var(--aqua-deep);color:var(--ink);
}
.lesson-title{flex:1 1 auto;min-width:0;font-weight:500;color:var(--ink);line-height:1.4}
.lesson-meta{
  display:block;margin-top:2px;font-size:12px;font-weight:400;
  color:var(--ink-mute);letter-spacing:.02em;
}


/* ===========================================================
   17. VIDEO
   =========================================================== */
.video-frame{
  position:relative;width:100%;aspect-ratio:16/9;background:#000;
  border-radius:12px;overflow:hidden;border:1px solid var(--line);
}
.video-frame iframe,.video-frame video{
  position:absolute;inset:0;width:100%;height:100%;border:0;display:block;
}


/* ===========================================================
   18. MATERIALES DESCARGABLES
   =========================================================== */
.mat-list{display:flex;flex-direction:column;gap:8px}
.mat-item{
  display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color var(--t) ease,background var(--t) ease;
  /* La fila se acomoda en varias lineas antes que empujar la pagina; los hijos
     necesitan `min-width:0` porque un flex item no se encoge por debajo de su
     contenido si no se lo permite explicitamente. */
  flex-wrap:wrap;
}
.mat-item>*{min-width:0}
.mat-item:hover{border-color:rgba(42,33,24,.2);background:var(--cream)}
.mat-name{
  flex:1 1 auto;min-width:0;font-size:14px;font-weight:500;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.mat-size{flex:none;font-size:12px;color:var(--ink-mute);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.mat-item .btn{flex:none}


/* ===========================================================
   19. STEPS (formulario de evaluación)
   =========================================================== */
.steps{
  display:flex;align-items:flex-start;gap:0;margin-bottom:26px;
  overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;
}
.steps::-webkit-scrollbar{display:none}
.step{
  position:relative;flex:1 1 0;min-width:88px;display:flex;flex-direction:column;
  align-items:center;gap:8px;text-align:center;padding-top:2px;
}
/* línea conectora hacia el paso anterior */
.step::before{
  content:"";position:absolute;top:15px;right:50%;left:-50%;height:1.5px;
  background:var(--line);transition:background var(--t) ease;
}
.step:first-child::before{display:none}

.step-n{
  position:relative;z-index:1;flex:none;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;
  background:var(--cream);border:1.5px solid var(--line);
  font-size:12.5px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--ink-mute);
  transition:background var(--t) ease,border-color var(--t) ease,color var(--t) ease;
}
.step-t{
  font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-mute);line-height:1.35;max-width:14ch;transition:color var(--t) ease;
}

.step.on .step-n{background:var(--ink);border-color:var(--ink);color:var(--white)}
.step.on .step-t{color:var(--ink);font-weight:500}
.step.done .step-n{background:var(--aqua);border-color:var(--aqua-deep);color:var(--ink)}
.step.done .step-t{color:var(--ink-soft)}
.step.done::before,.step.on::before{background:var(--aqua-deep)}


/* ===========================================================
   20. CHIPS (opciones seleccionables)
   =========================================================== */
.chip-group{display:flex;flex-wrap:wrap;gap:9px}
.chip{
  position:relative;display:inline-flex;align-items:center;gap:7px;padding:9px 16px;
  border:1px solid var(--line);border-radius:var(--r-pill);background:var(--white);
  font-size:13.5px;line-height:1.35;color:var(--ink-soft);cursor:pointer;
  user-select:none;-webkit-user-select:none;
  transition:background var(--t) ease,border-color var(--t) ease,color var(--t) ease,transform var(--t) var(--ease);
}
.chip:hover{border-color:var(--aqua-deep);background:var(--cream)}
.chip:active{transform:scale(.98)}

/* el input real queda invisible pero sigue siendo clickeable y accesible por teclado */
.chip input[type="radio"],.chip input[type="checkbox"]{
  position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;
  -webkit-appearance:none;appearance:none;
}

/* seleccionado: doble red — la clase .on (JS) y :has() (nativo) */
.chip.on{background:var(--ink);border-color:var(--ink);color:var(--white);font-weight:500}
.chip:has(input:checked){background:var(--ink);border-color:var(--ink);color:var(--white);font-weight:500}

.chip:focus-within{outline:2px solid var(--lila);outline-offset:2px}


/* ===========================================================
   21. DROPZONE DE ARCHIVOS
   =========================================================== */
.drop{
  position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:8px;text-align:center;min-height:150px;padding:24px 18px;
  border:1.5px dashed rgba(42,33,24,.24);border-radius:var(--r-m);
  background:rgba(255,253,250,.6);color:var(--ink-mute);font-size:14px;line-height:1.55;cursor:pointer;
  transition:background var(--t) ease,border-color var(--t) ease,color var(--t) ease;
}
.drop b{
  display:block;font-family:var(--serif);font-weight:400;font-size:20px;
  color:var(--ink);letter-spacing:-.01em;
}
.drop small{font-size:12px;letter-spacing:.04em}
.drop:hover,.drop.over{background:var(--cream-deep);border-color:var(--aqua-deep);color:var(--ink-soft)}
.drop input[type="file"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}

.drop-preview{
  display:flex;align-items:center;gap:12px;margin-top:12px;padding:10px 12px;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);
  font-size:13.5px;color:var(--ink-soft);
}
.drop-preview img{width:52px;height:52px;flex:none;object-fit:cover;border-radius:var(--r-s);background:var(--cream-deep)}
.drop-preview span{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}


/* ===========================================================
   22. SPINNER
   =========================================================== */
.spinner{
  display:inline-block;width:16px;height:16px;flex:none;border-radius:50%;
  border:2px solid rgba(42,33,24,.16);border-top-color:var(--aqua-deep);
  animation:spin .7s linear infinite;vertical-align:-3px;
}
.spinner.lg{width:28px;height:28px;border-width:2.5px}
.btn .spinner{border-color:rgba(255,255,255,.3);border-top-color:#fff}
.btn.ghost .spinner,.btn.danger .spinner{border-color:rgba(42,33,24,.18);border-top-color:var(--ink)}
@keyframes spin{to{transform:rotate(360deg)}}


/* ===========================================================
   23. FOOTER
   =========================================================== */
.p-footer{border-top:1px solid var(--line);background:var(--cream-deep);padding:24px var(--gut);margin-top:auto}
.p-footer .in{
  max-width:1180px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;
  gap:12px 18px;flex-wrap:wrap;font-size:12px;letter-spacing:.05em;color:var(--ink-mute);
}
.p-footer img{height:24px;width:auto;max-width:170px;object-fit:contain;opacity:.72}


/* ===========================================================
   24. UTILIDADES
   =========================================================== */
.mt-0{margin-top:0!important}
.mt-1{margin-top:8px!important}
.mt-2{margin-top:16px!important}
.mt-3{margin-top:26px!important}
.mb-0{margin-bottom:0!important}
.mb-2{margin-bottom:16px!important}

.t-center{text-align:center}
.t-right{text-align:right}
.t-mute{color:var(--ink-mute)}
.t-soft{color:var(--ink-soft)}
.t-accent{color:var(--lila)}
.t-sm{font-size:13px}
.t-num{font-variant-numeric:tabular-nums}

.row{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.row.between{justify-content:space-between}
.row.end{justify-content:flex-end}
.grow{flex:1 1 auto;min-width:0}
.nowrap{white-space:nowrap}
.is-busy{opacity:.55;pointer-events:none}

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;
}


/* ===========================================================
   25. RESPONSIVE
   =========================================================== */
@media(max-width:520px){
  body.portal{font-size:14.5px}
  .p-user>span,.p-user b{max-width:38vw}
  .course-grid{grid-template-columns:1fr;gap:16px}
  .card{border-radius:var(--r)}
  .p-section-head{align-items:flex-start}

  /* modal como hoja inferior en pantallas chicas */
  .modal-back{padding:0;align-items:end}
  .modal{width:100%;max-width:100%;max-height:92vh;border-radius:var(--r-l) var(--r-l) 0 0}
  .modal-foot{justify-content:stretch}
  .modal-foot .btn{flex:1 1 auto}

  .toast-wrap{right:12px;left:12px;bottom:12px;width:auto;align-items:stretch}
  .step{min-width:76px}
  .step-t{font-size:10.5px;letter-spacing:.05em}
}

@media(max-width:380px){
  .btn{padding:10px 18px;font-size:12.5px}
  .p-nav{gap:16px}
}


/* ===========================================================
   26. REDUCED MOTION
   =========================================================== */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
  .course-card:hover{transform:none}
  .btn:hover{transform:none}
  .lesson-item:hover::after{transform:translateY(-50%) rotate(-45deg)}
  .spinner{animation:none;border-top-color:var(--aqua-deep)}
}

/* ===========================================================
   19. LEADS  (.lead-status)
   Select de estado dentro de la tabla de leads. El COLOR del
   propio control comunica en qué punto del embudo está el
   contacto, para poder barrer la columna de un vistazo sin
   sumar un badge que repita el mismo dato.
   =========================================================== */
.lead-status{
  min-width:132px;font-size:13px;padding:7px 10px;font-weight:500;
  border-radius:var(--r-pill);cursor:pointer;
}
.lead-status[data-estado="nuevo"]{background:var(--lila-bg);color:var(--lila);border-color:transparent}
.lead-status[data-estado="contactado"]{background:var(--warn-bg);color:var(--warn-ink);border-color:transparent}
.lead-status[data-estado="convertido"]{background:var(--ok-bg);color:var(--ok-ink);border-color:transparent}
.lead-status:disabled{opacity:.55;cursor:progress}