/* ==========================================================================
   QUOMYA — RESUMEN V1
   Wave S4.3. Scoped entirely to `.qy-dashboard-screen`.
   Domain calculations remain in analytics, estimation and saleEngine.
   ========================================================================== */

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

.qy-dashboard-screen {
  gap: var(--qy-space-6);
  padding-block: var(--qy-space-6) var(--qy-space-4);
  color: var(--qy-color-text-primary);
  overflow: visible;
}

.qy-dashboard-screen button {
  font: inherit;
}

.qy-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--qy-space-4);
}

.qy-page-header__copy {
  display: grid;
  gap: var(--qy-space-1);
  min-width: 0;
}

.qy-page-header__eyebrow,
.qy-section-header span,
.qy-dashboard-total__copy > span,
.qy-status-card__heading > span,
.qy-projection-card__heading span {
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-label-md);
  letter-spacing: var(--qy-tracking-label);
  text-transform: uppercase;
}

.qy-page-header h2 {
  margin: 0;
  color: var(--qy-color-text-primary);
  font: var(--qy-text-headline-xl);
  letter-spacing: var(--qy-tracking-tight);
}

.qy-page-header__copy p {
  max-width: 52ch;
  margin: 0;
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

.qy-page-header__meta,
.qy-page-header__actions {
  display: flex;
  align-items: center;
  gap: var(--qy-space-2);
}

/*
 * `.sync-chip` trae fondos claros con !important desde el sistema legacy
 * (session-chrome-v15-21-1.css) para las cuatro superficies sin migrar.
 * Aquí, dentro del ámbito oscuro ya migrado, se sobreescribe con la misma
 * prioridad y los tokens semánticos de S4.1 para evitar la isla clara.
 */
.qy-page-header__meta .sync-chip {
  min-height: var(--qy-touch-min);
  color: var(--qy-color-text-secondary) !important;
  background: var(--qy-color-surface-2) !important;
  border-color: var(--qy-color-border-strong) !important;
}

.qy-page-header__meta .sync-chip i {
  background: var(--qy-color-text-tertiary) !important;
  box-shadow: none !important;
}

.qy-page-header__meta .sync-chip.is-synced {
  color: var(--qy-color-collected-text) !important;
  background: var(--qy-color-collected-soft) !important;
  border-color: var(--qy-color-collected) !important;
}

.qy-page-header__meta .sync-chip.is-synced i {
  background: var(--qy-color-collected) !important;
}

.qy-page-header__meta .sync-chip.is-pending {
  color: var(--qy-color-pending-text) !important;
  background: var(--qy-color-pending-soft) !important;
  border-color: var(--qy-color-pending) !important;
}

.qy-page-header__meta .sync-chip.is-pending i {
  background: var(--qy-color-pending) !important;
}

.qy-page-header__meta .sync-chip.is-offline,
.qy-page-header__meta .sync-chip.is-unknown {
  color: var(--qy-color-text-secondary) !important;
  background: var(--qy-color-surface-3) !important;
  border-color: var(--qy-color-border-strong) !important;
}

.qy-page-header__meta .sync-chip.is-offline i,
.qy-page-header__meta .sync-chip.is-unknown i {
  background: var(--qy-color-text-tertiary) !important;
}

.qy-quiet-action,
.qy-text-action,
.qy-primary-action,
.qy-secondary-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--qy-touch-min);
  border-radius: var(--qy-radius-md);
  cursor: pointer;
  transition:
    color var(--qy-motion-fast) var(--qy-motion-ease),
    background var(--qy-motion-fast) var(--qy-motion-ease),
    border-color var(--qy-motion-fast) var(--qy-motion-ease),
    transform var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-quiet-action {
  gap: var(--qy-space-2);
  min-height: 50px;
  padding: 0 var(--qy-space-4);
  color: var(--qy-color-text-secondary);
  background: var(--qy-color-surface-2);
  border: 1px solid var(--qy-color-border-strong);
  font: var(--qy-text-label-md);
}

.qy-quiet-action > span {
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4M5 18v2h14v-2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 3v12m0 0 4-4m-4 4-4-4M5 18v2h14v-2' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qy-text-action {
  padding: 0 var(--qy-space-2);
  color: var(--qy-color-brand-text);
  background: transparent;
  border: 0;
  font: var(--qy-text-label-md);
}

.qy-primary-action,
.qy-secondary-action {
  padding: var(--qy-space-3) var(--qy-space-4);
  font: var(--qy-text-label-md);
}

.qy-primary-action {
  color: var(--qy-color-text-on-brand);
  background: var(--qy-color-brand);
  border: 1px solid var(--qy-color-brand);
}

.qy-secondary-action {
  color: var(--qy-color-text-primary);
  background: var(--qy-color-surface-3);
  border: 1px solid var(--qy-color-border-interactive);
}

.qy-quiet-action:hover,
.qy-secondary-action:hover {
  color: var(--qy-color-text-primary);
  background: var(--qy-color-active);
}

.qy-text-action:hover {
  color: var(--qy-color-text-primary);
}

.qy-primary-action:hover {
  background: var(--qy-color-brand-hover);
}

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

/* =========================================================================
   S4.11G — UN SOLO RITMO VERTICAL PARA EL RESUMEN

   El propietario vio "Proyección fin de mes" pegada a "Actividad del mes".
   La causa era literal: `.qy-dashboard-mode-body` -- el contenedor que envuelve
   las dos mitades de la vista financiera -- NO tenía ninguna regla. Sus dos
   hijos, el bloque de cabecera y la rejilla de contenido, caían uno detrás de
   otro como bloques sin margen y se tocaban.

   Además cada contenedor traía su propia separación (3 arriba, 4 abajo), así
   que aunque no se tocaran el salto entre tarjetas hermanas cambiaba a mitad
   de pantalla.

   Se declara UNA separación semántica y la usan todas las pilas verticales de
   la pantalla. No se reparten márgenes sueltos por tarjeta: el ritmo lo pone
   el contenedor, que es quien sabe qué es hermano de qué.
   ========================================================================= */

