/* ============================================================
   Mi historia personal · Método Leyva
   Identidad visual: ÍNDIGO & ÁMBAR (Paleta A · v1)
   Estructura en índigo, energía en ámbar, papel cálido de fondo.
   Tipos: Spectral (identidad) · Schibsted Grotesk (UI) · IBM Plex Mono (datos)
   ============================================================ */

:root{
  /* —— paleta A: Índigo & Ámbar —— */
  --ink:#0B0E18; --navy:#1C2B59; --navy-2:#22336B; --brand:#445CA6;
  --accent:#F29863; --accent-2:#E98248; --accent-ink:#54290E;
  --accent-soft:rgba(242,152,99,.18); --brand-soft:rgba(68,92,166,.12);
  --screen:#F3F0E8; --surface:#FCFBF7; --canvas:#F8F5EE; --canvas-2:#F1ECE1;
  /* —— compartido (no cambia entre paletas) —— */
  --rec:#E0503B; --good:#4C7A5C;
  --line:rgba(12,14,22,.13); --line-2:rgba(12,14,22,.24);
  --muted:rgba(12,14,22,.52); --faint:rgba(12,14,22,.36); --ghost:rgba(12,14,22,.22);
  --serif:'Spectral',Georgia,serif;
  --sans:'Schibsted Grotesk',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',monospace;
  --sombra-card:0 6px 18px -12px rgba(12,14,22,.4);
  --sombra-cta:0 12px 26px -12px var(--accent);
  --sombra-pop:0 16px 34px -14px rgba(12,14,22,.6);
  --sombra-node:0 1px 0 rgba(12,14,22,.04), 0 10px 24px -12px rgba(12,14,22,.30);
}

*{box-sizing:border-box}
[hidden]{display:none !important}
html,body{height:100%}
button:focus-visible, .node:focus-visible, input:focus-visible{
  outline:3px solid var(--accent-soft); outline-offset:1px;
}
body{
  margin:0; font-family:var(--sans); color:var(--ink); line-height:1.5;
  background:var(--screen);
  -webkit-font-smoothing:antialiased;
  display:flex; flex-direction:column; overflow:hidden;
}
button{font-family:inherit; color:inherit}

/* lienzo punteado */
.dotgrid{
  background-image:radial-gradient(var(--ghost) 1px, transparent 1.4px);
  background-size:26px 26px;
}

/* ---------- top bar (84px escritorio) ---------- */
.topbar{
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  min-height:84px; padding:0 26px; border-bottom:1px solid var(--line);
  background:var(--screen);
}
.brand{display:flex; align-items:center; gap:15px}
.brand-mark{width:42px;height:42px;color:var(--navy)}
.brand-mark svg{width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round}
.brand h1{font-family:var(--serif); font-size:25px; margin:0; font-weight:700; letter-spacing:-.01em; line-height:1.1}
.brand-sub{margin:2px 0 0; font-size:12.5px; color:var(--muted); font-family:var(--serif); font-style:italic}
.topbar-right{display:flex; align-items:center; gap:18px}
.story-progress{display:flex; align-items:center; gap:4px}
.story-progress i{width:7px;height:7px;border-radius:50%;border:1.4px solid var(--line-2);background:transparent}
.story-progress i.done{background:var(--brand);border-color:var(--brand)}
.story-progress i.cur{border-color:var(--accent-2); box-shadow:0 0 0 3px var(--accent-soft)}

/* ---------- banda índigo (solo en la pestaña Camino) ---------- */
.topbar.banda{
  background:var(--navy); border-bottom:none; flex-wrap:wrap;
  padding:calc(14px + env(safe-area-inset-top, 0px)) 18px 14px;
  min-height:0;
}
.topbar.banda .brand-logo{background:none; box-shadow:none; padding:0; border-radius:0}
.topbar.banda .brand-sub{display:none}
.topbar.banda .story-progress{display:none}
.topbar.banda #btnHelp{display:none}
.banda-count{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:rgba(252,251,247,.78); white-space:nowrap;
}
.banda-help{
  width:30px; height:30px; border-radius:50%; flex:none; cursor:pointer;
  border:1.5px solid rgba(252,251,247,.4); background:none;
  color:rgba(252,251,247,.88); font-size:14px; font-weight:600; line-height:1;
}
.banda-bar{
  flex-basis:100%; height:4px; border-radius:2px;
  background:rgba(252,251,247,.18); margin-top:10px;
}
.banda-bar i{
  display:block; height:100%; border-radius:2px; background:var(--accent);
  width:0; transition:width .3s ease;
}

