/* ── portadas/dash.css — escena del caso 02, Dashboard de Instituciones ──
   La idea: la vista de inicio del panel, una card por asistente. Es la
   frase del caso hecha pantalla: la institución opera su suite de IA
   desde aquí. Primer plano de las tres cards, sin rail ni chrome de app.

   Lienzo de 44 × 28 em (ver .portada en base.css). La portada de cabecera
   muestra los 22 em de arriba: el corte cae en el aire entre la curva y
   el pie de la card, así que el pie solo existe en la miniatura.

   Dos niveles de texto: nivel 1 (1.4em o más: nombres y cifras, se leen
   en la miniatura) y nivel 2 (0.55 a 0.9em: textura en la miniatura,
   legible en la portada).

   Las clases llevan prefijo pd- además del ámbito .pt-dash: en la página
   del caso conviven con ds-demo.css, que define .sp, .k y otras cortas.

   Retrata producto: tokens reales de uDocz, copiados y acotados aquí.
   Archivo público: no referencia nada de /casos/. */

.pt-dash{
  /* uds-v2 · capa semántica clara (subconjunto que usa la escena) */
  --color-bg-page:#F8FAFC;
  --color-bg-default:#FFFFFF;
  --color-bg-subtle:#F1F5F9;
  --color-bg-muted:#E2E8F0;
  --color-text-primary:#0F172A;
  --color-text-secondary:#475569;
  --color-text-tertiary:#94A3B8;
  --color-border-default:#E2E8F0;
  --color-brand-primary:#0A45DD;          /* blue-600 */
  --color-brand-primary-subtle:#F1F6FF;   /* blue-100 */
  --color-brand-primary-border:#BED4FF;   /* blue-200 */
  --color-chart-line:#256EFF;             /* blue-500: rol no textual */
  --color-chart-area:#F1F6FF;
  --color-feedback-success:#3DDC97;       /* aquamarine-500 */
  --color-feedback-success-subtle:#EAFBF4;
  --color-feedback-success-text:#0F5447;  /* aquamarine-800 */
  --pt-display:'Montserrat',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pt-sans:'Rubik',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --pt-linea:max(1px,.05em);

  background:var(--color-bg-page);color:var(--color-text-primary);
  font-family:var(--pt-sans);line-height:1.3;
  font-variant-numeric:tabular-nums;
  -webkit-text-size-adjust:none;text-size-adjust:none;
}
[data-theme="dark"] .pt-dash{
  /* uds-v2 · capa semántica oscura */
  --color-bg-page:#0B0F19;
  --color-bg-default:#131826;
  --color-bg-subtle:#1B2233;
  --color-bg-muted:#232B40;
  --color-text-primary:#F1F5F9;
  --color-text-secondary:#CBD5E1;
  --color-text-tertiary:#94A3B8;
  --color-border-default:#2A3349;
  --color-brand-primary:#8BB2FF;          /* blue-300: texto de marca en oscuro */
  --color-brand-primary-subtle:#1A2540;   /* blue-400 al 12% sobre bg-default, sólido */
  --color-brand-primary-border:#2F426D;   /* blue-400 al 32% sobre bg-default, sólido */
  --color-chart-line:#5890FF;             /* blue-400 */
  --color-chart-area:#1A2540;
  --color-feedback-success:#68E4AE;       /* aquamarine-400 */
  --color-feedback-success-subtle:#183034;/* aquamarine-500 al 12% sobre bg-default, sólido */
  --color-feedback-success-text:#93ECC5;  /* aquamarine-300 */
}

/* ── topbar slim: dónde estamos y de qué período se habla ── */
.pt-dash .pd-tb{
  position:absolute;left:0;right:0;top:0;height:3em;
  display:flex;align-items:center;gap:.7em;padding:0 1.6em;
  background:var(--color-bg-default);
  border-bottom:var(--pt-linea) solid var(--color-border-default);
}
.pt-dash .pd-tb-t{font-family:var(--pt-display);font-size:.9em;font-weight:700;letter-spacing:-.01em}
.pt-dash .pd-tb-p{
  margin-left:auto;font-size:.6em;color:var(--color-text-secondary);
  padding:.4em .9em;border:var(--pt-linea) solid var(--color-border-default);border-radius:.7em;
}
.pt-dash .pd-tb-a{width:1.5em;height:1.5em;border-radius:50%;background:var(--color-bg-muted)}

