/* ═══════════════════════════════════════════════════════════════════
   app.css — val-sciphage
   JERARQUÍA: SciPhage protagonista. Innovanalisis firma como "powered by"
   ═══════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Source+Serif+4:opsz,wght@8..60,300;8..60,400;8..60,500;8..60,600;8..60,700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

/* ─── Reset ────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html, body, h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; cursor: pointer; border: 0; background: none; padding: 0; color: inherit; }
input, select, textarea { font: inherit; }
a { color: inherit; text-decoration: none; }

html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: var(--weight-regular);
  line-height: var(--lh-base);
  color: var(--text-primary);
  background: var(--bg-page);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

/* ─── Helpers ──────────────────────────────────────────────────────── */
.serif { font-family: var(--font-display); }
.sans  { font-family: var(--font-body); }
.mono  { font-family: var(--font-mono); font-feature-settings: 'tnum' 1; }
.muted { color: var(--text-muted); }
.accent { color: var(--ink-500); }
.positive { color: var(--pos); }
.negative { color: var(--neg); }
.highlight { color: var(--highlight); }
.text-center { text-align: center; }
.text-right { text-align: right; }

.smallcaps {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-widest);
  color: var(--text-muted);
}
.tabular {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1, 'zero' 1;
}

/* ─── Container ────────────────────────────────────────────────────── */
.container {
  max-width: var(--container-base);
  margin-inline: auto;
  padding-inline: var(--s-6);
}
.container--wide   { max-width: var(--container-wide); }
.container--narrow { max-width: var(--container-narrow); }
@media (min-width: 768px) {
  .container { padding-inline: var(--s-8); }
}

/* ═══════════════════════════════════════════════════════════════════
   HEADER — minimal, SciPhage a la izquierda, acciones a la derecha
   ═══════════════════════════════════════════════════════════════════ */
.app-header {
  border-bottom: var(--rule-thin);
  background: var(--bg-page);
  position: sticky;
  top: 0;
  z-index: 50;
}

.app-header__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  padding: var(--s-4) var(--s-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}

/* SciPhage a la izquierda, tamaño moderado */
.app-header__brand {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  transition: opacity var(--t-fast);
}
.app-header__brand:hover { opacity: 0.85; }

.app-header__brand img {
  height: 38px;          /* tamaño moderado, no exagerado */
  width: auto;
}

.app-header__actions {
  display: flex;
  align-items: center;
  gap: var(--s-4);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-wider);
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  overflow: hidden;
}
.lang-toggle__btn {
  padding: 6px 10px;
  background: transparent;
  color: inherit;
  transition: color var(--t-fast), background var(--t-fast);
}
.lang-toggle__btn:hover { color: var(--text-primary); }
.lang-toggle__btn.is-active {
  background: var(--ink-900);
  color: var(--paper-50);
}

.user-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}
.user-pill__name {
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.user-pill__role {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--ink-500);
  padding: 2px 8px;
  border: 1px solid var(--ink-500);
  border-radius: var(--radius-sm);
}

.btn-logout {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  padding: 6px 12px;
  border: 1px solid var(--rule-soft);
  border-radius: var(--radius-sm);
  transition: all var(--t-fast);
}
.btn-logout:hover {
  border-color: var(--ink-900);
  color: var(--ink-900);
}

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — "Powered by Innovanalisis"
   ═══════════════════════════════════════════════════════════════════ */
.app-footer {
  margin-top: var(--s-24);
  border-top: var(--rule-thin);
  padding: var(--s-8) var(--s-6);
  background: var(--bg-page);
}
.app-footer__inner {
  max-width: var(--container-wide);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-8);
}
.app-footer__copyright {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: var(--ls-wide);
}
.app-footer__powered {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  justify-content: center;
}
.app-footer__powered-label {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
}
.app-footer__powered img {
  height: 24px;
  width: auto;
  opacity: 0.85;
  transition: opacity var(--t-fast);
}
.app-footer__powered a:hover img { opacity: 1; }
.app-footer__confidential {
  font-size: var(--text-xs);
  color: var(--text-muted);
  letter-spacing: var(--ls-wide);
  text-align: right;
  font-style: italic;
}
@media (max-width: 768px) {
  .app-footer__inner {
    grid-template-columns: 1fr;
    text-align: center;
    gap: var(--s-5);
  }
  .app-footer__confidential { text-align: center; }
  .app-footer__powered { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   LANDING
   ═══════════════════════════════════════════════════════════════════ */
.landing {
  padding: var(--s-20) var(--s-6) var(--s-24);
  min-height: calc(100vh - 200px);
}
.landing__inner {
  max-width: var(--container-base);
  margin-inline: auto;
}

.landing__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-5);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.landing__eyebrow::before,
.landing__eyebrow::after {
  content: '';
  height: 1px;
  background: var(--rule-mid);
  flex: 0 0 40px;
}

.landing__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2.5rem, 6vw, 4.5rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  margin-bottom: var(--s-6);
  max-width: 900px;
}
.landing__title em {
  font-style: italic;
  font-weight: var(--weight-light);
  color: var(--ink-500);
}