/* ---------- botones ---------- */
.btn{
  border:none; background:var(--surface); color:var(--navy);
  border-radius:13px; padding:11px 16px; font-size:14px; font-weight:600; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; line-height:1;
  border:1.5px solid var(--line-2);
  transition:transform .07s, box-shadow .15s, background .15s, border-color .15s;
}
.btn:hover{border-color:var(--navy); transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn.primary{
  background:var(--accent); border-color:var(--accent); color:var(--accent-ink);
  box-shadow:var(--sombra-cta);
}
.btn.primary:hover{background:var(--accent-2); border-color:var(--accent-2)}
.btn.ghost{background:transparent; border-color:var(--line-2); color:var(--navy)}
.btn.ghost:hover{border-color:var(--navy)}
.btn.small{padding:8px 12px; font-size:12.5px; border-radius:11px}
.btn.big{padding:14px 22px; font-size:15px; border-radius:14px}
.btn.danger{color:var(--rec)}
.btn.danger:hover{border-color:var(--rec)}
.btn:disabled{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}
.icon-btn{padding:8px 11px; border-color:transparent; background:transparent; font-size:15px; color:var(--muted)}
.icon-btn:hover{color:var(--ink); border-color:var(--line-2)}
.icon-btn svg{width:18px; height:18px; display:block; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.bi{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.bi.big{width:34px;height:34px}

/* ---------- layout ---------- */
/* la sidebar quedó oculta (la timeline es la navegación): una sola columna */
.layout{flex:1; display:grid; grid-template-columns:1fr; min-height:0}

/* ---------- barra lateral (322px) ---------- */
.sidebar{
  border-right:1px solid var(--line); background:var(--screen);
  display:flex; flex-direction:column; min-height:0;
}
.side-section{padding:16px 14px 10px; display:flex; flex-direction:column; min-height:0; flex:1}
.side-title{
  font-family:var(--serif); font-size:15px; margin:0 6px 12px; font-weight:700; letter-spacing:-.005em;
  display:flex; align-items:baseline; justify-content:space-between; gap:8px;
}
.side-range,.side-hint{
  font-family:var(--mono); font-size:10px; color:var(--faint); font-weight:500;
  text-transform:uppercase; letter-spacing:.12em;
}
.unit-list{
  overflow:auto; min-height:0; padding:2px 2px 24px;
  -webkit-mask-image:linear-gradient(180deg,#000 calc(100% - 26px), transparent);
          mask-image:linear-gradient(180deg,#000 calc(100% - 26px), transparent);
}
.unit{
  display:flex; align-items:center; gap:11px; width:100%; position:relative;
  border:1.5px solid transparent; background:transparent; border-radius:16px;
  padding:9px 11px; margin-bottom:4px; cursor:pointer; text-align:left; font-size:13px; color:var(--ink);
}
.unit:hover{background:var(--surface); border-color:var(--line)}
.unit.active{
  background:var(--surface); border-color:var(--line-2); box-shadow:var(--sombra-card);
}
.unit.active::before{
  content:""; position:absolute; left:-1.5px; top:9px; bottom:9px; width:3.5px;
  border-radius:4px; background:var(--accent);
}
.unit .u-num{
  min-width:30px; height:30px; padding:0 7px; border:1.5px solid var(--line-2); border-radius:9px;
  display:grid; place-items:center; font-family:var(--mono); font-size:11.5px; font-weight:600;
  color:var(--navy); background:var(--surface); white-space:nowrap;
}
.unit.active .u-num{border-color:var(--navy); background:var(--navy); color:#fff}
.unit .u-name{flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  line-height:1.3; font-family:var(--serif); font-weight:600; font-size:14.5px}
.unit .u-name small{display:block; font-family:var(--sans); font-weight:400; font-size:11.5px;
  color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.unit .u-state{display:flex; gap:4px; align-items:center}
.unit .u-state .st{width:8px;height:8px;border-radius:50%;border:1.4px solid var(--line-2)}
.unit .u-state .st.img{background:var(--good); border-color:var(--good)}
.unit .u-state .st.rec{background:var(--brand); border-color:var(--brand)}
.unit.extra .u-num{border-style:dashed}

/* grabaciones */
.recordings{overflow:auto; min-height:0; padding:0 2px}
.rec-empty{font-size:12.5px; color:var(--muted); line-height:1.55; padding:10px 8px}
.rec-item{
  background:var(--surface); border:1.5px solid var(--line); border-radius:16px;
  padding:9px 11px; margin-bottom:8px; display:flex; align-items:center; gap:10px;
}
.rec-item.playing{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.rec-item .r-play{
  width:34px;height:34px; min-width:34px; border-radius:11px; border:none;
  background:var(--navy); color:#fff; cursor:pointer; display:grid; place-items:center; font-size:11px;
}
.rec-item .r-play:hover{background:var(--navy-2)}
.rec-item .r-play svg{width:17px; height:17px; fill:currentColor; stroke:none}
.rec-item .r-meta{flex:1; min-width:0}
.rec-item .r-title{font-size:13px; font-weight:700}
.rec-item .r-sub{font-family:var(--mono); font-size:10px; color:var(--muted); margin-top:1px}
.rec-item .r-actions{display:flex; gap:2px}
.rec-item .r-actions button{border:0; background:none; cursor:pointer; color:var(--faint); font-size:14px;
  min-width:28px; min-height:28px; border-radius:9px; display:grid; place-items:center}
.rec-item .r-actions button:hover{background:var(--canvas-2); color:var(--ink)}
.rec-item .r-actions button.del:hover{color:var(--rec)}
.rec-item .r-actions button svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}

/* ---------- main ---------- */
.main{display:flex; flex-direction:column; min-height:0; padding:20px 26px 18px}
/* cabecera compacta de la lección: volver · título temático centrado */
.lesson-head{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:8px; padding:6px 0 2px}
.lesson-head .back-btn{justify-self:start}
.lesson-nav{justify-self:end; display:flex; gap:6px}
.lnav-btn{width:34px; height:34px; border:1px solid var(--line-2); background:var(--surface);
  border-radius:10px; display:inline-flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--navy); padding:0}
.lnav-btn svg{width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round}
.lnav-btn:hover{border-color:var(--navy)}
.lnav-btn:disabled{opacity:.32; cursor:default}
.lnav-btn:disabled:hover{border-color:var(--line-2)}
.lesson-title{
  font-family:var(--serif); font-size:20px; margin:0; font-weight:600;
  letter-spacing:-.01em; line-height:1.2; text-align:center;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;
}

/* consignas: tarjeta desplegable — abiertas la primera visita */
.consignas-toggle{
  width:100%; display:flex; align-items:center; gap:9px; cursor:pointer;
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:10px 13px; margin:8px 0 0; font:inherit; color:inherit; text-align:left;
}
.consignas-toggle .bi{width:16px; height:16px; flex:none; fill:none; stroke:var(--navy); stroke-width:2; stroke-linecap:round}
.ct-label{flex:1; font-size:13.5px; font-weight:600}
.ct-count{font-family:var(--mono); font-size:11px; color:var(--faint)}
.ct-chevron{transition:transform .15s ease}
.consignas-toggle[aria-expanded="true"] .ct-chevron{transform:rotate(180deg)}
.consignas-body{
  background:var(--surface); border:1px solid var(--line); border-radius:13px;
  padding:12px 15px; margin-top:6px;
}
.lesson-regla{
  margin:10px 0 0; font-size:13px; color:var(--navy); font-weight:600;
  border-top:1px dashed var(--line); padding-top:9px;
}
.lesson-apply{margin:0; padding-left:20px; max-width:980px}
.lesson-apply li{font-size:15px; line-height:1.5; color:var(--ink); margin-bottom:3px}
.lesson-apply li::marker{color:var(--accent-2)}
.lesson-example{margin:8px 0 0; font-size:14px; color:var(--good); font-family:var(--serif); font-style:italic}
.lesson-note{margin:8px 0 0; font-size:13px; color:var(--muted); max-width:980px; line-height:1.5;
  border-left:3px solid var(--accent); background:var(--accent-soft);
  border-radius:0 10px 10px 0; padding:8px 12px}

/* tabs de esquemas — chips */
.scheme-tabs{display:flex; gap:8px; margin:14px 0 10px; flex-wrap:wrap}
.scheme-tabs:empty{display:none}
.stab{
  border:1.5px solid var(--line-2); background:transparent; color:var(--navy);
  border-radius:12px; padding:8px 14px; font-size:13px; font-weight:600; cursor:pointer; text-align:left;
}
.stab:hover{border-color:var(--navy)}
.stab .stab-hint{display:block; font-weight:400; font-size:11px; color:var(--muted); max-width:220px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.stab.active{background:var(--navy); border-color:var(--navy); color:#fff}
.stab.active .stab-hint{color:rgba(255,255,255,.62)}

/* ---------- lienzo de la red mental ---------- */
.stage-wrap{
  flex:1; min-height:0; display:flex; flex-direction:column; margin-top:4px;
  border:1.5px solid var(--line-2); border-radius:22px; background:var(--canvas);
  box-shadow:var(--sombra-card); overflow:hidden;
}
.scheme-tabs:empty + .stage-wrap{margin-top:14px}
.stage{
  position:relative; flex:1; min-height:0; overflow:hidden; touch-action:none;
  background-image:radial-gradient(var(--ghost) 1px, transparent 1.4px);
  background-size:26px 26px;
}
.edges{position:absolute; inset:0; width:100%; height:100%; pointer-events:none}
.edges path{fill:none; stroke:var(--navy); stroke-width:1.75; stroke-linecap:round; opacity:.30}

.node{
  position:absolute; transform:translate(-50%,-50%); cursor:grab; user-select:none;
  -webkit-user-select:none; touch-action:none; z-index:2;
}
.node:active{cursor:grabbing}
.node .shape{
  display:grid; place-items:center; overflow:hidden; background:var(--surface);
  border:2px solid var(--navy); position:relative; box-shadow:var(--sombra-node);
  transition:box-shadow .15s, border-color .15s;
}
.node.square .shape{width:120px;height:98px;border-radius:22px;border-width:2.5px}
.node.circle .shape{width:94px;height:94px;border-radius:50%}
.node:hover .shape{box-shadow:0 0 0 4px var(--brand-soft), var(--sombra-node)}
.node.selected .shape{box-shadow:0 0 0 4px var(--accent-soft), var(--sombra-node); border-color:var(--accent-2)}
.node .shape .empty-mark{color:var(--faint); font-size:28px; font-weight:300; line-height:1}
.node .shape img{width:100%; height:100%; object-fit:cover}
.node .shape svg.icon{width:46%; height:46%; fill:none; stroke:var(--navy); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.node .shape svg.sketch{width:100%; height:100%}
.node .tag{
  position:absolute; left:50%; transform:translateX(-50%); bottom:-19px;
  font-family:var(--mono); font-size:9px; letter-spacing:.13em; text-transform:uppercase;
  color:var(--faint); white-space:nowrap; font-weight:500;
}

/* menú de opciones del nodo (vertical) */
.node-tools{
  position:absolute; z-index:6; display:flex; flex-direction:column; gap:1px;
  background:var(--surface); min-width:208px;
  border:1.5px solid var(--line-2); border-radius:16px; padding:6px; box-shadow:var(--sombra-pop);
  transform:translate(-50%,0);
}
.node-tools button{
  border:0; background:transparent; cursor:pointer; font-size:13px; font-weight:600;
  color:var(--navy); padding:9px 12px; border-radius:10px; white-space:nowrap; min-height:38px;
  display:flex; align-items:center; gap:10px; text-align:left;
}
.node-tools button svg{
  width:16px; height:16px; flex:0 0 auto; fill:none; stroke:currentColor;
  stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; opacity:.8;
}
.node-tools button:hover{background:var(--brand-soft)}
.node-tools button.danger{color:var(--rec)}
.node-tools button.danger:hover{background:rgba(224,80,59,.1)}
.node-tools .nt-sep{height:1px; background:var(--line); margin:4px 6px}

.stage-tools{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  border-top:1px dashed var(--line-2); padding:9px 14px; background:var(--canvas);
}
.stage-tools-left{display:flex; gap:8px; flex-wrap:wrap}
.stage-hint{margin:0; font-size:12px; color:var(--muted)}
.stage-hint b{color:var(--navy)}

/* modo conectar */
.stage.connecting{cursor:crosshair}
.stage.connecting .node{cursor:crosshair}
.stage.connecting .node .shape{box-shadow:0 0 0 3px rgba(76,122,92,.18), var(--sombra-node)}
.stage.connecting .node:hover .shape{box-shadow:0 0 0 4px var(--good), var(--sombra-node)}

/* ---------- acciones ---------- */
.actions{display:flex; justify-content:flex-end; gap:10px; padding-top:14px; flex-wrap:wrap}
.actions .btn.big{padding:12px 16px; font-size:14px; white-space:nowrap}

/* ---------- confirmación en la app ---------- */
.modal.confirm{width:min(420px, calc(100vw - 48px))}
.confirm-body{padding:22px 24px 4px; font-size:14.5px; line-height:1.55; white-space:pre-line}
.confirm-actions{display:flex; justify-content:flex-end; gap:10px; padding:18px 20px}
.btn.danger-bg{background:var(--rec); border-color:var(--rec); color:#fff; box-shadow:0 12px 26px -12px var(--rec)}
.btn.danger-bg:hover{filter:brightness(1.06)}

/* ---------- menú inferior (Mi historia · Mis grabaciones · Mi perfil) ---------- */
.appnav{
  display:flex; align-items:stretch; justify-content:center; gap:6px;
  border-top:1px solid var(--line-2); background:var(--surface);
  padding:6px 10px; z-index:35;
}
.anav{
  border:none; background:transparent; cursor:pointer; border-radius:12px;
  display:flex; align-items:center; gap:8px; padding:9px 18px;
  font-size:13px; font-weight:600; color:var(--muted); min-height:44px;
}
.anav .bi{width:17px;height:17px}
.anav:hover{color:var(--navy); background:var(--brand-soft)}
.anav.active{color:var(--navy); background:var(--brand-soft)}

/* ---------- páginas de sección ---------- */
.view-page{flex:1; min-height:0; overflow:auto; background:var(--screen)}

/* modo inmersivo: dentro de una feature la barra inferior desaparece y la
   página recupera el espacio que la barra reservaba abajo */
body.immersive .appnav{display:none}
body.immersive .view-page{padding-bottom:env(safe-area-inset-bottom)}
/* sin barra inferior, la barra de acción del reto vuelve al borde (ya no se
   eleva 64px para librar el menú, que ahora está oculto) */
body.immersive .reto-actions{bottom:env(safe-area-inset-bottom)}
/* la barra de acciones de la lección estaba elevada 56px para librar el menú
   (ya oculto): bájala al borde para que no quede un hueco */
body.immersive .actions{bottom:env(safe-area-inset-bottom)}
/* la lección reservaba 132px abajo para el menú fijo (ya oculto): recupéralo */
body.immersive .main{padding-bottom:calc(env(safe-area-inset-bottom) + 86px)}

/* FAB del asistente IA: botón flotante en pantallas de práctica
   (lección, reto, módulo avanzado). Cuadrado redondeado (design system),
   por debajo del overlay del asistente (z-index 60). */
.asist-fab{
  display:none; position:fixed; right:16px; z-index:30;
  bottom:calc(env(safe-area-inset-bottom) + 84px);
  width:52px; height:52px; border:none; border-radius:16px; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); box-shadow:var(--sombra-cta);
  align-items:center; justify-content:center; padding:0; transition:transform .12s ease;
}
body.has-asist .asist-fab{display:inline-flex}
.asist-fab svg{width:26px; height:26px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.asist-fab:hover{transform:translateY(-2px)}
.asist-fab:active{transform:translateY(1px)}
.page-inner{max-width:640px; margin:0 auto; padding:28px 22px 40px}
.page-title{font-family:var(--serif); font-size:28px; font-weight:700; letter-spacing:-.015em; margin:0 0 6px}
.page-sub{font-size:14px; color:var(--muted); margin:0 0 18px; line-height:1.55}
.view-page .recordings{overflow:visible}
.view-page .rec-item{padding:12px 14px}
.view-page .rec-item .r-play{width:40px;height:40px;min-width:40px}

/* perfil */
.profile-card{
  display:flex; align-items:center; gap:20px; background:var(--surface);
  border:1.5px solid var(--line-2); border-radius:22px; padding:22px; box-shadow:var(--sombra-card);
}
.profile-avatar{
  width:72px; height:72px; min-width:72px; border-radius:50%; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--navy); border:2px solid var(--navy);
}
.profile-stats{flex:1; display:flex; gap:22px; flex-wrap:wrap}
.pstat{display:flex; flex-direction:column; gap:3px}
.pstat-n{font-family:var(--mono); font-size:19px; font-weight:600; color:var(--navy)}
.pstat-n small{font-size:12px; color:var(--faint)}
.pstat-l{font-size:11.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.07em; font-weight:500}
.profile-soon{margin-top:16px; font-family:var(--serif); font-style:italic}
/* sesión (correo + salir) — pie discreto del perfil */
.profile-session{margin-top:26px; padding-top:16px; border-top:1px solid var(--line);
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap}
.profile-email{font-size:13.5px; color:var(--muted); font-family:var(--mono); word-break:break-all}

/* ---------- modales ---------- */
.modal-backdrop{
  position:fixed; inset:0; z-index:40; background:rgba(8,9,14,.42);
  display:grid; place-items:center; backdrop-filter:blur(3px);
}
.modal{
  background:var(--screen); border:1px solid var(--line-2); border-radius:22px;
  box-shadow:var(--sombra-pop); width:min(640px, calc(100vw - 48px));
  max-height:calc(100vh - 64px); display:flex; flex-direction:column; overflow:hidden;
}
.modal-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.modal-head h2{font-family:var(--serif); font-size:20px; font-weight:700; margin:0; letter-spacing:-.01em}
.modal-foot{
  border-top:1px dashed var(--line-2); padding:10px 16px;
  display:flex; justify-content:space-between; align-items:center; gap:12px;
}
.no-write-reminder{
  font-size:12.5px; font-weight:600; color:var(--accent-2); white-space:nowrap;
}

/* selector de imagen (sin pestañas: el modo ya se eligió en el menú del nodo) */
.ptab-panel{padding:14px 16px; overflow:auto; min-height:0}
.picker-tip{margin:10px 2px 0; font-size:12.5px; color:var(--muted)}
.picker-tip b{color:var(--navy)}

/* dibujo */
.draw-wrap{display:grid; place-items:center}
/* el lienzo toma la forma del nodo: círculo para complementos,
   cuadro redondeado (proporción 120x98) para el sujeto */
#drawCanvas{
  background:var(--surface); border:1.5px solid var(--line-2);
  border-radius:18.3% / 22.4%; /* esquinas del cuadro del sujeto, a escala */
  cursor:crosshair; touch-action:none; width:460px; max-width:100%;
}
#drawCanvas.redondo{border-radius:50%}
.draw-tools{display:flex; align-items:center; gap:7px; margin-top:12px; flex-wrap:wrap}
.draw-colors{display:flex; gap:6px}
.draw-colors button{
  width:28px;height:28px;border-radius:50%; border:2px solid transparent; cursor:pointer; padding:0;
}
.draw-colors button.active{border-color:var(--surface); box-shadow:0 0 0 2px var(--navy)}
.draw-widths{display:flex; gap:4px; align-items:center}
.draw-widths button{
  width:30px;height:30px;border-radius:11px; border:1.5px solid var(--line-2); background:var(--surface);
  cursor:pointer; display:grid; place-items:center; padding:0;
}
.draw-widths button.active{border-color:var(--navy); background:var(--brand-soft)}
.draw-widths button i{display:block; border-radius:50%; background:var(--navy)}
.draw-sep{width:1px; height:20px; background:var(--line-2)}
.draw-spacer{flex:1}
#drawEraser.active{border-color:var(--rec); color:var(--rec)}

/* íconos */
.icon-search{
  width:100%; border:1.5px solid var(--line-2); border-radius:12px; background:var(--surface);
  padding:11px 14px; font-size:14px; color:var(--ink); outline:none; margin-bottom:10px;
  font-family:var(--sans);
}
.icon-search:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.icon-grid{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(54px,1fr)); gap:6px;
  max-height:300px; overflow:auto; padding:2px;
}
.icon-grid button{
  aspect-ratio:1; border:1.5px solid var(--line); border-radius:12px; background:var(--surface);
  cursor:pointer; display:grid; place-items:center; padding:10px;
}
.icon-grid button:hover{border-color:var(--brand); background:var(--brand-soft)}
.icon-grid button svg{width:100%; height:100%; fill:none; stroke:var(--navy); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round}
.icon-none{grid-column:1/-1; text-align:center; color:var(--muted); font-size:13px; padding:18px 0}

/* foto */
.photo-drop{
  display:flex; flex-direction:column; align-items:center; gap:9px; text-align:center;
  border:2px dashed var(--line-2); border-radius:16px; padding:34px 20px; cursor:pointer;
  color:var(--muted); font-size:14px; transition:border-color .15s, background .15s;
}
.photo-drop:hover,.photo-drop.over{border-color:var(--brand); background:var(--brand-soft); color:var(--ink)}
.photo-drop .bi{color:var(--brand)}
.photo-hint{font-size:12px; color:var(--faint); max-width:380px}
.photo-preview{display:flex; flex-direction:column; align-items:center; gap:10px}
.photo-preview img{max-width:100%; max-height:280px; border-radius:16px; border:1.5px solid var(--line-2)}
.photo-preview-actions{display:flex; gap:8px}

/* ---------- modo foco: teleprompter ---------- */
.prompter{
  position:fixed; inset:0; z-index:50; display:flex; flex-direction:column;
  background:var(--screen);
}
.prompter.recording{background:var(--canvas-2)}
.prompter-head{
  display:flex; align-items:center; gap:18px; min-height:74px; padding:0 22px;
  border-bottom:1px solid var(--line);
}
.prompter-title{display:flex; align-items:center; gap:13px; min-width:230px}
.prompter-mode{
  font-family:var(--mono); font-size:11px; font-weight:600; letter-spacing:.14em; text-transform:uppercase;
  color:var(--navy); border:1.5px solid var(--navy); border-radius:999px; padding:5px 12px;
  display:inline-flex; align-items:center; gap:7px;
}
.prompter.recording .prompter-mode{color:var(--rec); border-color:var(--rec)}
.prompter.recording .prompter-mode::before{
  content:""; width:7px; height:7px; border-radius:50%; background:var(--rec);
  animation:blink 1.4s infinite;
}
@keyframes blink{0%,100%{opacity:1}50%{opacity:.35}}
.prompter-lesson{font-family:var(--serif); font-size:24px; font-weight:700; letter-spacing:-.01em}
.prompter-dots{flex:1; display:flex; gap:5px; flex-wrap:wrap; justify-content:center}
.prompter-dots button{
  min-width:30px; height:27px; border-radius:9px; border:1.5px solid var(--line-2);
  background:transparent; font-family:var(--mono); font-size:11px; font-weight:600;
  color:var(--muted); cursor:pointer; padding:0 7px;
}
.prompter-dots button.done{background:rgba(76,122,92,.12); border-color:var(--good); color:var(--good)}
.prompter-dots button.cur{background:var(--navy); border-color:var(--navy); color:#fff}

/* el cuerpo usa TODO el ancho: las flechas flotan sobre los bordes */
.prompter-body{flex:1; min-height:0; display:flex; align-items:stretch; padding:10px 12px; position:relative}
.prompter-nav{
  position:absolute; top:50%; transform:translateY(-50%); z-index:8;
  width:52px; height:52px; border:1.5px solid var(--line-2);
  background:color-mix(in srgb, var(--surface) 88%, transparent); backdrop-filter:blur(3px);
  font-size:26px; color:var(--navy);
  cursor:pointer; border-radius:50%; display:grid; place-items:center;
  box-shadow:var(--sombra-card);
}
.prompter-nav.prev{left:18px}
.prompter-nav.next{right:18px}
.prompter-nav:hover{border-color:var(--navy)}
.prompter-nav:disabled{opacity:.25; cursor:default; border-color:var(--line)}
.prompter-stage-area{flex:1; min-width:0; display:flex; flex-direction:column; min-height:0}
/* las consignas del teleprompter se LEEN mientras se habla: tinta, no gris */
.prompter-prompts{padding:2px 10px 8px}
.prompter-prompts ul{margin:0; padding-left:18px}
.prompter-prompts li{font-size:14.5px; color:var(--ink); line-height:1.5}
.prompter-prompts li::marker{color:var(--accent-2)}
.prompter-nets{
  flex:1; min-height:0; display:flex; gap:14px; align-items:stretch; justify-content:flex-start;
  overflow-x:auto; padding:4px 2px 10px;
}
.prompter-net{
  position:relative; flex:1; min-width:280px; margin-inline:auto;
  border:1.5px solid var(--line-2); border-radius:22px; background:var(--canvas); overflow:hidden;
  box-shadow:var(--sombra-card);
  background-image:radial-gradient(var(--ghost) 1px, transparent 1.4px);
  background-size:26px 26px;
}
.prompter-net .pn-label{
  position:absolute; top:10px; left:14px; z-index:3;
  font-family:var(--mono); font-size:10px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--faint);
}
.prompter-net .pn-stage{position:absolute; inset:0}
/* redes compactas dentro del teleprompter */
.prompter-net .node.square .shape{width:94px;height:78px;border-radius:18px}
.prompter-net .node.circle .shape{width:76px;height:76px}

.prompter-foot{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:14px;
  min-height:96px; padding:10px 22px; border-top:1px solid var(--line);
}
.prompter-left{justify-self:start}
.prompter-center{display:flex; flex-direction:column; align-items:center; gap:6px}
.prompter-right{justify-self:end; max-width:340px; text-align:right}
.prompter-tip{font-size:12px; color:var(--faint)}

.rec-btn{
  display:flex; align-items:center; gap:11px; border:none; background:var(--rec);
  color:#fff; font-size:15px; font-weight:700; padding:15px 30px; border-radius:999px; cursor:pointer;
  box-shadow:0 12px 26px -12px var(--rec); position:relative;
}
.rec-btn:hover{filter:brightness(1.06)}
.rec-btn .rec-dot{width:13px;height:13px;border-radius:50%;background:#fff; transition:border-radius .2s}
.rec-btn.armed{background:var(--surface); color:var(--rec); box-shadow:0 0 0 1.5px var(--rec)}
.rec-btn.armed .rec-dot{background:var(--rec); border-radius:3px} /* cuadrado de stop */
.rec-btn.armed::after{
  content:""; position:absolute; inset:-7px; border-radius:999px;
  border:2.5px solid rgba(224,80,59,.35); animation:pulse-ring 1.6s ease-out infinite;
  pointer-events:none;
}
@keyframes pulse-ring{
  0%{transform:scale(.97); opacity:1}
  100%{transform:scale(1.07); opacity:0}
}
.rec-timer{
  font-family:var(--mono); font-variant-numeric:tabular-nums; font-size:16px;
  color:var(--muted); font-weight:600;
}
.prompter.recording .rec-timer{color:var(--rec)}

/* ---------- ayuda ---------- */
.modal.help{width:min(720px, calc(100vw - 48px))}
.help-body{padding:20px 24px 22px; overflow:auto}
.help-intro{font-size:15px; line-height:1.6; margin:0 0 16px}
.help-intro b{color:var(--navy)}
.help-steps{margin:0; padding-left:22px}
.help-steps li{font-size:14px; line-height:1.6; margin-bottom:10px}
.help-steps li::marker{font-family:var(--mono); font-weight:600; color:var(--accent-2)}
.help-foot{font-size:13.5px; color:var(--muted); line-height:1.55; font-family:var(--serif);
  font-style:italic; margin:16px 0 18px}
.help-body .btn.big{width:100%; justify-content:center}

/* ---------- toast ---------- */
.toast{
  position:fixed; left:50%; bottom:26px; transform:translate(-50%,8px); z-index:80;
  background:var(--navy); color:#fff; font-size:13.5px; font-weight:600;
  padding:12px 20px; border-radius:13px; box-shadow:var(--sombra-pop); pointer-events:none;
  opacity:0; transition:opacity .18s ease-out, transform .18s ease-out;
  max-width:calc(100vw - 40px);
}
.toast.show{opacity:1; transform:translate(-50%,0)}

/* ---------- reduce motion ---------- */
@media (prefers-reduced-motion: reduce){
  .rec-btn.armed::after{animation:none; opacity:.7}
  .prompter.recording .prompter-mode::before{animation:none}
  *{transition:none !important}
}

/* ============================================================
   MÓVIL (≤ 720px) — una columna:
   app bar compacta · ribbon horizontal de lecciones · lienzo ·
   acciones fijas al pie · grabaciones al final · picker = bottom sheet
   ============================================================ */
@media (max-width: 720px){
  body{overflow:auto}
  .layout{display:flex; flex-direction:column; overflow:visible}

  /* app bar 56px */
  .topbar{min-height:56px; padding:8px 14px}
  .brand-mark{width:30px;height:30px}
  .brand h1{font-size:18px}
  .brand-sub{display:none}
  .story-progress{display:none}
  .btn#btnHelp{padding:8px 11px; font-size:12px}

  /* el sidebar se disuelve: lecciones = ribbon horizontal */
  .sidebar{display:contents}
  .side-section:first-child{
    order:0; flex:none; padding:10px 0 0; border-bottom:1px solid var(--line);
    background:var(--screen); position:sticky; top:0; z-index:20;
  }
  .side-title{margin:0 16px 8px}
  .unit-list{
    display:flex; flex-direction:row; gap:6px; overflow-x:auto; overflow-y:hidden;
    padding:2px 14px 10px; -webkit-mask-image:none; mask-image:none;
    -webkit-overflow-scrolling:touch;
  }
  .unit{
    flex:0 0 auto; width:auto; margin-bottom:0; padding:7px 9px; border-radius:12px;
    border-color:var(--line-2); background:var(--surface);
  }
  .unit.active{background:var(--navy); border-color:var(--navy)}
  .unit.active::before{display:none}
  .unit .u-num{min-width:26px; height:26px; padding:0 6px; border-radius:7px}
  .unit.active .u-num{background:transparent; border-color:rgba(255,255,255,.4); color:#fff}
  .unit .u-name{display:none}        /* chip = número de lección */
  .unit .u-state .st{width:7px;height:7px}
  .unit .u-state .st:not(.img):not(.rec){display:none}

  .main{order:1; flex:none; padding:14px 14px 132px} /* aire para acciones + menú fijos */
  .lesson-title{font-size:17px}
  .lesson-apply li{font-size:14px}
  .scheme-tabs{flex-wrap:nowrap; overflow-x:auto; padding-bottom:2px}
  .stab{flex:0 0 auto}
  .stab .stab-hint{display:none}

  .stage-wrap{min-height:54vh}
  .stage{min-height:46vh}
  .node.square .shape{width:104px;height:86px;border-radius:18px}
  .node.circle .shape{width:84px;height:84px}
  .stage-tools{flex-direction:column; align-items:flex-start; gap:8px; padding:10px 12px}
  .stage-hint{font-size:11.5px}

  /* acciones fijas justo encima del menú inferior */
  .actions{
    position:fixed; left:0; right:0; bottom:calc(56px + env(safe-area-inset-bottom)); z-index:30;
    background:var(--surface); border-top:1px solid var(--line);
    padding:9px 14px; display:flex; gap:10px;
  }
  .actions{flex-wrap:nowrap}
  .actions .btn.big{padding:12px 12px; font-size:13px; min-height:48px}
  .actions #btnListenLesson,.actions #btnPractice{flex:0 1 auto; min-width:0}
  .actions #btnRecord{flex:1; justify-content:center}
  .actions .act-lbl{display:none}
  /* el modal de confirmación se queda centrado también en móvil (no bottom-sheet) */
  .modal.confirm{width:min(380px, calc(100vw - 32px)); border-radius:22px; margin-bottom:24vh}
  .modal.confirm::before{display:none}

  /* menú inferior fijo */
  .appnav{
    position:fixed; left:0; right:0; bottom:0; height:calc(56px + env(safe-area-inset-bottom));
    padding:4px 6px calc(4px + env(safe-area-inset-bottom));
    justify-content:space-around; gap:0;
  }
  .anav{flex-direction:column; gap:3px; padding:5px 10px; font-size:10.5px; min-height:0; flex:1}
  .anav .bi{width:19px;height:19px}

  /* páginas de sección con aire para el menú */
  .view-page{padding-bottom:calc(64px + env(safe-area-inset-bottom))}
  /* la barra del reto se queda justo encima del menú inferior fijo
     (64px = padding inferior de .view-page → sin salto al pegarse) */
  .reto-actions{bottom:calc(64px + env(safe-area-inset-bottom))}
  .page-inner{padding:20px 16px 28px}
  .profile-card{flex-direction:column; text-align:center}
  .profile-stats{justify-content:center}

  /* modales = bottom sheet */
  .modal-backdrop{place-items:end center; padding:0}
  .modal{
    width:100vw; max-width:100vw; max-height:88vh;
    border-radius:26px 26px 0 0; border-bottom:none;
  }
  .modal::before{ /* grabber */
    content:""; display:block; width:40px; height:5px; border-radius:99px;
    background:var(--ghost); margin:9px auto 0;
  }
  .modal-head{padding:8px 14px 12px}
  #drawCanvas{width:100%}
  .icon-grid{max-height:38vh}
  .modal-foot{flex-direction:column-reverse; align-items:stretch; gap:8px; text-align:center}
  .no-write-reminder{white-space:normal}

  /* teleprompter en vertical */
  .prompter-head{flex-wrap:wrap; min-height:0; padding:10px 12px; gap:8px}
  .prompter-title{min-width:0; gap:9px}
  .prompter-lesson{font-size:19px}
  .prompter-dots{order:3; flex:1 0 100%; justify-content:flex-start; overflow-x:auto; flex-wrap:nowrap; padding-bottom:6px}
  .prompter-dots button{flex:0 0 auto}
  #prompterClose{margin-left:auto}
  .prompter-body{padding:8px}
  .prompter-nav{width:42px; height:42px; font-size:20px}
  .prompter-nav.prev{left:8px}
  .prompter-nav.next{right:8px}
  .prompter-prompts{padding:2px 4px 8px}
  .prompter-prompts li{font-size:12.5px}
  .prompter-nets{flex-direction:column; overflow-y:auto; overflow-x:hidden; gap:10px; padding:2px 2px 8px}
  .prompter-net{min-width:0; width:100%; min-height:320px; margin:0; flex:1 0 auto}
  .prompter-foot{
    grid-template-columns:1fr; min-height:0; gap:8px; padding:10px 14px calc(12px + env(safe-area-inset-bottom));
    text-align:center;
  }
  .prompter-left,.prompter-right{justify-self:center; text-align:center}
  .prompter-right{display:none} /* el tip de teclado no aplica en táctil */
  .rec-btn{width:100%; justify-content:center; min-height:58px}
}

/* pantallas medianas: sidebar más angosta */
@media (min-width: 721px) and (max-width: 1080px){
  .layout{grid-template-columns:260px 1fr}
  .node.square .shape{width:104px;height:86px}
  .node.circle .shape{width:84px;height:84px}
}

/* ============ Camino (línea de tiempo, home) ============ */
.cam-head{padding:6px 4px 0}
.cam-head .page-title{margin-bottom:2px}
.camino{list-style:none;margin:10px 0 0;padding:14px 2px 90px;position:relative}
.camino::before{
  content:"";position:absolute;left:21px;top:20px;bottom:60px;width:0;
  border-left:2px solid var(--line);
}
.est{position:relative;padding:0 0 12px}
/* número de estación: pastilla — círculo con 1-2 cifras, píldora con rangos ("12-13") */
.est-num{
  position:relative;display:flex;align-items:center;justify-content:center;
  min-width:34px;height:34px;padding:0 7px;border-radius:17px;flex:none;
  background:var(--surface);border:2px solid var(--navy);color:var(--navy);
  font-family:var(--serif);font-weight:700;font-size:13.5px;
  margin-left:5px;z-index:1;
}

/* ---------- espinha contínua ---------- */
.cam-head .page-title{font-size:24px}

/* fila de estación: número + título + estado, siempre desplegable */
.est-row{
  display:flex; align-items:center; gap:12px; width:100%; min-height:44px;
  background:none; border:none; cursor:pointer; font:inherit; color:inherit;
  text-align:left; padding:2px 0;
}
.est-row-title{flex:1; font-family:var(--serif); font-weight:600; font-size:15px}
.est-row-check{color:var(--good); flex:none}
.est-row-check svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.est.hecha .est-num{background:var(--navy);color:var(--surface)}
/* fondo opaco: la línea del camino no debe cortar el círculo ni el número */
.est.futura .est-num{border-color:var(--ghost); color:var(--faint); background:var(--screen)}
.est.futura .est-row-title{color:var(--muted); font-weight:500}
.est.actual .est-num{border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-soft)}
.est-body{padding:4px 0 10px 51px}

/* card desplegable de la estación: mismo acabado en todos los estados */
.est-card{
  background:var(--surface); border:1px solid var(--line-2); border-radius:16px;
  padding:12px 15px 13px; box-shadow:var(--sombra-card);
}
.est-card.actual{border:2px solid var(--accent)}
.est-card.hecha{border-color:rgba(76,122,92,.45)}
.est-kicker{
  font-family:var(--mono); font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; margin:0 0 3px; color:var(--muted);
}
.est-card.actual .est-kicker{color:var(--accent-ink)}
.est-card.hecha .est-kicker{color:var(--good)}
.est-cta{width:100%; justify-content:center; margin-top:10px}
.paso{
  display:flex; align-items:center; gap:10px; width:100%; min-height:44px;
  background:none; border:none; border-top:1px dashed var(--line);
  cursor:pointer; font:inherit; color:inherit; text-align:left; padding:8px 2px;
}
.paso-icon{width:28px; height:28px; border-radius:8px; background:var(--brand-soft); display:flex; align-items:center; justify-content:center; flex:none; color:var(--navy)}
.paso-icon svg{width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.paso-title{font-weight:600; font-size:13.5px; flex:1}
.paso .fichitas{margin:0; flex:none}
.paso-sub{font-size:12px; color:var(--muted); flex:0 1 auto; min-width:0; text-align:right}
.paso-mark{color:var(--faint); flex:none}
.paso-mark svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.paso.hecho .paso-icon{background:rgba(76,122,92,.13); color:var(--good)}
.paso.hecho .paso-mark{color:var(--good)}
.fichitas{display:flex;gap:3.5px;margin-top:6px;flex-wrap:wrap}
.fichitas i,.contador i{width:8px;height:8px;border-radius:50%;border:1.3px solid var(--line-2);background:transparent}
.fichitas i.f1,.contador i.f1{background:var(--good);border-color:var(--good)}
.fichitas i.f2,.contador i.f2{background:var(--accent);border-color:var(--accent)}

/* ============ Reto con la tabla ============ */
/* el reto cabe entero en pantalla: sin scroll vertical */
#viewReto{overflow:hidden}
.reto-inner{max-width:560px;display:flex;flex-direction:column;gap:6px;height:100%;min-height:100%;padding-top:6px;padding-bottom:0}
.reto-inner > *{flex:none} /* nada se aplasta: las alturas son fijas */
.reto-top{display:flex;align-items:center;gap:10px}
.back-btn{
  display:flex;align-items:center;gap:6px;background:none;border:none;cursor:pointer;
  font:inherit;font-size:13px;color:var(--muted);padding:6px 8px 6px 2px;border-radius:8px;
}
.back-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.reto-top h2{font-family:var(--serif);font-size:17px;margin:0;flex:1;letter-spacing:-.01em;min-width:0}
.contador{display:flex;gap:3.5px;align-items:center;flex-wrap:wrap;justify-content:flex-end;max-width:40%}
.contador i.cur{border-color:var(--navy);background:var(--navy)}

.reto-prompt{
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:11px 14px;display:flex;align-items:center;gap:14px;box-shadow:var(--sombra-card);
}
.prompt-play{
  width:52px;height:52px;border-radius:16px;border:none;cursor:pointer;flex:none;
  background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 22px -10px var(--accent-2);
  transition:transform .12s ease;
}
.prompt-play:hover{transform:scale(1.05)}
.prompt-play:disabled{opacity:.4;cursor:default;transform:none}
.prompt-play svg{width:21px;height:21px;fill:currentColor;stroke:none;margin-left:3px}
.prompt-es-wrap{flex:1;min-width:0}
.reto-es{display:block;font-family:var(--serif);font-size:21px;font-weight:600;line-height:1.25;letter-spacing:-.01em;margin:0}
.prompt-kicker{font-size:11.5px;color:var(--muted);text-transform:uppercase;letter-spacing:.07em;font-family:var(--mono)}
.reto-rec-tag{font-size:10.5px;border:1px solid currentColor;border-radius:8px;padding:1px 6px;color:var(--faint);flex:none;align-self:flex-start}

.tabla{
  background:var(--surface);border:1px solid var(--line-2);border-radius:18px;
  overflow:hidden;display:flex;height:141px;flex:none;box-shadow:var(--sombra-card);
}
.tabla-filas{
  width:54px;background:var(--canvas-2);border-right:1px solid var(--line);
  display:flex;flex-direction:column;
}
.fila{
  flex:1;border:none;background:none;cursor:pointer;font-family:var(--serif);
  font-size:21px;font-weight:700;color:var(--faint);
}
.fila + .fila{border-top:1px solid var(--line)}
.fila.activa{background:var(--navy);color:var(--surface)}
.tabla-zona{flex:1;display:flex;align-items:center;gap:9px;padding:14px;flex-wrap:wrap;overflow:hidden}
.tabla.err{border-color:rgba(224,80,59,.55)}
.tabla.ok{border-color:rgba(76,122,92,.6)}
.tabla.shake{animation:reto-shake .4s}
@keyframes reto-shake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-6px)} 75%{transform:translateX(6px)}
}

.pieza{
  border:none;background:none;cursor:pointer;padding:0;position:relative;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  font:inherit;font-size:9.5px;color:var(--muted);
  transition:transform .12s ease;
}
.pieza:hover{transform:translateY(-2px)}
.pieza .forma{
  width:52px;height:52px;display:flex;align-items:center;justify-content:center;
  filter:drop-shadow(0 6px 8px rgba(28,43,89,.22));
}
.pieza.peq .forma{width:40px;height:40px}
.pieza svg{width:100%;height:100%;fill:var(--surface);stroke:var(--navy);stroke-width:2;stroke-linejoin:round}
.pieza.colocada svg{fill:var(--brand-soft)}
.pieza.pop{animation:reto-pop .28s ease-out}
@keyframes reto-pop{from{transform:scale(.3);opacity:0}to{transform:scale(1);opacity:1}}
.slot{width:52px;height:52px;border-radius:12px;border:2px dashed var(--ghost);flex:none}
/* gabarito: salto a la segunda línea de la tabla + piezas de la solución */
.salto-linea{flex-basis:100%;height:0}
.pieza.solucion svg{fill:rgba(76,122,92,.14);stroke:var(--good)}
.fila.correcta{background:rgba(76,122,92,.16);color:var(--good)}
/* etiqueta de línea: acierto / intento fallido / corrección */
.linea-tag{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  flex:none;max-width:60px;text-align:center;
  font-family:var(--mono);font-size:8.5px;font-weight:600;
  letter-spacing:.07em;text-transform:uppercase;line-height:1.15;
}
.linea-tag svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.linea-tag.bien{color:var(--good)}
.linea-tag.mal{color:var(--rec)}
/* en el gabarito caben dos construcciones + etiquetas: piezas compactas */
.tabla.revela .pieza .forma{width:40px;height:40px}
.tabla.revela .pieza.peq .forma{width:32px;height:32px}
.tabla.revela .pieza.marcada::after{width:48px;height:48px;top:20px}
/* anillo rojo parpadeante = pieza en posición equivocada (gabarito) */
.pieza.marcada::after{
  content:"";position:absolute;left:50%;top:26px;transform:translate(-50%,-50%);
  width:62px;height:62px;border-radius:50%;border:3px solid var(--rec);
  animation:marca 1.6s ease-in-out infinite;pointer-events:none;
}
@keyframes marca{
  0%,100%{opacity:.95;transform:translate(-50%,-50%) scale(1)}
  50%{opacity:.45;transform:translate(-50%,-50%) scale(1.08)}
}

/* leyenda SOLO en la bandeja: enseña el nombre de cada forma; las piezas
   montadas en la tabla siguen sin texto (fidelidad al material físico) */
.pieza-cap{font-family:var(--mono);font-size:9px;line-height:1.1;letter-spacing:.02em;
  color:var(--muted);text-align:center;max-width:64px;pointer-events:none}
.pieza.ghost .pieza-cap{display:none}
.bandeja-label{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin:0 0 7px 4px}
.bandeja{
  background:var(--canvas-2);border-radius:16px;padding:10px 12px;
  box-shadow:inset 0 2px 6px rgba(12,14,22,.09), inset 0 0 0 1px var(--line);
  display:flex;gap:8px;flex-wrap:wrap;justify-content:center;
}

/* barra de acciones siempre en el mismo sitio: pegada al pie del área
   de scroll, el cuadro de respuesta no la empuja */
.reto-actions{
  display:flex;gap:10px;align-items:center;
  position:sticky;bottom:0;z-index:30;margin-top:auto;
  background:var(--screen);padding:8px 0 10px;
}
.reto-actions::before{ /* fade: el contenido se desliza por debajo */
  content:"";position:absolute;left:0;right:0;bottom:100%;height:20px;
  background:linear-gradient(180deg, rgba(243,240,232,0), var(--screen));
  pointer-events:none;
}
/* siempre dos huecos de botón: el izquierdo reserva su sitio aunque
   esté oculto, así el derecho nunca cambia de tamaño ni de posición */
#retoRetry[hidden]{display:inline-flex !important;visibility:hidden}
#retoReveal{flex:1;justify-content:center;padding:13px 20px;font-size:15px;border-radius:13px}
.btn.cta{
  background:var(--accent);border:1px solid var(--accent-2);color:var(--accent-ink);
  flex:1;box-shadow:0 12px 26px -12px var(--accent);font-weight:600;
  border-radius:13px;padding:13px 20px;font-size:15px;
}
.btn.fantasma{border:none;background:none;color:var(--muted);font-weight:500}
.err-msg{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--rec);padding:0 4px;margin:0;min-height:21px}
/* respuesta y aviso SIEMPRE reservan su sitio: nada salta al aparecer */
#retoAnswer[hidden],#retoErr[hidden]{display:flex !important;visibility:hidden}
.err-msg svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;flex:none}

.respuesta{
  background:var(--surface);border-radius:16px;border:1px solid rgba(76,122,92,.4);
  padding:16px 18px;display:flex;flex-direction:column;gap:4px;box-shadow:var(--sombra-card);
  height:130px;flex:none;overflow:hidden; /* alto fijo: el texto se ajusta (JS) */
}
.respuesta.entra{animation:resp-entra .35s ease-out}
@keyframes resp-entra{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.resp-tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--good);display:flex;align-items:center;gap:6px}
.resp-tag svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.reto-en{font-family:var(--serif);font-size:23px;font-weight:600;letter-spacing:-.01em;line-height:1.25;margin:0}
.reto-en.contr{font-style:italic;font-size:17px;color:var(--muted);font-weight:400}
.resp-oir{
  align-self:flex-start;margin-top:8px;display:flex;align-items:center;gap:7px;
  font:inherit;font-size:13px;font-weight:600;cursor:pointer;
  border:1px solid var(--line-2);background:none;border-radius:10px;padding:8px 13px;
}
.resp-oir:disabled{opacity:.4;cursor:default}
.resp-oir svg{width:14px;height:14px;fill:var(--ink)}

.reto-done{text-align:center;padding:26px 0 10px}
.reto-done h3{font-family:var(--serif);font-size:22px;margin:0 0 6px}
.reto-done p{color:var(--muted);margin:0 0 18px}

@media (max-width:560px){
  .pieza .forma{width:46px;height:46px}
  .pieza.peq .forma{width:36px;height:36px}
  .slot{width:46px;height:46px}
  .pieza.marcada::after{width:56px;height:56px;top:23px}
  .reto-es{font-size:18px}
  .tabla.revela .pieza .forma{width:36px;height:36px}
  .tabla.revela .pieza.peq .forma{width:29px;height:29px}
  .tabla.revela .pieza.marcada::after{width:44px;height:44px;top:18px}
}

/* ritmo compacto: todo el reto cabe en la pantalla del móvil sin scroll */
@media (max-width:720px){
  .reto-inner{gap:9px;padding-top:10px}
  .reto-title{font-size:18px;margin-top:-4px}
  .fchip{min-width:28px;height:28px;font-size:12px}
  .frases-nav{padding-bottom:4px}
  .reto-prompt{padding:10px 12px}
  .prompt-play{width:44px;height:44px;border-radius:13px}
  .reto-es{font-size:17px}
  .tabla{height:124px}
  .tabla-zona{padding:12px;gap:8px}
  .err-msg{font-size:12.5px;min-height:19px}
  .bandeja{padding:10px;flex-wrap:nowrap;overflow-x:auto;justify-content:safe center;scrollbar-width:none}
  .bandeja::-webkit-scrollbar{display:none}
  .bandeja-label{margin-bottom:5px}
  .respuesta{height:132px;padding:12px 14px}
  .reto-en{font-size:20px}
  .reto-en.contr{font-size:15px}
  .resp-oir{margin-top:4px;padding:7px 11px}
  .reto-actions{padding:8px 0 10px}
  .reto-actions .btn.cta,#retoReveal{padding:11px 16px;font-size:14px}
}

/* ============ Logo Mentoría (topbar) ============ */
.brand{display:flex;align-items:center;gap:16px;min-width:0}
.brand-logo{
  margin:0;background:var(--navy);border-radius:14px;
  padding:clamp(8px,1.2vw,12px) clamp(12px,1.8vw,18px);
  line-height:0;box-shadow:var(--sombra-card);flex:none;
}
.brand-logo img{
  display:block;width:auto;
  height:clamp(34px,4.6vw,54px);
  max-width:min(46vw,260px);object-fit:contain;
}
.brand-sub{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media (max-width:680px){
  .brand-sub{display:none}
  .topbar{min-height:64px;padding:0 14px}
}

/* ============ Piezas arrastrables ============ */
.pieza{touch-action:none;cursor:grab;user-select:none;-webkit-user-select:none}
.pieza svg,.pieza img{-webkit-user-drag:none;pointer-events:none}
.pieza:active{cursor:grabbing}
.pieza.ghost{
  position:fixed;z-index:999;pointer-events:none;margin:0;
  transform:translate(-50%,-65%) scale(1.12);opacity:.92;
}
.pieza.dragging{opacity:.3}
.tabla.drop{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft), var(--sombra-card)}

/* punto montado ENCIMA de una pieza (terminación -s/-ed/-ing/...) */
.forma{position:relative}
.punto-encima{
  position:absolute;top:1px;right:1px;width:15px;height:15px;border-radius:50%;
  background:var(--surface);border:2px solid var(--navy);
  box-shadow:0 2px 4px rgba(12,14,22,.25);
}
.pieza.peq .punto-encima{width:12px;height:12px}
.pieza.target .forma svg{stroke:var(--accent-2);stroke-width:2.6}
.pieza.target{transform:translateY(-2px) scale(1.06)}

/* marcador ámbar apuntando a la columna +/?/− (elige la línea primero) */
.tabla-filas{position:relative}
.tabla-filas.marca::after{
  content:"";position:absolute;inset:3px;border-radius:12px;
  border:3px solid var(--accent);pointer-events:none;
  animation:marca-fila 1.5s ease-in-out 2;
}
@keyframes marca-fila{0%,100%{opacity:.95}50%{opacity:.3}}
/* bandeja en espera: aún no se eligió la línea */
.bandeja.espera .pieza{opacity:.45}
.bandeja.espera .pieza:hover{transform:none}

/* piezas sin leyenda: solo la forma */
.pieza{gap:0;height:auto}
.punto-encima{cursor:grab;touch-action:none}

/* cabecera del reto: volver + fichas arriba, título serif debajo */
.reto-top{justify-content:space-between;gap:12px}
.contador{max-width:none}
.reto-title{
  font-family:var(--serif);font-size:20px;font-weight:600;
  letter-spacing:-.01em;line-height:1.2;margin:-4px 0 0;
}
.cdot{
  width:11px;height:11px;border-radius:50%;padding:0;background:none;
  border:1.5px solid var(--line-2);cursor:default;transition:transform .1s ease;
}
.cdot.f1{background:var(--good);border-color:var(--good);cursor:pointer}
.cdot.f2{background:var(--accent);border-color:var(--accent);cursor:pointer}
.cdot.cur{border-color:var(--navy);box-shadow:0 0 0 2.5px var(--brand-soft);cursor:default}
.cdot.cur:not(.f1):not(.f2){background:var(--navy)}
.cdot:not(:disabled):not(.cur):hover{transform:scale(1.3)}

/* el punto encima no se arrastra (muy pequeño): el toque pasa a la pieza */
.punto-encima{pointer-events:none;cursor:inherit}

/* navegación por frases: tira de fichas numeradas bajo el título */
.frase-pos{font-family:var(--mono);font-size:12.5px;color:var(--muted);letter-spacing:.04em}
.frases-nav{
  display:flex;gap:7px;overflow-x:auto;padding:2px 2px 4px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch;margin:-4px 0 0;
}
.frases-nav::-webkit-scrollbar{display:none}
.fchip{
  min-width:28px;height:28px;border-radius:50%;flex:none;padding:0;
  font-family:var(--mono);font-size:12px;font-weight:600;
  background:var(--surface);border:1.5px solid var(--line-2);color:var(--faint);
  cursor:default;transition:transform .1s ease, box-shadow .1s ease;
}
.fchip.f1{border-color:var(--good);color:var(--good);background:rgba(76,122,92,.1);cursor:pointer}
.fchip.f2{border-color:var(--accent-2);color:var(--accent-ink);background:var(--accent-soft);cursor:pointer}
.fchip.cur{background:var(--navy);border-color:var(--navy);color:var(--surface);cursor:default}
.fchip:not(:disabled):not(.cur):hover{transform:translateY(-1px);box-shadow:var(--sombra-card)}

/* ============================================================
   Conversación (charla libre con IA)
   ============================================================ */
.conv-head{display:flex; align-items:center; justify-content:space-between; gap:10px}

/* --- picker --- */
.conv-topics{display:flex; flex-wrap:wrap; gap:9px; margin:4px 0 18px}
.conv-topic{border:1px solid var(--line-2); background:var(--surface); color:var(--navy);
  padding:10px 15px; border-radius:13px; cursor:pointer; font-size:14px; font-weight:600;
  font-family:var(--sans); transition:transform .08s, box-shadow .12s, border-color .12s}
.conv-topic:hover{border-color:var(--accent); transform:translateY(-1px); box-shadow:var(--sombra-card)}
.conv-custom{display:flex; gap:9px; align-items:stretch; margin-bottom:14px}
.conv-custom input{flex:1; border:1px solid var(--line-2); background:var(--surface); border-radius:13px;
  padding:11px 14px; font-size:14px; font-family:var(--sans); color:var(--ink)}
.conv-custom input:focus{outline:none; border-color:var(--brand)}
.conv-azure-note{font-size:12.5px; color:var(--muted); margin:0 0 16px; line-height:1.5}
.conv-azure-note a{color:var(--brand); font-weight:600}

.conv-past{margin-top:24px}
.conv-past-title{font-family:var(--serif); font-size:17px; color:var(--navy); margin:0 0 10px}
.conv-past-item{display:flex; align-items:center; justify-content:space-between; width:100%;
  border:1px solid var(--line); background:var(--surface); border-radius:12px; padding:12px 14px;
  margin-bottom:8px; cursor:pointer; font-family:var(--sans)}
.conv-past-item:hover{border-color:var(--navy)}
.conv-past-item .cp-topic{font-weight:600; color:var(--navy); font-size:14px}
.conv-past-item .cp-date{font-size:12px; color:var(--faint); font-family:var(--mono)}

/* --- claves --- */
.conv-keys{display:flex; flex-direction:column; gap:14px; margin-bottom:20px}
.conv-key-field{display:flex; flex-direction:column; gap:6px}
.conv-key-field span{font-size:13px; font-weight:600; color:var(--navy)}
.conv-key-field span em{font-style:normal; color:var(--faint); font-weight:500}
.conv-key-field input{border:1px solid var(--line-2); background:var(--surface); border-radius:11px;
  padding:11px 13px; font-size:14px; font-family:var(--mono); color:var(--ink)}
.conv-key-field input:focus{outline:none; border-color:var(--brand)}

/* --- chat (modo conversación: alto fijo, mensajes con scroll, mic abajo) --- */
.conv-chatmode{height:100%; display:flex; flex-direction:column; min-height:0;
  padding-top:18px; padding-bottom:14px}
.conv-chat-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--line); flex:none}
.conv-topic-tag{font-family:var(--serif); font-size:16px; font-weight:600; color:var(--navy)}
.conv-msgs{flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:12px;
  padding:16px 2px}
.conv-msg{display:flex}
.conv-msg.ai{justify-content:flex-start}
.conv-msg.user{justify-content:flex-end}
.conv-bubble{max-width:80%; padding:11px 15px; border-radius:16px; font-size:15px; line-height:1.5;
  position:relative}
.conv-msg.ai .conv-bubble{background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
  border-bottom-left-radius:5px; padding-right:40px}
.conv-msg.user .conv-bubble{background:var(--navy); color:var(--surface); border-bottom-right-radius:5px}
.conv-replay{position:absolute; right:8px; bottom:7px; border:none; background:var(--brand-soft);
  color:var(--brand); width:26px; height:26px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.conv-replay svg{width:13px; height:13px; fill:currentColor; stroke:none}
.conv-replay:hover{background:var(--brand); color:var(--surface)}

.conv-foot{flex:none; display:flex; flex-direction:column; align-items:center; gap:8px; padding-top:12px;
  border-top:1px solid var(--line)}
.conv-mic{width:66px; height:66px; border-radius:18px; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); box-shadow:var(--sombra-cta);
  display:flex; align-items:center; justify-content:center; transition:transform .12s}
.conv-mic svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.conv-mic:hover{transform:translateY(-1px)}
.conv-mic:active{transform:translateY(1px)}
.conv-mic.recording{background:var(--rec); color:#fff; animation:convPulse 1.2s ease-in-out infinite}
@keyframes convPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,80,59,.5)}50%{box-shadow:0 0 0 14px rgba(224,80,59,0)}}
.conv-status{font-size:13px; color:var(--muted); margin:0; text-align:center; min-height:18px}

