/* ==========================================================================
   BrightRows — Página de ejemplos interactivos
   Se carga después de ../style.css y reutiliza sus variables y componentes.
   1. Colores de las gráficas
   2. Introducción
   3. Pestañas
   4. Encabezado de cada ejemplo
   5. Ventana del dashboard: barra, filtros e indicadores
   6. Tarjetas de gráfica, leyendas y tablas
   7. Marcas SVG
   8. Tooltip
   9. Estados, observaciones y barras de presupuesto
   10. Calculadora (plegada)
   11. Bloques, etiquetas de histórico / proyección / escenario y controles
   12. Simuladores, tablas de supuestos y listas de prioridad
   13. Movimiento: cambio de pestaña, gráficas que se dibujan, indicadores
   ========================================================================== */


/* ==========================================================================
   1. Colores de las gráficas
   Paleta categórica (3 tonos), rampa ordinal (antigüedad de saldos) y rampa
   secuencial (mapa de calor), comprobadas con un validador de contraste y de
   separación para daltonismo sobre fondo blanco. Si cambias un tono, vuelve a
   comprobarlo; ver proyectos/demo-dashboards/README.md.
   v4.0 (marca BrightRows): serie 1 pasa a azul noche y el mapa de calor a una
   rampa ámbar ("más venta, más encendido"). Validado el 2026-10-08:
   CVD ΔE mínimo 25.2 (antes 12.1); el naranja conserva su aviso de contraste
   (2.98:1) y por eso cada gráfica tiene tabla y etiquetas.
   ========================================================================== */
.page-ejemplos {
  --viz-surface: #ffffff;
  --viz-1: #2c5d9e;           /* Serie 1 (azul noche) */
  --viz-2: #dc7a2a;           /* Serie 2 (naranja) */
  --viz-3: #7a4fb0;           /* Serie 3 (violeta) */
  --viz-neutral: #4f6b7d;     /* Barras de una sola serie que no representan a una sucursal */
  --viz-muted: #c9d2d9;       /* Series de referencia en gris */
  --viz-muted-strong: #9aa9b5;/* Segmento secundario (horas internas, "vence en la semana") */
  --viz-hoy: #7d8f9e;         /* Cobranza: lo que vence el día del corte */

  --viz-ord-1: #e9a46b;       /* Antigüedad: por vencer → más de 90 días */
  --viz-ord-2: #d47f3f;
  --viz-ord-3: #b35e27;
  --viz-ord-4: #87421a;
  --viz-ord-5: #5a2b10;

  --viz-seq-1: #fff1cc;       /* Mapa de calor: menos → más venta (rampa ámbar) */
  --viz-seq-2: #ffdc8f;
  --viz-seq-3: #ffc24b;
  --viz-seq-4: #e39b22;
  --viz-seq-5: #b87310;
  --viz-seq-6: #7f4c00;

  --status-good: #0ca30c;
  --status-warning: #fab219;
  --status-critical: #d03b3b;

  --viz-ink: var(--color-text);
  --viz-ink-2: var(--color-text-muted);
  --viz-ink-3: #66727d;
  --viz-grid: #e9edf0;
  --viz-axis: #c4cdd4;
}


/* ==========================================================================
   2. Introducción
   ========================================================================== */
/* Introducción oscura, como el inicio de la landing: cuadrícula que se
   enciende hacia abajo ("fila que amanece", logo 02) */
.demos-hero {
  --color-focus: var(--ambar);
  --color-text: var(--noche-50);
  --color-text-muted: var(--noche-400);
  --color-primary: var(--ambar);
  position: relative;
  overflow: hidden;
  padding-block: clamp(2rem, 1.5rem + 3vw, 4rem) clamp(2rem, 1.5rem + 3vw, 3.5rem);
  background-color: var(--noche-900);
  color: var(--noche-50);
}

.demos-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(90deg, var(--noche-700) 1px, transparent 1px),
    linear-gradient(var(--noche-700) 1px, transparent 1px);
  background-size: 40px 40px;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 0.55;
  pointer-events: none;
}

.demos-hero::after {
  content: "";
  position: absolute;
  right: -15%;
  bottom: -60%;
  width: min(800px, 120vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 194, 75, 0.16) 0%, rgba(255, 194, 75, 0.05) 40%, transparent 68%);
  pointer-events: none;
}

.demos-hero > .container {
  position: relative;
  z-index: 1;
}

.demos-hero .eyebrow {
  color: var(--ambar);
}

.demos-hero__back {
  display: inline-flex;
  margin-bottom: var(--space-6);
}

.demos-hero__title {
  max-width: 22ch;
  font-size: clamp(2rem, 1.4rem + 2.6vw, 3.25rem);
  line-height: 1.1;
}

.demos-hero__lead {
  max-width: 44rem;
  margin-top: var(--space-4);
  font-size: var(--text-lg);
  color: var(--color-text-muted);
}

