/* ============================================================================
   fentho/ui.css — SISTEMA VISUAL DE FENTHO
   ============================================================================
   Extraído de `Fentho Suite.dc.html`, que es el máster de producto y diseño.
   Los valores (colores, medidas, radios, sombras, muelles) NO son una
   interpretación: están tomados del prototipo tal cual.

   Regla: si una decisión visual no está aquí porque no está en el máster, no se
   inventa. Se busca en el máster.
   ============================================================================ */

@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800,900&f[]=general-sans@400,500,600,700&f[]=jetbrains-mono@400,500&display=swap");

:root{
  /* Papel y superficies */
  --papel:#F2EEE7;
  --lienzo-1:#FFFEFC;            /* el panel principal es un degradado */
  --lienzo-2:#FCFAF6;
  --rail-1:#F7F3EC;              /* la barra lateral también */
  --rail-2:#F2EDE4;
  --rail-hover:#EAE5DB;
  --superficie:#FAF8F4;
  --superficie-2:#F0ECE4;

  /* Tinta */
  --tinta:#191714;
  --tinta-2:#575148;
  --apagado:#7A7367;
  --apagado-2:#8D8578;
  --apagado-3:#9B9488;
  --apagado-4:#A29A8C;

  /* Bordes */
  --borde:#EAE4D9;
  --borde-2:#E4DED2;
  --borde-3:#DDD7CB;
  --borde-4:#CFC7B7;

  /* Acento */
  --acento:#BE5029;
  --acento-osc:#A8441F;
  --acento-link:#9E3F1C;
  --acento-suave:#F2D9CB;
  --acento-papel:#FDF3EE;
  /* Degradado del boton de accion. Vive aqui y no solo en fentho.css porque las
     pantallas de acceso (entrar, crear-cuenta, onboarding) cargan solo ui.css:
     sin esta variable su boton se quedaba sin fondo, blanco sobre blanco. */
  --acento-grad:linear-gradient(180deg,#CD5B31,#B0451F);

  /* Noche */
  --noche:#1C1917;
  --noche-2:#262220;
  --noche-texto:#F8F3EA;

  /* Estados de concepto (STATUS del máster) */
  --ok-bg:#E6F3EB;   --ok-fg:#24885A;
  --rev-bg:#FAF0D9;  --rev-fg:#956813;
  --cut-bg:#F0ECE4;  --cut-fg:#7A7367;

  /* Fenths — los tres estados de la píldora */
  --fp-bd:#E4DED2;   --fp-bg:#FAF8F4;   --fp-fg:#3E3A33;
  --fp-avi-bd:#EEE1CE; --fp-avi-bg:#FDF8F0;
  --fp-bajo-bd:#EFD0C2; --fp-bajo-bg:#FDF3EE; --fp-bajo-fg:#8A3C1E;

  /* Fenthium / Inteligencia IA (Semantic Color: Morado) */
  --fenthium:#5C46B4;
  --fenthium-osc:#4B3899;
  --fenthium-bg:#F0ECFA;
  --fenthium-bg-2:#F7F5FD;
  --fenthium-border:#DDD4F5;
  --fenthium-border-2:#E1DAF6;
  --fenthium-glow:0 0 24px rgba(92,70,180,.18);

  /* Insignia de lugar */
  --badge-bg:#F0ECFA; --badge-fg:#5C46B4;

  --titular:'Cabinet Grotesk',system-ui,sans-serif;
  --texto:'General Sans',system-ui,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,monospace;

  --muelle:cubic-bezier(.34,1.28,.64,1);

  /* Sombras del máster */
  --s-panel:0 1px 1.5px rgba(41,30,20,.05),0 5px 12px -8px rgba(41,30,20,.18),
            0 20px 44px -18px rgba(41,30,20,.2),inset 0 1px 0 rgba(255,253,250,.95);
  --s-sutil:0 1px 1.5px rgba(41,30,20,.05),0 5px 12px -8px rgba(41,30,20,.18);
  --s-eleva:0 1px 2px rgba(41,30,20,.05),0 8px 18px -12px rgba(41,30,20,.32);
  --s-acento:0 1px 2px rgba(41,30,20,.14),0 10px 22px -12px rgba(190,80,41,.65),
             inset 0 1px 0 rgba(255,255,255,.22);
  --s-acento-hover:0 2px 4px rgba(41,30,20,.14),0 14px 26px -12px rgba(190,80,41,.7),
                   inset 0 1px 0 rgba(255,255,255,.22);
  --s-modal:0 32px 80px -20px rgba(25,23,20,.5);
}

*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--papel);font-family:var(--texto);color:var(--tinta);-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{margin:0;font-family:var(--titular)}
p{margin:0}
a{color:var(--acento-link);text-decoration:none}
a:hover{color:var(--acento)}
::selection{background:var(--acento-suave);color:var(--tinta)}
*::-webkit-scrollbar{width:10px}
*::-webkit-scrollbar-thumb{background:var(--borde-3);border-radius:999px;border:3px solid #FDFCFA}
button{font:inherit;border:0;background:none;color:inherit;cursor:pointer}

/* Animaciones del máster */
@keyframes fx-rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes fx-float{from{opacity:0;transform:translateY(14px) scale(.98)}to{opacity:1;transform:none}}
@keyframes fx-veil{from{opacity:0}to{opacity:1}}
@keyframes fx-spin{to{transform:rotate(360deg)}}
@keyframes fx-shimmer{from{background-position:-460px 0}to{background-position:460px 0}}
.fx-rise{animation:fx-rise .34s var(--muelle) both}
.fx-float{animation:fx-float .4s var(--muelle) both}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ── APP SHELL ───────────────────────────────────────────────────────────── */
.app{display:flex;height:100vh;padding:8px;gap:0}

/* Barra lateral */
.rail{
  background:linear-gradient(180deg,var(--rail-1),var(--rail-2));
  width:232px;flex-shrink:0;display:flex;flex-direction:column;gap:20px;
  padding:12px 10px;transition:width .22s var(--muelle);overflow:hidden}
.app[data-rail="plegado"] .rail{width:64px}
.app[data-rail="plegado"] .rail .solo-abierto{display:none}

.rail-marca{display:flex;align-items:center;gap:9px;padding:0 5px;min-height:34px}
.logo-cuadro{width:29px;height:29px;border-radius:10px;background:var(--acento);display:grid;place-items:center;flex-shrink:0;
  box-shadow:0 1px 2px rgba(41,30,20,.18),0 6px 14px -6px rgba(190,80,41,.45),inset 0 1px 0 rgba(255,255,255,.28)}
.logo-cuadro i{width:10px;height:10px;border-radius:3px 3px 3px 10px;background:linear-gradient(180deg,#FFFEFC,#FCFAF6);display:block}
.ctx-btn{display:flex;align-items:center;gap:8px;flex:1;min-width:0;padding:5px 7px;border-radius:12px;cursor:pointer;transition:background .14s ease;text-align:left}
.ctx-btn:hover{background:var(--rail-hover)}
.ctx-nombre{display:flex;align-items:baseline;gap:1px;font-family:var(--titular);font-weight:800;font-size:16.5px;letter-spacing:-.025em;line-height:1.1}
.ctx-nombre i{color:var(--acento);font-size:20px;line-height:0;font-style:normal}
.ctx-etiqueta{font-size:11.5px;color:var(--apagado);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.btn-primario{display:flex;align-items:center;gap:9px;height:40px;padding:0 12px;border-radius:14px;
  border:1px solid var(--acento-osc);background:var(--acento);color:#FDFCFA;
  font-family:var(--texto);font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;
  transition:all .16s var(--muelle);box-shadow:var(--s-acento)}
.btn-primario:hover{background:var(--acento-osc);transform:translateY(-1px);box-shadow:var(--s-acento-hover)}
.btn-primario:active{transform:translateY(0) scale(.985)}

.rail nav{display:flex;flex-direction:column;gap:3px}
.nav-item{display:flex;align-items:center;gap:11px;height:38px;padding:0 12px;border-radius:12px;font-size:14px;
  cursor:pointer;transition:all .16s var(--muelle);border:1px solid transparent;color:var(--tinta-2);font-weight:500;width:100%;text-align:left}
.nav-item:hover{background:var(--rail-hover);color:var(--tinta)}
.nav-item[aria-current="page"]{background:#FDFCFA;border-color:var(--borde-2);color:var(--tinta);font-weight:600;box-shadow:var(--s-sutil)}
.nav-item .cuenta{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--apagado-3)}
.grupo-titulo{font-family:var(--mono);font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--apagado-4);padding:0 13px 8px;white-space:nowrap}

/* Panel principal */
.lienzo{flex:1;min-width:0;display:flex;flex-direction:column;
  background:linear-gradient(180deg,var(--lienzo-1),var(--lienzo-2));
  border:1px solid var(--borde);border-radius:26px;overflow:hidden;box-shadow:var(--s-panel);position:relative}

/* Barra superior */
.topbar{height:62px;flex-shrink:0;display:flex;align-items:center;gap:16px;padding:0 18px;position:relative;z-index:30;
  border-bottom:1px solid transparent;transition:all .2s var(--muelle)}
.topbar.pegada{border-bottom-color:var(--borde-2);background:rgba(253,252,250,.86);backdrop-filter:blur(12px);box-shadow:var(--s-sutil)}
.lugar{display:flex;flex-direction:column;min-width:0;gap:1px}
.lugar-titulo{font-size:15px;font-weight:600;letter-spacing:-.012em;white-space:nowrap}
.lugar-meta{font-size:12px;color:var(--apagado-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lugar-insignia{display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:8px;background:var(--badge-bg);color:var(--badge-fg);font-size:11px;font-weight:600;white-space:nowrap}

.buscador{flex:1;max-width:380px;margin:0 auto;display:flex;align-items:center;gap:9px;height:36px;padding:0 13px;border-radius:12px;
  border:1px solid var(--borde-2);background:var(--superficie);color:var(--apagado-3);cursor:pointer;transition:all .14s var(--muelle)}
.buscador:hover{border-color:var(--borde-4);background:#F7F4EF;box-shadow:var(--s-sutil)}
.buscador span.texto{font-size:13.5px;flex:1;white-space:nowrap;overflow:hidden;text-align:left}
.tecla{font-family:var(--mono);font-size:10.5px;padding:2px 6px;border-radius:6px;background:var(--superficie-2);color:var(--tinta-2);flex-shrink:0}

.acciones{margin-left:auto;display:flex;align-items:center;gap:8px;flex-shrink:0}
.fenths{display:flex;align-items:center;gap:9px;height:34px;padding:0 12px;border-radius:12px;
  border:1px solid var(--fp-bd);background:var(--fp-bg);cursor:pointer;transition:all .16s var(--muelle)}
.fenths:hover{transform:translateY(-1px);box-shadow:var(--s-eleva)}
.fenths .moneda{position:relative;width:20px;height:20px;border-radius:7px;background:var(--superficie-2);display:grid;place-items:center;flex-shrink:0}
.fenths .cifra{font-family:var(--mono);font-size:12px;color:var(--fp-fg);white-space:nowrap}
.fenths[data-estado="aviso"]{border-color:var(--fp-avi-bd);background:var(--fp-avi-bg)}
.fenths[data-estado="bajo"]{border-color:var(--fp-bajo-bd);background:var(--fp-bajo-bg)}
.fenths[data-estado="bajo"] .cifra{color:var(--fp-bajo-fg)}
.fenths .comprar{font-size:11.5px;font-weight:600;color:var(--fp-bajo-fg);white-space:nowrap;border-left:1px solid rgba(138,60,30,.2);padding-left:9px}

.icono-btn{width:34px;height:34px;border-radius:12px;border:1px solid var(--borde-2);background:var(--superficie);
  display:grid;place-items:center;color:var(--tinta-2);transition:all .16s var(--muelle);position:relative}
.icono-btn:hover{transform:translateY(-1px);box-shadow:var(--s-eleva);border-color:var(--borde-4)}
.icono-btn .punto{position:absolute;top:6px;right:6px;width:7px;height:7px;border-radius:50%;background:var(--acento);border:1.5px solid var(--superficie)}
.avatar{width:34px;height:34px;border-radius:12px;background:var(--noche);color:var(--noche-texto);display:grid;place-items:center;
  font-family:var(--titular);font-weight:700;font-size:12.5px;letter-spacing:-.02em;cursor:pointer;transition:all .16s var(--muelle)}
.avatar:hover{transform:translateY(-1px);box-shadow:var(--s-eleva)}

/* Zona de contenido */
.contenido{flex:1;overflow-y:auto;padding:28px 32px 64px}
.contenido-estrecho{max-width:960px;margin:0 auto}

/* ── PIEZAS COMUNES ──────────────────────────────────────────────────────── */
.kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:var(--apagado-4)}
.h-lugar{font-family:var(--titular);font-size:30px;font-weight:800;letter-spacing:-.035em;line-height:1.06}
.sub-lugar{font-size:15px;color:var(--apagado);margin-top:8px;max-width:560px}

.tarjeta{border:1px solid var(--borde);border-radius:18px;background:#FDFCFA;padding:20px;transition:all .18s var(--muelle)}
.tarjeta:hover{transform:translateY(-2px);box-shadow:var(--s-eleva);border-color:var(--borde-3)}
.rejilla{display:grid;gap:14px;grid-template-columns:repeat(auto-fill,minmax(290px,1fr))}

.pastilla{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border-radius:8px;
  font-family:var(--mono);font-size:10.5px;background:var(--superficie-2);color:var(--tinta-2);white-space:nowrap}
.pastilla[data-s="ok"]{background:var(--ok-bg);color:var(--ok-fg)}
.pastilla[data-s="review"]{background:var(--rev-bg);color:var(--rev-fg)}
.pastilla[data-s="cut"]{background:var(--cut-bg);color:var(--cut-fg)}

/* Dominio por concepto: dom / cam / fra. Nunca porcentajes. */
.dominio{display:flex;align-items:center;gap:10px;font-family:var(--mono);font-size:11.5px;color:var(--apagado)}
.dominio b{color:var(--tinta);font-weight:500}
.dominio .barra{flex:1;height:5px;border-radius:3px;background:var(--superficie-2);overflow:hidden;display:flex;min-width:60px}
.dominio .barra i{display:block;height:100%}
.dominio .barra .dom{background:var(--ok-fg)}
.dominio .barra .cam{background:var(--acento)}
.dominio .barra .fra{background:var(--rev-fg)}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;height:40px;padding:0 16px;border-radius:13px;
  border:1px solid var(--borde-2);background:#FDFCFA;color:var(--tinta);font-size:14px;font-weight:500;
  transition:all .16s var(--muelle)}
.btn:hover{border-color:var(--borde-4);transform:translateY(-1px);box-shadow:var(--s-eleva)}
.btn.acento{border-color:var(--acento-osc);background:var(--acento);color:#FDFCFA;font-weight:600;box-shadow:var(--s-acento)}
.btn.acento:hover{background:var(--acento-osc);box-shadow:var(--s-acento-hover)}
.btn:disabled{opacity:.45;transform:none;box-shadow:none}

.vacio{max-width:460px;margin:12vh auto;text-align:center}
.vacio h2{font-family:var(--titular);font-size:24px;font-weight:800;letter-spacing:-.03em;margin:14px 0 10px}
.vacio p{color:var(--apagado);margin-bottom:22px}

/* Popovers del shell (contexto, notificaciones, perfil) */
.pop{position:absolute;z-index:60;min-width:260px;background:#FDFCFA;border:1px solid var(--borde);border-radius:16px;
  padding:8px;box-shadow:var(--s-modal);animation:fx-float .22s var(--muelle) both}
.pop-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;border-radius:11px;font-size:14px;text-align:left;transition:background .14s}
.pop-item:hover{background:var(--superficie)}
.pop-item .desc{display:block;font-size:12px;color:var(--apagado)}
.velo{position:fixed;inset:0;z-index:55;animation:fx-veil .18s ease both}

@media(max-width:900px){
  .app{padding:0}
  .rail{display:none}
  .lienzo{border-radius:0;border:0}
  .buscador{display:none}
}

/* ── Límite de plan ─────────────────────────────────────────────────────────
   No es un error: es un límite conocido del producto. Por eso no lleva rojo de
   alarma ni código de estado, solo lo que hace falta para decidir. */
.limite-caja{margin-top:16px;padding:22px;border-radius:18px;border:1px solid #EFE2C8;background:#FDF8EE}
.limite-kicker{font-family:var(--mono);font-size:10.5px;letter-spacing:.11em;text-transform:uppercase;color:#9A7B33}
.limite-tit{font-family:var(--titular);font-size:18px;font-weight:700;letter-spacing:-.02em;margin-top:6px}
.limite-txt{font-size:14.5px;color:var(--tinta-2);line-height:1.55;margin-top:6px}
.limite-barra{height:8px;border-radius:99px;background:#F0E6D2;overflow:hidden;margin-top:14px}
.limite-barra i{display:block;height:100%;border-radius:99px;background:#C9922F}
.limite-cifras{display:block;margin-top:6px;font-family:var(--mono);font-size:11.5px;color:#9A7B33}
.limite-pie{display:flex;gap:10px;align-items:center;margin-top:18px;flex-wrap:wrap}

/* ── Anillo de progreso de subida ───────────────────────────────────────────
   Un porcentaje real. Un spinner en una subida larga no distingue entre
   "va bien" y "se ha colgado". */
.anillo{position:relative;width:34px;height:34px;flex-shrink:0}
.anillo svg{width:34px;height:34px;transform:rotate(-90deg)}
.anillo-fondo{stroke:#EAE4D8}
.anillo-trazo{stroke:var(--acento);transition:stroke-dashoffset .25s linear}
.anillo-txt{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:9px;color:var(--apagado-2)}
.anillo[data-completo="1"] .anillo-trazo{stroke:#24885A}

/* ── Borrar, discreto y en dos toques ───────────────────────────────────────
   Un `confirm()` interrumpe; esto se desarma solo si no lo confirmas. */
.borrar-mini{width:26px;height:26px;border-radius:8px;border:1px solid transparent;background:none;
  color:var(--apagado-3);font-size:12px;line-height:1;flex-shrink:0;cursor:pointer;transition:all .14s ease}
.borrar-mini:hover{border-color:#EFD0C2;color:#A8441F;background:#FDF4F0}
.borrar-mini[data-armado="1"]{width:auto;padding:0 10px;border-color:#A8441F;color:#A8441F;
  background:#FDF4F0;font-size:11.5px;font-weight:600}
.borrar-mini:disabled{opacity:.5;cursor:default}

/* ── Acciones sobre un material ─────────────────────────────────────────── */
.acciones-mat{display:flex;align-items:center;gap:4px;flex-shrink:0}
.icono-btn{width:30px;height:30px;border-radius:9px;border:1px solid transparent;background:none;
  color:var(--apagado-2);display:grid;place-items:center;cursor:pointer;transition:all .14s ease}
.icono-btn:hover{border-color:var(--borde-3);background:#FBF9F5;color:var(--tinta)}
.borrar-mini.peligro:hover{border-color:#D9694A;color:#fff;background:#C0442A}
.borrar-mini.peligro[data-armado="1"]{border-color:#C0442A;background:#C0442A;color:#fff}
.nombre-edit{font-size:14.5px;font-weight:600;padding:2px 6px;border:0;border-bottom:2px solid var(--acento);
  background:#FFF9F5;outline:none;width:100%;font-family:var(--texto)}

/* ── Vista previa flotante del material ─────────────────────────────────── */
.pop-previa{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);z-index:60;
  width:min(680px,92vw);max-height:80vh;display:flex;flex-direction:column;
  background:var(--tarjeta);border:1px solid var(--borde-2);border-radius:22px;box-shadow:var(--s-eleva);overflow:hidden}
.previa-cab{display:flex;align-items:center;gap:12px;padding:18px 20px;border-bottom:1px solid var(--borde-2)}
.previa-cab h3{flex:1;font-family:var(--titular);font-size:17px;font-weight:700;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.previa-meta{font-family:var(--mono);font-size:11px;color:var(--apagado-3);white-space:nowrap}
.previa-cuerpo{overflow-y:auto;padding:8px 20px 20px}
.previa-frag{padding:14px 0;border-bottom:1px solid var(--borde)}
.previa-frag:last-of-type{border-bottom:0}
.previa-cita{display:inline-block;font-family:var(--mono);font-size:10.5px;color:var(--acento-osc);
  background:var(--acento-papel);padding:2px 8px;border-radius:7px;margin-bottom:7px}
.previa-frag p{font-size:14px;line-height:1.6;color:var(--tinta-2)}
.previa-cargando,.previa-pie{padding:18px 0;font-size:13.5px;color:var(--apagado-2)}

/* ── FENTHIUM AI UTILITIES ─────────────────────────────────────────────────── */
.fenthium-card{background:linear-gradient(180deg,#FAF8FD,#F2EEFC);border:1px solid var(--fenthium-border);border-radius:20px;padding:22px;box-shadow:var(--fenthium-glow)}
.fenthium-badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:99px;background:var(--fenthium-bg);border:1px solid var(--fenthium-border);color:var(--fenthium-osc);font-family:var(--mono);font-size:11px;font-weight:600}
.fenthium-btn{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border-radius:12px;background:var(--fenthium-bg);border:1px solid var(--fenthium-border);color:var(--fenthium-osc);font-size:13.5px;font-weight:600;cursor:pointer;transition:all .18s var(--muelle)}
.fenthium-btn:hover{background:#E9E2FA;border-color:#CBBDF0;transform:translateY(-1px)}
.fenthium-pulse{animation:fenthium-glow 2.2s infinite ease-in-out}
@keyframes fenthium-glow{0%,100%{box-shadow:0 0 0 0 rgba(92,70,180,.25)}50%{box-shadow:0 0 16px 4px rgba(92,70,180,.3)}}


/* ── BLOQUES ──────────────────────────────────────────────────────────────
   Los estilos de lo que pinta public/fentho/bloques.js. Estaban sin definir:
   el módulo generaba `.pregunta`, `.opcion`, `.letra` y `.salida` y ninguna
   existía, así que cualquier página que lo usara veía las opciones en fila,
   sin recuadro y con la letra pegada al texto. El Player no lo notaba porque
   tiene sus propios estilos en línea — y eso es justo el problema. */
.bloque{margin:0 0 18px}
.bloque p{font-size:15px;line-height:1.7;margin:0 0 12px}
.bloque p:last-child{margin-bottom:0}
.bloque code{font-family:var(--mono);font-size:.87em;background:var(--papel-3);
  padding:1.5px 5px;border-radius:5px;border:1px solid var(--borde)}

pre.codigo{background:var(--tinta);color:#F2EDE4;border-radius:12px;padding:14px 16px;
  overflow-x:auto;margin:0 0 12px;font-family:var(--mono);font-size:13px;line-height:1.75;white-space:pre}
pre.codigo code{background:none;border:0;padding:0;font-size:inherit;color:inherit}
pre.codigo .kw{color:#E8A87C}
pre.codigo .str{color:#A8D5A2}
pre.codigo .com{color:#8A7D6D;font-style:italic}
pre.codigo .num{color:#C9B6E8}

.salida{margin:-4px 0 14px;border:1px solid var(--borde);border-left:3px solid var(--acento);
  border-radius:0 10px 10px 0;background:var(--papel-2);padding:9px 13px}
.salida-etiqueta{display:block;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.08em;color:var(--apagado-3);margin-bottom:4px}
.salida-texto{font-family:var(--mono);font-size:12.5px;line-height:1.65;white-space:pre-wrap;margin:0;color:var(--tinta)}

.bloque-note{background:var(--papel-2);border:1px solid var(--borde);border-left:3px solid var(--acento);
  border-radius:0 12px 12px 0;padding:13px 16px;font-size:14.5px;line-height:1.65;margin:0 0 14px}
.bloque-bullets{margin:0 0 14px;padding-left:20px;display:flex;flex-direction:column;gap:7px}
.bloque-bullets li{font-size:14.5px;line-height:1.65}

/* Pregunta de opción múltiple */
.pregunta .enunciado{margin-bottom:13px}
.pregunta .opcion{display:flex;align-items:flex-start;gap:11px;width:100%;text-align:left;
  padding:12px 15px;border:1px solid var(--borde);border-radius:12px;background:#fff;
  font-size:14px;line-height:1.5;margin-bottom:8px;transition:all .16s var(--muelle)}
.pregunta .opcion:hover:not(:disabled){border-color:var(--borde-2);transform:translateX(2px)}
.pregunta .opcion:disabled{cursor:default}
.pregunta .letra{width:21px;height:21px;border-radius:6px;background:var(--papel-3);border:1px solid var(--borde);
  display:grid;place-items:center;font-family:var(--mono);font-size:11px;font-weight:600;
  color:var(--apagado);flex-shrink:0;margin-top:1px}
.pregunta .opcion[data-estado="acierto"]{background:#EFF8F3;border-color:#24885A}
.pregunta .opcion[data-estado="acierto"] .letra{background:#24885A;border-color:#24885A;color:#fff}
.pregunta .opcion[data-estado="fallo"]{background:#FDF5F1;border-color:#BE5029}
.pregunta .opcion[data-estado="fallo"] .letra{background:#BE5029;border-color:#BE5029;color:#fff}
.replica{margin-top:10px;font-size:13.5px;line-height:1.6;padding:11px 14px;border-radius:11px;
  animation:fx-rise .28s var(--muelle) both}
.replica[data-tipo="acierto"]{background:#EFF8F3;color:#1C6E49}
.replica[data-tipo="fallo"]{background:#FDF5F1;color:#A8401C}

.resumen{background:var(--papel-2);border:1px solid var(--borde);border-radius:16px;padding:18px 20px;margin:0 0 16px}
.origen,.cita{display:inline-block;margin-top:8px;font-family:var(--mono);font-size:10.5px;
  color:var(--apagado-3);border-bottom:1px dotted var(--borde-2)}

/* ── LA PRIMERA VEZ (tour.js) ─────────────────────────────────────────────── */
/* El recorrido guiado que se abre al entrar por primera vez. El velo oscurece
   todo menos la pieza que se está explicando: el agujero no es un recorte, es
   una sombra enorme hacia fuera desde un rectángulo transparente, así lo que se
   señala conserva su color de verdad. */
.tour{position:fixed;inset:0;z-index:200;animation:fx-veil .22s ease both}
.tour.saliendo{animation:fx-veil .18s ease reverse both}
/* El velo solo oscurece cuando NO hay foco (los pasos centrados). Cuando lo
   hay, quien oscurece es la sombra del propio foco: si pintaran los dos, la
   oscuridad se sumaría y la pantalla quedaría casi negra. */
.tour-velo{position:absolute;inset:0;background:rgba(25,23,20,.52);transition:background .2s ease}
.tour[data-foco="si"] .tour-velo{background:transparent}
.tour-foco{position:fixed;border-radius:15px;pointer-events:none;opacity:0;
  box-shadow:0 0 0 9999px rgba(25,23,20,.52),0 0 0 1.5px var(--acento),0 0 0 6px rgba(190,80,41,.22);
  transition:left .3s var(--muelle),top .3s var(--muelle),width .3s var(--muelle),height .3s var(--muelle),opacity .2s ease}

.tour-globo{position:fixed;width:min(378px,calc(100vw - 32px));z-index:2;
  background:linear-gradient(180deg,var(--lienzo-1),var(--lienzo-2));
  border:1px solid var(--borde-2);border-radius:20px;padding:17px 18px 15px;box-shadow:var(--s-modal)}
.tour-globo[data-lado="centro"]{width:min(430px,calc(100vw - 32px));padding:22px 24px 18px}

.tour-cab{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.tour-cab .kicker{flex:1;color:var(--acento)}
.tour-x{width:26px;height:26px;flex-shrink:0;border-radius:9px;display:grid;place-items:center;
  color:var(--apagado-3);border:1px solid transparent;transition:all .14s var(--muelle);cursor:pointer;background:none}
.tour-x:hover{background:var(--superficie-2);border-color:var(--borde-2);color:var(--tinta)}

.tour-cuerpo h2{font-family:var(--titular);font-size:19.5px;font-weight:800;letter-spacing:-.028em;line-height:1.18;margin:0 0 7px}
.tour-globo[data-lado="centro"] .tour-cuerpo h2{font-size:25px;letter-spacing:-.034em}
.tour-cuerpo p{margin:0;font-size:14px;line-height:1.62;color:var(--tinta-2)}
.tour-globo[data-lado="centro"] .tour-cuerpo p{font-size:14.5px}

.tour-pie{display:flex;align-items:center;gap:14px;margin-top:17px;padding-top:14px;border-top:1px solid var(--borde)}
.tour-puntos{display:flex;align-items:center;gap:5px;flex:1;min-width:0}
.tour-puntos i{width:5px;height:5px;border-radius:50%;background:var(--borde-4);display:block;transition:all .22s var(--muelle)}
.tour-puntos i.hecho{background:var(--acento-suave)}
.tour-puntos i.aqui{width:17px;border-radius:3px;background:var(--acento)}

.tour-botones{display:flex;align-items:center;gap:8px;flex-shrink:0}
.tour-atras,.tour-saltar{height:33px;padding:0 12px;border-radius:11px;font-family:var(--texto);font-size:13.5px;font-weight:500;
  color:var(--apagado);background:none;border:1px solid transparent;cursor:pointer;transition:all .14s var(--muelle)}
.tour-atras:hover,.tour-saltar:hover{color:var(--tinta);background:var(--superficie-2);border-color:var(--borde-2)}
.tour-siguiente{height:33px;padding:0 16px;border-radius:11px;border:1px solid var(--acento-osc);
  background:var(--acento);color:#FDFCFA;font-family:var(--texto);font-size:13.5px;font-weight:600;
  cursor:pointer;transition:all .16s var(--muelle);box-shadow:var(--s-acento)}
.tour-siguiente:hover{background:var(--acento-osc);transform:translateY(-1px);box-shadow:var(--s-acento-hover)}
.tour-siguiente:active{transform:translateY(0) scale(.985)}

@media(max-width:640px){
  .tour-globo,.tour-globo[data-lado="centro"]{width:calc(100vw - 24px)}
}

/* ── EL TUTOR, EN TODAS PARTES (tutor.js) ────────────────────────────────── */
/* La misma identidad violeta que dentro de una experiencia: es el mismo tutor,
   no otro. Flota sobre la página y no empuja nada de lo que ya hay. */
:root{ --violeta:#5C46B4; --violeta-bg:#EFEBFA; --violeta-bd:#C9BDF0; }

.tutor-lanza{position:fixed;right:24px;bottom:24px;z-index:90;display:inline-flex;align-items:center;justify-content:center;gap:9px;
  height:52px;padding:0 20px;border-radius:17px;border:0;cursor:pointer;
  background:var(--violeta);color:#F6F3FF;font-family:var(--texto);font-size:14.5px;font-weight:600;
  box-shadow:0 1px 2px rgba(41,30,20,.16),0 14px 30px -12px rgba(92,70,180,.7);
  transition:transform .18s var(--muelle),box-shadow .18s var(--muelle)}
.tutor-lanza:hover{transform:translateY(-2px);box-shadow:0 1px 2px rgba(41,30,20,.16),0 18px 36px -12px rgba(92,70,180,.8)}
.tutor-lanza[data-abierto="1"]{width:52px;padding:0;border-radius:50%}

.tutor{position:fixed;right:24px;bottom:88px;z-index:89;width:396px;max-width:calc(100vw - 40px);
  height:min(620px,calc(100vh - 128px));display:flex;flex-direction:column;overflow:hidden;
  background:var(--lienzo-1);border:1px solid var(--borde-2);border-radius:22px;
  box-shadow:0 2px 6px rgba(41,30,20,.08),0 28px 64px -18px rgba(41,30,20,.42);
  transform-origin:bottom right;animation:fx-emerge .24s var(--muelle) both}
@keyframes fx-emerge{from{opacity:0;transform:translateY(14px) scale(.96)}to{opacity:1;transform:none}}

.tutor-cab{flex-shrink:0;padding:15px 18px;border-bottom:1px solid var(--borde-2);
  background:linear-gradient(180deg,var(--violeta-bg),transparent)}
.tutor-cab .t{display:flex;align-items:center;gap:10px}
.tutor-cab .ic{width:30px;height:30px;border-radius:10px;background:var(--violeta);color:#F6F3FF;
  display:grid;place-items:center;flex-shrink:0}
.tutor-cab b{font-family:var(--titular);font-size:16px;font-weight:800;letter-spacing:-.02em}
.tutor-cab .ctx{font-size:12px;color:var(--apagado);margin:6px 0 0;line-height:1.45}

.tutor-hilo{flex:1;min-height:0;overflow-y:auto;padding:16px 18px;display:flex;flex-direction:column;gap:11px}
.tutor-hilo .msg{max-width:90%;padding:12px 14px;border-radius:15px;font-size:14px;line-height:1.6;white-space:pre-wrap;
  animation:fx-rise .22s var(--muelle) both}
.tutor-hilo .msg.tut{background:var(--violeta-bg);color:#2F2550;border-bottom-left-radius:5px}
.tutor-hilo .msg.yo{background:var(--superficie);border:1px solid var(--borde-2);color:var(--tinta);
  margin-left:auto;border-bottom-right-radius:5px}
.tutor-hilo .msg.tut[data-proactivo="1"]{border-left:3px solid var(--violeta)}
.tutor-hilo .msg .cita{display:block;margin-top:8px;font-family:var(--mono);font-size:10px;opacity:.7}

.tutor-pie{flex-shrink:0;padding:12px 18px;border-top:1px solid var(--borde-2);display:flex;gap:9px}
.tutor-pie input{flex:1;height:42px;padding:0 14px;border:1px solid var(--borde-2);border-radius:13px;
  background:var(--superficie);font-family:var(--texto);font-size:14px;color:var(--tinta);outline:none}
.tutor-pie input:focus{border-color:var(--violeta)}
.tutor-pie button{width:42px;height:42px;border-radius:13px;border:0;cursor:pointer;background:var(--violeta);color:#F6F3FF;
  display:grid;place-items:center;flex-shrink:0;transition:background .14s ease}
.tutor-pie button:hover{background:#4C39A0}
.tutor-limite{flex-shrink:0;font-size:11px;color:var(--apagado);padding:0 18px 12px;line-height:1.45}

@media(max-width:640px){
  .tutor{right:12px;left:12px;width:auto;bottom:84px}
  .tutor-lanza{right:16px;bottom:16px}
}