/* --- informe --- */
.conv-card{background:var(--surface); border:1px solid var(--line-2); border-radius:16px;
  padding:18px 18px 16px; margin-bottom:16px; box-shadow:var(--sombra-card)}
.conv-card-title{font-family:var(--serif); font-size:19px; color:var(--navy); margin:0 0 12px}
.conv-card-title em{font-style:normal; font-size:13px; color:var(--faint); font-weight:400}
.conv-summary{font-size:14.5px; line-height:1.6; color:var(--ink); margin:0 0 14px}
.conv-item{border-left:3px solid var(--accent); padding:2px 0 2px 13px; margin:0 0 14px}
.conv-said{font-size:14px; color:var(--muted); margin:0 0 3px; text-decoration:line-through;
  text-decoration-color:var(--ghost)}
.conv-better{font-size:15px; color:var(--good); font-weight:600; margin:0 0 4px}
.conv-why{font-size:13px; color:var(--muted); margin:0; line-height:1.5}
.conv-encourage{font-size:14px; color:var(--navy); font-weight:600; margin:14px 0 0; font-style:italic}

.conv-scores{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:16px}
.conv-score{flex:1; min-width:64px; background:var(--canvas); border:1px solid var(--line);
  border-radius:12px; padding:11px 6px; text-align:center}