.landing__lede {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: var(--weight-light);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
  max-width: 640px;
  margin-bottom: var(--s-12);
}

.cta-row {
  display: flex;
  align-items: center;
  gap: var(--s-5);
  margin-bottom: var(--s-16);
  flex-wrap: wrap;
}

.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: var(--ink-900);
  color: var(--paper-50);
  border: 1px solid var(--ink-900);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), border-color var(--t-fast);
}
.btn-primary:hover {
  background: var(--ink-700);
  border-color: var(--ink-700);
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 14px 28px;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-900);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-secondary:hover {
  background: var(--ink-900);
  color: var(--paper-50);
}

/* Signature: 3 bloques. El 3ro tiene LOGO en vez de texto. */
.landing__signature {
  border-top: var(--rule-thin);
  padding-top: var(--s-6);
  margin-top: var(--s-16);
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-8);
  flex-wrap: wrap;
}
.landing__signature-block {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  max-width: 320px;
}
.landing__signature-label {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);
}
.landing__signature-value {
  font-family: var(--font-display);
  font-size: var(--text-md);
  color: var(--text-primary);
  line-height: var(--lh-snug);
}
/* Cuando el value es un logo, sin maxheight raro */
.landing__signature-logo {
  margin-top: var(--s-1);
}
.landing__signature-logo img {
  height: 32px;
  width: auto;
}

/* ═══════════════════════════════════════════════════════════════════
   SCREEN, Loading, Forms
   ═══════════════════════════════════════════════════════════════════ */
.screen {
  padding: var(--s-12) var(--s-6) var(--s-16);
  min-height: calc(100vh - 200px);
}

.loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s-4);
  padding: var(--s-16);
  color: var(--text-muted);
}
.loading__bar {
  width: 60px;
  height: 1px;
  background: var(--rule-soft);
  position: relative;
  overflow: hidden;
}
.loading__bar::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--ink-900);
  animation: loading-slide 1.2s ease-in-out infinite;
}
.loading__text {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: var(--weight-medium);
}
@keyframes loading-slide {
  0% { transform: translateX(-100%); }
  50% { transform: translateX(0%); }
  100% { transform: translateX(100%); }
}

.form-field { margin-bottom: var(--s-5); }
.form-label {
  display: block;
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
  margin-bottom: var(--s-2);
}
.form-input {
  width: 100%;
  padding: 12px 14px;
  background: var(--paper-50);
  border: 1px solid var(--rule-mid);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--text-primary);
  transition: border-color var(--t-fast);
}
.form-input:focus {
  outline: none;
  border-color: var(--ink-900);
}
.form-error {
  font-size: var(--text-sm);
  color: var(--neg);
  margin-top: var(--s-2);
}
.form-success {
  font-size: var(--text-sm);
  color: var(--pos);
  margin-top: var(--s-2);
}

/* ─── PRINT ────────────────────────────────────────────────────────── */
@media print {
  .app-header__actions,
  .btn-logout,
  .lang-toggle,
  .btn-primary,
  .btn-secondary,
  .no-print {
    display: none !important;
  }
  body { background: white; color: black; }
  .app-header { border-bottom: 1px solid #ccc; }
  .screen, .landing { padding: 20px; }
}

/* ─── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .app-header__inner { padding: var(--s-3) var(--s-4); gap: var(--s-3); }
  .app-header__brand img { height: 32px; }
  .user-pill__name { display: none; }
  .landing { padding: var(--s-12) var(--s-4) var(--s-16); }
  .cta-row { flex-direction: column; align-items: stretch; }
  .btn-primary, .btn-secondary { justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════
   AUTH SCREENS — login & register
   Estética: formulario centrado, columna narrow, editorial
   ═══════════════════════════════════════════════════════════════════ */
.auth-screen {
  padding: var(--s-16) var(--s-6) var(--s-24);
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.auth-screen__inner {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
}

/* Head: eyebrow + título + subtitle */
.auth-screen__head {
  margin-bottom: var(--s-8);
}

.auth-screen__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.auth-screen__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--rule-mid);
  flex-shrink: 0;
}

