/* ── dash-demo.css — demos del caso Dashboard de Instituciones ──
   Requiere uds-kit.css (tokens y componentes reales de uds-v2) y
   base.css (lenguaje del portafolio). La cáscara .demo-* vive en
   ds-demo.css; aquí solo lo propio de este caso. */

/* ═══════════════════════════════════════════════════════════════
   DEMO 01 — del plano al producto
   Dos capas con la MISMA geometría: comparten las clases de grilla,
   así que cualquier media query las mueve juntas y nunca se desalinean.
   El plano sigue el tema del sitio (es un dibujo sobre el papel del
   portafolio); el producto se queda siempre claro, porque el dashboard
   retiró su dark mode en julio.
═══════════════════════════════════════════════════════════════ */
.pl{
  --x:50%;
  height:470px;
  position:relative;overflow:hidden;
  border:1px solid var(--grid-mayor);
  background:var(--papel);
  touch-action:pan-y;
}
.pl-layer{position:absolute;inset:0}
.pl-plan{
  /* recorta desde la derecha: el plano ocupa de 0 a --x */
  clip-path:inset(0 calc(100% - var(--x)) 0 0);
  z-index:2;
  /* opaco, si no el producto se transparenta debajo del plano.
     Lleva su propio papel milimetrado: el plano se dibuja sobre él. */
  background-color:var(--papel);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 0v64M32 0v64M48 0v64M0 16h64M0 32h64M0 48h64' stroke='rgba(20,20,20,.045)'/%3E%3Cpath d='M.5 0v64M0 .5h64' stroke='rgba(20,20,20,.09)'/%3E%3C/svg%3E");
  background-size:64px 64px;
}
[data-theme="dark"] .pl-plan{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64'%3E%3Cpath d='M16 0v64M32 0v64M48 0v64M0 16h64M0 32h64M0 48h64' stroke='rgba(240,239,236,.05)'/%3E%3Cpath d='M.5 0v64M0 .5h64' stroke='rgba(240,239,236,.11)'/%3E%3C/svg%3E");
}
.pl-rail{
  position:absolute;inset:0;width:100%;height:100%;z-index:4;
  margin:0;padding:0;background:none;border:0;-webkit-appearance:none;appearance:none;
  cursor:ew-resize;
}
.pl-rail:focus-visible{outline:2px solid #facc15;outline-offset:2px}
.pl-rail::-webkit-slider-thumb{-webkit-appearance:none;width:44px;height:100%;cursor:ew-resize}
.pl-rail::-moz-range-thumb{width:44px;height:100%;border:0;background:transparent;cursor:ew-resize}
/* la línea y el tirador son decorativos: el input real es invisible encima */
.pl-seam{
  position:absolute;top:0;bottom:0;left:var(--x);width:1px;z-index:3;
  background:#facc15;pointer-events:none;
}
.pl-grip{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  width:30px;height:30px;border-radius:50%;
  background:#facc15;color:#141414;
  display:grid;place-items:center;
  font-family:var(--mono);font-size:11px;line-height:1;
  box-shadow:0 1px 6px rgba(0,0,0,.25);
}
.pl-tag{
  position:absolute;top:10px;z-index:3;pointer-events:none;
  font-family:var(--mono);font-size:9.5px;letter-spacing:1px;text-transform:uppercase;
  padding:3px 7px;
}
.pl-tag-l{left:10px;background:var(--tinta);color:var(--papel)}
.pl-tag-r{right:10px;background:#141414;color:#fff}

/* ── la app: geometría compartida por plano y producto ── */
.pl-app{
  height:100%;padding:18px;
  display:grid;gap:12px;
  grid-template-rows:38px 74px 148px 1fr;
}
.pl-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.pl-charts{display:grid;grid-template-columns:1.1fr 1fr;gap:10px}

/* ── capa plano ── */
.pl-plan .pl-app{color:var(--tinta-2)}
.pl-b{
  border:1px solid var(--tinta-3);
  display:flex;flex-direction:column;justify-content:center;
  padding:8px 10px;min-width:0;
}
.pl-b .lb{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.8px;
  text-transform:uppercase;color:var(--tinta-2);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;
}
.pl-b .lb-n{font-size:15px;color:var(--tinta-3);margin-top:2px;font-family:var(--mono)}
/* aspa de bloque de contenido, como en un plano */
.pl-x{
  background-image:
    linear-gradient(to top right,transparent calc(50% - .6px),var(--tinta-3) 50%,transparent calc(50% + .6px)),
    linear-gradient(to bottom right,transparent calc(50% - .6px),var(--tinta-3) 50%,transparent calc(50% + .6px));
}
.pl-x .lb{background:var(--papel);padding:2px 6px;align-self:flex-start}
.pl-top-plan{display:flex;align-items:center;gap:8px;border:1px solid var(--tinta-3);padding:0 10px}
.pl-top-plan .lb{flex:1}
.pl-chip{border:1px solid var(--tinta-3);padding:2px 8px;font-family:var(--mono);font-size:8.5px;color:var(--tinta-3)}
/* cota: línea con topes, como medida de plano. Va absoluta dentro de la
   fila de KPIs para no consumir alto — si consumiera, el plano y el
   producto dejarían de alinearse, que es justo lo que vende la demo. */
.pl-plan .pl-kpis{position:relative}
.pl-cota{
  position:absolute;left:0;right:0;bottom:-13px;height:9px;
  border-left:1px solid var(--tinta-3);border-right:1px solid var(--tinta-3);
}
.pl-cota::before{content:"";position:absolute;top:50%;left:0;right:0;border-top:1px dashed var(--tinta-3)}
.pl-cota span{
  position:absolute;top:50%;left:50%;translate:-50% -50%;
  background:var(--papel);padding:0 4px;
  font-family:var(--mono);font-size:8px;color:var(--tinta-3);
}

/* ── capa producto ── */
.pl-final{background:var(--color-bg-page,#F8FAFC);z-index:1}
.pl-final .pl-app{color:var(--color-text-primary)}
.pl-top{display:flex;align-items:center;gap:8px}
.pl-h{font-family:var(--font-family-display);font-size:14px;font-weight:700;color:var(--color-text-primary);letter-spacing:-.01em}
.pl-fil{margin-left:auto;display:flex;gap:6px}
.pl-kpi{
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
  border-radius:var(--radius-8);padding:9px 11px;display:flex;flex-direction:column;justify-content:center;
}
.pl-kpi .v{font-family:var(--font-family-display);font-size:19px;font-weight:700;line-height:1.05;letter-spacing:-.02em}
.pl-kpi .v small{font-size:11px;font-weight:500;color:var(--color-text-tertiary)}
.pl-kpi .k{font-size:9.5px;color:var(--color-text-secondary);margin-top:2px;line-height:1.25}
.pl-card{
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
  border-radius:var(--radius-8);padding:10px 12px;display:flex;flex-direction:column;min-width:0;
}
.pl-card .ct{font-size:10px;font-weight:600;color:var(--color-text-secondary);margin-bottom:8px}
.pl-donut-row{display:flex;align-items:center;gap:12px;flex:1}
.pl-donut{
  width:78px;height:78px;border-radius:50%;flex:0 0 78px;
  display:grid;place-items:center;
  /* 5 modos de uso, con los valores de la data sintética del prototipo:
     3500 · 2950 · 2900 · 2850 · 2800 sobre 15.000 mensajes */
  background:conic-gradient(
    var(--color-blue-500) 0 23.33%,
    var(--color-indigo-500) 23.33% 43%,
    var(--color-aquamarine-600) 43% 62.33%,
    var(--color-orange-peel-500) 62.33% 81.33%,
    var(--color-dpink-500) 81.33% 100%);
}
.pl-donut i{
  width:48px;height:48px;border-radius:50%;background:var(--color-bg-default);
  display:grid;place-items:center;font-family:var(--font-family-display);
  font-size:12px;font-weight:700;color:var(--color-text-primary);font-style:normal;
}
.pl-leg{display:grid;gap:4px;font-size:8.5px;color:var(--color-text-secondary);min-width:0}
.pl-leg span{display:flex;align-items:center;gap:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-leg b{width:7px;height:7px;border-radius:2px;flex:0 0 7px}
.pl-bars{display:flex;align-items:flex-end;gap:6px;flex:1;padding-top:4px}
.pl-bars i{flex:1;background:var(--color-blue-500);border-radius:2px 2px 0 0;display:block}
.pl-bars-x{display:flex;gap:6px;margin-top:5px;font-family:var(--mono);font-size:7.5px;color:var(--color-text-tertiary)}
.pl-bars-x span{flex:1;text-align:center}
.pl-tbl{
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
  border-radius:var(--radius-8);overflow:hidden;display:flex;flex-direction:column;
}
.pl-tr{display:grid;grid-template-columns:1.6fr 1fr 64px;gap:8px;align-items:center;padding:7px 11px;font-size:10px}
.pl-tr+.pl-tr{border-top:1px solid var(--color-border-default)}
.pl-tr.hd{background:var(--color-bg-subtle);font-size:8.5px;font-weight:600;color:var(--color-text-secondary);text-transform:uppercase;letter-spacing:.05em}
.pl-tr .nm{font-weight:500;color:var(--color-text-primary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-tr .sc{color:var(--color-text-secondary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pl-tr .ms{text-align:right;font-family:var(--mono);font-size:9.5px;color:var(--color-text-secondary)}

@media (max-width:640px){
  .pl-app{padding:12px;gap:8px;grid-template-rows:34px 122px 130px 1fr}
  .pl-kpis{grid-template-columns:repeat(2,1fr)}
  .pl-charts{grid-template-columns:1fr}
  .pl-charts .pl-card:last-child,.pl-charts .pl-b:last-child{display:none}
  .pl-donut{width:62px;height:62px;flex-basis:62px}
  .pl-donut i{width:38px;height:38px;font-size:10px}
}

/* ═══════════════════════════════════════════════════════════════
   DEMO 02 — la misma vista, por rol
   La navegación no se re-dibuja por rol: cada ítem declara en data-ve
   quién lo ve, y el rol activo en .rl[data-rol] apaga el resto desde
   CSS. Lo apagado se queda tachado a la vista —el producto lo oculta—
   porque el argumento de la demo es justamente la diferencia.
   El JS solo cambia data-rol y el panel visible.
   Como en la DEMO 01, el producto se queda claro: el dashboard retiró
   su dark mode en julio.
═══════════════════════════════════════════════════════════════ */
.rl{display:flex;height:470px;background:var(--color-bg-page,#F8FAFC);overflow:hidden}

/* ── rail de navegación ── */
.rl-nav{
  flex:0 0 182px;min-width:0;overflow:auto;
  display:flex;flex-direction:column;gap:1px;padding:12px 0;
  background:var(--color-bg-default);
  border-right:1px solid var(--color-border-default);
}
.rl-brand{
  display:flex;align-items:center;gap:7px;padding:0 14px 11px;
  font-family:var(--font-family-display);font-size:12px;font-weight:700;
  color:var(--color-text-primary);white-space:nowrap;
}
.rl-brand i{flex:0 0 15px;height:15px;border-radius:5px;background:var(--color-blue-500)}
/* la consola del equipo interno es otro producto: se rotula distinto */
.rl-brand-int i{background:var(--color-text-tertiary)}
.rl[data-rol="equipo"] .rl-brand:not([data-b~="equipo"]),
.rl:not([data-rol="equipo"]) .rl-brand[data-b~="equipo"]{display:none}
.rl-i{
  display:flex;align-items:center;gap:8px;min-width:0;
  padding:6px 12px;border-left:2px solid transparent;
  font-size:10.5px;line-height:1.35;color:var(--color-text-secondary);
}
.rl-i .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rl-i .dot{flex:0 0 5px;height:5px;border-radius:1.5px;background:var(--color-text-tertiary)}
.rl-ro{
  display:none;margin-left:auto;padding:1px 4px;border-radius:3px;
  border:1px solid var(--color-border-default);
  font-family:var(--mono);font-size:7.5px;letter-spacing:.7px;
  text-transform:uppercase;color:var(--color-text-tertiary);white-space:nowrap;
}
.rl-sep{height:1px;margin:9px 12px;background:var(--color-border-default)}

/* lo que el rol activo NO ve */
.rl[data-rol="director"] .rl-i:not([data-ve~="director"]),
.rl[data-rol="coordinador"] .rl-i:not([data-ve~="coordinador"]),
.rl[data-rol="profesor"] .rl-i:not([data-ve~="profesor"]),
.rl[data-rol="equipo"] .rl-i:not([data-ve~="equipo"]){
  opacity:.32;text-decoration:line-through;text-decoration-thickness:1px;
}
/* la sección abierta */
.rl[data-rol="director"] .rl-i[data-cur~="director"],
.rl[data-rol="coordinador"] .rl-i[data-cur~="coordinador"],
.rl[data-rol="profesor"] .rl-i[data-cur~="profesor"],
.rl[data-rol="equipo"] .rl-i[data-cur~="equipo"]{
  background:var(--color-bg-subtle);border-left-color:var(--color-blue-500);
  color:var(--color-text-primary);font-weight:600;
}
/* hoy solo el director entra a una sección sin poder editarla */
.rl[data-rol="director"] .rl-i[data-ro~="director"] .rl-ro{display:block}

/* ── escenario ── */
.rl-stage{flex:1;min-width:0;display:flex;flex-direction:column;overflow:hidden}
.rl-panel{flex:1;min-height:0;display:flex;flex-direction:column}
.rl-panel[hidden]{display:none}
.rl-top{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:11px 16px;background:var(--color-bg-default);
  border-bottom:1px solid var(--color-border-default);
}
.rl-h{
  font-family:var(--font-family-display);font-size:13.5px;font-weight:700;
  letter-spacing:-.01em;color:var(--color-text-primary);
}
.rl-scope{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.rl-body{
  flex:1;min-height:0;overflow:auto;
  padding:14px 16px;display:flex;flex-direction:column;gap:10px;
}

/* ── piezas del mock ── */
.rl-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.rl-kpi{
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
  border-radius:var(--radius-8);padding:9px 11px;
}
.rl-kpi .v{
  display:block;font-family:var(--font-family-display);font-size:18px;font-weight:700;
  line-height:1.05;letter-spacing:-.02em;color:var(--color-text-primary);
}
.rl-kpi .v small{font-size:11px;font-weight:500;color:var(--color-text-tertiary)}
.rl-kpi .k{display:block;font-size:9.5px;color:var(--color-text-secondary);margin-top:3px}
.rl-row{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:8px 0;font-size:11.5px;color:var(--color-text-secondary);
}
.rl-row+.rl-row{border-top:1px solid var(--color-border-default)}
.rl-row .lb{flex:0 0 84px;color:var(--color-text-primary);font-weight:500}
.rl-row .nm{flex:1;min-width:120px;color:var(--color-text-primary);font-weight:500}
.rl-row .rr{flex:0 0 92px}
.rl-row .ac{margin-left:auto}
.rl-lock{color:var(--color-text-tertiary);font-style:italic}
/* switch: todo lo binario es una fila con switch (regla del panel) */
.rl-sw{
  flex:0 0 30px;height:17px;border-radius:999px;position:relative;
  background:var(--color-border-default);
}
.rl-sw::after{
  content:"";position:absolute;top:2px;left:2px;width:13px;height:13px;
  border-radius:50%;background:var(--color-bg-default);
  box-shadow:0 1px 2px rgba(15,23,42,.25);
}
.rl-sw.on{background:var(--color-blue-500)}
.rl-sw.on::after{left:auto;right:2px}
/* la consola interna no es el producto del cliente, y se nota */
.rl-ribbon{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.9px;text-transform:uppercase;
  color:var(--color-text-secondary);background:var(--color-bg-subtle);
  border:1px dashed var(--color-border-strong);border-radius:var(--radius-6);
  padding:6px 9px;
}

/* el readout trae las cuatro líneas en el HTML y solo se muestra la del
   rol activo; sin pre-wrap para que el sangrado del markup no se lea */
#demo2 .demo-readout{white-space:normal}
.rl-out{display:block}
.rl-out[hidden]{display:none}
.rl-out .l{display:block}

@media (max-width:640px){
  /* el rail pasa arriba y envuelve: los diez ítems tienen que caber a la
     vez, si no se pierde de vista justo lo tachado */
  .rl{flex-direction:column;height:auto}
  .rl-nav{
    flex:0 0 auto;flex-direction:row;flex-wrap:wrap;gap:2px;padding:9px 8px;
    overflow:visible;
    border-right:0;border-bottom:1px solid var(--color-border-default);
  }
  .rl-brand{display:none}
  .rl-i{
    flex:0 0 auto;border-left:0;border-bottom:2px solid transparent;
    padding:4px 8px;font-size:10px;
  }
  .rl-i .nm{overflow:visible;text-overflow:clip}
  .rl[data-rol="director"] .rl-i[data-cur~="director"],
  .rl[data-rol="coordinador"] .rl-i[data-cur~="coordinador"],
  .rl[data-rol="profesor"] .rl-i[data-cur~="profesor"],
  .rl[data-rol="equipo"] .rl-i[data-cur~="equipo"]{border-bottom-color:var(--color-blue-500)}
  .rl[data-rol="director"] .rl-i[data-ro~="director"] .rl-ro{display:none}
  .rl-i .dot,.rl-sep{display:none}
  .rl-body{min-height:300px;padding:12px}
  .rl-kpis{grid-template-columns:repeat(2,1fr)}
  .rl-row .lb{flex-basis:100%}
  .rl-row .nm{min-width:0}
  .rl-row .rr{flex:0 0 auto}
}

/* ═══════════════════════════════════════════════════════════════
   DEMO 03 — tres intentos de la misma pregunta
   Dos columnas que no hablan el mismo idioma a propósito: a la
   izquierda el módulo como se veía (componentes uds-v2, tema claro);
   a la derecha la ficha de por qué se cayó, en el lenguaje del
   portafolio. La línea de arriba es el orden en que ocurrió.
═══════════════════════════════════════════════════════════════ */
.tr{background:var(--papel)}
.tr-line{display:grid;grid-template-columns:repeat(3,1fr);border-bottom:1px solid var(--grid-mayor)}
.tr-node{
  display:flex;flex-direction:column;align-items:flex-start;gap:3px;
  padding:11px 14px;text-align:left;font:inherit;cursor:pointer;
  background:none;border:0;border-left:1px solid var(--grid-mayor);
}
.tr-node:first-child{border-left:0}
.tr-node .n{
  font-family:var(--mono);font-size:9px;letter-spacing:1px;
  color:var(--tinta-3);border:1px solid var(--grid-mayor);padding:1px 5px;
}
.tr-node .t{font-size:13.5px;font-weight:600;letter-spacing:-.01em;color:var(--tinta-2);line-height:1.3}
.tr-node .d{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.7px;
  text-transform:uppercase;color:var(--tinta-3);line-height:1.4;
}
.tr-node:hover .t{color:var(--tinta)}
.tr-node[aria-pressed="true"]{box-shadow:inset 0 2px 0 #facc15}
.tr-node[aria-pressed="true"] .t{color:var(--tinta)}
.tr-node[aria-pressed="true"] .n{background:#facc15;border-color:#facc15;color:#141414;font-weight:600}

.tr-cols{display:grid;grid-template-columns:1.02fr .98fr;min-height:318px}
.tr-mock{padding:18px;background:var(--color-bg-page,#F8FAFC);border-right:1px solid var(--grid-mayor)}
.tr-p[hidden],.tr-n[hidden]{display:none}
.tr-note{padding:18px;display:flex;flex-direction:column}
.tr-n{display:flex;flex-direction:column;gap:13px}
.tr-n .r{display:flex;flex-direction:column;gap:3px}
.tr-n .k{
  font-family:var(--mono);font-size:9.5px;letter-spacing:.9px;
  text-transform:uppercase;color:var(--tinta-3);
}
.tr-n .v{font-size:13.5px;line-height:1.55;color:var(--tinta-2)}

/* piezas del mock */
.tr-flag{
  margin-top:9px;font-family:var(--mono);font-size:8.5px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--color-text-tertiary);
}
.tr-meter{display:flex;gap:3px;flex:0 0 auto}
.tr-meter i{width:15px;height:6px;border-radius:2px;background:var(--color-border-default)}
.tr-meter[data-on="1"] i:nth-child(-n+1),
.tr-meter[data-on="2"] i:nth-child(-n+2),
.tr-meter[data-on="3"] i:nth-child(-n+3){background:var(--color-text-secondary)}
.tr-mini{flex:0 0 auto;font-size:10px;color:var(--color-text-tertiary)}
.tr-locked{
  margin-top:10px;padding:9px 11px;
  border:1px dashed var(--color-border-strong);border-radius:var(--radius-8);
  background:var(--color-bg-subtle);font-size:11px;line-height:1.45;
  color:var(--color-text-tertiary);
}
.tr-lk{display:block;margin-bottom:2px;font-size:11.5px;font-weight:600;color:var(--color-text-secondary)}
.tr-nots{display:flex;flex-wrap:wrap;gap:6px;margin-top:11px}
.tr-nots span{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--color-text-tertiary);border:1px solid var(--color-border-default);
  border-radius:4px;padding:2px 6px;
}
.tr-out[hidden]{display:none}
.tr-out{display:block}
.tr-out .l{display:block}
#demo3 .demo-readout,#demo4 .demo-readout{white-space:normal}

@media (max-width:640px){
  .tr-line{grid-template-columns:1fr}
  .tr-node{border-left:0;border-top:1px solid var(--grid-mayor);padding:10px 12px}
  .tr-node:first-child{border-top:0}
  .tr-node[aria-pressed="true"]{box-shadow:inset 3px 0 0 #facc15}
  .tr-cols{grid-template-columns:1fr;min-height:0}
  .tr-mock{border-right:0;border-bottom:1px solid var(--grid-mayor);padding:14px}
  .tr-note{padding:14px}
}

/* ═══════════════════════════════════════════════════════════════
   DEMO 04 — el preview se actualiza mientras escribes
   Lo que cambia en vivo es el nombre y el color; el texto de las
   respuestas no, porque no es configurable. El color de la
   institución entra por --acc y solo toca CTA y avatar: el azul —o
   el color que sea— se reserva para acción.
═══════════════════════════════════════════════════════════════ */
.tw{--acc:#2563EB;display:grid;grid-template-columns:1fr 1fr;background:var(--color-bg-page,#F8FAFC);min-height:404px}
.tw-cfg{
  padding:15px 18px 18px;background:var(--color-bg-default);
  border-right:1px solid var(--color-border-default);
}
.tw-tabs{display:flex;gap:4px;border-bottom:1px solid var(--color-border-default)}
.tw-tab{
  padding:7px 9px;margin-bottom:-1px;font-size:11.5px;
  color:var(--color-text-secondary);border-bottom:2px solid transparent;
}
.tw-tab.is-on{color:var(--color-text-primary);font-weight:600;border-bottom-color:var(--color-blue-500)}
.tw-gone{
  margin:9px 0 15px;font-family:var(--mono);font-size:8.5px;letter-spacing:.6px;
  text-transform:uppercase;color:var(--color-text-tertiary);line-height:1.5;
}
.tw-form{display:flex;flex-direction:column;gap:13px}
.tw .uds-field-label{font-size:11.5px}
/* .uds-input fija height:36px; el textarea necesita ganarle en especificidad */
.tw .tw-ta{height:auto;padding:8px 10px;font-size:11.5px;line-height:1.5;resize:none}
.tw-sw{display:flex;gap:9px}
.tw-sw button{width:26px;height:26px;padding:0;border-radius:50%;cursor:pointer;background:var(--s);border:1px solid rgba(15,23,42,.12)}
.tw-sw button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--color-bg-default),0 0 0 4px var(--color-text-primary)}
.tw-row{
  display:flex;align-items:center;gap:10px;padding-top:13px;
  border-top:1px solid var(--color-border-default);
  font-size:12px;color:var(--color-text-primary);
}
.tw-rl{flex:1}

.tw-prev{padding:16px;display:flex;flex-direction:column;min-width:0}
.tw-lms{
  padding:7px 10px;font-size:10px;color:var(--color-text-tertiary);
  background:var(--color-bg-subtle);border:1px solid var(--color-border-default);
  border-bottom:0;border-radius:var(--radius-8) var(--radius-8) 0 0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.tw-chat{
  flex:1;min-height:0;display:flex;flex-direction:column;overflow:hidden;
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
  border-radius:0 0 var(--radius-8) var(--radius-8);
}
.tw-head{display:flex;align-items:center;gap:8px;padding:9px 11px;border-bottom:1px solid var(--color-border-default)}
.tw-av{
  width:24px;height:24px;border-radius:50%;background:var(--acc);color:#fff;
  display:grid;place-items:center;font-family:var(--font-family-display);
  font-size:11px;font-weight:700;
}
.tw-nm{font-size:12.5px;font-weight:600;color:var(--color-text-primary);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tw-st{margin-left:auto;font-size:9.5px;color:var(--color-text-tertiary);white-space:nowrap}
.tw-msgs{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px;padding:12px 11px;overflow:auto}
.tw-m{max-width:84%;padding:8px 10px;border-radius:12px;font-size:11.5px;line-height:1.5}
.tw-m.bot{background:var(--color-bg-subtle);color:var(--color-text-primary);border-bottom-left-radius:4px}
/* la burbuja del alumno va en neutro: el color es de la acción, no de la selección */
.tw-m.me{
  align-self:flex-end;background:var(--color-bg-default);color:var(--color-text-secondary);
  border:1px solid var(--color-border-default);border-bottom-right-radius:4px;
}
.tw-in{display:flex;align-items:center;gap:8px;padding:9px 11px;border-top:1px solid var(--color-border-default)}
.tw-ph{flex:1;font-size:11px;color:var(--color-text-tertiary)}
.tw-cta{
  padding:6px 12px;border-radius:var(--radius-8);background:var(--acc);
  color:#fff;font-size:11px;font-weight:600;
}
.tw-out[hidden]{display:none}
.tw-out{display:block}
.tw-out .l{display:block}

@media (max-width:640px){
  .tw{grid-template-columns:1fr;min-height:0}
  .tw-cfg{border-right:0;border-bottom:1px solid var(--color-border-default)}
  .tw-prev{padding:14px}
  .tw-chat{min-height:270px}
}

/* ═══════════════════════════════════════════════════════════════
   DEMO 05 — la integración, probándose a sí misma
   Los cuatro checks son estados en data-st; el JS solo los avanza.
   El roster aparece al final porque es el hallazgo que rehizo la
   vista: el nombre visible llega con la sección pegada al curso.
═══════════════════════════════════════════════════════════════ */
/* .demo-play vive en ds-demo.css — compartido por todas las demos */

.lt{display:grid;grid-template-columns:.82fr 1.18fr;background:var(--color-bg-page,#F8FAFC);min-height:326px}
.lt-form{
  padding:16px 18px;display:flex;flex-direction:column;gap:13px;
  background:var(--color-bg-default);border-right:1px solid var(--color-border-default);
}
.lt .uds-field-label{font-size:11.5px}
.lt-ro{
  display:flex;align-items:center;background:var(--color-bg-subtle);
  font-family:var(--mono);font-size:10px;color:var(--color-text-secondary);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.lt-note{font-size:11px;line-height:1.5;color:var(--color-text-tertiary)}
.lt-checks{padding:16px 18px;display:flex;flex-direction:column;gap:8px}
.lt-c{
  display:flex;align-items:center;gap:10px;padding:9px 11px;
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
  border-radius:var(--radius-8);transition:border-color .2s;
}
.lt-c .nm{font-size:12px;font-weight:500;color:var(--color-text-primary)}
.lt-c .dt{
  font-family:var(--mono);font-size:8.5px;letter-spacing:.5px;
  text-transform:uppercase;color:var(--color-text-tertiary);
}
.lt-c .st{margin-left:auto}
.lt-c .st>span{display:none}
.lt-c[data-st="idle"] .s-idle,
.lt-c[data-st="run"] .s-run,
.lt-c[data-st="ok"] .s-ok{display:inline-flex}
.lt-c[data-st="run"]{border-color:var(--color-blue-500)}
@keyframes lt-pulso{0%,100%{opacity:1}50%{opacity:.45}}
.lt-c[data-st="run"] .s-run{animation:lt-pulso 900ms ease-in-out infinite}
@media (prefers-reduced-motion:reduce){.lt-c[data-st="run"] .s-run{animation:none}}

.lt-roster{
  margin-top:3px;padding:10px 12px;background:var(--color-bg-default);
  border:1px solid var(--color-border-default);border-radius:var(--radius-8);
}
.lt-roster[hidden]{display:none}
.lt-rh{margin-bottom:6px;font-size:11px;font-weight:600;color:var(--color-text-primary)}
/* font-size en la fila, no solo en el .mono: si no, el interlineado lo
   sigue fijando el cuerpo del caso y las dos líneas quedan separadísimas */
.lt-rr{padding:1px 0;font-size:10px;line-height:1.7}
.lt-rr .mono{font-size:10px;color:var(--color-text-secondary)}
.lt-fase{
  margin-top:auto;padding-top:12px;border-top:1px solid var(--color-border-default);
  display:flex;align-items:center;gap:8px;
  font-family:var(--mono);font-size:9px;letter-spacing:.7px;
  text-transform:uppercase;color:var(--color-text-tertiary);
}
.lt-dots{display:flex;gap:4px}
.lt-dots i{width:6px;height:6px;border-radius:50%;background:var(--color-border-default)}
.lt-dots i.on{background:var(--color-blue-500)}
.lt-rn{margin-top:8px;font-size:11px;line-height:1.5;color:var(--color-text-secondary)}

@media (max-width:640px){
  .lt{grid-template-columns:1fr;min-height:0}
  .lt-form{border-right:0;border-bottom:1px solid var(--color-border-default)}
  .lt-checks{padding:14px}
  /* el detalle baja a su propia línea en las cuatro filas por igual, en
     vez de empujar el badge solo en las que no caben */
  .lt-c{flex-wrap:wrap;gap:5px 10px}
  .lt-c .dt{flex-basis:100%;order:3}
  .lt-c .st{margin-left:auto}
}