/* ── portadas/ds.css — escena del caso 01, UDS ──
   Lienzo 44 × 28 em (ver .portada en base.css). Todo en em.

   Dos familias de color, separadas a propósito:
   · El espécimen retrata producto: tokens reales de uDocz, copiados y
     acotados aquí como --pds-* (misma copia AA de casos/uds-kit.css).
     La portada es pública y no puede cargar nada de /casos/.
   · El inspector, las cotas y la cadena son pieza de portafolio:
     papel / tinta / sol, con los tokens de base.css. No llevan override
     dark propio.

   Dos niveles de texto: nivel 1 (≥1.4em: el botón y los tres nombres de
   la cadena) se lee en la miniatura; nivel 2 (.55–.9em) es textura en la
   miniatura y se lee en la portada de cabecera. */
.pt-ds{
  --pds-bg:#FFFFFF;
  --pds-bg-sutil:#F1F5F9;
  --pds-borde:#E2E8F0;
  --pds-texto:#0F172A;
  --pds-texto-2:#475569;
  --pds-marca:#0A45DD;      /* --color-brand-primary → blue-600 */
  --pds-sobre:#FFFFFF;      /* --color-brand-on-primary */
  --pds-linea:max(1px,.045em);
  font-family:var(--sans);line-height:1;color:var(--tinta);
}
[data-theme="dark"] .pt-ds{
  --pds-bg:#131826;
  --pds-bg-sutil:#1B2233;
  --pds-borde:#2A3349;
  --pds-texto:#F1F5F9;
  --pds-texto-2:#CBD5E1;
  --pds-marca:#5890FF;      /* dark re-apunta a blue-400 */
  --pds-sobre:#0A1A3D;
}
/* lo que cambia con el tema del sitio: el conmutador y el tercer eslabón */
.pt-ds .pt-ds-osc{display:none}
[data-theme="dark"] .pt-ds .pt-ds-luz{display:none}
[data-theme="dark"] .pt-ds .pt-ds-osc{display:block}
.pt-ds i,.pt-ds em{font-style:normal}

/* ── barra del inspector · 0 → 2.8em ── */
.pt-ds-bar{
  position:absolute;left:0;right:0;top:0;height:2.8em;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 1.5em;border-bottom:1px solid var(--grid-mayor);
  font-family:var(--mono);color:var(--tinta-3);
}
.pt-ds-bar-l,.pt-ds-bar-r{display:flex;align-items:center;gap:1.1em;font-size:.68em;letter-spacing:.09em}
.pt-ds-bar-l i{width:.9em;height:.9em;background:var(--sol)}
.pt-ds-bar-l b{color:var(--tinta);font-weight:600}
.pt-ds-swch{display:flex;border:1px solid var(--grid-mayor)}
.pt-ds .pt-ds-swch span{display:block;padding:.45em .9em;color:var(--tinta-2)}
.pt-ds-swch .pt-ds-luz{background:var(--sol);color:var(--sol-tinta);font-weight:600}
[data-theme="dark"] .pt-ds .pt-ds-swch .pt-ds-luz{display:block;background:none;color:var(--tinta-2);font-weight:400}
[data-theme="dark"] .pt-ds .pt-ds-swch .pt-ds-osc{background:var(--sol);color:var(--sol-tinta);font-weight:600}

/* ── el espécimen · izquierda, 2.8 → 22em ── */
.pt-ds-esp{
  position:absolute;left:0;top:2.8em;width:17em;height:19.2em;
  background:var(--pds-bg-sutil);border-right:1px solid var(--grid-mayor);
}
.pt-ds-card{
  position:absolute;left:1.5em;right:1.5em;top:1.5em;bottom:1.5em;
  background:var(--pds-bg);border:1px solid var(--pds-borde);border-radius:.9em;
  padding:1.3em 1.3em 0;display:flex;flex-direction:column;
  font-family:'Rubik',var(--sans);
}
.pt-ds-card-t{font-size:.84em;font-weight:600;color:var(--pds-texto);letter-spacing:-.01em;white-space:nowrap}
.pt-ds-card-s{font-size:.6em;color:var(--pds-texto-2);margin-top:.55em;white-space:nowrap}
/* el plano: un cuadriculado fino bajo el espécimen, el mismo papel
   milimetrado del sitio llevado a la escala de la pieza */