.qy-dashboard-screen {
  --qy-dashboard-stack: var(--qy-space-4);
}

.qy-dashboard-mode-body {
  display: grid;
  gap: var(--qy-dashboard-stack);
  align-content: start;
  min-width: 0;
}

.qy-dashboard-overview {
  display: grid;
  gap: var(--qy-dashboard-stack);
}

.qy-dashboard-total,
.qy-status-card,
.qy-projection-card,
.qy-dashboard-panel,
.qy-dashboard-objectives > .dashboard-objectives-disclosure {
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-xl);
  background: var(--qy-color-surface-1);
  box-shadow: var(--qy-elevation-card);
}

.qy-dashboard-total {
  position: relative;
  display: grid;
  gap: var(--qy-space-6);
  min-height: 280px;
  padding: var(--qy-space-6);
  overflow: hidden;
  background:
    radial-gradient(circle at 95% 0%, var(--qy-color-brand-soft), transparent 46%),
    var(--qy-color-surface-1);
}

.qy-dashboard-total::after {
  position: absolute;
  top: var(--qy-space-5);
  right: var(--qy-space-5);
  width: 42px;
  height: 42px;
  content: "";
  background: var(--qy-color-brand);
  opacity: 0.9;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='6' width='16' height='13' rx='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M7 6V4h10v2m-3 6h6v5h-6a2.5 2.5 0 0 1 0-5Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='4' y='6' width='16' height='13' rx='2' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M7 6V4h10v2m-3 6h6v5h-6a2.5 2.5 0 0 1 0-5Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qy-dashboard-total__copy {
  display: grid;
  align-content: start;
  gap: var(--qy-space-2);
  padding-right: var(--qy-space-12);
}

.qy-dashboard-total__copy > strong {
  margin-top: var(--qy-space-1);
  color: var(--qy-color-text-primary);
  font-size: clamp(2.35rem, 10vw, 4rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.055em;
}

.qy-dashboard-total__copy p {
  margin: 0;
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

.qy-dashboard-total__copy p b {
  margin-right: var(--qy-space-1);
  font-weight: 700;
}

.qy-dashboard-total__copy p .is-positive {
  color: var(--qy-color-collected-text);
}

.qy-dashboard-total__copy p .is-negative {
  color: var(--qy-color-cancelled-text);
}

.qy-money {
  font-variant-numeric: var(--qy-font-numeric);
  white-space: nowrap;
}

.qy-trend-bars {
  display: grid;
  grid-template-columns: repeat(var(--qy-trend-columns, 3), minmax(0, 1fr));
  align-items: end;
  gap: var(--qy-space-3);
  min-height: 180px;
  padding-top: var(--qy-space-4);
  border-bottom: 1px solid var(--qy-color-border-strong);
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 43px,
    var(--qy-color-border) 44px
  );
}

.qy-trend-bars.is-compact {
  --qy-trend-columns: 7;
  min-height: 92px;
  padding-top: 0;
  background: none;
}

.qy-trend-bars__item {
  display: grid;
  grid-template-rows: minmax(44px, 1fr) auto;
  align-items: end;
  gap: var(--qy-space-2);
  height: 100%;
  min-width: 0;
}

.qy-trend-bars__item i {
  display: block;
  width: 100%;
  min-height: 5px;
  height: var(--qmy-fill);
  border-radius: var(--qy-radius-sm) var(--qy-radius-sm) 0 0;
  background: var(--qy-cat-6);
  opacity: 0.72;
}

.qy-trend-bars__item:last-child i {
  background: var(--qy-color-brand);
  opacity: 1;
}

.qy-trend-bars__item small {
  overflow: hidden;
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-label-md);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qy-trend-bars.is-compact .qy-trend-bars__item small {
  font-size: 10px;
}

.qy-trend-empty {
  display: grid;
  place-items: center;
  min-height: 96px;
  padding: var(--qy-space-4);
  color: var(--qy-color-text-tertiary);
  border: 1px dashed var(--qy-color-border-strong);
  border-radius: var(--qy-radius-md);
  font: var(--qy-text-body-md);
  text-align: center;
}

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

.qy-status-card {
  display: grid;
  align-content: start;
  gap: var(--qy-space-2);
  min-width: 0;
  padding: var(--qy-space-5);
}

.qy-status-card__heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--qy-space-3);
}

.qy-status-card__heading i {
  width: 28px;
  height: 28px;
  border-radius: var(--qy-radius-pill);
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m8.5 12 2.3 2.3 4.8-5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='8.5' fill='none' stroke='black' stroke-width='1.8'/%3E%3Cpath d='m8.5 12 2.3 2.3 4.8-5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qy-status-card > strong {
  overflow: hidden;
  font-size: clamp(1.35rem, 5vw, 2rem);
  font-weight: 650;
  line-height: 1.1;
  letter-spacing: -0.035em;
  text-overflow: ellipsis;
}

.qy-status-card > p {
  min-height: 40px;
  margin: 0;
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

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

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

.qy-status-card__track {
  height: 4px;
  margin-top: auto;
  overflow: hidden;
  border-radius: var(--qy-radius-pill);
  background: var(--qy-color-border-strong);
}

.qy-status-card__track > span {
  display: block;
  width: var(--qmy-fill);
  height: 100%;
  background: currentColor;
}

.qy-projection-card {
  display: grid;
  gap: var(--qy-space-4);
  padding: var(--qy-space-5);
  background: linear-gradient(135deg, var(--qy-color-brand-soft), transparent 76%), var(--qy-color-surface-2);
}

.qy-projection-card__heading {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--qy-space-4);
}

.qy-projection-card__heading > div {
  display: grid;
  gap: var(--qy-space-2);
}

