/* ==========================================================================
   QUOMYA — EVOLUCIÓN V1
   Wave S4.5. Scoped entirely to `.qy-evolucion-screen`.
   Domain calculations remain in charts.module.js, chartsAdvanced.module.js
   and estimation.module.js. `chartsAdvanced.module.js` keeps its own
   projection calculation (buildEstimation) independent of
   estimation.module.js's canonical calculateMonthlyEstimation() -- guarded
   by R22, not refactored here. See MASTER decision: PROJECTION_REFACTOR
   FORBIDDEN for S4.5.
   ========================================================================== */

.qy-evolucion-screen,
.qy-evolucion-screen * {
  box-sizing: border-box;
}

.qy-evolucion-screen {
  grid-template-columns: minmax(0, 1fr);
  gap: var(--qy-space-6);
  padding-block: var(--qy-space-6) var(--qy-space-4);
  color: var(--qy-color-text-primary);
  overflow: visible;
}

.qy-evolucion-screen > * {
  min-width: 0;
  max-width: 100%;
}

.qy-evolucion-screen > .qy-projection-card {
  grid-area: auto;
  grid-column: auto;
}

.qy-evolucion-screen :is(button, summary):focus-visible {
  outline: 0;
  box-shadow: var(--qy-focus-ring) !important;
}

.qy-evolucion-month-field {
  min-width: 140px;
}

.qy-evolucion-month-field .qy-field__label {
  display: none;
}

/* ---- hero -------------------------------------------------------------- */

.qy-evolucion-hero {
  display: grid;
  gap: var(--qy-space-5);
  padding: var(--qy-space-6);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-xl);
  background:
    radial-gradient(circle at 95% 0%, var(--qy-color-brand-soft), transparent 46%),
    var(--qy-color-surface-1);
  box-shadow: var(--qy-elevation-card);
}

.qy-evolucion-hero__copy {
  display: grid;
  gap: var(--qy-space-2);
}

.qy-evolucion-hero__copy > span {
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
}

.qy-evolucion-hero__copy > strong {
  overflow: hidden;
  color: var(--qy-color-text-primary);
  font-size: clamp(2rem, 8vw, 3rem);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.04em;
  text-overflow: ellipsis;
}

.qy-evolucion-hero__copy > p {
  margin: 0;
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

.qy-evolucion-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qy-space-3);
}

.qy-evolucion-hero__stats > div {
  display: grid;
  gap: var(--qy-space-1);
  padding: var(--qy-space-4);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-2);
}

.qy-evolucion-hero__stats span {
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
}

.qy-evolucion-hero__stats strong {
  overflow: hidden;
  color: var(--qy-color-text-primary);
  font-size: clamp(1.1rem, 4vw, 1.4rem);
  font-weight: 650;
  text-overflow: ellipsis;
}

/* ---- comparison (chartsAdvanced.module.js) ------------------------------ */

.qy-evolucion-comparison-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qy-space-3);
}

.qy-evolucion-comparison-item {
  display: grid;
  gap: var(--qy-space-1);
  padding: var(--qy-space-4);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-2);
}

.qy-evolucion-comparison-item > span {
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
}

.qy-evolucion-comparison-item > strong {
  overflow: hidden;
  color: var(--qy-color-text-primary);
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  font-weight: 650;
  text-overflow: ellipsis;
}

.qy-evolucion-comparison-item > small {
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

.qy-evolucion-change {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: fit-content;
  padding: 3px 9px;
  border-radius: var(--qy-radius-pill);
  font: var(--qy-text-label-md);
  white-space: nowrap;
}

.qy-evolucion-change--positive {
  color: var(--qy-color-collected-text);
  background: var(--qy-color-collected-soft);
}

.qy-evolucion-change--negative {
  color: var(--qy-color-cancelled-text);
  background: var(--qy-color-cancelled-soft);
}

.qy-evolucion-change--neutral {
  color: var(--qy-color-text-secondary);
  background: var(--qy-color-surface-3);
}

/* ---- daily chart (charts.module.js) ------------------------------------- */

.qy-evolucion-daily-chart {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(14px, 1fr);
  align-items: end;
  gap: 4px;
  min-height: 180px;
  padding: var(--qy-space-3) 0 0;
  overflow-x: auto;
  overscroll-behavior-x: contain;
}

.qy-evolucion-daily-bar {
  display: grid;
  gap: var(--qy-space-1);
  align-items: end;
  min-width: 14px;
}

.qy-evolucion-daily-bar__track {
  position: relative;
  height: 140px;
  overflow: hidden;
  border-radius: var(--qy-radius-sm);
  background: var(--qy-color-surface-3);
}

.qy-evolucion-daily-bar__track > span {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  display: block;
  border-radius: var(--qy-radius-sm);
  background: linear-gradient(180deg, var(--qy-color-brand), var(--qy-color-brand-deep));
}

.qy-evolucion-daily-bar small {
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-label-md);
  font-size: 0.6rem;
  text-align: center;
}