.pt-ds-plano{
  flex:1;margin:1.1em -1.3em 0;border-top:1px solid var(--pds-borde);
  border-radius:0 0 .9em .9em;
  display:flex;align-items:center;justify-content:center;
  padding-left:.9em;padding-bottom:.4em;
  background-image:
    linear-gradient(var(--grid-fina) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-fina) 1px,transparent 1px);
  background-size:1em 1em;
}
/* el botón real: 36px de alto, padding 12, radio 8, 13/500.
   1px del sistema = .108em del lienzo (así el texto llega a nivel 1) */
.pt-ds-btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;
  height:3.9em;padding:0 1.3em;border-radius:.87em;
  outline:max(1.5px,.07em) dashed var(--sol);outline-offset:.5em;
  box-shadow:inset 0 0 0 var(--pds-linea) var(--pds-borde); /* la silueta, antes de que llegue el color */
}
.pt-ds-fill{position:absolute;inset:0;border-radius:inherit;background:var(--pds-marca)}
.pt-ds-btn-t{position:relative;font-size:1.41em;font-weight:500;color:var(--pds-sobre);white-space:nowrap}
/* cotas: voz del portafolio (tinta) sobre la superficie del producto */
.pt-ds-dim{position:absolute;font-family:var(--mono);color:var(--tinta-2);pointer-events:none}
.pt-ds-dim em{font-size:.64em;letter-spacing:.04em;white-space:nowrap}
.pt-ds-dim--tipo{left:0;bottom:calc(100% + 1.7em);font-size:.64em;letter-spacing:.04em;white-space:nowrap;color:var(--tinta-3)}
.pt-ds-dim--alto{
  right:calc(100% + 1.25em);top:0;bottom:0;width:.7em;
  border:solid var(--tinta-2);border-width:var(--pds-linea) 0 var(--pds-linea) var(--pds-linea);
  display:flex;align-items:center;
}
.pt-ds-dim--alto em{position:absolute;right:calc(100% + .55em)}
.pt-ds-dim--pad{
  left:0;top:calc(100% + 1.25em);width:1.3em;height:.7em;
  border:solid var(--tinta-2);border-width:0 var(--pds-linea) var(--pds-linea) var(--pds-linea);
}
.pt-ds-dim--pad em{position:absolute;left:calc(100% + .55em);top:.1em}
.pt-ds-dim--radio{
  right:-.95em;top:-.95em;width:1.5em;height:1.5em;
  border:solid var(--tinta-2);border-width:var(--pds-linea) var(--pds-linea) 0 0;border-top-right-radius:1.35em;
}
.pt-ds-dim--radio em{position:absolute;left:calc(100% + .2em);bottom:calc(100% - .2em)}

/* ── la cadena · derecha, 2.8 → 22em ── */
.pt-ds-cad{
  position:absolute;left:17em;right:0;top:2.8em;height:19.2em;
  padding:1.5em;display:flex;flex-direction:column;
}
.pt-ds-link{
  height:4.6em;flex:0 0 auto;display:flex;align-items:center;gap:1em;padding:0 1em;
  background:var(--papel);border:1px solid var(--grid-mayor);
}
.pt-ds-sw{flex:0 0 2.6em;width:2.6em;height:2.6em;background:var(--pds-marca)}
.pt-ds-sw--comp{height:1.5em;border-radius:.42em}                                   /* componente: la forma del botón */
.pt-ds-sw--sem{background:none;box-shadow:inset 0 0 0 .5em var(--pds-marca)}        /* semántico: un rol, sin color propio */
.pt-ds-txt{min-width:0;display:flex;flex-direction:column;gap:.62em;flex:1}
.pt-ds-k{font-family:var(--mono);font-size:.62em;letter-spacing:.1em;color:var(--tinta-3);white-space:nowrap;display:flex;justify-content:space-between}
.pt-ds .pt-ds-k .pt-ds-hex{color:var(--tinta-2);letter-spacing:.04em}
.pt-ds-n{font-family:var(--mono);font-size:1.4em;font-weight:600;letter-spacing:-.02em;color:var(--tinta);white-space:nowrap}
.pt-ds-flecha{height:1.2em;flex:0 0 auto;position:relative;padding-left:2.3em;display:flex;align-items:center}
.pt-ds-flecha i{position:absolute;left:2.3em;top:0;bottom:0;width:var(--pds-linea);background:var(--tinta-3);transform-origin:top center}
.pt-ds-flecha i::after{content:"";position:absolute;left:50%;bottom:0;width:.42em;height:.42em;margin-left:-.21em;
  border:solid var(--tinta-3);border-width:0 var(--pds-linea) var(--pds-linea) 0;transform:rotate(45deg)}