.demos-hero__notes {
  display: grid;
  gap: var(--space-3) var(--space-6);
  margin-top: var(--space-8);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.demos-hero__notes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.demos-hero__notes .icon {
  margin-top: 0.15rem;
  color: var(--color-primary);
}

.demos-hero__notes .sample-badge {
  margin-top: 0.1rem;
}

@media (min-width: 960px) {
  .demos-hero__notes {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.demos {
  padding-bottom: var(--section-space);
}

.demos__caveat {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  margin-top: var(--space-10);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}


/* ==========================================================================
   3. Pestañas (fijas debajo del encabezado al hacer scroll)
   ========================================================================== */
.demo-tabs {
  display: flex;
  gap: var(--space-2);
  margin-inline: calc(var(--gutter) * -1);
  padding: var(--space-3) var(--gutter);
  overflow-x: auto;
  scrollbar-width: thin;
  border-bottom: 1px solid var(--color-border);
  background-color: rgba(255, 255, 255, 0.97);
  scroll-margin-top: var(--header-height);
}

.demo-tab {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  flex-shrink: 0;
  min-height: 52px;
  padding: 0.4rem 1rem 0.4rem 0.45rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  text-align: left;
  line-height: 1.25;
  cursor: pointer;
  transition: border-color var(--duration) var(--ease), background-color var(--duration) var(--ease);
}

.demo-tab .icon-badge {
  width: 2.25rem;
  height: 2.25rem;
}

.demo-tab .icon-badge .icon {
  width: 1.15rem;
  height: 1.15rem;
}

.demo-tab strong {
  display: block;
  font-weight: 600;
}

.demo-tab small {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.demo-tab:hover {
  border-color: var(--color-border-strong);
}

/* Pestaña elegida: "la selección" (logo 03), con su cuadrito de arrastre */
.demo-tab[aria-selected="true"] {
  position: relative;
  border-color: var(--ambar);
  background-color: var(--color-primary-soft);
  box-shadow: inset 0 0 0 1px var(--ambar);
}

.demo-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 9px;
  height: 9px;
  border: 2px solid var(--color-bg);
  background-color: var(--ambar);
}

.demo-tab[aria-selected="true"] .icon-badge {
  background-color: var(--noche-900);
  color: var(--ambar);
  box-shadow: 0 0 12px 1px var(--brillo-suave);
}

@media (max-width: 639px) {
  .demo-tab small {
    display: none;
  }
}

@media (min-width: 960px) {
  .demo-tabs {
    position: sticky;
    top: var(--header-height);
    z-index: 30;
  }
}


/* ==========================================================================
   4. Encabezado de cada ejemplo
   ========================================================================== */
.demo-panel {
  padding-top: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
  scroll-margin-top: calc(var(--header-height) + 80px);
}

/* Sin JavaScript se ven los cuatro ejemplos uno debajo de otro */
.demo-panel + .demo-panel {
  margin-top: var(--space-12);
}

[role="tabpanel"].demo-panel + .demo-panel {
  margin-top: 0;
}

.demo-panel__head {
  display: grid;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}

.demo-panel__title {
  font-size: var(--text-2xl);
}

.demo-panel__intro > p:last-child {
  max-width: 42rem;
  margin-top: var(--space-3);
  color: var(--color-text-muted);
}

.demo-panel__questions {
  align-self: end;
  padding: var(--space-4) var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
  font-size: var(--text-sm);
}

.demo-panel__questions > p {
  margin-bottom: var(--space-2);
  font-weight: 600;
}

.demo-panel__questions li {
  position: relative;
  padding-left: 1.1rem;
  color: var(--color-text-muted);
}

.demo-panel__questions li + li {
  margin-top: var(--space-1);
}

.demo-panel__questions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--color-accent);
}

@media (min-width: 960px) {
  .demo-panel__head {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
    gap: var(--space-10);
  }
}


/* ==========================================================================
   5. Ventana del dashboard
   ========================================================================== */
.dash {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: var(--viz-surface);
  box-shadow: var(--shadow-lg);
}

.dash__noscript {
  padding: var(--space-8);
  color: var(--color-text-muted);
}

.dash__bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.375rem var(--space-2);
  padding: 0.625rem 1rem;
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background-color: #fafbfc;
  font-size: var(--text-xs);
}

.dash__title {
  margin-left: var(--space-2);
  font-weight: 600;
  color: var(--color-text);
}

.dash__meta {
  color: var(--color-text-muted);
}

.dash__meta::before {
  content: "·";
  margin-right: var(--space-2);
}

.dash__bar .sample-badge {
  margin-left: auto;
}

@media (max-width: 639px) {
  .dash__bar .mock-window__dot {
    display: none;
  }

  .dash__title {
    margin-left: 0;
  }

  .dash__meta {
    order: 3;
    flex-basis: 100%;
  }

  .dash__meta::before {
    content: none;
  }

  .kpi {
    padding: var(--space-3);
  }
}