.auth-screen__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-3xl);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  margin-bottom: var(--s-3);
}

.auth-screen__subtitle {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  line-height: var(--lh-snug);
  color: var(--text-secondary);
}

/* Form area */
.auth-screen__form {
  margin-bottom: var(--s-6);
}

.auth-submit {
  width: 100%;
  justify-content: center;
  margin-top: var(--s-3);
}
.auth-submit:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Feedback area */
.auth-feedback {
  min-height: 1.5em;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  line-height: 1.5;
  margin-top: -var(--s-2);
  margin-bottom: var(--s-3);
  padding: 0;
  transition: all var(--t-fast);
}
.auth-feedback:empty {
  display: none;
}
.auth-feedback--error {
  color: var(--neg);
  padding: var(--s-3);
  background: var(--rust-100);
  border-left: 2px solid var(--neg);
  margin-bottom: var(--s-4);
}
.auth-feedback--success {
  color: var(--pos);
  padding: var(--s-3);
  background: var(--leaf-100);
  border-left: 2px solid var(--pos);
  margin-bottom: var(--s-4);
}

/* Footer: rule + link */
.auth-screen__footer {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-top: var(--s-3);
}

.auth-screen__rule {
  display: block;
  height: 1px;
  background: var(--rule-soft);
  width: 100%;
}

.auth-link {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--text-secondary);
  text-align: center;
  padding: var(--s-2);
  border-bottom: 1px solid transparent;
  transition: color var(--t-fast), border-color var(--t-fast);
  align-self: center;
}
.auth-link:hover {
  color: var(--ink-900);
  border-bottom-color: var(--ink-900);
}

/* Responsive */
@media (max-width: 640px) {
  .auth-screen {
    padding: var(--s-10) var(--s-4) var(--s-16);
  }
  .auth-screen__title {
    font-size: var(--text-2xl);
  }
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD — Sub-etapa 5.3
   Long-scroll, editorial financiero, KPIs grandes + tablas + charts
   ═══════════════════════════════════════════════════════════════════ */

/* Header timestamp (al lado del nombre) */
.snapshot-pill {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-medium);
}
.snapshot-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--leaf-500);
  flex-shrink: 0;
}
.snapshot-pill__dot--stale {
  background: var(--gold-500);
}

/* Container del dashboard */
.dashboard {
  padding: var(--s-12) 0 var(--s-16);
  min-height: calc(100vh - 200px);
}

/* Cabecera principal del dashboard */
.dashboard__head {
  margin-bottom: var(--s-16);
  padding-bottom: var(--s-8);
  border-bottom: var(--rule-thin);
}
.dashboard__eyebrow {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.dashboard__eyebrow::before {
  content: '';
  width: 24px;
  height: 1px;
  background: var(--rule-mid);
  flex-shrink: 0;
}
.dashboard__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  line-height: 1.05;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  margin-bottom: var(--s-3);
}
.dashboard__subtitle {
  font-family: var(--font-display);
  font-size: var(--text-md);
  font-weight: var(--weight-light);
  color: var(--text-secondary);
  font-style: italic;
}

/* Cada sección del dashboard */
.dash-section {
  margin-bottom: var(--s-16);
  padding-top: var(--s-4);
}
.dash-section__head {
  margin-bottom: var(--s-8);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: var(--s-5);
  align-items: baseline;
}
.dash-section__num {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  color: var(--ink-500);
  letter-spacing: var(--ls-wider);
  grid-row: 1 / 3;
  align-self: start;
  padding-top: 8px;
}
.dash-section__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: 1.1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  margin-bottom: var(--s-2);
}
.dash-section__lede {
  font-family: var(--font-display);
  font-size: var(--text-base);
  font-weight: var(--weight-light);
  color: var(--text-secondary);
  font-style: italic;
  max-width: 640px;
}

.dash-section__body {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
}
@media (min-width: 980px) {
  .dash-section__body {
    grid-template-columns: 1.2fr 1fr;
    align-items: start;
  }
}