.pt-ds-flecha span{font-family:var(--mono);font-size:.58em;letter-spacing:.08em;color:var(--tinta-3);margin-left:1.9em;text-transform:uppercase}

/* ── el pie · 22 → 28em, solo en la miniatura ──
   El mismo botón sobre cuatro capas semánticas. Colores fijos: es una
   tira de especímenes, no sigue el tema del sitio. */
.pt-ds-pie{
  position:absolute;left:0;right:0;top:22em;height:6em;
  border-top:1px solid var(--grid-mayor);padding:.75em 1.5em 0;
}
.pt-ds-pie-k{display:block;font-family:var(--mono);font-size:.58em;letter-spacing:.1em;color:var(--tinta-3)}
.pt-ds-vars{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;margin-top:.65em}
.pt-ds-var{
  height:3.5em;display:flex;align-items:center;gap:.8em;padding:0 .8em;
  background:var(--v-bg,#FFFFFF);border:1px solid var(--v-borde,#E2E8F0);
}
.pt-ds-vb{flex:0 0 3.6em;height:1.7em;border-radius:.4em;background:var(--v-marca);display:flex;align-items:center;justify-content:center}
.pt-ds-vb b{display:block;width:1.9em;height:.24em;background:var(--v-sobre,#FFFFFF)}
.pt-ds-vl{font-family:var(--mono);font-size:.5em;letter-spacing:.06em;color:var(--v-texto,#475569);white-space:nowrap}
.pt-ds-var--luz{--v-marca:#0A45DD}
.pt-ds-var--osc{--v-bg:#131826;--v-borde:#2A3349;--v-marca:#5890FF;--v-sobre:#0A1A3D;--v-texto:#CBD5E1}
.pt-ds-var--prof{--v-marca:#10003F}   /* blue-900 */
.pt-ds-var--prem{--v-marca:#740AFF}   /* indigo-500 */

/* ── el gesto: el color baja por la cadena y llega al botón ──
   Estado base = escena completa. .is-act la re-dibuja una vez: los tres
   eslabones entran de arriba abajo (60ms entre hermanos), las flechas
   crecen, y al final el relleno llega al botón y a sus variantes.
   Solo transform y opacidad; termina a los 830ms. */
@keyframes pt-ds-baja{from{opacity:0;transform:translateY(-.55em)}}
@keyframes pt-ds-crece{from{transform:scaleY(0)}}
@keyframes pt-ds-llega{from{opacity:0}}
.portada.is-act .pt-ds .pt-ds-link{animation:pt-ds-baja var(--t-entrada) var(--e-entrada) backwards}
.portada.is-act .pt-ds .pt-ds-link:nth-of-type(3){animation-delay:.06s}
.portada.is-act .pt-ds .pt-ds-link:nth-of-type(5){animation-delay:.12s}
.portada.is-act .pt-ds .pt-ds-flecha i{animation:pt-ds-crece var(--t-estado) var(--e-entrada) .15s backwards}
.portada.is-act .pt-ds .pt-ds-flecha:nth-of-type(4) i{animation-delay:.21s}
.portada.is-act .pt-ds .pt-ds-fill,
.portada.is-act .pt-ds .pt-ds-btn-t{animation:pt-ds-llega var(--t-entrada) var(--e-entrada) .38s backwards}
.portada.is-act .pt-ds .pt-ds-vb{animation:pt-ds-llega var(--t-estado) var(--e-entrada) .44s backwards}
.portada.is-act .pt-ds .pt-ds-var:nth-child(2) .pt-ds-vb{animation-delay:.48s}
.portada.is-act .pt-ds .pt-ds-var:nth-child(3) .pt-ds-vb{animation-delay:.52s}
.portada.is-act .pt-ds .pt-ds-var:nth-child(4) .pt-ds-vb{animation-delay:.56s}