.qy-projection-card__heading strong {
  color: var(--qy-color-brand-text);
  font-size: clamp(1.65rem, 7vw, 2.4rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.04em;
}

.qy-projection-card__heading i {
  width: 32px;
  height: 32px;
  background: var(--qy-color-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17 9 12l3 3 7-8m0 0h-5m5 0v5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 17 9 12l3 3 7-8m0 0h-5m5 0v5' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

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

.qy-projection-card__breakdown > div {
  display: grid;
  gap: var(--qy-space-1);
  min-width: 0;
  padding: var(--qy-space-3);
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-md);
  background: var(--qy-color-surface-1);
}

.qy-projection-card dt {
  color: var(--qy-color-text-tertiary);
  font: var(--qy-text-label-md);
}

.qy-projection-card dd {
  margin: 0;
  overflow: hidden;
  color: var(--qy-color-text-primary);
  font: var(--qy-text-financial);
  font-weight: 700;
  text-overflow: ellipsis;
}

.qy-projection-card__empty {
  margin: 0;
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

.qy-dashboard-content-grid,
.qy-dashboard-primary-column,
.qy-dashboard-secondary-column {
  display: grid;
  gap: var(--qy-dashboard-stack);
  min-width: 0;
  align-content: start;
}

.qy-dashboard-panel {
  display: grid;
  gap: var(--qy-space-4);
  min-width: 0;
  padding: var(--qy-space-5);
  overflow: hidden;
}

.qy-section-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--qy-space-3);
}

.qy-section-header > div {
  display: grid;
  gap: var(--qy-space-1);
  min-width: 0;
}

.qy-section-header h3 {
  margin: 0;
  color: var(--qy-color-text-primary);
  font: var(--qy-text-headline-md);
  letter-spacing: var(--qy-tracking-tight);
}

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

.qy-dashboard-screen .personal-concept-card {
  position: relative;
  display: grid;
  place-items: center;
  align-content: center;
  gap: var(--qy-space-2);
  min-height: 132px;
  padding: var(--qy-space-5) var(--qy-space-3) !important;
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-2) !important;
  border: 1px solid var(--qy-color-border-strong) !important;
  border-radius: var(--qy-radius-lg) !important;
  box-shadow: none !important;
  text-align: center;
}

.qy-dashboard-screen .personal-concept-card::before {
  display: block !important;
  width: 38px !important;
  height: 38px !important;
  margin: 0 0 var(--qy-space-1) !important;
  content: "" !important;
  background: var(--qy-color-brand) !important;
  border-radius: 0 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 5v14M5 12h14' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qy-dashboard-screen .personal-concept-card strong {
  overflow: hidden;
  max-width: 100%;
  color: var(--qy-color-text-primary) !important;
  font: var(--qy-text-body-lg);
  font-weight: 650;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qy-dashboard-screen .personal-concept-card > span {
  color: var(--qy-color-brand-text) !important;
  font: var(--qy-text-label-md);
}

.qy-dashboard-screen .personal-concept-card:hover {
  border-color: var(--qy-color-brand) !important;
  background: var(--qy-color-active) !important;
  transform: translateY(-2px);
}

.qy-recent-list {
  display: grid;
  border: 1px solid var(--qy-color-border-strong);
  border-radius: var(--qy-radius-lg);
  overflow: hidden;
}

.qy-record-summary {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--qy-space-3);
  width: 100%;
  min-height: 78px;
  padding: var(--qy-space-3) var(--qy-space-4);
  color: var(--qy-color-text-primary);
  background: var(--qy-color-surface-2);
  border: 0;
  border-bottom: 1px solid var(--qy-color-border);
  text-align: left;
  cursor: pointer;
}

.qy-record-summary:last-child {
  border-bottom: 0;
}

.qy-record-summary:hover {
  background: var(--qy-color-active);
}

.qy-record-summary > i {
  width: 42px;
  height: 42px;
  border-radius: var(--qy-radius-pill);
  background: var(--qy-color-brand-soft);
}

.qy-record-summary > i::after {
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  background: var(--qy-color-brand);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10a2 2 0 0 1 2 2v14l-3-2-4 2-4-2-3 2V6a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M9 8h6m-6 4h6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4h10a2 2 0 0 1 2 2v14l-3-2-4 2-4-2-3 2V6a2 2 0 0 1 2-2Z' fill='none' stroke='black' stroke-width='1.7'/%3E%3Cpath d='M9 8h6m-6 4h6' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E") center / 24px no-repeat;
}

.qy-record-summary__copy,
.qy-record-summary__value {
  display: grid;
  gap: var(--qy-space-1);
  min-width: 0;
}

