/* ── prof-demo.css — demos del caso Suite Profesores ──
   Requiere uds-kit.css (tokens y componentes reales de uds-v2, aquí con
   data-uds-product="profesores") y base.css. La cáscara .demo-* vive en
   ds-demo.css; aquí solo lo propio de este caso.
   Las escenas siguen el tema del sitio: prof-demo.js sincroniza
   data-uds-theme de cada .uds-scope con el data-theme del portafolio,
   y la capa semántica de uds-kit hace el resto. */

/* ═══════════════════════════════════════════════════════════════
   DEMO 01 — de menú a dashboard
   Los dos homes comparten shell: misma nav, mismo cuerpo, misma
   grilla de herramientas. Lo que cambia es la jerarquía, que es de
   lo que trata la tesis del caso.
═══════════════════════════════════════════════════════════════ */
.hm{background:var(--color-bg-page,#F8FAFC);min-height:392px;display:flex;flex-direction:column}
.hm-p{flex:1;min-height:0;display:flex;flex-direction:column}
.hm-p[hidden]{display:none}
.hm-nav{
  display:flex;align-items:center;gap:14px;padding:10px 16px;
  background:var(--color-bg-default);border-bottom:1px solid var(--color-border-default);
}
.hm-mark{
  font-family:var(--font-family-display);font-size:12px;font-weight:700;
  color:var(--color-text-primary);margin-right:6px;white-space:nowrap;
}
.hm-ni{font-size:11px;color:var(--color-text-secondary);position:relative;white-space:nowrap}
.hm-ni.is-on{color:var(--color-text-primary);font-weight:600}
.hm-body{flex:1;min-height:0;padding:16px;display:flex;flex-direction:column;gap:12px}
.hm-t{font-family:var(--font-family-display);font-size:15px;font-weight:700;color:var(--color-text-primary)}

/* rótulos amarillos: son del portafolio, no del producto */
.hm-tag{
  display:inline-block;background:#facc15;color:#141414;
  font-family:var(--mono);font-size:8px;letter-spacing:.6px;text-transform:uppercase;
  padding:2px 5px;white-space:nowrap;
}
.hm-move .hm-tag{position:absolute;left:0;top:calc(100% + 5px)}
.hm-tag-hero{position:absolute;right:10px;bottom:-9px}
.hm-tag-grid{align-self:flex-start;margin-top:-4px}

.hm-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.hm-grid.mini{grid-template-columns:repeat(4,1fr);gap:8px;margin-top:auto}
.hm-card{
  display:flex;align-items:center;gap:8px;padding:11px 12px;
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
  border-radius:var(--radius-8);font-size:11px;color:var(--color-text-primary);
  min-width:0;
}
.hm-card .ic{flex:0 0 16px;height:16px;border-radius:5px;background:var(--color-brand-primary-subtle)}
.hm-grid.mini .hm-card{padding:8px 9px;font-size:10px;flex-direction:column;align-items:flex-start;gap:6px}
/* las tres que este caso no nombra: se dibujan, no se inventan */
.hm-card.sin{color:var(--color-text-tertiary);border-style:dashed}
.hm-card.hist{border-color:#facc15;box-shadow:inset 0 0 0 1px #facc15}
.hm-card.hist .hm-tag{margin-left:auto}

.hm-hola{font-size:12.5px;color:var(--color-text-secondary)}
.hm-hola b{color:var(--color-text-primary);font-weight:600}
.hm-hero{
  position:relative;padding:12px;border-radius:var(--radius-10);
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
}
.hm-in{display:flex;align-items:center;gap:10px}
.hm-ph{
  flex:1;padding:9px 11px;border-radius:var(--radius-8);
  background:var(--color-bg-subtle);font-size:11.5px;color:var(--color-text-tertiary);
}
.hm-go{
  padding:8px 13px;border-radius:var(--radius-8);background:var(--color-brand-primary);
  color:var(--color-brand-on-primary);font-size:11px;font-weight:600;white-space:nowrap;
}
.hm-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px}
.hm-chips span{
  padding:4px 8px;border-radius:999px;border:1px solid var(--color-border-default);
  font-size:10px;color:var(--color-text-secondary);
}
.hm-avisos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.hm-av{
  padding:9px 11px;border-radius:var(--radius-8);
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
}
.hm-av .k{display:block;font-size:9px;text-transform:uppercase;letter-spacing:.5px;color:var(--color-text-tertiary)}
.hm-av .v{display:block;font-size:11px;color:var(--color-text-primary);margin-top:2px}
.hm-out[hidden],.mk-out[hidden],.wz-out[hidden]{display:none}
.hm-out,.mk-out,.wz-out{display:block}
.hm-out .l,.mk-out .l,.wz-out .l,#smOut .l{display:block}
#pdemo1 .demo-readout,#pdemo2 .demo-readout,
#pdemo3 .demo-readout,#pdemo4 .demo-readout{white-space:normal}

@media (max-width:640px){
  .hm-grid{grid-template-columns:repeat(2,1fr)}
  .hm-grid.mini{grid-template-columns:repeat(3,1fr)}
  .hm-avisos{grid-template-columns:1fr}
  .hm-body{padding:13px;gap:10px}
  .hm-tag-hero{position:static;display:block;margin-top:8px;align-self:flex-start}
  .hm-move .hm-tag{display:none}
}

/* ═══════════════════════════════════════════════════════════════
   DEMO 02 — el lienzo real, medido en vivo
   Todo el interior está en porcentajes del ancho simulado: la
   ventana ocupa --w de 1440, y cada pieza de adentro se expresa
   contra --w. Así el marco encoge de verdad y el badge no miente.
   Solo el ancho es variable: el alto es el del portátil típico, que
   es de donde sale el 677 del caso.
═══════════════════════════════════════════════════════════════ */
.sm{position:relative}
.sm-win{
  width:calc(var(--w) * 100% / 1440);
  margin:0 auto 14px;height:296px;
  display:flex;flex-direction:column;overflow:hidden;
  background:#E2E8F0;border:1px solid var(--grid-mayor);
  transition:width .12s linear;
}
[data-theme="dark"] .sm-win{background:#1E293B}
.sm-top{
  display:flex;align-items:center;gap:7px;padding:0 10px;height:26px;
  background:#CBD5E1;color:#334155;
  font-size:9.5px;white-space:nowrap;overflow:hidden;
}
[data-theme="dark"] .sm-top{background:#334155;color:#CBD5E1}
.sm-dot{width:7px;height:7px;border-radius:50%;background:#94A3B8;flex:0 0 7px}
.sm-mid{flex:1;min-height:0;display:flex;padding:calc(16 * 100% / var(--w))}
.sm-nav{
  flex:0 0 calc(var(--nav) * 100% / var(--w));
  overflow:hidden;display:flex;flex-direction:column;gap:6px;
  padding-right:calc(12 * 100% / var(--w));
}
.sm-ni{display:flex;align-items:center;gap:6px;font-size:9px;color:#64748B;white-space:nowrap}
[data-theme="dark"] .sm-ni{color:#94A3B8}
.sm-ni i{flex:0 0 10px;height:10px;border-radius:3px;background:#CBD5E1}
/* con la nav en iconos, el rótulo se va y el marco crece: el host manda */
.sm[data-nav="icon"] .sm-ni b{display:none}
.sm[data-nav="off"] .sm-nav{display:none}
.sm-frame{position:relative;flex:1;min-width:0;background:var(--color-bg-page,#F8FAFC);border:1px solid #CBD5E1;overflow:hidden}
[data-theme="dark"] .sm-frame{background:#0F172A;border-color:#334155}
.sm-badge{
  position:absolute;right:4px;bottom:4px;z-index:2;
  background:#141414;color:#facc15;padding:2px 6px;
  font-family:var(--mono);font-size:9px;letter-spacing:.5px;white-space:nowrap;
}
.sm-app{height:100%;padding:8px;display:flex;flex-direction:column;gap:7px}
.sm-a-top{display:flex;align-items:center;gap:6px}
.sm-a-h{font-family:var(--font-family-display);font-size:9px;font-weight:700;color:var(--color-text-primary);white-space:nowrap}
.sm-a-u{margin-left:auto;width:14px;height:14px;border-radius:50%;background:var(--color-brand-primary-subtle)}
.sm-a-hola{height:6px;width:46%;border-radius:3px;background:var(--color-bg-subtle)}
.sm-a-hero{height:32px;border-radius:6px;background:var(--color-bg-default);border:1px solid var(--color-border-default)}
.sm-a-av{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.sm-a-av i{height:20px;border-radius:6px;background:var(--color-bg-default);border:1px solid var(--color-border-default)}
/* auto-fit: al angostarse el marco, la grilla se reacomoda sola — que es
   justo lo que dice el caso sobre derivar el responsive del host */
.sm-a-grid{
  display:grid;gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(58px,23%));
  grid-auto-rows:32px;
}
.sm-a-grid i{border-radius:6px;background:var(--color-bg-default);border:1px solid var(--color-border-default)}
.sm-a-list{
  flex:1;min-height:0;display:flex;flex-direction:column;gap:6px;padding:8px;
  border-radius:6px;background:var(--color-bg-default);border:1px solid var(--color-border-default);
}
.sm-a-list i{height:6px;border-radius:3px;background:var(--color-bg-subtle)}
.sm-a-list i:nth-child(2){width:78%}
.sm-a-list i:nth-child(3){width:55%}
.sm-rail{
  display:block;width:100%;margin:0;cursor:ew-resize;accent-color:#facc15;
}
.sm-rail:focus-visible{outline:2px solid #facc15;outline-offset:3px}

@media (max-width:640px){
  .sm-win{height:230px}
  .sm-a-grid{grid-template-columns:repeat(auto-fit,minmax(40px,1fr))}
}

/* ═══════════════════════════════════════════════════════════════
   DEMO 03 — doble marca, resuelta por regla
   El mismo documento con las dos firmas. El color de la institución
   entra por --inst y no toca nada más: es firma, no tema.
═══════════════════════════════════════════════════════════════ */
.mk{--inst:#9B1B30;background:var(--color-bg-page,#F8FAFC);padding:20px;display:flex;justify-content:center}
.mk-p[hidden]{display:none}
.mk-p{width:100%;max-width:520px}
.mk-doc{
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
  border-radius:var(--radius-10);padding:16px 18px;
}
.mk-head{display:flex;align-items:center;gap:9px;padding-bottom:11px;border-bottom:1px solid var(--color-border-default)}
.mk-logo{
  flex:0 0 26px;width:26px;height:26px;border-radius:7px;display:grid;place-items:center;
  background:var(--color-brand-primary);color:#fff;
  font-family:var(--font-family-display);font-size:10px;font-weight:700;
}
.mk-inst .mk-logo{background:var(--inst)}
.mk-nm{font-family:var(--font-family-display);font-size:12.5px;font-weight:700;color:var(--color-text-primary)}
.mk-inst .mk-nm{color:var(--inst)}
.mk-head .uds-badge{margin-left:auto}
.mk-t{margin:13px 0 10px;font-size:13px;font-weight:600;color:var(--color-text-primary)}
.mk-l{height:7px;border-radius:3px;background:var(--color-bg-subtle);margin-bottom:7px}
.mk-l.corto{width:62%}
.mk-foot{
  margin-top:13px;padding-top:10px;border-top:1px solid var(--color-border-default);
  font-size:10px;color:var(--color-text-tertiary);
}
.mk-inst .mk-foot{color:var(--inst)}

/* ═══════════════════════════════════════════════════════════════
   DEMO 04 — de la conversación al material terminado
   Los pasos son los del wizard real, no un control del portafolio:
   por eso van dentro del producto y con su barra de avance.
═══════════════════════════════════════════════════════════════ */
.wz{--inst:#9B1B30;background:var(--color-bg-page,#F8FAFC);min-height:390px;display:flex;flex-direction:column}
.wz-steps{display:flex;background:var(--color-bg-default);border-bottom:1px solid var(--color-border-default)}
.wz-s{
  flex:1;display:flex;align-items:center;justify-content:center;gap:7px;
  padding:11px 8px;font:inherit;font-size:11.5px;cursor:pointer;
  background:none;border:0;border-bottom:2px solid transparent;
  color:var(--color-text-secondary);white-space:nowrap;min-width:0;
}
.wz-s .n{
  flex:0 0 17px;width:17px;height:17px;border-radius:50%;display:grid;place-items:center;
  background:var(--color-bg-subtle);color:var(--color-text-secondary);
  font-size:9.5px;font-weight:600;
}
.wz-s:hover{color:var(--color-text-primary)}
.wz-s[aria-pressed="true"]{color:var(--color-text-primary);font-weight:600;border-bottom-color:var(--color-brand-primary)}
.wz-s[aria-pressed="true"] .n{background:var(--color-brand-primary);color:var(--color-brand-on-primary)}
.wz-body{flex:1;min-height:0;padding:16px;overflow:auto}
.wz-p[hidden]{display:none}
.wz-p{display:flex;flex-direction:column;gap:10px}
.wz-lb{font-size:10px;text-transform:uppercase;letter-spacing:.6px;color:var(--color-text-tertiary)}
.wz-txt{
  padding:12px 14px;border-radius:var(--radius-8);
  background:var(--color-bg-default);border:1px solid var(--color-border-default);
  font-size:12px;line-height:1.6;color:var(--color-text-secondary);
}
.wz-row{display:flex;flex-wrap:wrap;gap:7px}
.wz-niv{display:grid;grid-template-columns:repeat(3,1fr);gap:9px}
.wz-n{
  display:flex;flex-direction:column;gap:2px;padding:9px 11px;
  border-radius:var(--radius-8);background:var(--color-bg-default);
  border:1px solid var(--color-border-default);
  font-size:11.5px;font-weight:500;color:var(--color-text-primary);
}
.wz-n small{font-size:9.5px;font-weight:400;color:var(--color-text-tertiary)}
/* el seleccionado va en neutro: el color se guarda para la acción */
.wz-n.is-on{border-color:var(--color-text-primary);background:var(--color-bg-subtle)}
.wz-comp{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.wz-c{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--color-text-secondary)}
.wz-c i{
  flex:0 0 14px;height:14px;border-radius:4px;
  border:1px solid var(--color-border-strong);background:var(--color-bg-default);
}
.wz-c.is-on i{background:var(--color-brand-primary);border-color:var(--color-brand-primary);position:relative}
.wz-c.is-on i::after{
  content:"";position:absolute;left:4px;top:1px;width:4px;height:8px;
  border:solid #fff;border-width:0 1.6px 1.6px 0;rotate:45deg;
}
.wz-doc{max-width:520px}
.wz-qs{margin:12px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:7px}
.wz-qs li{font-size:11.5px;line-height:1.5;color:var(--color-text-primary)}
.wz-cta{display:flex;flex-wrap:wrap;gap:9px;margin-top:12px}

@media (max-width:640px){
  .wz-s{flex-direction:column;gap:4px;font-size:10px;padding:9px 4px}
  .wz-niv{grid-template-columns:1fr}
  .wz-comp{grid-template-columns:1fr}
  .wz-body{padding:13px}
  .mk{padding:14px}
}

/* ── FIG 01 — el producto dentro del producto de otro ──
   Reconstrucción abstracta del shell: la cromosfera del LMS (rail de
   iconos + navegación del curso + breadcrumb) dibujada como esqueleto
   neutro, y el área del iframe como lo único vivo. Estática a propósito:
   el marco medido en vivo es la DEMO 02. */
/* misma familia de neutros fríos que el simulador de la DEMO 02:
   el sujeto es el mismo (el chrome del LMS), la paleta también */
.pctx{display:flex;gap:0;overflow:hidden;background:#F1F5F9;min-height:300px;
  border-bottom:1px solid var(--borde)}
[data-theme="dark"] .pctx{background:#1E293B}
.pctx-rail{flex:0 0 34px;background:#334155;display:flex;
  flex-direction:column;align-items:center;gap:14px;padding:14px 0}
.pctx-rail i{width:14px;height:14px;border-radius:3px;background:rgba(255,255,255,.38)}
[data-theme="dark"] .pctx-rail{background:#334155}
.pctx-nav{flex:0 0 148px;border-right:1px solid #CBD5E1;padding:14px 12px;
  display:flex;flex-direction:column;gap:11px}
[data-theme="dark"] .pctx-nav{border-right-color:#334155}
.pctx-nav i{height:7px;border-radius:3px;background:#CBD5E1;width:78%}
[data-theme="dark"] .pctx-nav i{background:#475569}
.pctx-nav i:nth-child(2n){width:58%}
.pctx-nav i.on{background:#facc15;width:88%;position:relative}
.pctx-main{flex:1;display:flex;flex-direction:column;min-width:0}
.pctx-crumb{height:34px;border-bottom:1px solid #CBD5E1;display:flex;
  align-items:center;gap:8px;padding:0 14px}
[data-theme="dark"] .pctx-crumb{border-bottom-color:#334155}
.pctx-crumb i{height:6px;width:52px;border-radius:3px;background:#CBD5E1}
[data-theme="dark"] .pctx-crumb i{background:#475569}
.pctx-crumb i:last-child{width:84px}
.pctx-frame{flex:1;margin:14px;border:1.5px dashed #facc15;border-radius:4px;
  background:#F8FAFC;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:6px;text-align:center;padding:16px}
[data-theme="dark"] .pctx-frame{background:#0F172A}
.pctx-frame .t{font-weight:600;letter-spacing:-.2px}
.pctx-note{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
  padding:10px 14px;color:var(--tinta-3)}
@media (max-width:640px){
  .pctx-nav{flex-basis:92px}
  .pctx{min-height:240px}
}

/* ── FIG 02 — el sistema de herramientas ──
   Diagrama del portafolio (no mock del producto): la espina del asistente
   arriba y los dos grupos de atajos abajo. Estático, tokens del sitio. */
.tls{padding:calc(var(--u)*4);display:flex;flex-direction:column;gap:calc(var(--u)*4)}
.tls-spine{position:relative;border:1.5px solid #facc15;border-radius:5px;
  padding:calc(var(--u)*3) calc(var(--u)*4)}
.tls-nm{font-weight:700;letter-spacing:-.2px}
.tls-ds{margin-top:4px;font-size:13.5px;color:var(--tinta-2)}
.tls-tag{position:absolute;right:10px;top:-9px;background:#facc15;color:#141414;
  font-family:var(--mono);font-size:9px;letter-spacing:.6px;padding:2px 6px}
.tls-cols{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*5)}
.tls-gh{color:var(--tinta-3);margin-bottom:calc(var(--u)*2.5)}
.tls-i{font-size:13.5px;line-height:1.55;color:var(--tinta-2);
  padding:calc(var(--u)*2) 0;border-top:1px solid var(--borde)}
.tls-i b{color:var(--tinta);font-weight:600}
.tls-note{color:var(--tinta-3);text-align:center;border-top:1px solid var(--borde);
  padding-top:calc(var(--u)*3)}
@media (max-width:640px){
  .tls-cols{grid-template-columns:1fr}
  .tls{padding:calc(var(--u)*3)}
}