/* ---- concept distribution (charts.module.js) ---------------------------- */

.qy-evolucion-concept-list {
  display: grid;
  gap: var(--qy-space-4);
}

.qy-evolucion-concept-row {
  display: grid;
  gap: var(--qy-space-2);
}

.qy-evolucion-concept-row__head {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--qy-space-3);
}

.qy-evolucion-concept-dot {
  width: 10px;
  height: 10px;
  border-radius: var(--qy-radius-pill);
}

.qy-evolucion-concept-dot--cat-1,
.qy-evolucion-concept-fill--cat-1 { background: var(--qy-cat-1); }
.qy-evolucion-concept-dot--cat-2,
.qy-evolucion-concept-fill--cat-2 { background: var(--qy-cat-2); }
.qy-evolucion-concept-dot--cat-3,
.qy-evolucion-concept-fill--cat-3 { background: var(--qy-cat-3); }
.qy-evolucion-concept-dot--cat-4,
.qy-evolucion-concept-fill--cat-4 { background: var(--qy-cat-4); }
.qy-evolucion-concept-dot--cat-5,
.qy-evolucion-concept-fill--cat-5 { background: var(--qy-cat-5); }
.qy-evolucion-concept-dot--cat-6,
.qy-evolucion-concept-fill--cat-6 { background: var(--qy-cat-6); }

.qy-evolucion-concept-row__copy {
  display: grid;
  min-width: 0;
}

.qy-evolucion-concept-row__copy strong {
  overflow: hidden;
  color: var(--qy-color-text-primary);
  font: var(--qy-text-body-md);
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qy-evolucion-concept-row__copy small {
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

.qy-evolucion-concept-row__head > b {
  color: var(--qy-color-text-primary);
  font: var(--qy-text-financial);
  font-weight: 700;
}

.qy-evolucion-concept-track {
  height: 8px;
  overflow: hidden;
  border-radius: var(--qy-radius-pill);
  background: var(--qy-color-surface-3);
}

.qy-evolucion-concept-fill {
  display: block;
  height: 100%;
  border-radius: var(--qy-radius-pill);
}

/* ---- settlement: cobrado vs pendiente (charts.module.js) ---------------- */

.qy-evolucion-settlement-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qy-space-3);
  margin-bottom: var(--qy-space-4);
}

.qy-evolucion-settlement-item {
  display: grid;
  gap: var(--qy-space-1);
  padding: var(--qy-space-4);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-lg);
}

.qy-evolucion-settlement-item > span {
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
}

.qy-evolucion-settlement-item > strong {
  overflow: hidden;
  font-size: clamp(1.05rem, 4vw, 1.3rem);
  font-weight: 650;
  text-overflow: ellipsis;
}

.qy-evolucion-settlement-item > b {
  font: var(--qy-text-label-md);
}

.qy-evolucion-settlement-item--collected {
  color: var(--qy-color-collected-text);
  background: linear-gradient(145deg, var(--qy-color-collected-soft), transparent 68%), var(--qy-color-surface-1);
}

.qy-evolucion-settlement-item--collected > strong {
  color: var(--qy-color-text-primary);
}

.qy-evolucion-settlement-item--pending {
  color: var(--qy-color-pending-text);
  background: linear-gradient(145deg, var(--qy-color-pending-soft), transparent 68%), var(--qy-color-surface-1);
}

.qy-evolucion-settlement-item--pending > strong {
  color: var(--qy-color-text-primary);
}

.qy-evolucion-settlement-track {
  display: flex;
  height: 10px;
  overflow: hidden;
  border-radius: var(--qy-radius-pill);
  background: var(--qy-color-surface-3);
}

.qy-evolucion-settlement-fill {
  display: block;
  height: 100%;
}

.qy-evolucion-settlement-fill--collected {
  background: var(--qy-color-collected);
}

.qy-evolucion-settlement-fill--pending {
  background: var(--qy-color-pending);
}

/* ---- objectives: objectives.module.js continues to be the real renderer;
   here it only receives the dark treatment of the migrated screen. Mirrors
   the identical technique already validated for `.qy-dashboard-objectives`
   in S4.3 (qy-dashboard-v1.css) -- same shared markup, same shared class
   `.objective-progress-card`, same override priority. */