.qy-record-summary__copy strong,
.qy-record-summary__copy small {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qy-record-summary__copy strong {
  color: var(--qy-color-text-primary);
  font: var(--qy-text-body-md);
  font-weight: 700;
}

.qy-record-summary__copy small {
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

.qy-record-summary__value {
  justify-items: end;
  text-align: right;
}

.qy-record-summary__value b {
  color: var(--qy-color-text-primary);
  font: var(--qy-text-financial);
  font-weight: 700;
}

.qy-record-summary__value small {
  padding: 3px 7px;
  border: 1px solid currentColor;
  border-radius: var(--qy-radius-pill);
  font: var(--qy-text-label-md);
  white-space: nowrap;
}

/*
 * `.is-paid`/`.is-pending` reciben color de fondo y texto con !important
 * desde varias hojas legacy (compact-visual-v15-14-2.css,
 * quomya-visual-system.css) pensadas para superficies claras. Sin la misma
 * prioridad aquí, esas reglas ganaban y el texto quedaba en 2,3-3,0:1 sobre
 * el fondo oscuro migrado, por debajo del mínimo AA de 4.5:1.
 */
.qy-record-summary__value .is-paid {
  color: var(--qy-color-collected-text) !important;
  background: var(--qy-color-collected-soft) !important;
}

.qy-record-summary__value .is-partial,
.qy-record-summary__value .is-pending {
  color: var(--qy-color-pending-text) !important;
  background: var(--qy-color-pending-soft) !important;
}

.qy-empty-state {
  display: grid;
  justify-items: center;
  gap: var(--qy-space-2);
  min-height: 150px;
  padding: var(--qy-space-5);
  color: var(--qy-color-text-secondary);
  border: 1px dashed var(--qy-color-border-interactive);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-2);
  text-align: center;
}

.qy-empty-state > i {
  width: 38px;
  height: 38px;
  background: var(--qy-color-text-tertiary);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6h14v13H5zM8 3v6m8-6v6M5 10h14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 6h14v13H5zM8 3v6m8-6v6M5 10h14' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

.qy-empty-state strong {
  color: var(--qy-color-text-primary);
  font: var(--qy-text-body-lg);
  font-weight: 700;
}

.qy-empty-state > span {
  max-width: 42ch;
  font: var(--qy-text-body-md);
}

.qy-count-badge {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 4px 10px;
  color: var(--qy-color-closure-text);
  border: 1px solid var(--qy-color-closure);
  border-radius: var(--qy-radius-pill);
  background: var(--qy-color-closure-soft);
  font: var(--qy-text-label-md);
  white-space: nowrap;
}

.qy-dashboard-closures__intro {
  margin: calc(var(--qy-space-3) * -1) 0 0;
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-body-md);
}

/* Cierres: sobreescribe únicamente la presentación legacy que esta pantalla
   migra. Las acciones y estados siguen siendo los del módulo existente. */
.qy-dashboard-screen .closures-ux-toolbar {
  border-color: var(--qy-color-border-strong);
}

.qy-dashboard-screen .closures-ux-summary small,
.qy-dashboard-screen .closures-ux-concept,
.qy-dashboard-screen .closures-ux-status-grid small,
.qy-dashboard-screen .closures-ux-remaining small {
  color: var(--qy-color-text-secondary) !important;
}

.qy-dashboard-screen .closures-ux-summary strong,
.qy-dashboard-screen .closures-ux-reference-row > strong,
.qy-dashboard-screen .closures-ux-status-grid strong,
.qy-dashboard-screen .closures-ux-remaining strong,
.qy-dashboard-screen .closures-ux-selection-bar strong {
  color: var(--qy-color-text-primary) !important;
}

.qy-dashboard-screen .closures-ux-summary strong.has-pending,
.qy-dashboard-screen .closures-ux-remaining strong {
  color: var(--qy-color-pending-text) !important;
}

.qy-dashboard-screen .personal-closure-item.closures-ux-item,
.qy-dashboard-screen .personal-closure-item.closures-ux-item.is-overdue,
.qy-dashboard-screen .personal-closure-item.closures-ux-item.is-today {
  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;
}

.qy-dashboard-screen .personal-closure-item.closures-ux-item.is-overdue {
  border-left-color: var(--qy-color-cancelled) !important;
}

.qy-dashboard-screen .personal-closure-item.closures-ux-item.is-today {
  border-left-color: var(--qy-color-closure) !important;
}

/*
 * `.is-overdue` recibe rojo con !important desde quomya-visual-system.css
 * (pensado para las superficies claras sin migrar). Sin la misma prioridad,
 * "Cierre vencido" quedaba en rojo a 3,72:1 sobre el fondo oscuro, por debajo
 * del mínimo AA. Ambos estados usan el semántico de cierre (cobalto), no de
 * error: un cierre vencido sigue siendo una fecha, no un fallo.
 */
.qy-dashboard-screen .closures-ux-deadline.is-overdue,
.qy-dashboard-screen .closures-ux-deadline.is-today {
  color: var(--qy-color-closure-text) !important;
  background: var(--qy-color-closure-soft) !important;
}

.qy-dashboard-screen .closures-ux-payment.is-paid {
  color: var(--qy-color-collected-text) !important;
}

.qy-dashboard-screen .closures-ux-payment.is-partial,
.qy-dashboard-screen .closures-ux-payment.is-pending {
  color: var(--qy-color-pending-text) !important;
}

.qy-dashboard-screen .closure-close-btn {
  min-height: var(--qy-touch-min);
  color: var(--qy-color-closure-text);
  background: var(--qy-color-closure-soft);
  border-color: var(--qy-color-closure);
}

.qy-dashboard-screen .closures-ux-checkbox span {
  border-color: var(--qy-color-border-interactive);
  background: var(--qy-color-surface-3);
}

.qy-dashboard-screen .closures-ux-checkbox input:checked + span {
  border-color: var(--qy-color-brand);
  background: var(--qy-color-brand);
}

.qy-dashboard-screen .closures-ux-checkbox input:checked + span::after {
  width: 9px;
  height: 5px;
  content: "";
  border-bottom: 2px solid var(--qy-color-text-on-brand);
  border-left: 2px solid var(--qy-color-text-on-brand);
  transform: translateY(-1px) rotate(-45deg);
}

.qy-dashboard-screen .closures-ux-selection-bar {
  bottom: calc(var(--qy-bottom-nav-h) + var(--qy-safe-bottom) + var(--qy-space-2));
  color: var(--qy-color-text-secondary);
  background: var(--qy-color-surface-3);
  border-color: var(--qy-color-brand);
  box-shadow: var(--qy-elevation-panel);
}

/* Objetivos continúa siendo el renderer real; aquí solo recibe el tratamiento
   oscuro de la pantalla migrada. */
.qy-dashboard-objectives > .dashboard-objectives-disclosure {
  margin: 0;
  padding: 0;
  color: var(--qy-color-text-primary);
  overflow: hidden;
}

.qy-dashboard-objectives .dashboard-objectives-summary-copy strong,
.qy-dashboard-objectives .objective-progress-card strong,
.qy-dashboard-objectives .objective-progress-card b {
  color: var(--qy-color-text-primary) !important;
}

.qy-dashboard-objectives .dashboard-objectives-summary-copy small,
.qy-dashboard-objectives .dashboard-objectives-chevron,
.qy-dashboard-objectives .objective-progress-card :is(span, small, p) {
  color: var(--qy-color-text-secondary) !important;
}

.qy-dashboard-objectives .dashboard-objectives-summary-status b {
  color: var(--qy-color-brand-text) !important;
  background: var(--qy-color-brand-soft) !important;
}

.qy-dashboard-objectives .dashboard-objectives-disclosure[open] .dashboard-objectives-summary {
  border-color: var(--qy-color-border-strong);
}

.qy-dashboard-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;
}