.conv-score b{display:block; font-family:var(--mono); font-size:22px; color:var(--navy); line-height:1}
.conv-score span{font-size:11.5px; color:var(--muted)}
.conv-score.good b{color:var(--good)}
.conv-score.mid b{color:var(--accent-2)}
.conv-score.low b{color:var(--rec)}
.conv-words-label{font-size:13px; color:var(--muted); margin:14px 0 8px; font-weight:600}
.conv-words-label em{font-style:normal; font-weight:400}
.conv-words{display:flex; flex-wrap:wrap; gap:8px}
.conv-word{display:inline-flex; align-items:center; gap:7px; background:var(--accent-soft);
  border:1px solid var(--accent); color:var(--accent-ink); padding:7px 12px; border-radius:11px;
  font-size:14px; font-weight:600; cursor:pointer; font-family:inherit; transition:transform .12s}
.conv-word:hover{transform:translateY(-1px)}
.conv-word:active{transform:translateY(1px)}
.conv-word.loading{opacity:.55; animation:blink 1s infinite}
.conv-word em{font-style:normal; font-family:var(--mono); font-size:12px; opacity:.75}
.conv-word-ic{width:13px; height:13px; fill:currentColor; flex:none}

/* leyenda de métricas / instrucciones, en llano */
.conv-legend{font-size:12.5px; color:var(--muted); margin:0 0 4px; line-height:1.5}