.dash__body {
  display: grid;
  gap: var(--space-5);
  padding: clamp(1rem, 0.6rem + 1.5vw, 1.75rem);
}

.dash__content {
  display: grid;
  gap: var(--space-5);
  min-width: 0;
}

/* --- Filtros: una sola fila sobre todo lo que filtran --- */
.dash__filters {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--space-4) var(--space-6);
}

.filter {
  display: grid;
  gap: 0.375rem;
  min-width: 0;
  max-width: 100%;
}

.filter__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.seg {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-alt);
}

.seg__btn {
  min-height: 38px;
  padding: 0.4rem 0.85rem;
  border: 0;
  border-radius: 7px;
  background: transparent;
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
}

.seg__btn:hover {
  color: var(--color-text);
}

.seg__btn[aria-pressed="true"] {
  background-color: var(--color-surface);
  box-shadow: var(--shadow-sm), 0 0 0 1px var(--color-border);
  font-weight: 600;
  color: var(--color-text);
}

.filter__select {
  min-height: 44px;
  padding: 0.5rem 2.25rem 0.5rem 0.75rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-md);
  background: var(--color-surface) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5763' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.6rem center / 1rem;
  font: inherit;
  font-size: var(--text-sm);
  color: var(--color-text);
  appearance: none;
}

/* --- Indicadores --- */
.dash__kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
  gap: var(--space-3);
  margin: 0;
}