/*
 * `compact-visual-v15-14-2.css` fija la pista de progreso en un gris claro
 * sólido (#ECF1F1) con !important para las superficies aún sin migrar. Se
 * sobreescribe aquí con la misma prioridad para evitar la isla clara.
 */
.qy-dashboard-objectives .objective-progress-track {
  background: var(--qy-color-surface-3) !important;
}

.qy-dashboard-objectives .personal-wide-action {
  min-height: 50px !important;
  color: var(--qy-color-text-primary) !important;
  background: var(--qy-color-surface-3) !important;
  border-color: var(--qy-color-border-interactive) !important;
}

.qy-dashboard-screen .tutorial-continuation-card {
  color: var(--qy-color-text-primary);
  background: var(--qy-color-surface-2);
  border-color: var(--qy-color-border-strong);
}

.qy-dashboard-screen .tutorial-continuation-card :is(strong, p, span) {
  color: inherit;
}

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

  .qy-page-header {
    align-items: flex-end;
  }

  .qy-page-header h2 {
    font-size: 1.9rem;
    line-height: 1.15;
  }

  .qy-page-header__copy p,
  .qy-page-header__meta .sync-chip {
    display: none;
  }

  .qy-quiet-action {
    width: var(--qy-touch-min);
    padding: 0;
    font-size: 0 !important;
  }

  .qy-quiet-action > span {
    width: 20px;
    height: 20px;
  }

  .qy-dashboard-total {
    min-height: 250px;
    padding: var(--qy-space-5);
  }

  .qy-dashboard-status-stack {
    grid-template-columns: 1fr 1fr;
  }

  .qy-status-card {
    padding: var(--qy-space-4);
  }

  .qy-status-card > strong {
    font-size: clamp(1.2rem, 6.4vw, 1.55rem);
  }

  .qy-status-card > p {
    min-height: 54px;
    font-size: 0.75rem;
    line-height: 1.35;
  }

  .qy-status-card__heading i {
    width: 24px;
    height: 24px;
  }

  .qy-projection-card__breakdown {
    grid-template-columns: 1fr;
  }

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

  .qy-section-header {
    align-items: center;
  }

  .qy-section-header h3 {
    font-size: 1.2rem;
  }

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

  .qy-dashboard-screen .personal-concept-card {
    min-height: 126px;
  }

  /*
   * A este ancho el importe y el estado no caben junto a la copia sin recortar
   * información real: la fecha desaparecía siempre y `Pendiente de cobro` se
   * cortaba a media palabra. Como `Parcial` y `Pendiente de cobro` comparten
   * color, ese recorte dejaba el significado dependiendo solo del color.
   * El registro se recompone en dos filas propias de móvil.
   */
  .qy-record-summary {
    grid-template-columns: 36px minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "value value";
    gap: var(--qy-space-2);
    padding-inline: var(--qy-space-3);
    padding-block: var(--qy-space-3);
  }

  .qy-record-summary > i {
    grid-area: icon;
    width: 36px;
    height: 36px;
  }

  .qy-record-summary__copy {
    grid-area: copy;
    max-width: 100%;
  }

  .qy-record-summary__value {
    grid-area: value;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--qy-space-2);
    text-align: left;
  }

  .qy-dashboard-quarter {
    order: 3;
  }
}

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

  .qy-dashboard-total,
  .qy-projection-card {
    grid-column: 1 / -1;
  }

  .qy-quick-concept-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .qy-status-card > strong {
    font-size: 1.55rem;
  }
}

@media (min-width: 1180px) {
  .qy-dashboard-screen {
    gap: var(--qy-space-8);
    padding-block: var(--qy-space-8);
  }

  .qy-dashboard-overview {
    grid-template-columns: minmax(0, 1.55fr) minmax(280px, 0.75fr);
    grid-template-areas:
      "total status"
      "total projection";
    align-items: stretch;
    gap: var(--qy-space-4);
  }

  .qy-dashboard-total {
    grid-area: total;
    min-height: 360px;
    padding: var(--qy-space-8);
  }

  .qy-dashboard-status-stack {
    grid-area: status;
  }

  .qy-status-card > strong {
    font-size: 2rem;
  }

  .qy-projection-card {
    grid-area: projection;
  }

  /* En escritorio el ritmo crece, pero SIGUE SIENDO UNO: se sube el token y
     lo heredan todas las pilas, en vez de ensanchar solo esta rejilla y dejar
     el resto de la pantalla con la separación del móvil. */
  .qy-dashboard-screen {
    --qy-dashboard-stack: var(--qy-space-5);
  }

  .qy-dashboard-content-grid {
    grid-template-columns: minmax(0, 1.3fr) minmax(340px, 0.82fr);
  }

  .qy-dashboard-panel {
    padding: var(--qy-space-6);
  }
}