.qy-evolucion-objectives .charts-objectives-card {
  margin: 0;
  padding: 0;
  color: var(--qy-color-text-primary);
  background: transparent;
  border: 0;
  box-shadow: none;
}

.qy-evolucion-objectives .section-title-row h3,
.qy-evolucion-objectives .charts-objective-grid strong,
.qy-evolucion-objectives .objective-progress-card strong,
.qy-evolucion-objectives .objective-progress-card b {
  color: var(--qy-color-text-primary) !important;
}

.qy-evolucion-objectives .section-title-row p,
.qy-evolucion-objectives .objective-progress-card :is(span, small, p) {
  color: var(--qy-color-text-secondary) !important;
}

.qy-evolucion-objectives .objective-progress-card {
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-2) !important;
  border-color: var(--qy-color-border-strong) !important;
  box-shadow: none !important;
}

.qy-evolucion-objectives .objective-progress-track {
  background: var(--qy-color-surface-3) !important;
}

.qy-evolucion-objectives .secondary-btn {
  min-height: var(--qy-touch-min);
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-3) !important;
  border-color: var(--qy-color-border-interactive) !important;
}

.qy-evolucion-objectives .empty-mini {
  color: var(--qy-color-text-secondary) !important;
  background: var(--qy-color-surface-2) !important;
  border-color: var(--qy-color-border-strong) !important;
}

.qy-evolucion-objectives .empty-mini strong {
  color: var(--qy-color-text-primary) !important;
}

/* ---- responsive ---------------------------------------------------------- */

@media (max-width: 559px) {
  .qy-evolucion-screen {
    gap: var(--qy-space-5);
    padding-top: var(--qy-space-5);
  }

  .qy-evolucion-screen .qy-page-header {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }

  .qy-evolucion-screen .qy-page-header__meta,
  .qy-evolucion-screen .qy-page-header__actions,
  .qy-evolucion-screen .qy-evolucion-month-field,
  .qy-evolucion-screen .qy-evolucion-month-field .qy-input {
    width: 100%;
    min-width: 0;
  }

  .qy-evolucion-hero {
    padding: var(--qy-space-5);
  }

  .qy-evolucion-hero__stats,
  .qy-evolucion-comparison-grid,
  .qy-evolucion-settlement-grid {
    grid-template-columns: 1fr 1fr;
  }

  .qy-evolucion-screen .qy-dashboard-panel {
    padding: var(--qy-space-4);
  }

  .qy-evolucion-daily-chart {
    grid-auto-columns: 16px;
  }

  .qy-evolucion-daily-bar__track {
    height: 110px;
  }

  .qy-evolucion-screen .qy-quiet-action {
    width: auto;
    padding-inline: var(--qy-space-3);
    font-size: inherit !important;
  }

  .qy-evolucion-screen .qy-projection-card__heading {
    align-items: center;
    flex-wrap: wrap;
  }
}

@media (min-width: 768px) {
  .qy-evolucion-comparison-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (min-width: 1180px) {
  .qy-evolucion-screen {
    grid-template-columns: minmax(0, 1.35fr) minmax(360px, 0.9fr);
    gap: var(--qy-space-8);
    padding-block: var(--qy-space-8);
  }

  .qy-evolucion-screen > .qy-page-header,
  .qy-evolucion-screen > .qy-evolucion-comparison,
  .qy-evolucion-screen > .qy-evolucion-objectives {
    grid-column: 1 / -1;
  }

  .qy-evolucion-screen > .qy-evolucion-hero,
  .qy-evolucion-screen > .qy-evolucion-last-seven,
  .qy-evolucion-screen > .qy-evolucion-concepts {
    grid-column: 1;
  }

  .qy-evolucion-screen > .qy-projection-card,
  .qy-evolucion-screen > .qy-evolucion-daily,
  .qy-evolucion-screen > .qy-evolucion-settlement {
    grid-area: auto;
    grid-column: 2;
  }

  .qy-evolucion-hero {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
  }

  .qy-evolucion-hero__stats {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }
}

/* ==========================================================================
   S4.11C — EVOLUCIÓN: SIMETRÍA, LECTURA Y PROFUNDIDAD

   Las siete jornadas forman una sola banda equilibrada. El gráfico mensual
   reserva una fila exclusiva para cada importe y asume de forma deliberada
   el desplazamiento horizontal cuando hay 30/31 días.
   ========================================================================== */

.qy-evolucion-screen .qy-evolucion-hero {
  border-color: transparent;
  background:
    radial-gradient(circle at 92% 0%, var(--qy-color-surface-brand-wash), transparent 48%),
    linear-gradient(180deg, var(--qy-color-surface-highlight), transparent 72px),
    var(--qy-color-surface-1);
  box-shadow: var(--qy-elevation-raised);
}

.qy-evolucion-screen .qy-evolucion-hero__stats > div,
.qy-evolucion-screen .qy-evolucion-comparison-item,
.qy-evolucion-screen .qy-evolucion-settlement-item {
  border-color: transparent;
  background-color: var(--qy-color-surface-2);
  box-shadow: 0 1px 0 var(--qy-color-surface-highlight) inset;
}

.qy-evolucion-last-seven .qy-trend-bars.is-compact {
  --qy-trend-columns: 7;
  grid-template-columns: repeat(7, minmax(44px, 1fr));
  gap: var(--qy-space-2);
  min-height: 132px;
  padding: var(--qy-space-2) 0 0;
  overflow-x: auto;
  border-bottom: 0;
  background: none;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--qy-color-border-interactive) transparent;
}