.kpi {
  display: grid;
  align-content: start;
  gap: 0.25rem;
  min-width: 0;
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.kpi--primary {
  border-color: var(--color-primary-line);
  background-color: var(--color-primary-soft);
}

.kpi__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.kpi__value {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
}

.kpi--primary .kpi__value {
  font-size: 1.75rem;
}

@media (max-width: 639px) {
  .kpi--primary {
    grid-column: 1 / -1;
  }

  .kpi__value {
    font-size: 1.25rem;
  }
}

.kpi__delta,
.kpi__note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.kpi__delta {
  font-weight: 600;
}

.kpi__delta.is-good {
  color: var(--color-success);
}

.kpi__delta.is-bad {
  color: #94431b;
}


/* ==========================================================================
   6. Tarjetas de gráfica, leyendas y tablas
   ========================================================================== */
.dash__grid {
  display: grid;
  align-items: start;
  gap: var(--space-5);
  min-width: 0;
}

@media (min-width: 900px) {
  .dash__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .viz-card--wide {
    grid-column: 1 / -1;
  }
}

.viz-card,
.dash-section {
  min-width: 0;
  padding: var(--space-4) var(--space-5) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.viz-card__title,
.dash-section__head h3 {
  font-size: var(--text-base);
}

.viz-card__sub,
.dash-section__sub {
  margin-top: var(--space-1);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.dash-section__body {
  margin-top: var(--space-4);
}

.viz-legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.viz-legend__item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.viz-legend__key {
  display: inline-block;
  flex-shrink: 0;
  background: var(--key);
}

.viz-legend__key--rect {
  width: 10px;
  height: 10px;
  border-radius: 2px;
}

.viz-legend__key--line {
  width: 16px;
  height: 2px;
  border-radius: 1px;
}

.viz-legend__key--marker {
  width: 2px;
  height: 14px;
}

/* Proyección: trazo punteado */
.viz-legend__key--dash,
.viz-tip__key--dash {
  width: 16px;
  height: 2px;
  -webkit-mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px);
  mask: repeating-linear-gradient(90deg, #000 0 4px, transparent 4px 7px);
}

/* Rango de escenarios: área tenue */
.viz-legend__key--band,
.viz-tip__key--band {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  opacity: 0.28;
}

.viz {
  min-height: 3rem;
  margin-top: var(--space-4);
}

.viz-svg {
  overflow: visible;
  font-family: var(--font-body);
  touch-action: pan-y;
}

.viz-scale {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-4);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.viz-scale__item {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.viz-scale__item i {
  width: 16px;
  height: 10px;
  border-radius: 2px;
}

.viz-data {
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.viz-data summary {
  width: fit-content;
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary);
  cursor: pointer;
}

.viz-data[open] summary {
  margin-bottom: var(--space-2);
}

/* Sombras laterales que avisan que la tabla se puede deslizar */
.viz-table-wrap {
  overflow-x: auto;
  max-width: 100%;
  background:
    linear-gradient(to right, #fff 30%, rgba(255, 255, 255, 0)) left center / 40px 100% no-repeat local,
    linear-gradient(to left, #fff 30%, rgba(255, 255, 255, 0)) right center / 40px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(19, 32, 43, 0.16), transparent) left center / 12px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(19, 32, 43, 0.16), transparent) right center / 12px 100% no-repeat scroll;
}

.viz-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.viz-table caption {
  padding-bottom: var(--space-2);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  text-align: left;
}

.viz-table th,
.viz-table td {
  padding: 0.55rem 0.65rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.viz-table th:first-child,
.viz-table td:first-child {
  padding-left: 0;
}

.viz-table thead th {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.viz-table tbody th {
  font-weight: 500;
  min-width: 9rem;
}

@media (min-width: 640px) {
  .viz-table tbody th {
    min-width: 12rem;
  }
}

.viz-table tfoot th,
.viz-table tfoot td {
  border-bottom: 0;
  font-weight: 700;
}

.viz-table .is-num {
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.quadrant-key {
  display: grid;
  gap: var(--space-1) var(--space-6);
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.quadrant-key strong {
  color: var(--color-text);
}

@media (min-width: 900px) {
  .quadrant-key {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

.empty {
  padding: var(--space-4) 0;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}


/* ==========================================================================
   7. Marcas SVG
   ========================================================================== */
.viz-gridline {
  stroke: var(--viz-grid);
  stroke-width: 1;
}

.viz-baseline {
  stroke: var(--viz-axis);
  stroke-width: 1;
}

.viz-axis-label {
  fill: var(--viz-ink-3);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.viz-axis-title,
.viz-quadrant {
  fill: var(--viz-ink-3);
  font-size: 12px;
  font-weight: 600;
}

.viz-cat-label {
  fill: var(--viz-ink-2);
  font-size: 13px;
}

.viz-value-label {
  fill: var(--viz-ink);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.viz-direct-label {
  fill: var(--viz-ink-2);
  font-size: 12px;
  font-weight: 600;
}

.viz-point-label {
  fill: var(--viz-ink-2);
  font-size: 12px;
}

.viz-line {
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.viz-line--faded {
  stroke: var(--viz-muted);
}

.viz-line--dashed {
  stroke-dasharray: 5 4;
}

.viz-band {
  fill-opacity: 0.14;
  stroke: none;
}

.viz-divider {
  stroke: var(--viz-axis);
  stroke-width: 1;
}

.viz-dot {
  stroke: var(--viz-surface);
  stroke-width: 2;
  paint-order: stroke;
}

.viz-crosshair,
.viz-threshold {
  stroke: #98a5b0;
  stroke-width: 1;
}

.viz-marker {
  stroke: var(--viz-ink);
  stroke-width: 2;
  stroke-linecap: round;
}

.viz-overlay,
.viz-hit {
  fill: transparent;
}

.viz-overlay {
  cursor: crosshair;
}

.viz-mark {
  outline: none;
}

.viz-mark[role="button"] {
  cursor: pointer;
}

.viz-mark .viz-bar,
.viz-mark .viz-dot {
  transition: opacity var(--duration) var(--ease), filter var(--duration) var(--ease);
}

.viz-mark:hover .viz-bar,
.viz-mark:hover .viz-dot,
.viz-mark:focus-visible .viz-bar,
.viz-mark:focus-visible .viz-dot {
  filter: brightness(1.12) saturate(1.05);
}

.viz-mark:focus-visible .viz-hit {
  stroke: var(--color-focus);
  stroke-width: 2;
  rx: 6;
}

.viz-mark[aria-pressed="true"] .viz-hit {
  fill: var(--color-primary-soft);
}

.is-faded .viz-bar,
.is-faded .viz-value-label {
  opacity: 0.35;
}

.viz-cell {
  transition: opacity 0.15s var(--ease);
}

.viz-cell.is-active {
  stroke: var(--viz-ink);
  stroke-width: 2;
}

.viz-svg:focus-visible {
  outline: 3px solid var(--color-focus);
  outline-offset: 4px;
  border-radius: 4px;
}


/* ==========================================================================
   8. Tooltip
   ========================================================================== */
.viz-tip {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  max-width: min(18rem, calc(100vw - 16px));
  padding: 0.6rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: #fff;
  box-shadow: var(--shadow-lg);
  font-size: var(--text-xs);
  line-height: 1.45;
  pointer-events: none;
}

.viz-tip__title {
  margin-bottom: 0.25rem;
  font-weight: 600;
  color: var(--color-text-muted);
}

.viz-tip__row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.15rem 0.45rem;
}

.viz-tip__row strong {
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}

.viz-tip__label {
  color: var(--color-text-muted);
}

.viz-tip__key {
  display: inline-block;
  flex-shrink: 0;
}

.viz-tip__key--line {
  width: 12px;
  height: 2px;
}

.viz-tip__key--rect,
.viz-tip__key--dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
}

.viz-tip__note {
  margin-top: 0.3rem;
  padding-top: 0.3rem;
  border-top: 1px solid var(--color-border);
  color: var(--color-text-muted);
}


/* ==========================================================================
   9. Estados, observaciones y barras de presupuesto
   ========================================================================== */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.15rem 0.55rem;
  border-radius: var(--radius-full);
  font-size: var(--text-xs);
  font-weight: 600;
  line-height: 1.4;
  white-space: nowrap;
}

.status--good { background-color: var(--color-success-soft); color: var(--color-success); }
.status--warning { background-color: var(--color-sample-soft); color: var(--color-sample); }
.status--critical { background-color: var(--color-error-soft); color: var(--color-error); }
.status--neutral { background-color: #edf1f4; color: var(--color-text-muted); }

.kpi__note .status {
  max-width: 100%;
  margin-top: 0.15rem;
  white-space: normal;
}

.insight {
  padding: var(--space-4) var(--space-5);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: var(--color-bg-alt);
}

.insight__title {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-base);
}

.insight__title .icon {
  color: var(--color-primary);
}

.insight__list {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
  font-size: var(--text-sm);
}

.insight__list li {
  position: relative;
  padding-left: 1.1rem;
}

.insight__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 6px;
  height: 6px;
  border-radius: 1px;
  background-color: var(--ambar);
}

.insight__note {
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-bottom: var(--space-3);
}

.chip {
  padding: 0.25rem 0.65rem;
  border-radius: var(--radius-full);
  background-color: var(--color-primary-soft);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-primary-hover);
}

.chip-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 32px;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.more-btn {
  margin-top: var(--space-3);
}

/* Barras de horas usadas contra presupuesto */
.bullets {
  margin-top: var(--space-3);
}

.bullet {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.4rem var(--space-3);
  padding: 0.6rem 0.4rem;
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  outline-offset: 0;
}

.bullet:hover {
  background-color: var(--color-bg-alt);
}

.bullet__name {
  font-size: var(--text-sm);
  font-weight: 500;
  line-height: 1.35;
}

.bullet .status {
  grid-column: 2;
  grid-row: 1;
}

.bullet__row {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-3);
}

.bullet__track {
  position: relative;
  height: 10px;
  border-radius: var(--radius-full);
  background-color: #eef2f5;
}

.bullet__fill {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
}

.bullet__budget {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 2px;
  margin-left: -1px;
  border-radius: 1px;
  background-color: var(--viz-ink);
}

.bullet__value {
  min-width: 6.5rem;
  font-size: var(--text-xs);
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}


/* ==========================================================================
   10. Calculadora (plegada para no alargar la página)
   ========================================================================== */
.estimate {
  margin-top: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  background-color: #fbfcfc;
}

.estimate__summary {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  cursor: pointer;
  list-style: none;
}

.estimate__summary::-webkit-details-marker {
  display: none;
}

.estimate__summary::after {
  content: "+";
  margin-left: auto;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--color-primary);
}

.estimate[open] .estimate__summary::after {
  content: "−";
}

.estimate__title {
  display: block;
  font-family: var(--font-heading);
  font-size: var(--text-base);
  font-weight: 700;
}

.estimate__hint {
  display: block;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.estimate__body {
  padding: 0 var(--space-5) var(--space-5);
}

.estimate__intro {
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.estimate__intro strong {
  color: var(--color-text);
}

.estimate__grid {
  display: grid;
  gap: var(--space-5);
  margin-top: var(--space-4);
}

.estimate__form {
  display: grid;
  gap: var(--space-4);
}

.estimate__result {
  display: grid;
  align-content: center;
  gap: var(--space-4);
  padding: var(--space-5);
  border-radius: var(--radius-md);
  background-color: var(--color-primary-soft);
}

.estimate__big {
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 1.15rem + 1vw, 1.85rem);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: var(--color-primary-hover);
}

.estimate__small {
  margin-top: 0.15rem;
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.estimate__payback {
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-primary-line);
  font-size: var(--text-sm);
  font-weight: 600;
}

.estimate__msg {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-sample);
}

.estimate__note {
  margin-top: var(--space-4);
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (min-width: 640px) {
  .estimate__form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 1024px) {
  .estimate__grid {
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr);
  }
}


/* ==========================================================================
   11. Bloques y etiquetas
   Cada ejemplo sigue el mismo orden: resumen, hallazgos, proyección o
   simulador y detalle plegado. La etiqueta de cada bloque dice si las cifras
   son históricas, una proyección o un escenario con supuestos.
   ========================================================================== */
.dash__filter-row {
  display: grid;
  gap: var(--space-2);
}

.dash__filter-note {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.dash-block {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
  padding: var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.dash-block--proyeccion {
  border-color: var(--color-primary-line);
  background-color: #fffcf4;
}

.dash-block--escenario {
  border-color: var(--color-sample-line);
  background-color: #fffcf6;
}

.dash-block__head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  gap: 0 var(--space-3);
}

.dash-block__head .dash-block__sub {
  grid-column: 1 / -1;
}

.dash-block__title {
  font-size: var(--text-lg);
}

.dash-block__title:focus {
  outline: none;
}

.dash-block__sub,
.dash-block__lead {
  margin-top: var(--space-1);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
}

.dash-block__lead {
  margin-top: 0;
  font-weight: 600;
  color: var(--color-text);
}

.dash-block__body {
  display: grid;
  gap: var(--space-4);
  min-width: 0;
}

.tag {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  padding: 0.15rem 0.6rem;
  border: 1px solid currentColor;
  border-radius: var(--radius-full);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tag--historico,
.tag--corte {
  color: var(--color-text-muted);
  background-color: var(--color-bg-alt);
}

.tag--proyeccion {
  color: var(--color-primary-hover);
  background-color: var(--color-primary-soft);
}

.tag--escenario {
  color: var(--color-sample);
  background-color: var(--color-sample-soft);
}

/* Detalle plegado */
.dash-detail {
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
}

.dash-detail > summary {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--space-1) var(--space-3);
  padding: var(--space-3) var(--space-5);
  cursor: pointer;
}

.dash-detail__summary {
  font-weight: 600;
  color: var(--color-primary);
}

.dash-detail__hint {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.dash-detail__body {
  display: grid;
  gap: var(--space-4);
  padding: 0 var(--space-5) var(--space-5);
  min-width: 0;
}

.dash-block .dash-detail > summary,
.dash-block .dash-detail__body {
  padding-inline: var(--space-4);
}

.detail-title {
  margin-top: var(--space-2);
  font-size: var(--text-base);
}

.viz-card__note {
  margin-top: var(--space-2);
  font-size: var(--text-sm);
}

.assumptions {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

/* Hallazgos: qué cambió, por qué importa y qué revisar */
.insight__list {
  counter-reset: hallazgo;
}

.insight__list li {
  display: grid;
  gap: 0.15rem;
}

.insight__what {
  font-weight: 600;
}

.insight__why {
  color: var(--color-text);
}

.insight__check {
  color: var(--color-text-muted);
}

.insight__check-label {
  font-weight: 600;
  color: var(--color-primary-hover);
}


/* ==========================================================================
   12. Controles, simuladores y listas
   ========================================================================== */
.controls {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
  align-items: start;
  gap: var(--space-4);
}

.controls__full {
  grid-column: 1 / -1;
}

.controls__full .filter__select {
  width: min(100%, 22rem);
}

.controls--end {
  grid-template-columns: 1fr auto;
}

.controls__actions {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

@media (max-width: 639px) {
  .controls--end {
    grid-template-columns: 1fr;
  }
}

.reset-btn {
  gap: 0.4rem;
}

.field--compact {
  display: grid;
  gap: 0.3rem;
  align-content: start;
  min-width: 0;
}

.field--compact .field__label {
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--color-text-muted);
}

.field--compact .field__input {
  min-height: 40px;
  padding: 0.45rem 0.65rem;
  font-size: var(--text-sm);
}

.field__with-suffix {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.field__suffix {
  flex-shrink: 0;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  white-space: nowrap;
}

.range__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-2);
}

.range__value {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-primary-hover);
}

.range__input {
  width: 100%;
  min-height: 40px;
  accent-color: var(--color-primary);
}

.scenario-summary .viz-table caption {
  font-weight: 600;
  color: var(--color-text);
}

.table-scroll {
  overflow-x: auto;
  max-width: 100%;
}

.assumption-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
}

.assumption-table th,
.assumption-table td {
  padding: 0.5rem 0.5rem;
  border-bottom: 1px solid var(--color-border);
  text-align: left;
  vertical-align: middle;
}

.assumption-table thead th {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.assumption-table tbody th {
  min-width: 12rem;
  font-weight: 500;
}

.assumption-table td {
  min-width: 7.5rem;
}

.assumption-table .field__label {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.assumption-table--rows td:last-child {
  min-width: 8rem;
}

.confirm {
  display: block;
  margin-top: 0.25rem;
}

.cap-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
  gap: var(--space-3);
}

.compare-table .is-current {
  background-color: var(--color-primary-soft);
}

.compare-table .is-strong th,
.compare-table .is-strong td {
  font-weight: 700;
}

.compare-table .is-total th,
.compare-table .is-total td {
  border-top: 2px solid var(--color-border-strong);
  color: var(--color-text-muted);
}

.recon {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-md);
  background-color: var(--color-success-soft);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.recon .icon {
  margin-top: 0.15rem;
  color: var(--color-success);
}

/* Lista de prioridades (inventario) */
.priority {
  display: grid;
  gap: var(--space-2);
}

.priority__item {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: start;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.priority__num {
  display: inline-grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--color-bg-alt);
  font-size: var(--text-xs);
  font-weight: 700;
}

.priority__name {
  font-size: var(--text-sm);
}

.priority__why {
  margin-top: 0.15rem;
  font-size: var(--text-sm);
}

.priority__meta {
  margin-top: 0.15rem;
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

@media (max-width: 639px) {
  .priority__item {
    grid-template-columns: auto minmax(0, 1fr);
  }

  .priority__item > .status {
    grid-column: 2;
    justify-self: start;
  }
}

/* Clientes que concentran el atraso */
.client-list__head .viz-card__title {
  font-size: var(--text-base);
}

.rank {
  display: grid;
  gap: var(--space-2);
  margin-top: var(--space-3);
}

.rank__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 0.35rem var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--color-border);
}

.rank__name {
  font-size: var(--text-sm);
}

.rank__meta {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

.rank__bar {
  grid-column: 1 / -1;
  display: block;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: #eef2f5;
}

.rank__bar > span {
  display: block;
  height: 100%;
  border-radius: var(--radius-full);
  background-color: var(--viz-ord-3);
}

.rank__item > .status {
  grid-column: 2;
  grid-row: 1;
  align-self: start;
}

/* Resultado de simuladores */
.sim-result {
  display: grid;
  gap: var(--space-3);
}

.sim-result__key {
  padding: var(--space-3) var(--space-4);
  border-left: 3px solid var(--color-accent);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  background-color: var(--color-surface);
  font-size: var(--text-sm);
  font-weight: 600;
}

.sim-result__cat {
  font-size: var(--text-sm);
}

/* --- Menú: página actual --- */
/* Encabezado y footer son oscuros: la página actual va en ámbar claro y,
   en escritorio, con la barra de "fila resaltada" (logo 09) */
.nav__link[aria-current="page"] {
  color: var(--ambar);
  font-weight: 600;
}

@media (min-width: 960px) {
  .nav__link[aria-current="page"] {
    color: var(--noche-50);
    background-color: transparent;
  }

  .nav__link[aria-current="page"]::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.1rem;
    height: 3px;
    border-radius: 2px;
    background-color: var(--ambar);
    box-shadow: 0 0 10px 1px var(--brillo);
  }
}

.site-footer__links a[aria-current="page"] {
  color: var(--ambar);
}

/* Las columnas de estas rejillas no deben crecer con tablas anchas:
   las tablas se desplazan dentro de su propio recuadro. */
.dash__body,
.dash__content,
.dash-block,
.dash-block__body,
.dash-detail__body,
.sim-result {
  grid-template-columns: minmax(0, 1fr);
}

.dash-block__body > *,
.dash-detail__body > *,
.dash__content > * {
  min-width: 0;
}

/* Las etiquetas ocultas visualmente dentro de tablas desplazables quedan
   contenidas en su recuadro (si no, ensanchan la página en móvil). */
.table-scroll,
.viz-table-wrap {
  position: relative;
}

/* Escenarios de cobro: una tarjeta por escenario para compararlos lado a lado */
.scenario-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  gap: var(--space-3);
}

.scenario-card {
  display: grid;
  align-content: start;
  gap: var(--space-3);
  padding: var(--space-4);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-md);
  background-color: var(--color-surface);
}

.scenario-card.is-current {
  border-color: var(--color-primary);
  box-shadow: inset 0 0 0 1px var(--color-primary);
}

.scenario-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
}

.scenario-card__title {
  font-size: var(--text-base);
}

.scenario-card__show {
  min-height: 32px;
  padding: 0.25rem 0.6rem;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-full);
  background: var(--color-surface);
  font-size: var(--text-xs);
  font-weight: 600;
  cursor: pointer;
}

.scenario-card__show[aria-pressed="true"] {
  border-color: var(--color-primary);
  background-color: var(--color-primary-soft);
  color: var(--color-primary-hover);
}

.scenario-card__out {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--color-border);
}

.scenario-card__out dt {
  font-size: var(--text-xs);
  color: var(--color-text-muted);
}

.scenario-card__out dd {
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.scenario-card__big {
  font-family: var(--font-heading);
  font-size: var(--text-lg);
  color: var(--color-primary-hover);
}

/* Móvil: menos márgenes anidados e indicadores en dos columnas */
@media (max-width: 639px) {
  .dash__body {
    padding: 0.75rem;
  }

  .dash-block {
    padding: var(--space-4) 0.875rem;
  }

  .viz-card,
  .dash-section {
    padding: var(--space-3) var(--space-3) var(--space-4);
  }

  .dash__kpis {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .kpi__label {
    font-size: 0.75rem;
  }

  .priority__item {
    padding: var(--space-3);
  }

  .dash-detail > summary,
  .dash-detail__body {
    padding-inline: var(--space-3);
  }
}

@media (max-width: 639px) {
  .kpi__value {
    font-size: 1.05rem;
  }

  .kpi--primary .kpi__value {
    font-size: 1.45rem;
  }

  /* Simulador en móvil: concepto, mes y escenario; el cambio se ve en la tabla de escritorio */
  .compare-table .is-delta {
    display: none;
  }

  .compare-table th,
  .compare-table td {
    padding-inline: 0.4rem;
    font-size: var(--text-xs);
  }

  .compare-table tbody th {
    min-width: 0;
  }
}


/* ==========================================================================
   13. Movimiento
   Usa las animaciones base de ../style.css (sección 16) y sus mismas reglas:
   nada queda oculto sin JavaScript, todo se desactiva con "reducir
   movimiento" y nada se repite sin fin.
   - Pestañas: el ejemplo elegido entra con un desvanecido corto.
   - Gráficas: se dibujan una sola vez, la primera vez que se ven en pantalla.
     graficas.js agrega .viz-anim y .viz-hold al contenedor, quita .viz-hold
     al verlo y quita .viz-anim al terminar. Al cambiar un filtro o un supuesto
     se redibujan sin animación, para que la cifra nueva se lea de inmediato.
   - Indicadores: cuando un filtro o supuesto cambia su valor, la cifra nueva
     sube suavemente y el recuadro se marca un instante.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
  .demo-panel.is-entering {
    animation: enter-soft 0.45s var(--ease-out) backwards;
  }

  /* Columnas: crecen desde la base. Barras horizontales: desde la izquierda.
     --i es el orden; después de 16 elementos ya no se espera más. */
  .viz-anim .viz-col .viz-bar {
    transform-box: fill-box;
    transform-origin: 50% 100%;
    animation: grow-y 0.7s var(--ease-out) backwards;
    animation-delay: calc(min(var(--i, 0), 16) * 45ms);
  }

  .viz-anim .viz-row .viz-bar {
    transform-box: fill-box;
    transform-origin: 0 50%;
    animation: grow-x 0.7s var(--ease-out) backwards;
    animation-delay: calc(min(var(--i, 0), 16) * 45ms);
  }

  .viz-anim .viz-col .viz-value-label,
  .viz-anim .viz-row .viz-value-label {
    animation: fade-in 0.4s ease backwards;
    animation-delay: calc(min(var(--i, 0), 16) * 45ms + 0.4s);
  }

  /* Líneas y barras apiladas: se descubren de izquierda a derecha */
  .viz-anim[data-viz-type="line"] .viz-svg,
  .viz-anim[data-viz-type="stack"] .viz-svg {
    animation: viz-wipe 1.2s cubic-bezier(0.4, 0, 0.2, 1) backwards;
  }

  .viz-anim[data-viz-type="stack"] .viz-bar,
  .viz-anim[data-viz-type="stack"] .viz-value-label {
    animation: none;
  }

  /* Matriz del menú: los puntos aparecen uno tras otro */
  .viz-anim[data-viz-type="scatter"] .viz-dot {
    transform-box: fill-box;
    transform-origin: 50% 50%;
    animation: pop-in 0.5s var(--ease-spring) backwards;
    animation-delay: calc(min(var(--i, 0), 20) * 35ms + 0.1s);
  }

  .viz-anim[data-viz-type="scatter"] .viz-point-label {
    animation: fade-in 0.5s ease 0.6s backwards;
  }

  /* Mapa de calor: una ola en diagonal (--i = fila + columna) */
  .viz-anim[data-viz-type="heatmap"] .viz-cell {
    animation: fade-in 0.5s ease backwards;
    animation-delay: calc(var(--i, 0) * 30ms);
  }

  /* Espera pausada hasta que la gráfica se ve en pantalla */
  .viz-anim.viz-hold .viz-svg,
  .viz-anim.viz-hold .viz-svg * {
    animation-play-state: paused;
  }

  .kpi--changed {
    animation: kpi-ring 0.9s var(--ease) backwards;
  }

  .kpi--changed .kpi__value {
    animation: enter-soft 0.35s var(--ease-out) backwards;
  }
}

@keyframes viz-wipe {
  from {
    clip-path: inset(-10% 100% -10% -10%);
  }

  to {
    clip-path: inset(-10% -10% -10% -10%);
  }
}

@keyframes kpi-ring {
  from {
    box-shadow: 0 0 0 3px var(--color-primary-line);
  }
}

/* Detalles plegados: mismo comportamiento que las preguntas de la landing */
@media (prefers-reduced-motion: no-preference) {
  .dash-detail[open] > .dash-detail__body,
  .viz-data[open] > :not(summary),
  .estimate[open] > :not(summary) {
    animation: enter-soft 0.4s var(--ease-out) backwards;
  }

  @supports selector(::details-content) {
    .dash-detail,
    .viz-data,
    .estimate {
      interpolate-size: allow-keywords;
    }

    .dash-detail::details-content,
    .viz-data::details-content,
    .estimate::details-content {
      block-size: 0;
      overflow: clip;
      overflow-clip-margin: 8px; /* No recorta el contorno de foco */
      transition:
        block-size 0.35s var(--ease),
        content-visibility 0.35s allow-discrete;
    }

    .dash-detail[open]::details-content,
    .viz-data[open]::details-content,
    .estimate[open]::details-content {
      block-size: auto;
    }
  }
}