@media (min-width: 1440px) {
  .qy-dashboard-total__copy > strong {
    font-size: 4.5rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .qy-dashboard-screen :is(button, .personal-concept-card) {
    transition: none !important;
  }
}

/* ==========================================================================
   S4.11D — REVISIÓN MÓVIL DEL PROPIETARIO
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ICONO DE EXPORTAR Y CAJAS DE ICONO EN GENERAL

   El propietario vio el icono de descarga descentrado dentro de su botón. La
   causa es medible y no era el dibujo:

   Por debajo de 560px `.qy-quiet-action` se convierte en un botón cuadrado de
   icono y colapsa la etiqueta con `font-size: 0`. Pero la etiqueta "Exportar"
   es un NODO DE TEXTO suelto, no un elemento: sigue siendo un ítem flex, de
   ancho cero, y el `gap: 8px` del contenedor SIGUE aplicándose entre el icono
   y ese ítem vacío.

     contenido = 20px (icono) + 8px (gap) + 0px (texto) = 28px
     centrado en 48px  ->  el icono ocupa de 10px a 30px
     centro del icono = 20px;  centro del botón = 24px

   Cuatro píxeles a la izquierda. Visible, y ninguna cantidad de relleno lo
   arregla mientras el gap siga contando un hueco que no separa nada.

   Se anula el gap cuando no hay etiqueta que separar, y se fija la caja del
   icono para que no pueda encogerse bajo presión del flex -- que es la otra
   forma de descentrar una máscara `contain`, porque al estrecharse la caja el
   dibujo se reduce y deja relleno desigual arriba y abajo.
   -------------------------------------------------------------------------- */

.qy-quiet-action > span,
.qy-status-card__heading i,
.qy-projection-card__heading i,
.qy-empty-state > i {
  flex: none;
  box-sizing: content-box;
}

@media (max-width: 559px) {
  .qy-quiet-action {
    gap: 0;
    width: var(--qy-touch-min);
    min-width: var(--qy-touch-min);
    height: var(--qy-touch-min);
    min-height: var(--qy-touch-min);
    padding: 0;
  }

  .qy-quiet-action > span {
    width: var(--qy-icon-box);
    height: var(--qy-icon-box);
    -webkit-mask-size: var(--qy-icon-glyph) var(--qy-icon-glyph);
    mask-size: var(--qy-icon-glyph) var(--qy-icon-glyph);
  }

  /* El bloque de acción se alinea con el título, no con el volado. */
  .qy-page-header__meta,
  .qy-page-header__actions {
    align-items: center;
    align-self: flex-end;
  }
}

/* --------------------------------------------------------------------------
   2. ÚLTIMOS REGISTROS: UNIDADES DISCRETAS, NO UNA COLUMNA FUNDIDA

   `.qy-recent-list` era UNA caja con `overflow: hidden` y las ventas
   separadas solo por una línea de 1px del token decorativo. A 390px eso se
   lee como un bloque continuo: es la fusión que el propietario señaló.

   Se adopta el MISMO lenguaje que S4.11B dio a Registro -- tarjeta por
   referencia, acento de marca a la izquierda, separación real por espacio --
   para que las dos listas de ventas del producto no hablen distinto.
   -------------------------------------------------------------------------- */

.qy-recent-list {
  gap: var(--qy-space-3);
  overflow: visible;
  border: 0;
  border-radius: 0;
}

.qy-recent-list > .qy-record-summary {
  min-height: 76px;
  padding: var(--qy-space-3) var(--qy-space-4);
  background: var(--qy-color-surface-1);
  border: 1px solid var(--qy-color-border-strong);
  border-left: 3px solid var(--qy-color-brand);
  border-radius: var(--qy-radius-lg);
  box-shadow: var(--qy-elevation-card);
  transition:
    background var(--qy-motion-fast) var(--qy-motion-ease),
    border-color var(--qy-motion-fast) var(--qy-motion-ease),
    transform var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-recent-list > .qy-record-summary:last-child {
  border-bottom: 1px solid var(--qy-color-border-strong);
}

.qy-recent-list > .qy-record-summary:hover {
  border-color: var(--qy-color-brand);
  background: var(--qy-color-active);
  transform: translateY(-1px);
}

.qy-recent-list > .qy-record-summary > i {
  flex: none;
}

/*
   G — La píldora de cobro no puede competir con el importe ni con el título.

   En una sola fila, la tercera columna (`auto`) reserva lo que pida
   "Cobro · Pendiente" con `white-space: nowrap` y el resto lo paga la columna
   del medio, que se queda en dos o tres caracteres más los puntos suspensivos.
   No llega a solaparse, pero deja la tarjeta ilegible.

   Por debajo de 560px la tarjeta pasa a dos filas: identidad arriba, dinero y
   estado abajo alineados a la izquierda. Cada dato conserva su ancho natural.
*/
@media (max-width: 559px) {
  .qy-recent-list > .qy-record-summary {
    grid-template-columns: 42px minmax(0, 1fr);
    grid-template-areas:
      "icon copy"
      "value value";
    align-items: center;
    row-gap: var(--qy-space-3);
    padding: var(--qy-space-4);
  }

  .qy-recent-list > .qy-record-summary > i {
    grid-area: icon;
  }

  .qy-recent-list > .qy-record-summary .qy-record-summary__copy {
    grid-area: copy;
  }

  .qy-recent-list > .qy-record-summary .qy-record-summary__value {
    grid-area: value;
    grid-template-columns: auto auto;
    align-items: center;
    justify-content: start;
    justify-items: start;
    gap: var(--qy-space-3);
    text-align: left;
  }

  .qy-recent-list > .qy-record-summary .qy-record-summary__value b {
    font-size: 1.05rem;
  }
}

/* --------------------------------------------------------------------------
   3. EJES Y ETIQUETAS DE LOS GRÁFICOS DE BARRAS

   `.qy-trend-bars` pintaba sus líneas de rejilla con un
   `repeating-linear-gradient` sobre el FONDO DEL CONTENEDOR ENTERO. Ese
   contenedor incluye la fila de etiquetas del eje inferior, así que las
   líneas horizontales seguían dibujándose por encima de los nombres de mes:
   la obstrucción de etiquetas que el propietario describió.

   Y el `border-bottom` del contenedor caía POR DEBAJO de las etiquetas, de
   modo que la línea de base del gráfico no separaba las barras de su eje:
   quedaba colgando bajo el texto, como un subrayado.

   Se corrigen las dos cosas moviendo rejilla y línea de base a una capa
   propia que ocupa EXACTAMENTE el área de trazado. La fila de etiquetas pasa
   a tener altura declarada para que esa capa sepa dónde terminar sin
   adivinar.
   -------------------------------------------------------------------------- */

.qy-trend-bars {
  --qy-trend-label-h: 18px;
  position: relative;
  border-bottom: 0;
  background: none;
}

.qy-trend-bars::before {
  position: absolute;
  top: var(--qy-space-4);
  right: 0;
  bottom: calc(var(--qy-trend-label-h) + var(--qy-space-2));
  left: 0;
  content: "";
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 43px,
    var(--qy-color-border) 44px
  );
  border-bottom: 1px solid var(--qy-color-border-strong);
  pointer-events: none;
}

/* La variante compacta nunca tuvo rejilla y no la estrena aquí. */
.qy-trend-bars.is-compact::before {
  content: none;
}

/* Las barras se dibujan SOBRE la rejilla; las etiquetas, fuera de ella. */
.qy-trend-bars__item {
  position: relative;
  grid-template-rows: minmax(44px, 1fr) var(--qy-trend-label-h);
  z-index: 0;
}

.qy-trend-bars__item small {
  line-height: var(--qy-trend-label-h);
}

/* ==========================================================================
   S4.11E — RESUMEN EMPIEZA EN HOY

   Resumen deja de ser una sola lectura mensual y pasa a tener dos: la jornada
   en curso, que es la que se ve al entrar, y el resumen financiero del mes,
   que conserva todo lo que ya tenía.

   Lo que hay aquí es SOLO lo nuevo: el conmutador y la composición del modo
   Hoy. Ni una regla del modo financiero se modifica.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. CONMUTADOR DE MODO

   Segmentado compacto sobre un carril, no dos pestañas grandes. Ocupa una
   sola línea a 320 y no separa la cabecera del contenido: sigue leyéndose
   como parte de la misma pantalla, que es lo que es.

   Las dos opciones NO se reparten a partes iguales. "Resumen financiero"
   mide dieciocho caracteres y "Hoy" tres; darles el 50 % cada una obligaría a
   truncar la larga o a dejar la corta flotando en un hueco vacío. `auto 1fr`
   da a cada una lo que su texto necesita.
   -------------------------------------------------------------------------- */
.qy-dashboard-screen .qy-mode-switch {
  display: grid;
  /* `minmax(0, 1fr)` para que la elipsis de la opción larga pueda actuar: con
     `1fr` el mínimo automático del botón impediría que la pista encogiera y
     el conmutador se saldría a 320 px. */
  grid-template-columns: auto 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-mode-switch__option {
  min-height: 38px;
  padding: 0 var(--qy-space-4);
  border: 0;
  border-radius: var(--qy-radius-pill);
  background: transparent;
  color: var(--qy-color-text-secondary);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition:
    background var(--qy-motion-fast) var(--qy-motion-ease),
    color var(--qy-motion-fast) var(--qy-motion-ease);
}

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

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

/* --------------------------------------------------------------------------
   2. TRANSICIÓN ENTRE MODOS

   S4.11F: el conmutador Hoy / Resumen financiero deja de tener animación
   propia y adopta el sistema DIRECCIONAL COMPARTIDO que define
   `qy-shell-v1.css` (`.qy-route-motion`), el mismo que usa el menú inferior
   al cambiar de ruta.

   Antes había aquí una animación que siempre entraba desde la derecha, sin
   importar hacia qué lado se movía el usuario, y el menú no animaba en
   absoluto. Eran dos gramáticas distintas para el mismo gesto lateral. Ahora
   hay una: el contenido entra por el lado del que viene.

   La regla de movimiento vive en el armazón porque la comparten dos
   superficies; duplicarla aquí la haría envejecer por separado.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   3. MODO HOY

   Composición corta a propósito: tres bloques y una acción. No es el
   resumen mensual en pequeño, así que no hereda su rejilla de dos columnas
   ni su densidad.
   -------------------------------------------------------------------------- */
.qy-today {
  display: grid;
  gap: var(--qy-dashboard-stack);
}

.qy-today-hero {
  display: grid;
  gap: var(--qy-space-4);
  padding: var(--qy-space-5);
  border: 1px solid var(--qy-color-border);
  border-radius: var(--qy-radius-xl);
  background: var(--qy-color-surface-1);
  box-shadow: var(--qy-elevation-card);
}

.qy-today-hero__copy {
  display: grid;
  gap: var(--qy-space-1);
}

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

.qy-today-hero__copy > strong {
  color: var(--qy-color-text-primary);
  font-size: clamp(30px, 9vw, 40px);
  font-weight: 800;
  /* Misma corrección que en el resto de cifras grandes: la caja necesita el
     alto de su propia tinta o el glifo se recorta por arriba (S4.11D). */
  line-height: 1.15;
}

.qy-today-hero__copy > p {
  margin: 0;
  color: var(--qy-color-text-tertiary);
  font-size: 13px;
}

.qy-today-hero__action {
  justify-self: stretch;
  min-height: var(--qy-touch-min);
}

/* --------------------------------------------------------------------------
   4. DE LO GENERADO HOY

   Dos columnas iguales. El titular es "De lo generado hoy" y no "Cobrado
   hoy" porque el dato describe el ESTADO de cobro de los registros de la
   jornada, no el día en que entró el dinero. La composición acompaña a esa
   lectura: son dos partes de un mismo total, no dos métricas sueltas.
   -------------------------------------------------------------------------- */
.qy-today-split__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--qy-space-3);
}