/* frase por frase: escuchar el modelo + palabras teñidas + nota de la frase */
.conv-phrase{display:flex; align-items:flex-start; gap:10px; padding:10px 0;
  border-bottom:1px solid var(--line)}
.conv-phrase:last-of-type{border-bottom:none}
.conv-snip-play{flex:none; width:34px; height:34px; border-radius:11px; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); display:inline-flex; align-items:center;
  justify-content:center; transition:transform .12s}
.conv-snip-play svg{width:17px; height:17px; fill:currentColor}
.conv-snip-play:hover{transform:translateY(-1px)}
.conv-snip-play:active{transform:translateY(1px)}
.conv-snip-play.loading{opacity:.5; animation:blink 1s infinite}
.conv-phrase-text{flex:1; font-size:15.5px; line-height:1.65; color:var(--ink); padding-top:5px}
.conv-w.mid{color:var(--accent-2); font-weight:600;
  text-decoration:underline; text-decoration-style:dotted; text-underline-offset:3px}
.conv-w.low{color:var(--rec); font-weight:700;
  text-decoration:underline; text-underline-offset:3px}
.conv-phrase-score{flex:none; font-family:var(--mono); font-size:13.5px; font-weight:600;
  color:var(--muted); padding-top:7px}
.conv-phrase-score.good{color:var(--good)}
.conv-phrase-score.mid{color:var(--accent-2)}
.conv-phrase-score.low{color:var(--rec)}

.conv-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:6px}


/* ████████████████ FEATURES NOVAS (retocap · asistente) ████████████████ */
/* ===== Reto del capítulo (.rcap-*) — espejo de .conv-* ===== */
.rcap-inner{display:flex; flex-direction:column}
.rcap-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.rcap-head .page-title{margin:0}
.rcap-exit{flex:0 0 100%; display:inline-flex; align-items:center; gap:4px; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--brand); background:none; border:none; cursor:pointer; padding:0; margin-bottom:2px}
.rcap-exit svg{width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.rcap-count{font-family:var(--mono); font-size:12px; color:var(--faint); white-space:nowrap}
.rcap-dots{display:flex; gap:7px; align-items:center}
.rcap-dot{width:9px; height:9px; border-radius:50%; background:var(--line-2);
  border:1px solid var(--line); transition:background .15s, transform .15s}
.rcap-dot.done{background:var(--good); border-color:var(--good)}
.rcap-dot.on{transform:scale(1.4); background:var(--accent); border-color:var(--accent)}
.rcap-foco{font-family:var(--serif); font-size:15px; font-style:italic; color:var(--brand); margin:2px 0 14px}
.rcap-foco-tag{font-family:var(--serif); font-size:15px; font-weight:600; color:var(--navy)}

/* pregunta */
.rcap-q{background:var(--surface); border:1px solid var(--line-2); border-left:3px solid var(--accent);
  border-radius:14px; padding:16px 18px; font-family:var(--serif); font-size:19px; line-height:1.4;
  color:var(--navy); margin:0 0 10px; box-shadow:var(--sombra-card)}
.rcap-q-sm{font-size:16px; padding:12px 15px; box-shadow:none}

/* pie con micrófono (idéntico a conv-foot/conv-mic) */
.rcap-foot{flex:none; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding-top:16px; margin-top:6px; border-top:1px solid var(--line)}
.rcap-mic{width:66px; height:66px; border-radius:18px; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); box-shadow:var(--sombra-cta);
  display:flex; align-items:center; justify-content:center; transition:transform .12s}