.qy-evolucion-last-seven .qy-trend-bars__item {
  grid-template-rows: 18px minmax(56px, 1fr) 18px;
  gap: var(--qy-space-1);
  min-width: 44px;
}

.qy-evolucion-last-seven .qy-trend-bars__item > strong {
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-label-md);
  font-size: 9px;
  font-variant-numeric: var(--qy-font-numeric);
  line-height: 18px;
  text-align: center;
  white-space: nowrap;
}

.qy-evolucion-last-seven .qy-trend-bars__item > i {
  min-height: 6px;
  border-radius: var(--qy-radius-sm);
  background: linear-gradient(180deg, var(--qy-cat-2), var(--qy-color-brand-deep));
  box-shadow: 0 1px 0 var(--qy-color-surface-highlight) inset;
}

.qy-evolucion-last-seven .qy-trend-bars__item > small {
  overflow: visible;
  color: var(--qy-color-text-secondary);
  font-size: 10px;
  text-overflow: clip;
}

.qy-evolucion-daily-scroll {
  width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  padding: var(--qy-space-2) var(--qy-space-3) var(--qy-space-2) 0;
  scroll-padding-inline: var(--qy-space-3);
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--qy-color-border-interactive) transparent;
}

.qy-evolucion-daily-scroll:focus-visible {
  outline: 0;
  box-shadow: var(--qy-focus-ring);
}

.qy-evolucion-screen .qy-evolucion-daily-chart {
  grid-auto-columns: minmax(60px, 1fr);
  gap: var(--qy-space-2);
  min-width: max-content;
  min-height: 184px;
  padding: 0;
  overflow: visible;
}

.qy-evolucion-screen .qy-evolucion-daily-bar {
  grid-template-rows: 20px minmax(110px, 1fr) 18px;
  gap: var(--qy-space-1);
  min-width: 60px;
}

.qy-evolucion-daily-bar > strong {
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-label-md);
  font-size: 9px;
  font-variant-numeric: var(--qy-font-numeric);
  line-height: 20px;
  text-align: center;
  white-space: nowrap;
}

.qy-evolucion-screen .qy-evolucion-daily-bar__track {
  height: 110px;
  border-radius: var(--qy-radius-sm);
  box-shadow: 0 1px 0 var(--qy-color-surface-highlight) inset;
}

.qy-evolucion-scroll-hint {
  margin: calc(var(--qy-space-1) * -1) 0 0;
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-label-md);
  text-align: right;
}