.qy-today-split__item {
  display: grid;
  gap: var(--qy-space-1);
  padding: var(--qy-space-3) var(--qy-space-4);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-2);
}

.qy-today-split__item > span {
  color: var(--qy-color-text-secondary);
  font-size: 12px;
  font-weight: 600;
}

.qy-today-split__item > strong {
  font-size: clamp(18px, 5vw, 22px);
  font-weight: 700;
  line-height: 1.2;
}

.qy-today-split__item--collected > strong {
  color: var(--qy-color-collected-text);
}

.qy-today-split__item--pending > strong {
  color: var(--qy-color-pending-text);
}

/* --------------------------------------------------------------------------
   5. ACTIVIDAD DE HOY

   Reutiliza `.qy-recent-list`, que ya resuelve el registro compacto con su
   elevación y su radio en ambos temas. No se clona su presentación: sería
   una segunda copia que envejecería por separado.
   -------------------------------------------------------------------------- */
.qy-today-activity .qy-recent-list {
  display: grid;
  gap: var(--qy-space-3);
}

@media (prefers-reduced-motion: reduce) {
  .qy-mode-switch__option {
    animation: none;
    transition: none;
  }
}

/* ==========================================================================
   S4.11F — HOY COMO PUESTO DE TRABAJO

   Dos cambios de fondo respecto a S4.11E:

     1. la estructura NO desaparece cuando el día está vacío
     2. aparece un control de cierres accionable dentro de la jornada

   Y uno que se va: el atajo de registrar venta, que ahora vive solo en el
   botón central del menú.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. NOTA EN VOZ BAJA

   Sustituye a la tarjeta de estado vacío que ocupaba la pantalla entera. Las
   cifras se pintan siempre con su cero; esto solo explica por qué son cero.
   Tipografía: `--qy-text-body-sm`, la misma que el resto de textos de apoyo
   de la pantalla, para que no compita con las cifras.
   -------------------------------------------------------------------------- */