.rcap-mic svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2;
  stroke-linecap:round; stroke-linejoin:round}
.rcap-mic:hover{transform:translateY(-1px)}
.rcap-mic:active{transform:translateY(1px)}
.rcap-mic.recording{background:var(--rec); color:#fff; animation:rcapPulse 1.2s ease-in-out infinite}
@keyframes rcapPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,80,59,.5)}50%{box-shadow:0 0 0 14px rgba(224,80,59,0)}}
.rcap-status{font-size:13px; color:var(--muted); margin:0; text-align:center; min-height:18px}

/* tarjeta de feedback */
.rcap-card{background:var(--surface); border:1px solid var(--line-2); border-radius:16px;
  padding:16px 18px; margin:0 0 16px; box-shadow:var(--sombra-card)}
.rcap-fb-top{display:flex; align-items:center; gap:12px; margin-bottom:12px; flex-wrap:wrap}
.rcap-score{min-width:70px; background:var(--canvas); border:1px solid var(--line);
  border-radius:12px; padding:9px 6px; text-align:center}
.rcap-score b{display:block; font-family:var(--mono); font-size:22px; color:var(--navy); line-height:1}
.rcap-score span{font-size:11px; color:var(--muted)}
.rcap-score.good b{color:var(--good)}
.rcap-score.mid b{color:var(--accent-2)}
.rcap-score.low b{color:var(--rec)}
.rcap-uso{font-size:12.5px; font-weight:600; padding:5px 11px; border-radius:999px; line-height:1.3}
.rcap-uso.yes{background:rgba(76,122,92,.14); color:var(--good)}
.rcap-uso.no{background:var(--accent-soft); color:var(--accent-ink)}
.rcap-said-label,.rcap-corr-label{font-size:12px; font-weight:600; color:var(--faint); margin:8px 0 3px;
  text-transform:uppercase; letter-spacing:.04em}
.rcap-said{font-size:15px; color:var(--muted); margin:0 0 4px; line-height:1.5}
.rcap-feedback{font-size:14.5px; color:var(--ink); line-height:1.6; margin:10px 0 0}
.rcap-corr{font-size:15px; color:var(--good); font-weight:600; margin:0; line-height:1.5}

/* puntaje final */
.rcap-big{display:flex; flex-direction:column; align-items:center; justify-content:center;
  background:var(--surface); border:1px solid var(--line-2); border-radius:18px;
  padding:22px 16px; margin:6px 0 18px; box-shadow:var(--sombra-card)}
.rcap-big b{font-family:var(--mono); font-size:54px; line-height:1; color:var(--navy)}
.rcap-big span{font-size:12.5px; color:var(--muted); margin-top:4px; font-family:var(--mono)}
.rcap-big.good b{color:var(--good)}
.rcap-big.mid b{color:var(--accent-2)}
.rcap-big.low b{color:var(--rec)}
.rcap-list{display:flex; flex-direction:column; gap:8px; margin-bottom:18px}
.rcap-row{display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:var(--surface); border:1px solid var(--line); border-radius:11px; padding:10px 13px}
.rcap-row-q{font-size:13.5px; color:var(--navy); line-height:1.4}
.rcap-row-score{font-family:var(--mono); font-size:15px; font-weight:600; color:var(--navy); white-space:nowrap}
.rcap-row-score.good{color:var(--good)}
.rcap-row-score.mid{color:var(--accent-2)}
.rcap-row-score.low{color:var(--rec)}
.rcap-row-ok{display:inline-flex; color:var(--good); flex:none}
.rcap-row-ok svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.rcap-row-skip{font-family:var(--mono); font-size:14px; color:var(--faint)}
/* chips de palabras (te faltó decir / pronunciación para pulir) */
.rcap-chips{display:flex; gap:7px; flex-wrap:wrap; margin:2px 0 4px}
.rcap-chip{font-size:13px; background:var(--accent-soft); color:var(--accent-ink);
  border:1px solid var(--accent); border-radius:10px; padding:4px 10px}
.rcap-nopron{font-size:12.5px; color:var(--faint); font-style:italic; margin:10px 0 0}

/* acciones */
.rcap-actions{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:6px}
/* ============ ASISTENTE IA (overlay de ayuda de la lección) ============ */
.asist-backdrop{
  position:fixed; inset:0; z-index:60; background:rgba(8,9,14,.42);
  display:grid; place-items:center; backdrop-filter:blur(3px);
}
.asist-panel{
  display:flex; flex-direction:column; overflow:hidden;
  width:min(560px, calc(100vw - 48px)); height:min(680px, calc(100vh - 64px));
  background:var(--screen); border:1px solid var(--line-2); border-radius:22px;
  box-shadow:var(--sombra-pop);
}
.asist-head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px; border-bottom:1px solid var(--line); background:var(--surface);
}
.asist-head-title{display:flex; align-items:center; gap:9px; font-family:var(--serif);
  font-size:18px; font-weight:700; color:var(--navy); letter-spacing:-.01em}
.asist-head-title .bi{width:20px; height:20px; color:var(--brand)}
.asist-chips{
  display:flex; flex-wrap:wrap; gap:8px; padding:12px 16px 4px;
}
.asist-chip{
  font-family:var(--sans); font-size:13px; font-weight:600; color:var(--navy);
  background:var(--brand-soft); border:1px solid var(--line); border-radius:999px;
  padding:7px 13px; cursor:pointer; transition:background .15s, border-color .15s;
}
.asist-chip:hover{background:var(--accent-soft); border-color:var(--accent)}
.asist-msgs{
  flex:1; min-height:0; overflow-y:auto; padding:14px 16px;
  display:flex; flex-direction:column; gap:10px;
}
.asist-msg{display:flex}
.asist-msg.user{justify-content:flex-end}
.asist-msg.ai{justify-content:flex-start}
.asist-bubble{
  max-width:84%; padding:10px 13px; border-radius:16px; line-height:1.45;
  font-family:var(--sans); font-size:14.5px; white-space:pre-wrap; word-wrap:break-word;
}
.asist-msg.ai .asist-bubble{
  background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
  border-bottom-left-radius:5px;
}
.asist-msg.user .asist-bubble{
  background:var(--navy); color:#fff; border-bottom-right-radius:5px;
}
/* chip de pronunciación: [[say:EN|ES]] -> muestra el ESPAÑOL, el ▶ habla el inglés */
.asist-say{
  display:inline-flex; align-items:center; gap:6px; margin:2px 2px;
  padding:3px 4px 3px 10px; border-radius:999px;
  background:var(--accent-soft); border:1px solid var(--accent);
}
.asist-say-text{font-family:var(--sans); font-size:13.5px; font-weight:600; color:var(--accent-ink)}
.asist-say-btn{
  display:inline-flex; align-items:center; justify-content:center;
  width:28px; height:28px; border-radius:9px; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); flex:none;
}
.asist-say-btn svg{width:13px; height:13px; fill:currentColor; stroke:none}
.asist-say-btn:hover{filter:brightness(1.05)}
/* indicador "escribiendo…" */
.asist-typing{display:inline-flex; gap:4px; align-items:center}
.asist-typing span{
  width:7px; height:7px; border-radius:50%; background:var(--muted);
  animation:asistBlink 1.2s infinite ease-in-out;
}
.asist-typing span:nth-child(2){animation-delay:.18s}
.asist-typing span:nth-child(3){animation-delay:.36s}
@keyframes asistBlink{0%,80%,100%{opacity:.3} 40%{opacity:1}}
.asist-gate{padding:22px 8px; text-align:center; color:var(--muted)}
.asist-gate p{margin:0 0 8px}
.asist-gate-sub{font-size:13px}
.asist-gate-sub b{color:var(--navy)}
.asist-foot{
  display:flex; gap:9px; padding:12px 16px; border-top:1px solid var(--line);
  background:var(--surface);
}
.asist-input{
  flex:1; font-family:var(--sans); font-size:15px; color:var(--ink);
  background:var(--canvas); border:1.5px solid var(--line-2); border-radius:13px;
  padding:11px 14px; outline:none;
}
.asist-input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)}
.asist-input:disabled{opacity:.5}
.asist-send{flex:none; width:46px; padding:0; display:flex; align-items:center; justify-content:center}
.asist-send .bi{width:20px; height:20px; fill:currentColor; stroke:none}
/* micrófono: preguntar por voz (Whisper auto ES/EN) */
.asist-mic{flex:none; align-self:center; width:42px; height:42px; border-radius:12px;
  border:1px solid var(--line-2); background:var(--canvas); color:var(--brand); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background .15s, transform .1s, border-color .15s}
.asist-mic svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.asist-mic:hover{border-color:var(--brand); background:var(--brand-soft)}
.asist-mic:active{transform:scale(.94)}
.asist-mic:disabled{opacity:.4; cursor:default}
.asist-mic.recording{background:var(--rec); border-color:var(--rec); color:#fff; animation:asistPulse 1.2s ease-in-out infinite}
@keyframes asistPulse{0%,100%{box-shadow:0 0 0 0 rgba(224,80,59,.45)} 50%{box-shadow:0 0 0 10px rgba(224,80,59,0)}}

@media (max-width:640px){
  .asist-backdrop{place-items:end center; padding:0}
  .asist-panel{
    width:100vw; max-width:100vw; height:90vh;
    border-radius:26px 26px 0 0; border-bottom:none;
  }
  .asist-bubble{max-width:88%}
}
/* ============================================================
   Reto de conversación (desde el cap. 10) — prefijo .rconv-
   Intro (briefing) → chat por voz → feedback suave.
   ============================================================ */
.rconv-inner{display:flex; flex-direction:column; min-height:0}
.rconv-head{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap}
.rconv-head .page-title{margin:0}
.rconv-foco{font-family:var(--serif); font-size:15px; font-style:italic; color:var(--brand); margin:2px 0 14px}
.rconv-topic-tag{font-family:var(--serif); font-size:15px; font-weight:600; color:var(--navy)}

/* ---- intro / briefing ---- */
.rconv-brief{background:var(--surface); border:1px solid var(--line-2); border-radius:16px;
  padding:16px 18px; box-shadow:var(--sombra-card); margin:2px 0 4px}
.rconv-brief p{margin:0 0 10px; font-size:15px; line-height:1.6; color:var(--ink)}
.rconv-brief p:last-child{margin-bottom:0}
.rconv-brief-soft{color:var(--muted); font-size:14px !important}
.rconv-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:16px}

/* ---- chat por voz (espeja conv-chatmode) ---- */
.rconv-chatmode{height:100%; padding-top:18px; padding-bottom:14px}
.rconv-chat-head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding-bottom:12px; border-bottom:1px solid var(--line); flex:none}
.rconv-msgs{flex:1; min-height:0; overflow:auto; display:flex; flex-direction:column; gap:12px; padding:16px 2px}
.rconv-msg{display:flex}
.rconv-msg.ai{justify-content:flex-start}
.rconv-msg.user{justify-content:flex-end}
.rconv-bubble{max-width:80%; padding:11px 15px; border-radius:16px; font-size:15px; line-height:1.5; position:relative}
.rconv-msg.ai .rconv-bubble{background:var(--surface); border:1px solid var(--line-2); color:var(--ink);
  border-bottom-left-radius:5px; padding-right:42px}
.rconv-msg.user .rconv-bubble{background:var(--navy); color:var(--surface); border-bottom-right-radius:5px}
.rconv-replay{position:absolute; right:8px; bottom:7px; border:none; background:var(--brand-soft);
  color:var(--brand); width:26px; height:26px; border-radius:8px; cursor:pointer;
  display:flex; align-items:center; justify-content:center}
.rconv-replay svg{width:13px; height:13px; fill:currentColor; stroke:none}
.rconv-replay:hover{background:var(--brand); color:var(--surface)}
.rconv-typing{display:inline-flex; gap:4px; padding:3px 2px}
.rconv-typing i{width:6px; height:6px; border-radius:50%; background:var(--ghost); animation:asistvBlink 1s infinite}
.rconv-typing i:nth-child(2){animation-delay:.15s}
.rconv-typing i:nth-child(3){animation-delay:.3s}

.rconv-foot{flex:none; display:flex; flex-direction:column; align-items:center; gap:8px;
  padding-top:12px; border-top:1px solid var(--line)}
.rconv-mic{width:66px; height:66px; border-radius:18px; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); box-shadow:var(--sombra-cta);
  display:flex; align-items:center; justify-content:center; transition:transform .12s}