/* ═══════════════════════════════════════════════════════════════════
   KPI BLOCKS — números héroe
   ═══════════════════════════════════════════════════════════════════ */
.kpi-grid {
  display: grid;
  gap: var(--s-6);
  margin-bottom: var(--s-4);
}
.kpi-grid--3 {
  grid-template-columns: 1fr;
}
.kpi-grid--4 {
  grid-template-columns: 1fr 1fr;
}
.kpi-grid--funnel {
  grid-template-columns: 1fr;
}
@media (min-width: 720px) {
  .kpi-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .kpi-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .kpi-grid--funnel { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 980px) {
  .kpi-grid--funnel {
    grid-template-columns: repeat(5, 1fr);
    gap: var(--s-4);
  }
}
/* En desktop con 5 columnas, los valores son demasiado grandes — reducir un escalón */
.kpi-grid--funnel .kpi__value {
  font-size: clamp(1.5rem, 2.6vw, 2.25rem);
}

.kpi {
  padding: var(--s-6) var(--s-5) var(--s-5);
  border-top: 2px solid var(--ink-900);
  background: var(--paper-100);
  position: relative;
  overflow: hidden;
}
.kpi--compact {
  padding: var(--s-4);
  background: transparent;
  border-top-width: 1px;
}

.kpi__label {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--text-muted);
  margin-bottom: var(--s-4);
}
.kpi--compact .kpi__label {
  margin-bottom: var(--s-2);
}

.kpi__value {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: var(--weight-regular);
  line-height: 1;
  letter-spacing: var(--ls-tight);
  color: var(--ink-900);
  margin-bottom: var(--s-3);
  font-feature-settings: 'tnum' 1;
}
.kpi__value--md {
  font-size: clamp(1.5rem, 2.5vw, 2rem);
}
.kpi__value--accent {
  color: var(--ink-500);
}

.kpi__caption {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.4;
}

/* ═══════════════════════════════════════════════════════════════════
   DATA TABLES — estilo financial newspaper
   ═══════════════════════════════════════════════════════════════════ */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--text-sm);
  margin-bottom: var(--s-4);
}
.data-table thead th {
  text-align: left;
  padding: var(--s-3) var(--s-3);
  border-bottom: 1px solid var(--ink-900);
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
}
.data-table thead th.dt__num {
  text-align: right;
}
.data-table tbody td {
  padding: var(--s-3);
  border-bottom: 1px solid var(--rule-soft);
  vertical-align: top;
}
.data-table tbody tr:hover td {
  background: var(--paper-100);
}
.data-table .dt__label {
  font-family: var(--font-body);
  font-weight: var(--weight-medium);
  color: var(--text-primary);
}
.data-table .dt__num {
  text-align: right;
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' 1;
  color: var(--text-primary);
}
.data-table .dt__empty {
  text-align: center;
  padding: var(--s-8);
  color: var(--text-muted);
  font-style: italic;
}
.data-table tbody tr.dt-total td {
  border-top: 1px solid var(--ink-900);
  border-bottom: 1px solid var(--ink-900);
  padding-top: var(--s-4);
  padding-bottom: var(--s-4);
  font-weight: var(--weight-semibold);
  background: var(--paper-100);
}
.data-table tbody tr.dt-total .dt__label {
  font-family: var(--font-display);
  font-size: var(--text-md);
}
.data-table tbody tr.dt-total:hover td {
  background: var(--paper-100);  /* No cambiar color en hover, ya tiene fondo */
}

/* ═══════════════════════════════════════════════════════════════════
   CHART WRAPPERS
   ═══════════════════════════════════════════════════════════════════ */
.chart-wrap {
  padding: var(--s-4) 0;
}
.chart-wrap__caption {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: var(--weight-semibold);
  margin-bottom: var(--s-4);
  display: flex;
  align-items: center;
  gap: var(--s-3);
}
.chart-wrap__caption::before {
  content: '';
  width: 16px;
  height: 1px;
  background: var(--rule-mid);
  flex-shrink: 0;
}
.chart-canvas-wrap {
  position: relative;
  height: 280px;
  width: 100%;
}

/* ═══════════════════════════════════════════════════════════════════
   PRINT — para PDF nativo del navegador
   ═══════════════════════════════════════════════════════════════════ */