/* ── la grilla: una card por asistente ── */
.pt-dash .pd-g{
  position:absolute;left:1.6em;right:1.6em;top:4.2em;height:22.2em;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1em;
}
.pt-dash .pd-c{
  display:flex;flex-direction:column;min-width:0;
  padding:1.1em .9em .9em;
  background:var(--color-bg-default);
  border:var(--pt-linea) solid var(--color-border-default);
  border-radius:.8em;
}
.pt-dash .pd-c-h{display:flex;align-items:center;justify-content:space-between;height:2.4em}
.pt-dash .pd-c-i{
  width:2.4em;height:2.4em;border-radius:.6em;
  display:grid;place-items:center;
  background:var(--color-brand-primary-subtle);color:var(--color-brand-primary);
}
.pt-dash .pd-c-i svg{width:1.3em;height:1.3em;display:block;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.pt-dash .pd-c-s{
  display:inline-flex;align-items:center;gap:.55em;
  font-size:.58em;font-weight:500;padding:.38em .95em;border-radius:99em;
  background:var(--color-feedback-success-subtle);color:var(--color-feedback-success-text);
}
.pt-dash .pd-c-s i{width:.6em;height:.6em;border-radius:50%;background:var(--color-feedback-success)}
/* nivel 1: el nombre del asistente, siempre en dos líneas */
.pt-dash .pd-c-n{
  margin-top:.36em;font-family:var(--pt-display);font-size:1.4em;font-weight:700;
  line-height:1.2;letter-spacing:-.025em;height:2.4em;
}
.pt-dash .pd-c-d{
  margin-top:.4em;font-size:.62em;line-height:1.45;height:2.9em;overflow:hidden;
  color:var(--color-text-secondary);
}
.pt-dash .pd-c-k{
  margin-top:.55em;padding:.55em 0;
  display:flex;justify-content:space-between;gap:.3em;
  border-top:var(--pt-linea) solid var(--color-border-default);
  border-bottom:var(--pt-linea) solid var(--color-border-default);
}
.pt-dash .pd-k{display:flex;flex-direction:column;min-width:0}
/* nivel 1: la cifra. La columna mide lo que mide su cifra */
.pt-dash .pd-k b{font-family:var(--pt-display);font-size:1.45em;font-weight:700;line-height:1.1;letter-spacing:-.03em}
.pt-dash .pd-k span{
  margin-top:.25em;
  font-size:.55em;line-height:1.4;color:var(--color-text-secondary);white-space:nowrap;
}
/* en la miniatura la etiqueta no aporta ancho: a 4px los glifos se
   redondean hacia arriba y ensanchaban la columna hasta pegar las cifras.
   Ahí es textura; en la portada vuelve a medir lo suyo y reparte el aire. */
@container (max-width:600px){
  .pt-dash .pd-k span{width:0;min-width:100%}
}

/* ── la curva de 30 días ── */
.pt-dash .pd-sp{margin-top:.5em}
.pt-dash .pd-sp-h{
  display:flex;justify-content:space-between;gap:.5em;
  font-size:.55em;line-height:1.4;color:var(--color-text-secondary);white-space:nowrap;
}
.pt-dash .pd-sp-h b{font-weight:500;color:var(--color-feedback-success-text)}
.pt-dash .pd-ch{position:relative;height:2em;margin-top:.25em}
.pt-dash .pd-ch svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.pt-dash .pd-ch .pd-ar{fill:var(--color-chart-area)}
.pt-dash .pd-ch .pd-ln{
  fill:none;stroke:var(--color-chart-line);stroke-width:.13em;
  stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke;
}
/* telón del color de la card: en reposo no existe (scaleX 0); al
   re-dibujar se retira hacia la derecha y la curva aparece trazándose.
   Solo transform, sin tocar el trazo del SVG. */
.pt-dash .pd-ch::after{
  content:"";position:absolute;inset:-.15em -.1em;
  background:var(--color-bg-default);
  transform:scaleX(0);transform-origin:right center;
}

/* ── pie: solo en la miniatura (la portada corta antes) ── */
.pt-dash .pd-c-f{margin-top:auto;display:flex;align-items:center;justify-content:space-between;gap:.4em}
.pt-dash .pd-c-f span{font-size:.58em;font-weight:500;color:var(--color-text-secondary);white-space:nowrap}
.pt-dash .pd-c-f b{
  font-size:.58em;font-weight:500;color:var(--color-brand-primary);white-space:nowrap;
  padding:.55em .9em;border:var(--pt-linea) solid var(--color-brand-primary-border);border-radius:.8em;
}

/* ── el gesto: los asistentes se reportan ──
   Las tres cards suben en cascada (la misma entrada que tiene la vista
   real: 45 a 50 ms entre cards), cada curva se traza y al final aparece
   la variación de la semana. 850 ms en total, una sola vez. Solo
   transform y opacidad. Estado base = escena completa. */
@keyframes pt-dash-sube{from{opacity:0;transform:translateY(.8em)}}
@keyframes pt-dash-traza{from{transform:scaleX(1)}}
.portada.is-act .pt-dash .pd-c{animation:pt-dash-sube var(--t-entrada) var(--e-entrada) backwards}
.portada.is-act .pt-dash .pd-c:nth-child(2){animation-delay:.05s}
.portada.is-act .pt-dash .pd-c:nth-child(3){animation-delay:.1s}
.portada.is-act .pt-dash .pd-ch::after{animation:pt-dash-traza var(--t-entrada) var(--e-vaiven) .2s backwards}
.portada.is-act .pt-dash .pd-c:nth-child(2) .pd-ch::after{animation-delay:.25s}
.portada.is-act .pt-dash .pd-c:nth-child(3) .pd-ch::after{animation-delay:.3s}
.portada.is-act .pt-dash .pd-sp-h b{display:inline-block;animation:pt-dash-sube var(--t-estado) var(--e-entrada) .5s backwards}
.portada.is-act .pt-dash .pd-c:nth-child(2) .pd-sp-h b{animation-delay:.55s}
.portada.is-act .pt-dash .pd-c:nth-child(3) .pd-sp-h b{animation-delay:.6s}