.rconv-mic svg{width:28px; height:28px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.rconv-mic:hover{transform:translateY(-1px)}
.rconv-mic:active{transform:translateY(1px)}
.rconv-mic.recording{background:var(--rec); color:#fff; animation:rcapPulse 1.2s ease-in-out infinite}
.rconv-status{font-size:13px; color:var(--muted); margin:0; text-align:center; min-height:18px}

/* ---- feedback suave ---- */
.rconv-card{background:var(--surface); border:1px solid var(--line-2); border-radius:16px;
  padding:18px; margin-bottom:16px; box-shadow:var(--sombra-card)}
.rconv-fb-resumen{font-size:15.5px; line-height:1.6; color:var(--ink); margin-bottom:6px}
.rconv-fb-label{font-family:var(--serif); font-size:16px; color:var(--navy); margin:16px 0 10px}
.rconv-fb-item{border-left:3px solid var(--good); padding:2px 0 2px 13px; margin:0 0 14px}
.rconv-fb-said{font-size:14px; color:var(--muted); margin:0 0 3px; font-style:italic}
.rconv-fb-natural{font-size:15px; color:var(--good); font-weight:600; margin:0 0 4px}
.rconv-fb-nota{font-size:13.5px; color:var(--muted); margin:0; line-height:1.5}
.rconv-fb-cierre{font-size:14.5px; color:var(--navy); font-weight:600; font-style:italic; margin:14px 0 0}

/* ============================================================
   MÓDULO AVANZADO (.avz-*)
   ============================================================ */
.avz-inner{padding:0; display:flex; flex-direction:column; min-height:100%}
.avz-inner svg:not(.avz-wave), .avz-pop svg, .avz-num svg{
  width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.avz-play svg, .avz-rprev svg, .avz-listen .avz-play svg{fill:currentColor; stroke:none}

/* barra superior */
.avz-bar{display:flex; align-items:center; gap:10px; padding:13px 14px; background:var(--navy); color:#F4EFE7; position:sticky; top:0; z-index:3}
.avz-barbtn{flex:0 0 auto; width:34px; height:34px; border-radius:11px; border:none; background:rgba(255,255,255,.1); color:#F4EFE7; display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.avz-bartitle{flex:1; font-family:var(--serif); font-size:16px; font-weight:500}
.avz-bartag{font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:#C9CFE0}

/* sub-barra: stepper + etiqueta + velocidad */
.avz-subbar{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--canvas-2); border-bottom:1px solid var(--line)}
.avz-step{display:flex; gap:5px}
.avz-sd{width:20px; height:5px; border-radius:3px; background:var(--line-2)}
.avz-sd.on{background:var(--accent)} .avz-sd.dn{background:var(--brand)}
.avz-vl{flex:1; font-family:var(--mono); font-size:10.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted)}
.avz-spd{flex:0 0 auto; font-family:var(--mono); font-size:12px; font-weight:500; color:var(--accent-ink); background:var(--accent-soft); border:1px solid var(--accent); border-radius:11px; padding:6px 9px; cursor:pointer}

/* pie / CTA */
.avz-foot{display:flex; flex-direction:column; gap:8px; padding:14px}
.avz-foot .btn{width:100%}

/* ---------- chat ---------- */
.avz-chatmode .avz-msgs{flex:1; padding:14px 12px; display:flex; flex-direction:column; overflow-y:auto}
.avz-msg{display:flex; gap:8px; margin:11px 0; align-items:flex-end; max-width:100%}
.avz-msg.right{flex-direction:row-reverse}
.avz-av{flex:0 0 auto; width:30px; height:30px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family:var(--sans); font-weight:600; font-size:12px; color:#fff}
.avz-av.v1{background:#B0577C} .avz-av.v2{background:var(--brand)} .avz-av.me{background:var(--accent); color:var(--accent-ink)}
.avz-col{max-width:78%; display:flex; flex-direction:column}
.avz-msg.right .avz-col{align-items:flex-end}
.avz-nm{font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); margin:0 4px 3px}
.avz-bub{background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:9px 11px; box-shadow:var(--sombra-card)}
.avz-msg.right .avz-bub{background:var(--brand-soft); border-color:#C9D6EC}
.avz-audio{display:flex; align-items:center; gap:9px}
.avz-play{flex:0 0 auto; width:34px; height:34px; border-radius:12px; background:var(--accent); border:none; color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.avz-play.sm{width:28px; height:28px; border-radius:10px}
.avz-play.sm svg{width:15px; height:15px}
.avz-play.big{width:42px; height:42px; border-radius:14px}
.avz-play.big svg{width:22px; height:22px}
.avz-wave{flex:0 0 auto; display:block}
.avz-txt{font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--ink); margin-top:9px; padding-top:9px; border-top:1px dashed var(--line)}
.avz-word{font:inherit; color:inherit; background:none; border:none; padding:0; cursor:pointer; border-bottom:1.5px dotted transparent}
.avz-word:hover{border-bottom-color:var(--line-2)}
.avz-word.active{border-bottom-color:var(--brand)}
.avz-word.kara{background:var(--accent-soft); border-radius:4px; box-shadow:0 1px 0 var(--accent)}
.avz-es{font-family:var(--sans); font-size:13px; line-height:1.45; color:var(--muted); font-style:italic; margin-top:7px}
.avz-catalogo .avz-es{padding:2px 16px 14px; margin-top:6px}   /* traducción del texto: no pegada a los bordes */
.avz-chat-end{display:flex; justify-content:center; margin:16px 0 4px}
.avz-chat-end span{display:inline-flex; align-items:center; gap:6px; font-family:var(--mono); font-size:11px; letter-spacing:.06em; text-transform:uppercase; color:var(--good); background:var(--goodsoft, #E1ECE3); border-radius:999px; padding:7px 13px}
.avz-chat-end svg{width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round}
.avz-tr{display:inline-flex; align-items:center; gap:5px; font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--brand); background:none; border:none; padding:0; margin-top:8px; cursor:pointer}
.avz-tr svg{width:14px; height:14px}

/* ---------- popover de palabra ---------- */
.avz-pop{position:fixed; z-index:60; width:248px; max-width:calc(100vw - 16px); background:var(--surface); border:1px solid var(--line-2); border-radius:16px;
  box-shadow:var(--sombra-pop, 0 8px 22px rgba(28,43,89,.16)); padding:12px 13px}
.avz-pop[hidden]{display:none}
.avz-pop-row{display:flex; align-items:center; gap:8px}
.avz-pop-word{font-family:var(--serif); font-size:18px; font-weight:600; color:var(--ink)}
.avz-pop-tr{flex:1; font-family:var(--sans); font-size:13px; color:var(--accent); font-style:italic}
.avz-pop-play{flex:0 0 auto; width:28px; height:28px; border-radius:9px; border:1px solid var(--line-2); background:var(--canvas-2); color:var(--brand); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.avz-pop-play svg{width:15px; height:15px}
.avz-pop-mean{font-family:var(--sans); font-size:12.5px; line-height:1.45; color:var(--ink); margin:9px 0 0}
.avz-pop-lab{font-family:var(--mono); font-size:9.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); margin:10px 0 3px}
.avz-pop-ex{margin:0; padding-left:15px; font-family:var(--sans); font-size:12px; line-height:1.5; color:#4a463d}
.avz-pop-ex li{margin:2px 0}
.avz-pop-add{display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:11px; background:none; border:1.5px solid var(--accent); color:var(--accent-ink); border-radius:12px; padding:9px; font-family:var(--sans); font-size:12.5px; font-weight:500; cursor:pointer}
.avz-pop-add svg{width:15px; height:15px}
.avz-pop-add.added{border-color:var(--good); color:var(--good)}
.avz-pop-arrow{position:absolute; bottom:-7px; left:60px; width:13px; height:13px; background:var(--surface); border-right:1px solid var(--line-2); border-bottom:1px solid var(--line-2); transform:rotate(45deg)}
.avz-pop.below .avz-pop-arrow{bottom:auto; top:-7px; transform:rotate(225deg)}

/* ---------- aclaramiento ---------- */
.avz-aclar-body{padding:15px 14px}
.avz-wdots{display:flex; gap:6px; justify-content:center; margin-bottom:13px}
.avz-wd{width:9px; height:9px; border-radius:50%; border:1.5px solid var(--line-2)}
.avz-wd.on{background:var(--accent); border-color:var(--accent)} .avz-wd.dn{background:var(--good); border-color:var(--good)}
.avz-wcard{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:14px; box-shadow:var(--sombra-card)}
.avz-wtop{display:flex; align-items:center; justify-content:center; gap:11px}
.avz-bigw{font-family:var(--serif); font-size:26px; font-weight:600; color:var(--ink)}
.avz-obj{font-family:var(--sans); font-size:12.5px; color:var(--muted); text-align:center; margin:13px 0 7px}
.avz-fdots{display:flex; gap:5px; justify-content:center; align-items:center; margin-bottom:6px}
.avz-fd{width:8px; height:8px; border-radius:50%; border:1.5px solid var(--line-2)} .avz-fd.dn{background:var(--good); border-color:var(--good)}
.avz-fextra{font-family:var(--mono); font-size:10px; color:var(--good)}
.avz-slots{display:flex; flex-direction:column; gap:9px; margin-top:4px}
.avz-slot{border:1px solid var(--line); border-radius:13px; padding:9px 10px; background:var(--surface)}
.avz-slh{display:flex; align-items:center; gap:7px; font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--ink)}
.avz-ok{flex:0 0 auto; width:18px; height:18px; border-radius:50%; background:var(--good); color:#fff; display:inline-flex; align-items:center; justify-content:center}
.avz-ok svg{width:12px; height:12px}
.avz-score{margin-left:auto; font-family:var(--mono); font-size:11px; background:#E1ECE3; color:#2f5840; padding:4px 7px; border-radius:8px}
.avz-slrow{display:flex; align-items:center; gap:8px; margin-top:8px}
.avz-sltext{flex:1; font-family:var(--sans); font-size:13px; color:var(--ink); line-height:1.4}
.avz-fb{font-family:var(--sans); font-size:12px; line-height:1.45; color:#4a463d; margin-top:8px; padding-top:7px; border-top:1px dashed var(--line)}
.avz-fb b{font-weight:500; color:var(--brand)}
.avz-recslot{display:flex; flex-direction:column; align-items:center; gap:8px; border:1.5px dashed var(--line-2); border-radius:13px; padding:14px; margin-top:11px}
.avz-mic{width:48px; height:48px; border-radius:15px; background:var(--rec); border:none; color:#fff; display:inline-flex; align-items:center; justify-content:center; cursor:pointer; transition:transform .12s ease}
.avz-mic svg{width:22px; height:22px}
.avz-mic.recording{animation:avzpulse 1s ease-in-out infinite}
@keyframes avzpulse{0%,100%{transform:scale(1)}50%{transform:scale(1.07)}}
.avz-status{font-family:var(--sans); font-size:12px; color:var(--muted); text-align:center}
.avz-nav{display:flex; justify-content:space-between; align-items:center; padding:12px 14px 0}
.avz-nbtn{display:inline-flex; align-items:center; gap:4px; font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--brand); background:none; border:none; cursor:pointer}
.avz-nbtn svg{width:16px; height:16px}
.avz-nbtn[disabled]{color:var(--ghost); cursor:default}
.avz-swipehint{font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--ghost); text-align:center; margin-top:14px}
.avz-fin-list{display:flex; flex-direction:column; gap:7px; margin-bottom:6px}
.avz-fin-row{display:flex; align-items:center; justify-content:space-between; background:var(--surface); border:1px solid var(--line); border-radius:12px; padding:10px 13px}
.avz-fin-w{font-family:var(--serif); font-size:16px; color:var(--ink)}
.avz-fin-c{font-family:var(--mono); font-size:11px; color:var(--muted); background:var(--canvas-2); border-radius:8px; padding:4px 8px}
.avz-fin-c.dn{background:var(--good); color:#fff}

/* ---------- actuar (E4) ---------- */
.avz-bub.turn{background:#FCF4EA; border:1.5px solid var(--accent)}
.avz-tchip{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-ink); background:var(--accent); padding:3px 7px; border-radius:6px}
.avz-tchip svg{width:13px; height:13px}
.avz-tgt{font-family:var(--sans); font-size:13.5px; line-height:1.5; color:var(--muted); margin-top:7px}
.avz-reflink{display:inline-flex; align-items:center; gap:4px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--brand); background:none; border:none; padding:0; margin-top:8px; cursor:pointer}
.avz-reflink svg{width:14px; height:14px}
.avz-donechip{display:flex; align-items:center; gap:6px; font-family:var(--sans); font-size:12.5px; font-weight:500; color:#2f5840}
.avz-seerep{margin-left:auto; display:inline-flex; align-items:center; gap:3px; font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--brand); background:none; border:none; cursor:pointer}
.avz-seerep svg{width:14px; height:14px}
.avz-report{margin-top:9px; border-top:1px dashed var(--line); padding-top:9px}
.avz-rlab{font-family:var(--mono); font-size:9.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin:9px 0 3px}
.avz-rlab:first-child{margin-top:0}
.avz-rtext{font-family:var(--sans); font-size:12px; line-height:1.45; color:#4a463d}
.avz-rec{display:flex; align-items:center; gap:10px; justify-content:center}
.avz-rec.idle{flex-direction:column; gap:8px}
.avz-rbtn{flex:0 0 auto; width:40px; height:40px; border-radius:13px; border:1px solid var(--line-2); background:var(--canvas-2); color:var(--muted); display:inline-flex; align-items:center; justify-content:center; cursor:pointer}
.avz-rbtn.stop{background:var(--rec); border-color:var(--rec); color:#fff}
.avz-reclive{flex:1; display:flex; align-items:center; gap:7px; font-family:var(--sans); font-size:13px; color:var(--rec)}
.avz-reclive i{width:9px; height:9px; border-radius:50%; background:var(--rec); animation:avzpulse 1s infinite}
.avz-rprev{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:13px; color:var(--brand); background:none; border:1px solid var(--line-2); border-radius:11px; padding:8px 12px; cursor:pointer}
.avz-rsend{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:13px; font-weight:500; color:var(--accent-ink); background:var(--accent); border:none; border-radius:11px; padding:8px 14px; cursor:pointer}
.avz-rsend svg{width:15px; height:15px}
.avz-rec-hint{font-family:var(--sans); font-size:12px; color:var(--muted)}
.avz-rredo{display:inline-flex; align-items:center; gap:6px; font-family:var(--sans); font-size:12.5px; font-weight:500; color:var(--brand); background:none; border:1px solid var(--line-2); border-radius:11px; padding:8px 11px; cursor:pointer}
.avz-rredo svg{width:15px; height:15px}
/* "escribiendo…" en el chat (las burbujas aparecen una a una) */
.avz-typing{display:inline-flex; gap:5px; align-items:center; padding:13px 15px}
.avz-typing span{width:7px; height:7px; border-radius:50%; background:var(--line-2); display:inline-block; animation:avzdot 1.1s infinite}
.avz-typing span:nth-child(2){animation-delay:.16s}
.avz-typing span:nth-child(3){animation-delay:.32s}
@keyframes avzdot{0%,60%,100%{opacity:.35; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

/* ---------- catálogo (lectura) ---------- */
.avz-player{display:flex; align-items:center; gap:11px; padding:13px 14px; background:var(--canvas-2); border-bottom:1px solid var(--line)}
.avz-pmeta{flex:1} .avz-pmeta b{font-family:var(--sans); font-size:13px; font-weight:500; display:block} .avz-pmeta small{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted)}
.avz-scrub{position:relative; height:6px; border-radius:4px; background:var(--line-2); margin:13px 16px 0}
.avz-fill{position:absolute; left:0; top:0; bottom:0; width:0; border-radius:4px; background:var(--accent)}
.avz-knob{position:absolute; top:50%; left:0; width:14px; height:14px; border-radius:50%; background:var(--accent); border:2px solid var(--surface); box-shadow:0 1px 3px rgba(0,0,0,.25); transform:translate(-50%,-50%)}
.avz-times{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; color:var(--muted); margin:7px 16px 0}
.avz-toolbar{display:flex; justify-content:flex-end; padding:9px 16px 0}
.avz-read{font-family:var(--serif); font-size:16px; line-height:1.75; color:#332e26; padding:12px 16px 6px}

/* ---------- mission (dictado) ---------- */
.avz-mis-body{padding:15px 14px}
.avz-listen{display:flex; align-items:center; gap:11px; width:100%; text-align:left; background:var(--surface); border:1px solid var(--line); border-radius:15px; padding:12px; margin-bottom:13px; cursor:pointer; box-shadow:var(--sombra-card)}
.avz-listen b{font-family:var(--sans); font-size:14px; font-weight:500} .avz-listen small{font-family:var(--mono); font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:var(--muted); display:block; margin-top:3px}
.avz-area{width:100%; box-sizing:border-box; background:var(--canvas-2); border:1px solid var(--line-2); border-radius:13px; padding:11px 12px; font-family:var(--serif); font-size:15px; line-height:1.55; color:#332e26; min-height:100px; box-shadow:inset 0 1px 2px rgba(0,0,0,.05); resize:vertical; margin-bottom:13px}
.avz-diff{font-family:var(--serif); font-size:15px; line-height:1.7; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:12px 13px; color:#332e26}
.avz-miss{text-decoration:underline wavy var(--rec); text-decoration-thickness:1.5px; text-underline-offset:3px; color:#8a2f1d}
.avz-stats{display:flex; gap:10px; margin:13px 0}
.avz-stat{flex:1; background:var(--canvas-2); border-radius:13px; padding:10px; text-align:center}
.avz-stat b{font-family:var(--serif); font-size:22px; display:block} .avz-stat.ok b{color:var(--good)}
.avz-stat small{font-family:var(--mono); font-size:9.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); display:block; margin-top:4px}
.avz-wl{font-family:var(--mono); font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); margin:4px 0 8px}
.avz-chips{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:13px}
.avz-chip{font-family:var(--sans); font-size:13px; background:#F7E2DC; color:#8a2f1d; border:1px solid #e8b9ad; border-radius:9px; padding:6px 10px}
.avz-mission .btn{width:100%; margin-top:8px}

/* ---------- fin de actividad ---------- */
.avz-done{padding:24px 16px; text-align:center}
.avz-done .page-title{margin-bottom:8px}

/* ---------- informe del Actuar + reingreso ---------- */
.avz-rep-body{padding:16px 15px 20px}
.avz-rep-hero{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sombra-card); padding:18px; text-align:center; margin-bottom:14px}
.avz-rep-big{font-family:var(--serif); font-size:34px; font-weight:600; color:var(--muted); line-height:1}
.avz-rep-big.sc{color:var(--good)}
.avz-rep-lbl{font-family:var(--mono); font-size:10px; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); margin-top:4px}
.avz-rep-msg{font-family:var(--sans); font-size:13px; color:var(--ink); margin:10px 0 0}
.avz-rep-gl{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; color:var(--brand); margin:14px 0 8px}
.avz-rep-turn{display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px 12px; margin-bottom:9px}
.avz-rep-turn .avz-play.dim{opacity:.4; cursor:default}
.avz-rep-tn{flex:1; min-width:0}
.avz-rep-ln{font-family:var(--sans); font-size:13px; line-height:1.4; color:var(--ink)}
.avz-rep-tip{font-family:var(--sans); font-size:12px; line-height:1.4; color:var(--muted); margin-top:4px}
.avz-score.mid{background:#F7E9D4; color:#86571a; border-color:#e7c98f}
.avz-score.low{background:#F7E2DC; color:#8a2f1d; border-color:#e8b9ad}
.avz-ch-card{background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sombra-card); padding:22px 16px; text-align:center; margin-bottom:14px}
.avz-ch-ic{display:inline-flex; width:54px; height:54px; border-radius:16px; background:var(--accent-soft); align-items:center; justify-content:center; margin-bottom:12px}
.avz-ch-ic svg{width:26px; height:26px; fill:none; stroke:var(--accent-ink); stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.avz-ch-card h3{font-family:var(--serif); font-size:18px; font-weight:600; margin:0 0 5px}
.avz-ch-card p{font-family:var(--sans); font-size:13px; color:var(--muted); margin:0}

/* ---------- línea de tiempo: bloque avanzado ---------- */
.avz-divider{display:flex; align-items:center; justify-content:center; margin:18px 0 4px}
.avz-divider-lbl{font-family:var(--mono); font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--brand);
  background:var(--screen); padding:0 12px; position:relative; z-index:1}
.avz-divider::before{content:""; position:absolute; left:24px; right:24px; border-top:1.5px solid var(--line-2)}
.avz-est .est-num.avz-num{display:inline-flex; align-items:center; justify-content:center; color:var(--brand)}
.avz-est .est-num.avz-num svg{width:22px; height:22px}
.avz-card .est-kicker{color:var(--accent-ink)}
.avz-fichas{display:inline-flex; gap:4px; margin-top:6px; vertical-align:middle}
.avz-fichas i{width:8px; height:8px; border-radius:50%; border:1.5px solid var(--line-2); display:inline-block}
.avz-fichas i.fdone{background:var(--good); border-color:var(--good)}

/* ---------- menú de etapas (la "aba" que sube) ---------- */
.avz-menu-card{margin:14px; background:var(--surface); border:1px solid var(--line); border-radius:18px; box-shadow:var(--sombra-card); overflow:hidden; animation:avzrise .22s ease}
@keyframes avzrise{from{transform:translateY(18px)} to{transform:none}}
.avz-menu-head{display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-bottom:1px solid var(--line)}
.avz-menu-kick{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--brand)}
.avz-menu-count{font-family:var(--mono); font-size:12px; color:var(--muted)}
.avz-etapa-row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; padding:13px 15px; background:none; border:none; border-bottom:1px dashed var(--line); cursor:pointer; transition:background .12s ease}
.avz-etapa-row:last-child{border-bottom:none}
.avz-etapa-row:hover{background:var(--canvas-2)}
.avz-etapa-ix{flex:0 0 auto; width:30px; height:30px; border-radius:50%; border:1.5px solid var(--line-2); display:flex; align-items:center; justify-content:center; font-family:var(--serif); font-size:15px; color:var(--muted)}
.avz-etapa-ix svg{width:16px; height:16px}
.avz-etapa-row.done .avz-etapa-ix{border-color:var(--good); background:var(--good); color:#fff}
.avz-etapa-tx{flex:1; min-width:0}
.avz-etapa-tx b{font-family:var(--sans); font-size:14.5px; font-weight:500; display:block}
.avz-etapa-tx small{font-family:var(--sans); font-size:12px; color:var(--muted)}
.avz-etapa-st{flex:0 0 auto; display:flex; align-items:center; gap:7px; color:var(--muted)}
.avz-etapa-st em{font-family:var(--mono); font-size:10px; letter-spacing:.04em; text-transform:uppercase; color:var(--good); font-style:normal}
.avz-etapa-st svg{width:18px; height:18px}

/* ---------- guía como hoja inferior sobre el camino ---------- */
.avz-sheet-backdrop{position:fixed; inset:0; z-index:60; background:rgba(20,28,55,.5); display:flex; flex-direction:column; justify-content:flex-end; animation:avzfade .18s ease}
.avz-sheet-backdrop[hidden]{display:none}
@keyframes avzfade{from{opacity:0} to{opacity:1}}
.avz-sheet{background:var(--screen); border-radius:24px 24px 0 0; box-shadow:0 -10px 30px rgba(20,28,55,.28); padding:8px 16px 22px; max-height:84vh; overflow-y:auto; animation:avzrise .24s ease}
.avz-sheet svg{fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.avz-sheet-handle{width:40px; height:5px; border-radius:3px; background:var(--line-2); margin:4px auto 12px}
.avz-sh-head{display:flex; align-items:center; gap:11px; padding-bottom:11px; margin-bottom:4px; border-bottom:1px solid var(--line)}
.avz-sh-ic{flex:0 0 auto; width:40px; height:40px; border-radius:13px; background:var(--accent); display:flex; align-items:center; justify-content:center}
.avz-sh-ic svg{width:21px; height:21px; stroke:var(--accent-ink)}
.avz-sh-tt{flex:1; min-width:0}
.avz-sh-tt b{font-family:var(--serif); font-size:18px; font-weight:600; display:block; color:var(--ink)}
.avz-sh-tt small{font-family:var(--mono); font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted)}
.avz-sh-x{flex:0 0 auto; width:32px; height:32px; border-radius:10px; border:1px solid var(--line-2); background:var(--surface); color:var(--muted); display:flex; align-items:center; justify-content:center; cursor:pointer}
.avz-sh-x svg{width:16px; height:16px}
.avz-sheet-list{padding-top:2px}

/* ============================================================
   LOGIN GATE (sesión Supabase) — overlay por encima de todo
   ============================================================ */
.login-gate{
  position:fixed; inset:0; z-index:100; background:var(--screen);
  display:grid; place-items:center; padding:24px;
}
.login-card{
  width:min(420px, 100%); background:var(--surface);
  border:1px solid var(--line-2); border-radius:22px;
  padding:28px 26px; box-shadow:var(--sombra-card);
}
.login-kicker{font-family:var(--mono); font-size:11px; letter-spacing:.08em;
  text-transform:uppercase; color:var(--muted); margin:0 0 6px}
.login-title{font-family:var(--serif); font-size:26px; font-weight:700;
  color:var(--navy); margin:0 0 10px; letter-spacing:-.01em}
.login-sub{font-size:14.5px; color:var(--ink); line-height:1.55; margin:0 0 16px}
.login-form{display:flex; flex-direction:column; gap:10px}
.login-input{
  font:inherit; font-size:15px; padding:12px 14px; border-radius:12px;
  border:1px solid var(--line-2); background:var(--screen); color:var(--ink);
}
.login-input:focus{outline:2px solid var(--accent); border-color:var(--accent)}
.login-status{font-size:13px; color:var(--muted); min-height:18px; margin:10px 0 0}
.login-actions{display:flex; gap:10px}

/* ============================================================
   Conversación · reproductor estilo WhatsApp + escribiendo + revisar
   ============================================================ */
.conv-bubble .conv-text{margin:0}
.conv-play{display:flex; align-items:center; gap:10px; margin-top:9px}
.conv-play-btn{flex:none; width:34px; height:34px; border-radius:11px; border:none; cursor:pointer;
  background:var(--accent); color:var(--accent-ink); display:inline-flex; align-items:center; justify-content:center;
  transition:transform .12s}
.conv-play-btn:hover{transform:translateY(-1px)}
.conv-play-btn svg{width:16px; height:16px; fill:currentColor; stroke:none}
.conv-play-bar{flex:1; height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; min-width:56px; cursor:pointer}
.conv-play-bar i{display:block; height:100%; width:0; background:var(--accent)}
.conv-play.loading .conv-play-btn{opacity:.5; pointer-events:none; animation:blink 1s infinite}
/* chip de velocidad (como WhatsApp) al final del reproductor */
.conv-play-spd{flex:none; min-width:34px; height:26px; padding:0 8px; border-radius:8px; cursor:pointer;
  font-family:var(--mono); font-size:11.5px; font-weight:600; border:1px solid var(--line-2);
  background:var(--surface); color:var(--muted)}
.conv-play-spd.on{background:var(--accent-soft); border-color:var(--accent); color:var(--accent-ink)}

/* indicador "escribiendo" (tres puntos) */
.conv-typing{display:inline-flex; gap:5px; padding:14px 16px !important}
.conv-typing span{width:7px; height:7px; border-radius:50%; background:var(--muted);
  animation:asistBlink 1.2s infinite ease-in-out}
.conv-typing span:nth-child(2){animation-delay:.2s}
.conv-typing span:nth-child(3){animation-delay:.4s}
/* los mismos puntitos, del lado del alumno (burbuja navy) = "escuchando tu audio" */
.conv-msg.user .conv-typing span{background:var(--surface); opacity:.85}

/* pie: botón primario SIEMPRE centrado (grid 1fr auto 1fr); apagar a un lado */
.conv-ctrls{display:grid; grid-template-columns:1fr auto 1fr; align-items:center; width:100%}
.conv-ctrls-side{display:flex; align-items:center}
.conv-ctrls-side:first-child{justify-content:flex-end; padding-right:22px}
.conv-mic:disabled{opacity:.35; cursor:default; animation:none; transform:none; box-shadow:none}
.conv-mic.conv-send{background:var(--accent); color:var(--accent-ink)}   /* enviar = mismo cuadro central */
.conv-rev-del{flex:none; width:48px; height:48px; border-radius:15px; border:1px solid var(--line-2); cursor:pointer;
  background:var(--surface); color:var(--rec); display:inline-flex; align-items:center; justify-content:center; transition:transform .12s}
.conv-rev-del svg{width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round}
.conv-rev-del:hover{transform:translateY(-1px)}
.conv-rev-del:active{transform:translateY(1px)}
.conv-rec-dot{display:inline-block; width:8px; height:8px; border-radius:50%; background:var(--rec);
  margin-right:6px; animation:blink 1s infinite; vertical-align:middle}