@media (min-width: 768px) {
  .qy-evolucion-last-seven .qy-trend-bars.is-compact {
    overflow-x: visible;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qy-evolucion-screen :is(
    .qy-evolucion-daily-scroll,
    .qy-evolucion-daily-bar__track > span,
    .qy-trend-bars__item > i
  ) {
    scroll-behavior: auto;
    transition: none;
  }
}

/* "Configurar" se partía a mitad de palabra ("Config urar") en móvil.
   Misma corrección ya probada en `.qy-objetivos-progress`: la fila puede
   plegarse y el botón conserva su ancho sin romper el texto. Solo
   presentación; no cambia el destino ni el comportamiento del CTA. */
.qy-evolucion-objectives .section-title-row {
  flex-wrap: wrap;
}

.qy-evolucion-objectives .section-title-row .secondary-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* ==========================================================================
   S4.11D — RITMO DE LÍNEA EN TARJETAS COMPARABLES (puntos 10 y H)

   Las cuatro tarjetas de "mes frente al anterior" comparten rejilla, así que
   se leen como un conjunto y cualquier diferencia de altura entre ellas se ve.
   Sus etiquetas miden 8, 6, 15 y 20 caracteres en versalitas de 12px.

   A 390px la columna deja ~121px de texto. "MEDIA POR DÍA ACTIVO" siempre
   ocupa dos líneas y "COMISIÓN" siempre una; el problema es "IMPORTE VENDIDO",
   que mide casi exactamente el ancho disponible y por tanto rompe o no rompe
   según el redondeo del ancho de ventana. Esa es la asimetría accidental que
   el propietario señaló: la misma tarjeta cambia de alto entre dos anchos casi
   iguales.

   Se reserva la altura de DOS líneas para la etiqueta de las cuatro. No es un
   número mágico: es `2 * el interlineado del propio token tipográfico`. Ya no
   importa dónde rompa cada una -- todas ocupan lo mismo y la rejilla queda
   estable en cualquier ancho, sin tocar el tamaño de letra.
   ========================================================================== */

.qy-evolucion-comparison-item > span {
  min-height: calc(2 * 16px);
  text-wrap: balance;
}

.qy-evolucion-comparison-item {
  align-content: start;
}

/* ==========================================================================
   S4.11D — LA CIFRA DEL HÉROE NO PUEDE RECORTARSE POR ARRIBA

   Defecto PREEXISTENTE (viene de S4.5, no de esta ola), encontrado por la
   sonda de recorte del QA real de S4.11D y corregido aquí porque el criterio
   de aceptación del propietario exige cero texto recortado.

   `.qy-evolucion-hero__copy > strong` combina `overflow: hidden` -- necesario
   para que un importe largo termine en elipsis y no rompa la tarjeta -- con
   `line-height: 1.05`. A 29px de fuente eso da una caja de 30,45px para una
   tinta que mide 33px: la aplicación recortaba ~3px del alto del glifo en
   TODOS los anchos, claro y oscuro.

   No se toca el recorte horizontal, que es intencionado. Solo se le da a la
   caja el alto que su propia tinta necesita.
   ========================================================================== */

/*
   Son TRES sitios con el mismo patrón: cifra grande, tamaño con `clamp()` y
   `overflow: hidden` para que un importe largo termine en elipsis. En los
   tres, la caja que dejaba el interlineado era más baja que la tinta del
   glifo. Se corrigen a la vez para que el defecto no reaparezca en el
   siguiente que se añada.

   El héroe recortaba en todos los anchos; las dos cifras del pie del héroe,
   solo a partir de 768px, donde `clamp()` alcanza su techo. Ninguna de las
   tres cambia de tamaño: cambia el alto de su caja.
*/
.qy-evolucion-hero__copy > strong,
.qy-evolucion-hero__stats strong,
.qy-evolucion-comparison-item > strong {
  line-height: 1.15;
}

/* ==========================================================================
   S4.11E — SISTEMA DE GRÁFICOS PREMIUM

   Tres piezas nuevas y una regla que las gobierna: TODO el color sale de
   tokens. El SVG que dibuja `ui/qyCharts.js` no contiene ni un literal de
   color -- `stop-color`, `stroke` y `fill` son propiedades CSS también dentro
   de SVG -- así que el cambio de tema lo resuelve la capa L4 sin que exista
   una segunda versión de ningún gráfico.

   La geometría viaja en ATRIBUTOS DE PRESENTACIÓN (`d`, `x`, `width`,
   `transform`), no en atributos `style`: la CSP prohíbe `style-src-attr` y
   `test-zero-inline-styles-v1.mjs` lo vigila. Por eso estos gráficos no
   necesitan el mecanismo `qmy-fill-N` que usa el resto de la aplicación.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. LIENZO COMÚN

   `width: 100%` con `viewBox` fijo: el gráfico es una PROPORCIÓN, no una
   medida. A 320 y a 1440 se dibuja lo mismo, escalado. Es lo que evita tener
   que recalcular posiciones por punto de ruptura y lo que garantiza que nada
   se recorte: no hay nada fuera del `viewBox`.
   -------------------------------------------------------------------------- */
.qy-evolucion-screen .qy-chart {
  display: block;
  width: 100%;
  height: auto;
  touch-action: manipulation;
}

.qy-evolucion-screen .qy-chart__grid {
  stroke: var(--qy-color-border);
  stroke-width: 1;
}

.qy-evolucion-screen .qy-chart__grid--base {
  stroke: var(--qy-color-border-strong);
}

.qy-evolucion-screen .qy-chart__stop--top {
  stop-color: var(--qy-chart-area-top);
}

.qy-evolucion-screen .qy-chart__stop--mid {
  stop-color: var(--qy-chart-area-mid);
}

.qy-evolucion-screen .qy-chart__stop--bottom {
  stop-color: var(--qy-chart-area-bottom);
}

.qy-evolucion-screen .qy-chart__line {
  fill: none;
  stroke: var(--qy-color-brand);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/*
   La serie anterior es SUBORDINADA por diseño: trazo fino, discontinuo y en
   tinta terciaria, sin relleno de área. Si compitiera visualmente con la
   actual, la comparación dejaría de tener un sujeto.
*/
.qy-evolucion-screen .qy-chart__comparison-line {
  fill: none;
  stroke: var(--qy-color-text-tertiary);
  stroke-width: 1.5;
  stroke-dasharray: 4 4;
  stroke-linecap: round;
}

.qy-evolucion-screen .qy-chart__axis-label {
  fill: var(--qy-color-text-tertiary);
  font-size: 10px;
  font-weight: 500;
}

.qy-evolucion-screen .qy-chart__bar {
  fill: var(--qy-color-brand);
}

.qy-evolucion-screen .qy-chart__bar-value {
  fill: var(--qy-color-text-secondary);
  font-size: 10px;
  font-weight: 600;
}

/* --------------------------------------------------------------------------
   2. PUNTOS, BANDAS Y ETIQUETA EMERGENTE

   La banda invisible de columna completa es lo que se toca y lo que recibe el
   foco. Un círculo de radio 3 en unidades de `viewBox` mide ~2,6 px reales a
   390: sería un objetivo táctil imposible. La banda cubre toda la altura y
   reparte el ancho entre los puntos, así que en 30D cada objetivo mide ~11 px
   de ancho por 160 de alto, que sí se acierta con el dedo.
   -------------------------------------------------------------------------- */
.qy-evolucion-screen .qy-chart__band {
  fill: transparent;
  cursor: pointer;
}

/*
   La marca NO recibe el puntero.

   Encontrado en el QA real: el círculo se dibuja encima de su banda y le
   robaba el objetivo del toque. El evento seguía llegando por burbujeo, así
   que la etiqueta emergente aparecía igual, pero el elemento que respondía al
   dedo dejaba de ser el que lleva el nombre accesible y el foco. La banda es
   el control; el círculo es su dibujo.
*/
.qy-evolucion-screen .qy-chart__dot {
  fill: var(--qy-color-brand);
  stroke: var(--qy-color-surface-1);
  stroke-width: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-evolucion-screen .qy-chart__point.is-active .qy-chart__dot {
  opacity: 1;
}

.qy-evolucion-screen .qy-chart__band:focus-visible {
  outline: 2px solid var(--qy-color-focus);
  outline-offset: -2px;
}

.qy-evolucion-screen .qy-chart__tip {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-evolucion-screen .qy-chart__tip.is-visible {
  opacity: 1;
}

.qy-evolucion-screen .qy-chart__tip-box {
  fill: var(--qy-color-surface-3);
  stroke: var(--qy-color-border-strong);
  stroke-width: 1;
}

.qy-evolucion-screen .qy-chart__tip-text {
  fill: var(--qy-color-text-secondary);
  font-size: 9.5px;
}

.qy-evolucion-screen .qy-chart__tip-text.is-title {
  fill: var(--qy-color-text-primary);
  font-size: 10.5px;
  font-weight: 700;
}

/* --------------------------------------------------------------------------
   3. CABECERA DEL GRÁFICO PRINCIPAL
   -------------------------------------------------------------------------- */
.qy-evolucion-screen .qy-evolucion-primary {
  display: grid;
  gap: var(--qy-space-4);
}

.qy-evolucion-primary__summary {
  display: grid;
  gap: var(--qy-space-2);
}

.qy-evolucion-primary__total {
  display: grid;
  gap: var(--qy-space-1);
}

.qy-evolucion-primary__total > span {
  color: var(--qy-color-text-secondary);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qy-evolucion-primary__total > strong {
  color: var(--qy-color-text-primary);
  font-size: clamp(26px, 7vw, 32px);
  font-weight: 800;
  /* Igual que las otras cifras grandes de la pantalla: la caja necesita el
     alto de su propia tinta o el glifo se recorta por arriba (S4.11D). */
  line-height: 1.15;
}

.qy-evolucion-primary__meta {
  color: var(--qy-color-text-tertiary);
  font-size: 12px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   4. SELECTOR DE PERIODO

   Cinco opciones sobre un carril. A 320 el carril mide ~288 px, así que cada
   opción dispone de ~57: suficiente para "30D" con área táctil completa. Se
   reparte con `1fr` y no con `flex-wrap` para que NUNCA salte de línea: cinco
   periodos en dos filas se leerían como dos grupos distintos.
   -------------------------------------------------------------------------- */
.qy-period-selector {
  display: grid;
  /* `minmax(0, ...)` por la misma razón que la rejilla del mapa: el mínimo
     global de `button` no debe fijar el ancho de la pista. */
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--qy-space-1);
  padding: var(--qy-space-1);
  background: var(--qy-color-surface-2);
  border: 1px solid var(--qy-color-border);
  border-radius: var(--qy-radius-pill);
}

.qy-period-selector__option {
  min-height: 36px;
  padding: 0 var(--qy-space-2);
  border: 0;
  border-radius: var(--qy-radius-pill);
  background: transparent;
  color: var(--qy-color-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition:
    background var(--qy-motion-fast) var(--qy-motion-ease),
    color var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-period-selector__option.is-active {
  background: var(--qy-color-brand);
  color: var(--qy-color-text-on-brand);
}

.qy-period-selector__option:focus-visible {
  outline: 2px solid var(--qy-color-focus);
  outline-offset: 2px;
}

/* --------------------------------------------------------------------------
   5. COMPARACIÓN CON EL PERIODO ANTERIOR
   -------------------------------------------------------------------------- */
.qy-evolucion-comparison-toggle {
  display: grid;
  gap: var(--qy-space-2);
}

.qy-comparison-switch {
  display: flex;
  align-items: center;
  gap: var(--qy-space-2);
  min-height: var(--qy-touch-min);
  padding: 0;
  border: 0;
  background: none;
  color: var(--qy-color-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
}

.qy-comparison-switch[disabled] {
  color: var(--qy-color-disabled-text);
  cursor: default;
}

.qy-comparison-switch__track {
  flex: none;
  display: inline-flex;
  align-items: center;
  width: 38px;
  height: 22px;
  padding: 2px;
  border: 1px solid var(--qy-color-border-interactive);
  border-radius: var(--qy-radius-pill);
  background: var(--qy-color-surface-3);
  transition: background var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-comparison-switch__track > i {
  display: block;
  width: 16px;
  height: 16px;
  border-radius: var(--qy-radius-pill);
  background: var(--qy-color-text-tertiary);
  transition: transform var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-comparison-switch.is-active .qy-comparison-switch__track {
  background: var(--qy-color-brand);
  border-color: var(--qy-color-brand);
}

.qy-comparison-switch.is-active .qy-comparison-switch__track > i {
  background: var(--qy-color-text-on-brand);
  transform: translateX(16px);
}

.qy-comparison-switch:focus-visible {
  outline: 2px solid var(--qy-color-focus);
  outline-offset: 3px;
  border-radius: var(--qy-radius-sm);
}

.qy-evolucion-comparison-toggle__detail {
  color: var(--qy-color-text-tertiary);
  font-size: 12px;
  margin: 0;
}

/* --------------------------------------------------------------------------
   6. ACTIVIDAD DE COMISIONES (mapa de intensidad)

   Rejilla de SIETE columnas iguales. A 320 el ancho útil deja celdas de
   ~34 px, y `aspect-ratio: 1` las mantiene cuadradas sin altura fija: no hay
   ninguna medida mágica que se rompa a un ancho intermedio.
   -------------------------------------------------------------------------- */
.qy-heatmap {
  display: grid;
  gap: var(--qy-space-3);
}

/*
   `minmax(0, 1fr)`, NO `1fr`.

   Defecto encontrado en el QA real a 320 px: la rejilla resolvía a siete
   columnas de 44 px -- 332 px en total -- y se salía del panel, arrastrando
   con ella la cabecera de la sección.

   La causa no está aquí sino en `mobile-polish.css`, que da a TODO `button` un
   `min-height` de objetivo táctil. `1fr` es en realidad `minmax(auto, 1fr)`, y
   ese mínimo automático es la aportación de contenido mínimo del elemento;
   con `aspect-ratio: 1` la altura mínima se convierte también en anchura
   mínima, y la pista deja de poder encogerse. `minmax(0, 1fr)` corta esa
   propagación y devuelve el reparto a lo que el ancho disponible permita.

   CONTRAPARTIDA ACEPTADA: a 320 px la celda mide ~34 px, por debajo del
   objetivo táctil de 44. Siete columnas de 44 px no caben en 320 y no hay
   composición que lo arregle. Se prefiere una rejilla completa y legible del
   mes a una que se desborde o exija desplazamiento horizontal: cada día sigue
   siendo alcanzable con el teclado, lleva nombre accesible completo y su
   detalle se anuncia en la región de estado. A 360 y por encima la celda ya
   supera los 38 px.
*/
.qy-heatmap__weekdays,
.qy-heatmap__grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: var(--qy-space-1);
}

.qy-heatmap__weekdays > span {
  color: var(--qy-color-text-tertiary);
  font-size: 10px;
  font-weight: 700;
  text-align: center;
  letter-spacing: 0.04em;
}

.qy-heatmap__day {
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  padding: 0;
  /* Neutraliza el mínimo global de `button`: aquí la altura la decide
     `aspect-ratio`, no una medida heredada de los controles de formulario. */
  min-height: 0;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: var(--qy-radius-sm);
  background: var(--qy-color-surface-3);
  color: var(--qy-color-text-tertiary);
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
  transition:
    transform var(--qy-motion-fast) var(--qy-motion-ease),
    border-color var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-heatmap__blank {
  aspect-ratio: 1;
}

/*
   La regla ya estaba escrita —«cuando el relleno deja de dejar leer la tinta
   terciaria, el número sube de tinta»— pero el umbral estaba dos niveles tarde.
   Medido en el navegador, sobre el fondo REAL compuesto y con el alfa resuelto
   contra la cadena de ancestros:

     nivel 1  terciaria  4,17 oscuro / 4,86 claro   -> falla en oscuro
     nivel 2  terciaria  2,94 oscuro / 3,82 claro   -> falla en ambos

   Para 11 px el mínimo es 4,5:1. En el nivel 1 la tinta secundaria basta
   (5,03 / 5,67) y conserva el gradiente de intensidad, que es el que hace
   legible el mapa de un vistazo. En el nivel 2 la secundaria NO basta
   (3,55 / 4,46): solo la primaria lo resuelve (9,10 / 11,06).

   El número no es decoración: es el dato del día. Que el fondo codifique
   intensidad no exime de poder leerlo.
*/
.qy-heatmap__day.is-level-1 {
  background: var(--qy-chart-intensity-1);
  color: var(--qy-color-text-secondary);
}

.qy-heatmap__day.is-level-2 {
  background: var(--qy-chart-intensity-2);
  color: var(--qy-color-text-primary);
}

.qy-heatmap__day.is-level-3 {
  background: var(--qy-chart-intensity-3);
  color: var(--qy-color-text-primary);
}

.qy-heatmap__day.is-level-4 {
  background: var(--qy-chart-intensity-4);
  color: var(--qy-color-text-on-brand);
}

.qy-heatmap__day.is-selected {
  border-color: var(--qy-color-brand);
  transform: scale(1.06);
}

.qy-heatmap__day:focus-visible {
  outline: 2px solid var(--qy-color-focus);
  outline-offset: 2px;
}

.qy-heatmap__legend {
  display: flex;
  align-items: center;
  gap: var(--qy-space-1);
  color: var(--qy-color-text-tertiary);
  font-size: 10px;
}

.qy-heatmap__key {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--qy-color-surface-3);
}

.qy-heatmap__key.is-level-1 { background: var(--qy-chart-intensity-1); }
.qy-heatmap__key.is-level-2 { background: var(--qy-chart-intensity-2); }
.qy-heatmap__key.is-level-3 { background: var(--qy-chart-intensity-3); }
.qy-heatmap__key.is-level-4 { background: var(--qy-chart-intensity-4); }

/*
   El detalle del día es un RENGLÓN FIJO, no una etiqueta flotante.

   Una emergente anclada a una celda de 34 px junto al borde derecho de una
   pantalla de 320 se sale o hay que reposicionarla leyendo medidas del
   viewport. Un renglón bajo la cuadrícula no puede desbordar por
   construcción, se anuncia solo al lector de pantalla por ser `role="status"`
   y funciona igual con el dedo que con el teclado.
*/
.qy-heatmap__detail {
  min-height: 34px;
  margin: 0;
  padding: var(--qy-space-2) var(--qy-space-3);
  border-radius: var(--qy-radius-md);
  background: var(--qy-color-surface-2);
  color: var(--qy-color-text-secondary);
  font-size: 12px;
}

/* --------------------------------------------------------------------------
   7. MOVIMIENTO

   Solo aparición. El área y las barras se dibujan una vez al entrar y al
   cambiar de periodo; nada se mueve de forma continua.
   -------------------------------------------------------------------------- */
@keyframes qy-chart-appear-s4-11e {
  from {
    opacity: 0;
    transform: translateY(6px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

.qy-evolucion-screen .qy-chart {
  animation: qy-chart-appear-s4-11e var(--qy-motion-base) var(--qy-motion-ease) both;
}

@media (prefers-reduced-motion: reduce) {
  .qy-evolucion-screen .qy-chart,
  .qy-evolucion-screen .qy-chart__dot,
  .qy-evolucion-screen .qy-chart__tip,
  .qy-period-selector__option,
  .qy-comparison-switch__track,
  .qy-comparison-switch__track > i,
  .qy-heatmap__day {
    animation: none;
    transition: none;
  }

  .qy-heatmap__day.is-selected {
    transform: none;
  }
}