.qy-today-quiet-note {
  margin: 0;
  font: var(--qy-text-body-sm);
  color: var(--qy-color-text-tertiary);
}

/* --------------------------------------------------------------------------
   2. CONTROL DE CIERRES

   Cada fila identifica la referencia y ofrece sus DOS controles
   independientes. La rejilla reserva una columna para el importe y baja los
   controles a su propia línea: a 320 px, meter concepto, referencia, importe
   y dos botones en una sola fila obliga a recortar el texto o a encoger los
   objetivos táctiles por debajo de lo usable.
   -------------------------------------------------------------------------- */
.qy-today-closure-list {
  display: grid;
  gap: var(--qy-space-3);
}

.qy-closure-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--qy-space-2) var(--qy-space-3);
  padding: var(--qy-space-3) var(--qy-space-4);
  border: 1px solid var(--qy-color-border);
  border-radius: var(--qy-radius-lg);
  background: var(--qy-color-surface-2);
}

.qy-closure-row__copy {
  display: grid;
  gap: 2px;
  min-width: 0;
}

/*
   Concepto y referencia comparten familia y difieren en peso y tamaño, que es
   lo que crea la jerarquía sin introducir un tercer estilo tipográfico. Son
   los mismos tokens que usa `.qy-record-summary` en la lista de actividad,
   que se lee justo debajo: dos bloques contiguos con la misma función leen
   igual.
*/
.qy-closure-row__copy > strong {
  font: var(--qy-text-body-md);
  font-weight: 700;
  color: var(--qy-color-text-primary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qy-closure-row__copy > small {
  font: var(--qy-text-body-sm);
  color: var(--qy-color-text-tertiary);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.qy-closure-row__amount {
  font: var(--qy-text-financial);
  font-weight: 700;
  color: var(--qy-color-text-primary);
  white-space: nowrap;
}

.qy-closure-row__actions {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--qy-space-2);
}

.qy-closure-row__hint {
  grid-column: 1 / -1;
  margin: 0;
  font: var(--qy-text-body-sm);
  color: var(--qy-color-text-tertiary);
}

/* --------------------------------------------------------------------------
   3. CONMUTADOR DE ESTADO

   Un control, dos estados, y el estado NO depende solo del color: la marca
   pasa de círculo vacío a círculo relleno con una marca de verificación
   dibujada en CSS. Alguien que no distinga el turquesa del gris sigue viendo
   la diferencia de forma.

   Cuando el estado ya está conseguido el botón queda deshabilitado, porque el
   producto canónico no ofrece reversión: cobrar y cerrar son operaciones de un
   solo sentido. Mostrarlo pulsable insinuaría un "descobrar" que no existe.
   -------------------------------------------------------------------------- */
.qy-state-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--qy-space-2);
  min-height: var(--qy-touch-min);
  min-width: 0;
  padding: 0 var(--qy-space-3);
  border: 1px solid var(--qy-color-border-interactive);
  border-radius: var(--qy-radius-pill);
  background: transparent;
  color: var(--qy-color-text-secondary);
  font: var(--qy-text-label-md);
  cursor: pointer;
  transition:
    background var(--qy-motion-fast) var(--qy-motion-ease),
    border-color var(--qy-motion-fast) var(--qy-motion-ease),
    color var(--qy-motion-fast) var(--qy-motion-ease);
}

.qy-state-toggle__mark {
  flex: none;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: var(--qy-radius-pill);
  position: relative;
}

.qy-state-toggle.is-done {
  border-color: var(--qy-color-collected);
  background: var(--qy-color-collected-soft);
  color: var(--qy-color-collected-text);
}

/*
   La marca de verificación: dos lados de una caja girados 45°. No hace falta
   ninguna fuente de iconos ni ningún SVG para dibujar un tick.
*/
.qy-state-toggle.is-done .qy-state-toggle__mark {
  border-color: transparent;
  border-radius: 0;
  width: 8px;
  height: 14px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-1px, -2px);
}

.qy-state-toggle[disabled] {
  cursor: default;
}

/* Deshabilitado y NO conseguido: la acción no está disponible todavía. */
.qy-state-toggle[disabled]:not(.is-done) {
  border-color: var(--qy-color-border);
  color: var(--qy-color-disabled-text);
}

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

@media (prefers-reduced-motion: reduce) {
  .qy-state-toggle {
    transition: none;
  }
}