@media print {
  .dashboard { padding: 12px 0; }
  .dash-section { page-break-inside: avoid; margin-bottom: var(--s-8); }
  .chart-canvas-wrap { height: 240px; }
  .kpi { background: transparent; border-top-color: #000; }
  .data-table thead th { border-bottom-color: #000; }
}

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .dashboard { padding: var(--s-8) 0 var(--s-12); }
  .dashboard__head { margin-bottom: var(--s-10); }
  .dash-section { margin-bottom: var(--s-10); }
  .dash-section__head { grid-template-columns: 1fr; }
  .dash-section__num { grid-row: auto; padding-top: 0; margin-bottom: var(--s-2); }
  .kpi { padding: var(--s-5) var(--s-4); }
  .data-table { font-size: var(--text-xs); }
  .data-table thead th, .data-table tbody td { padding: var(--s-2); }
  .chart-canvas-wrap { height: 220px; }
  .snapshot-pill { display: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   UNIT ECONOMICS — 2 sub-tablas (sin/con margen distribuidor)
   APPEND al final de app.css (después del bloque DASHBOARD)
   ═══════════════════════════════════════════════════════════════════ */
.unit-econ {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-10);
}
@media (min-width: 980px) {
  .unit-econ { grid-template-columns: 1fr 1fr; gap: var(--s-8); }
}

.unit-econ__block {
  display: flex;
  flex-direction: column;
}

.unit-econ__heading {
  font-size: var(--text-xs);
  letter-spacing: var(--ls-widest);
  text-transform: uppercase;
  font-weight: var(--weight-semibold);
  color: var(--ink-900);
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-3);
  border-bottom: 2px solid var(--ink-900);
  display: flex;
  align-items: center;
  gap: var(--s-2);
}

.data-table--compact {
  font-size: var(--text-xs);
}
.data-table--compact thead th,
.data-table--compact tbody td {
  padding: var(--s-2) var(--s-3);
}

/* Para la celda "description" en exit scenarios — muted color */
.data-table .dt__label.muted {
  color: var(--text-muted);
  font-weight: var(--weight-regular);
  font-style: italic;
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD REFRESH BUTTON + STATUS BANNER — Sub-etapa 5.4
   APPEND al final de app.css (después del bloque UNIT ECONOMICS)
   ═══════════════════════════════════════════════════════════════════ */

.dashboard__actions {
  position: absolute;
  top: var(--s-12);
  right: var(--s-6);
  display: flex;
  gap: var(--s-3);
}

/* El dashboard__head necesita ser position: relative para anclar el botón */
.dashboard {
  position: relative;
}
.dashboard__head {
  position: relative;
}

/* En pantallas chicas el botón pasa abajo */
@media (max-width: 768px) {
  .dashboard__actions {
    position: static;
    margin-top: var(--s-5);
    justify-content: flex-start;
  }
}

.btn-refresh {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: 10px 16px;
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  background: transparent;
  color: var(--ink-900);
  border: 1px solid var(--ink-900);
  border-radius: var(--radius-sm);
  transition: background var(--t-fast), color var(--t-fast);
}
.btn-refresh:hover:not(:disabled) {
  background: var(--ink-900);
  color: var(--paper-50);
}
.btn-refresh:disabled {
  opacity: 0.6;
  cursor: wait;
}

.btn-refresh__icon {
  font-size: 14px;
  line-height: 1;
  display: inline-block;
  transition: transform var(--t-base);
}
.btn-refresh.is-loading .btn-refresh__icon {
  animation: spin 0.9s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Status banner */
.dashboard__status {
  margin-top: var(--s-5);
  padding: 0;
  font-size: var(--text-sm);
  font-family: var(--font-body);
  line-height: 1.5;
  min-height: 0;
  transition: all var(--t-fast);
}
.dashboard__status:empty { display: none; }

.dashboard__status--loading {
  padding: var(--s-3) var(--s-4);
  background: var(--ink-100);
  border-left: 2px solid var(--ink-500);
  color: var(--ink-900);
  font-style: italic;
}
.dashboard__status--success {
  padding: var(--s-3) var(--s-4);
  background: var(--leaf-100);
  border-left: 2px solid var(--leaf-700);
  color: var(--leaf-700);
}
.dashboard__status--error {
  padding: var(--s-3) var(--s-4);
  background: var(--rust-100);
  border-left: 2px solid var(--rust-500);
  color: var(--rust-500);
}

/* Print: ocultar botón refresh y banner */
@media print {
  .dashboard__actions,
  .dashboard__status { display: none !important; }
}