/* =============================================================
   CVL — Hoja de estilos global
   Todos los estilos del sitio deben vivir aqui.
   ============================================================= */


/* ── Variables corporativas ─────────────────────────────────── */
:root {
  --cvl-bg:           #090d14;
  --cvl-bg-soft:      #111821;
  --cvl-panel:        rgba(255, 255, 255, 0.085);
  --cvl-panel-strong: rgba(255, 255, 255, 0.12);
  --cvl-border:       rgba(255, 255, 255, 0.16);
  --cvl-border-strong:rgba(255, 255, 255, 0.26);
  --cvl-wine:         #8c2f39;
  --cvl-wine-dark:    #75222d;
  --cvl-gold:         #e8c7a0;
  --cvl-text:         #f8fafc;
  --cvl-muted:        #c8d0dc;
  --cvl-dim:          #8792a2;
  --cvl-green:        #74d7b6;
  --cvl-red:          #f09595;
  --cvl-yellow:       #f0c376;
  --cvl-blue:         #85b7eb;
  --cvl-lavender:     #afa9ec;
}


/* ── Tipografia base ─────────────────────────────────────────── */
body {
  font-family: 'Inter', ui-sans-serif, system-ui, -apple-system,
    BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'Noto Sans', sans-serif;
}


/* ── Logout (navbar base) ────────────────────────────────────── */
.logout-form  { display: contents; }
.logout-btn   {
  background:  none;
  border:      none;
  cursor:      pointer;
  font-size:   inherit;
  font-family: inherit;
  transition:  background-color 0.2s;
}
.logout-btn:hover { background-color: hsl(var(--b2)); }


/* ── Login ───────────────────────────────────────────────────── */
body.login-page > main {
  max-width: none;
  padding:   0;
}

.login-page input[type="text"],
.login-page input[type="email"],
.login-page input[type="password"] {
  width:         100%;
  min-height:    3.25rem;
  border-radius: 0.875rem;
  border:        1px solid rgba(55, 65, 81, 0.18);
  background:    rgba(255, 255, 255, 0.96);
  color:         #172033;
  font-size:     1rem;
  padding:       0 1rem;
  outline:       none;
  box-shadow:    0 1px 2px rgba(15, 23, 42, 0.05);
  transition:    border-color 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.login-page input[type="text"]:focus,
.login-page input[type="email"]:focus,
.login-page input[type="password"]:focus {
  border-color: #8c2f39;
  background:   #ffffff;
  box-shadow:   0 0 0 4px rgba(140, 47, 57, 0.12);
}


/* ── Dashboard ───────────────────────────────────────────────── */
@keyframes spin { to { transform: rotate(360deg); } }
.animate-spin-slow { animation: spin 1s linear infinite; }

body.dashboard-page {
  background: var(--cvl-bg);
  color:      var(--cvl-text);
}

body.dashboard-page > main {
  max-width:      none;
  width:          100%;
  margin:         0;
  padding:        0;
  display:        flex;
  flex-direction: column;
  min-height:     0;
}

body.dashboard-page,
html { overflow-x: hidden; }

/* ── Modo TV (50" a distancia) ─────────────────────────────── */
body.dashboard-page.tv-mode {
  --cvl-muted: #d7deea;
  --cvl-dim:   #a7b3c6;
}

body.dashboard-page.tv-mode .text-xs  { font-size: 1rem !important; line-height: 1.35 !important; }
body.dashboard-page.tv-mode .text-sm  { font-size: 1.2rem !important; line-height: 1.35 !important; }
body.dashboard-page.tv-mode .text-base{ font-size: 1.35rem !important; line-height: 1.3 !important; }
body.dashboard-page.tv-mode .text-lg  { font-size: 1.7rem !important; line-height: 1.25 !important; }
body.dashboard-page.tv-mode .text-xl  { font-size: 2.1rem !important; line-height: 1.2 !important; }
body.dashboard-page.tv-mode .text-2xl { font-size: 2.55rem !important; line-height: 1.15 !important; }
body.dashboard-page.tv-mode .text-3xl { font-size: 3.1rem !important; line-height: 1.1 !important; }

body.dashboard-page.tv-mode .dashboard-header {
  border-bottom-width: 2px;
}

body.dashboard-page.tv-mode .bsc-card {
  border-width: 1.5px;
  box-shadow: 0 18px 56px rgba(0, 0, 0, 0.22);
}

body.dashboard-page.tv-mode .kpi-label,
body.dashboard-page.tv-mode .panel-label {
  font-size: 0.95rem;
  letter-spacing: 0.1em;
}

body.dashboard-page.tv-mode .kpi-tile {
  padding: 1.15rem 1.2rem;
}

body.dashboard-page.tv-mode .dash-stat-value,
body.dashboard-page.tv-mode .kpi-tile .kpi-value {
  font-size: 2.55rem;
}

body.dashboard-page.tv-mode .kpi-tile .kpi-detail,
body.dashboard-page.tv-mode .kpi-tile .kpi-meta {
  font-size: 1rem;
}

body.dashboard-page.tv-mode .status-dot {
  width: 2rem;
  height: 2rem;
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.11);
}

body.dashboard-page.tv-mode .track {
  min-height: 0.95rem;
}

.dashboard-header {
  background: linear-gradient(
    135deg,
    rgba(117, 34, 45, 0.92),
    rgba(9, 13, 20, 0.98) 48%,
    rgba(6, 10, 16, 1)
  );
  border-bottom: 1px solid var(--cvl-border);
}

.dashboard-shell {
  background:
    radial-gradient(circle at 12% 12%, rgba(140, 47, 57, 0.3),  transparent 34%),
    radial-gradient(circle at 88%  8%, rgba(133, 183, 235, 0.12), transparent 28%),
    linear-gradient(135deg, #111821 0%, #090d14 56%, #070a10 100%);
}


/* ── Tarjetas BSC ────────────────────────────────────────────── */
.bsc-card {
  background:    var(--cvl-panel);
  border:        1px solid var(--cvl-border);
  border-radius: 0.875rem;
  box-shadow:    0 18px 50px rgba(0, 0, 0, 0.16);
  backdrop-filter: blur(10px);
}

.bsc-card-strong {
  background:   var(--cvl-panel-strong);
  border-color: var(--cvl-border-strong);
}


/* ── Etiquetas ───────────────────────────────────────────────── */
.kpi-label,
.panel-label {
  color:           var(--cvl-muted);
  text-transform:  uppercase;
  letter-spacing:  0.08em;
}


/* ── Metricas (colores semanticos) ───────────────────────────── */
.metric-good    { color: var(--cvl-green);  }
.metric-bad     { color: var(--cvl-red);    }
.metric-warn    { color: var(--cvl-yellow); }
.metric-neutral { color: var(--cvl-text);   }


/* ── Semaforos ───────────────────────────────────────────────── */
.status-dot {
  display:      inline-block;
  width:        0.65rem;
  height:       0.65rem;
  border-radius: 999px;
  box-shadow:   0 0 0 3px rgba(255, 255, 255, 0.08);
}
.status-good { background: var(--cvl-green);  }
.status-bad  { background: var(--cvl-red);    }
.status-warn { background: var(--cvl-yellow); }


/* ── Barra de progreso ───────────────────────────────────────── */
.track {
  background:    rgba(255, 255, 255, 0.12);
  border-radius: 999px;
  overflow:      hidden;
}


/* ── Alertas ─────────────────────────────────────────────────── */
.alert-danger {
  background: rgba(240, 149, 149, 0.13);
  border:     1px solid rgba(240, 149, 149, 0.28);
  color:      #f09595;
}

.alert-warn {
  background: rgba(240, 195, 118, 0.13);
  border:     1px solid rgba(240, 195, 118, 0.28);
  color:      #f0c376;
}

.alert-ok {
  background: rgba(116, 215, 182, 0.13);
  border:     1px solid rgba(116, 215, 182, 0.28);
  color:      #74d7b6;
}


/* ── Sub-header de dashboards (titulo + descripcion + back) ──── */
.dash-subheader {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         0.85rem 1.25rem;
  border-bottom:   1px solid var(--cvl-border);
  background:      linear-gradient(180deg, rgba(140, 47, 57, 0.12), rgba(9, 13, 20, 0));
}
.dash-subheader__title {
  font-size:      1.15rem;
  font-weight:    600;
  color:          var(--cvl-text);
  letter-spacing: 0.02em;
}
.dash-subheader__desc {
  font-size:   0.78rem;
  color:       var(--cvl-muted);
  margin-top:  0.15rem;
  max-width:   62ch;
}
.dash-subheader__actions {
  display:     flex;
  gap:         0.5rem;
  align-items: center;
  flex-shrink: 0;
}

/* ── Boton tipo "ghost" sobre fondo oscuro ───────────────────── */
.btn-cvl-ghost {
  display:        inline-flex;
  align-items:    center;
  gap:            0.4rem;
  background:     var(--cvl-panel);
  border:         1px solid var(--cvl-border);
  color:          var(--cvl-text);
  padding:        0.45rem 0.85rem;
  border-radius:  0.75rem;
  font-size:      0.78rem;
  font-weight:    500;
  cursor:         pointer;
  text-decoration: none;
  transition:     background-color 160ms ease, border-color 160ms ease;
}
.btn-cvl-ghost:hover {
  background:   var(--cvl-panel-strong);
  border-color: var(--cvl-border-strong);
}
.btn-cvl-primary {
  display:        inline-flex;
  align-items:    center;
  gap:            0.45rem;
  background:     var(--cvl-wine);
  border:         1px solid var(--cvl-wine);
  color:          #fff;
  padding:        0.45rem 0.9rem;
  border-radius:  0.75rem;
  font-size:      0.78rem;
  font-weight:    600;
  cursor:         pointer;
  text-decoration: none;
  transition:     background-color 160ms ease;
}
.btn-cvl-primary:hover { background: var(--cvl-wine-dark); }

.dashboard-page .dashboard-detail-link {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.dashboard-page .dashboard-detail-link:hover {
  border-color: var(--cvl-border-strong);
  background-color: var(--cvl-panel-strong);
  transform: translateY(-1px);
}

.dashboard-page .dashboard-detail-link:focus-visible {
  outline: 2px solid var(--cvl-gold);
  outline-offset: 3px;
}


/* ── Boton flotante (FAB) para abrir el menu de dashboards ──── */
.dash-fab {
  position:        fixed;
  right:           1.25rem;
  bottom:          1.25rem;
  z-index:         70;
  display:         inline-flex;
  align-items:     center;
  gap:             0.55rem;
  padding:         0.85rem 1.1rem;
  border-radius:   999px;
  background:      linear-gradient(135deg, var(--cvl-wine) 0%, var(--cvl-wine-dark) 100%);
  color:           #fff;
  border:          1px solid rgba(232, 199, 160, 0.45);
  box-shadow:      0 18px 38px rgba(0, 0, 0, 0.45),
                   0 0 0 6px rgba(140, 47, 57, 0.18);
  cursor:          pointer;
  font-size:       0.85rem;
  font-weight:     600;
  letter-spacing:  0.02em;
  transition:      transform 160ms ease, box-shadow 160ms ease;
}
.dash-fab:hover  { transform: translateY(-2px); }
.dash-fab:active { transform: translateY(0); }
.dash-fab i      { font-size: 1.45rem; line-height: 1; }
.dash-fab__label { white-space: nowrap; }

@media (max-width: 640px) {
  .dash-fab        { right: 0.9rem; bottom: 0.9rem; padding: 0.85rem; }
  .dash-fab__label { display: none; }
}


/* ── Menu overlay a pantalla completa (touch friendly) ───────── */
.dash-menu {
  position:        fixed;
  inset:           0;
  z-index:         80;
  background:      linear-gradient(160deg, rgba(117, 34, 45, 0.96) 0%, rgba(9, 13, 20, 0.98) 55%, rgba(6, 10, 16, 1) 100%);
  backdrop-filter: blur(6px);
  display:         flex;
  flex-direction:  column;
  opacity:         0;
  pointer-events:  none;
  transform:       scale(0.985);
  transition:      opacity 200ms ease, transform 220ms ease;
  overflow:        hidden;
}
.dash-menu.is-open {
  opacity:         1;
  pointer-events:  auto;
  transform:       scale(1);
}

.dash-menu__topbar {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  padding:         1.1rem 1.5rem;
  border-bottom:   1px solid var(--cvl-border);
  flex-shrink:     0;
}
.dash-menu__brand        { display: flex; flex-direction: column; gap: 0.15rem; }
.dash-menu__eyebrow      {
  font-size:      0.9rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color:          var(--cvl-gold);
  font-weight:    600;
}
.dash-menu__title        {
  font-size:    2.1rem;
  font-weight:  600;
  color:        var(--cvl-text);
  line-height:  1.1;
}
.dash-menu__close {
  width:           3rem;
  height:          3rem;
  border-radius:   999px;
  border:          1px solid var(--cvl-border-strong);
  background:      var(--cvl-panel);
  color:           var(--cvl-text);
  cursor:          pointer;
  font-size:       1.6rem;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  transition:      background-color 160ms ease;
}
.dash-menu__close:hover { background: var(--cvl-panel-strong); }

.dash-menu__filters {
  display:         flex;
  flex-wrap:       wrap;
  align-items:     flex-end;
  gap:             0.9rem;
  padding:         0.9rem 1.5rem;
  background:      rgba(9, 13, 20, 0.55);
  border-bottom:   1px solid var(--cvl-border);
  flex-shrink:     0;
}
.dash-filter {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
  min-width:      11rem;
}
.dash-filter__label {
  font-size:      0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color:          var(--cvl-dim);
  font-weight:    600;
}
.dash-filter__select {
  appearance:        none;
  -webkit-appearance: none;
  background-color:  var(--cvl-panel);
  color:             var(--cvl-text);
  border:            1px solid var(--cvl-border-strong);
  border-radius:     0.4rem;
  padding:           0.55rem 2rem 0.55rem 0.85rem;
  font-size:         0.9rem;
  font-weight:       500;
  cursor:            pointer;
  background-image:  url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23c8d0dc'%3E%3Cpath fill-rule='evenodd' d='M5.23 7.21a.75.75 0 011.06.02L10 11.06l3.71-3.83a.75.75 0 111.08 1.04l-4.25 4.39a.75.75 0 01-1.08 0L5.21 8.27a.75.75 0 01.02-1.06z' clip-rule='evenodd'/%3E%3C/svg%3E");
  background-repeat:   no-repeat;
  background-position: right 0.6rem center;
  background-size:     1rem 1rem;
  transition:          border-color 160ms ease, background-color 160ms ease;
}
.dash-filter__select:hover:not(:disabled) {
  background-color: var(--cvl-panel-strong);
  border-color:     rgba(232, 199, 160, 0.45);
}
.dash-filter__select:focus {
  outline:      none;
  border-color: var(--cvl-gold);
}
.dash-filter__select:disabled {
  opacity: 0.75;
  cursor:  not-allowed;
}
.dash-filter__select option {
  background-color: #111821;
  color:            var(--cvl-text);
}
.dash-filter__apply {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.45rem;
  padding:         0.6rem 1.25rem;
  border-radius:   0.4rem;
  background:      var(--cvl-wine);
  color:           #fff;
  font-weight:     600;
  font-size:       0.9rem;
  border:          1px solid rgba(232, 199, 160, 0.35);
  cursor:          pointer;
  transition:      background-color 160ms ease, transform 160ms ease;
}
.dash-filter__apply:hover:not(:disabled) {
  background: #a93947;
  transform:  translateY(-1px);
}
.dash-filter__apply:disabled {
  opacity: 0.6;
  cursor:  not-allowed;
}
.dash-filter__apply i { font-size: 1rem; line-height: 1; }

@media (max-width: 720px) {
  .dash-menu__filters { padding: 0.85rem 1rem; gap: 0.6rem; }
  .dash-filter        { min-width: calc(50% - 0.3rem); }
  .dash-filter__apply { width: 100%; justify-content: center; }
}

.dash-menu__body {
  flex:       1;
  overflow-y: auto;
  padding:    1.5rem 1.5rem 2rem;
}
.dash-menu__group {
  font-size:      1.02rem;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color:          var(--cvl-dim);
  margin:         1.25rem 0 0.85rem;
  padding-bottom: 0.4rem;
  border-bottom:  1px solid var(--cvl-border);
}
.dash-menu__group:first-child { margin-top: 0; }

.dash-menu__grid {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap:                   1rem;
}

.dash-menu__card {
  display:         flex;
  flex-direction:  column;
  gap:             0.45rem;
  padding:         1.25rem 1.1rem;
  border-radius:   0.45rem;
  background:      var(--cvl-panel);
  border:          1px solid rgba(255, 255, 255, 0.2);
  border-left:     8px solid var(--cvl-gold);
  color:           var(--cvl-text);
  text-decoration: none;
  min-height:      120px;
  cursor:          pointer;
  transition:      background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.dash-menu__card[data-dash="home"]                { border-left-color: #e04b4b; }
.dash-menu__card[data-dash="off-trade"]           { border-left-color: #e04b4b; }
.dash-menu__card[data-dash="on-trade"]            { border-left-color: #e04b4b; }
.dash-menu__card[data-dash="retail"]              { border-left-color: #f26a2e; }
.dash-menu__card[data-dash="batalla-whisky"]      { border-left-color: #45a7ff; }
.dash-menu__card[data-dash="batalla-vino"]        { border-left-color: #22c18d; }
.dash-menu__card[data-dash="batalla-aguardiente"] { border-left-color: #f26a2e; }
.dash-menu__card[data-dash="batalla-nuevas"]      { border-left-color: #9b8cff; }

.dash-menu__card:hover {
  background:   var(--cvl-panel-strong);
  border-color: rgba(255, 255, 255, 0.34);
  transform:    translateY(-2px);
}
.dash-menu__card.is-active {
  background:   rgba(140, 47, 57, 0.32);
  border-color: rgba(232, 199, 160, 0.55);
}
.dash-menu__icon {
  font-size:    2.2rem;
  line-height:  1;
}
.dash-menu__name {
  font-size:   1.4rem;
  font-weight: 600;
  color:       var(--cvl-text);
}
.dash-menu__desc {
  font-size: 1.08rem;
  color:     var(--cvl-muted);
}

.dash-menu__footer {
  padding:         0.85rem 1.5rem;
  border-top:      1px solid var(--cvl-border);
  font-size:       0.78rem;
  color:           var(--cvl-dim);
  text-align:      center;
  flex-shrink:     0;
}
.dash-kbd {
  display:        inline-block;
  padding:        0.1rem 0.45rem;
  border-radius:  0.4rem;
  background:     var(--cvl-panel-strong);
  border:         1px solid var(--cvl-border-strong);
  color:          var(--cvl-text);
  font-family:    ui-monospace, SFMono-Regular, Menlo, Monaco, monospace;
  font-size:      0.78rem;
  margin:         0 0.15rem;
}


/* ── KPI tile general reutilizable ───────────────────────────── */
.kpi-tile {
  display:        flex;
  flex-direction: column;
  gap:            0.2rem;
  padding:        0.85rem 0.95rem;
}
.dash-stat-value,
.kpi-tile .kpi-value {
  font-size:    1.65rem;
  font-weight:  600;
  line-height:  1.05;
  margin-top:   0.1rem;
}
.kpi-tile .kpi-detail {
  font-size:    0.7rem;
  color:        var(--cvl-muted);
}
.kpi-tile .kpi-meta {
  font-size:    0.7rem;
  color:        var(--cvl-dim);
  margin-top:   auto;
  padding-top:  0.35rem;
  display:      flex;
  gap:          0.35rem;
  align-items:  center;
}


/* ── Reporte de validacion de datos KPI ─────────────────────── */
body.validation-report-page {
  min-height: 100vh;
  overflow-y: auto;
  background:  #f4f6f9;
  color:       #1f2937;
}

body.validation-report-page > main {
  max-width: none;
  width:     100%;
  margin:    0;
  padding:   0;
}

.validation-report-page .bsc-card {
  background:    #ffffff;
  border:        1px solid #d8dee8;
  border-radius: 0.5rem;
  box-shadow:    0 8px 24px rgba(15, 23, 42, 0.07);
  backdrop-filter: none;
}

.validation-report-page .panel-label {
  color:          #64748b;
  letter-spacing: 0.06em;
}

.validation-report-page .metric-good    { color: #15803d; }
.validation-report-page .metric-bad     { color: #b91c1c; }
.validation-report-page .metric-warn    { color: #b45309; }
.validation-report-page .metric-neutral { color: #334155; }

.validation-report-header {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  gap:             1rem;
  padding:         1rem 1.5rem;
  background:      #ffffff;
  border-bottom:   1px solid #d8dee8;
  box-shadow:      0 1px 2px rgba(15, 23, 42, 0.05);
}

.validation-report-header__brand,
.validation-report-header__meta {
  display:     flex;
  align-items: center;
  gap:         0.8rem;
}

.validation-report-header__logo {
  width:           2.75rem;
  height:          2.75rem;
  border-radius:   0.5rem;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      #ffffff;
  border:          1px solid #d8dee8;
}

.validation-report-header__eyebrow {
  color:          #8c2f39;
  font-size:      0.72rem;
  font-weight:    700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.validation-report-header__title {
  color:       #111827;
  font-size:   1.15rem;
  font-weight: 700;
  line-height: 1.15;
}

.validation-report-header__meta {
  color:       #475569;
  text-align:  right;
}

.validation-report-header__meta strong,
.validation-report-header__meta span {
  display: block;
}

.validation-report-header__meta strong {
  color:       #111827;
  font-size:   0.95rem;
  font-weight: 700;
}

.validation-report-header__meta span {
  color:     #64748b;
  font-size: 0.8rem;
}

.validation-nav-link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.4rem;
  min-height:      2.45rem;
  padding:         0 0.8rem;
  border-radius:   0.45rem;
  border:          1px solid #cbd5e1;
  color:           #334155;
  background:      #ffffff;
  font-size:       0.85rem;
  font-weight:     600;
  text-decoration: none;
}

.validation-nav-link:hover {
  border-color: #8c2f39;
  color:        #8c2f39;
}

.validation-detail-actions {
  display:         flex;
  align-items:     center;
  justify-content: flex-end;
  flex-wrap:       wrap;
  gap:             0.6rem;
}

.validation-hero__controls {
  display:        flex;
  flex-direction: column;
  align-items:    flex-end;
  gap:            0.8rem;
}

.validation-detail-link {
  display:         inline-flex;
  align-items:     center;
  gap:             0.35rem;
  color:           #8c2f39;
  font-weight:     700;
  text-decoration: none;
}

.validation-detail-link:hover {
  color:           #75222d;
  text-decoration: underline;
}

.validation-shell {
  min-height: 100vh;
  padding:    1.5rem;
  background:  #f4f6f9;
}

.validation-container {
  width:     min(1720px, 100%);
  margin:    0 auto;
  display:   flex;
  flex-direction: column;
  gap:       1rem;
}

.validation-hero {
  display:         grid;
  grid-template-columns: minmax(280px, 1fr) auto;
  gap:             1rem;
  align-items:     end;
  padding:         1.1rem;
  background:      #ffffff;
  border:          1px solid #d8dee8;
  border-radius:   0.5rem;
  box-shadow:      0 8px 24px rgba(15, 23, 42, 0.06);
}

.validation-hero h1,
.validation-section h2,
.validation-section-title h2 {
  color:       #111827;
  font-weight: 700;
  line-height: 1.15;
}

.validation-hero h1 {
  font-size: 1.85rem;
  margin:    0.2rem 0 0;
}

.validation-hero p {
  color:     #64748b;
  margin:    0.35rem 0 0;
  font-size: 0.92rem;
}

.validation-filters {
  display:     grid;
  grid-template-columns: repeat(5, auto);
  gap:         0.65rem;
  align-items: end;
}

.validation-filters label {
  display:        flex;
  flex-direction: column;
  gap:            0.3rem;
  min-width:      8.5rem;
}

.validation-filters label span {
  color:          #64748b;
  font-size:      0.68rem;
  font-weight:    700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.validation-select,
.validation-submit {
  min-height:    2.65rem;
  border-radius: 0.45rem;
  font:          inherit;
}

.validation-select {
  width:      100%;
  border:     1px solid #cbd5e1;
  color:      #1f2937;
  background: #ffffff;
  padding:    0 0.75rem;
  outline:    none;
}

.validation-select:focus {
  border-color: #8c2f39;
  box-shadow:   0 0 0 3px rgba(140, 47, 57, 0.12);
}

.validation-select-wide { min-width: 16rem; }

.validation-submit {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             0.45rem;
  border:          1px solid #8c2f39;
  background:      #8c2f39;
  color:           #ffffff;
  padding:         0 1rem;
  font-weight:     700;
  cursor:          pointer;
  transition:      background-color 160ms ease, transform 160ms ease;
}

.validation-submit:hover {
  background: #75222d;
  transform:  translateY(-1px);
}

.validation-grid {
  display: grid;
  gap:     1rem;
}

.validation-grid-six { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.validation-grid-four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.validation-grid-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.validation-grid-three { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.validation-metric {
  min-height:      10rem;
  padding:         1rem;
  display:         flex;
  flex-direction:  column;
  gap:             0.35rem;
  overflow:        hidden;
}

.validation-metric__top {
  display:     flex;
  align-items: center;
  gap:         0.55rem;
}

.validation-metric__icon {
  width:           2rem;
  height:          2rem;
  border-radius:   0.45rem;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      #f1f5f9;
  color:           #8c2f39;
  font-size:       1.2rem;
  flex-shrink:     0;
}

.validation-metric--good .validation-metric__icon { color: #15803d; }
.validation-metric--warn .validation-metric__icon { color: #b45309; }
.validation-metric--bad .validation-metric__icon  { color: #b91c1c; }

.validation-metric__value {
  color:       #111827;
  font-size:   1.85rem;
  font-weight: 700;
  line-height: 1.05;
  margin-top:  0.35rem;
}

.validation-metric__detail {
  color:     #64748b;
  font-size: 0.82rem;
}

.validation-metric__growth {
  margin-top: auto;
  font-size:  0.8rem;
  font-weight: 700;
}

.validation-section,
.validation-mini {
  padding: 1rem;
}

.validation-section__head,
.validation-section-title {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  gap:             1rem;
  margin-bottom:   0.85rem;
}

.validation-section h2,
.validation-section-title h2 {
  font-size: 1.15rem;
  margin:    0.2rem 0 0;
}

.validation-section h3 {
  color:       #111827;
  font-size:   1rem;
  font-weight: 700;
  margin:      0;
}

.validation-chip {
  display:       inline-flex;
  align-items:   center;
  padding:       0.32rem 0.6rem;
  border-radius: 999px;
  border:        1px solid #cbd5e1;
  color:         #475569;
  background:    #f8fafc;
  font-size:     0.72rem;
  font-weight:   600;
  white-space:   nowrap;
}

.validation-table-wrap {
  width:      100%;
  overflow-x: auto;
  border:     1px solid #e2e8f0;
  border-radius: 0.45rem;
}

.validation-table {
  width:           100%;
  border-collapse: collapse;
  min-width:       720px;
}

.validation-table th,
.validation-table td {
  padding:        0.72rem 0.65rem;
  border-bottom:  1px solid #e2e8f0;
  text-align:     left;
  vertical-align: top;
}

.validation-table th {
  color:          #475569;
  font-size:      0.7rem;
  font-weight:    800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background:     #f8fafc;
}

.validation-table td {
  color:     #334155;
  font-size: 0.82rem;
}

.validation-row-number {
  width:       4rem;
  color:       #64748b !important;
  font-weight: 700;
  text-align:  right !important;
}

.validation-table tbody tr:hover td {
  background: #f8fafc;
}

.validation-table tfoot td,
.validation-table .validation-total-row td {
  background:    #f1f5f9;
  color:         #0f172a;
  font-weight:   800;
  font-size:     0.82rem;
  border-top:    2px solid #cbd5e1;
  border-bottom: none;
}

.validation-table tfoot td:first-child {
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.validation-table-compact {
  min-width: 860px;
}

.validation-report-page .dt-container {
  color: #334155;
  font-size: 0.82rem;
}

.validation-report-page .dt-layout-row {
  margin: 0.6rem 0;
}

.validation-report-page .dt-layout-row:first-child {
  align-items: center;
  margin-top: 0;
  padding: 0 0.2rem;
}

.validation-report-page .dt-search label,
.validation-report-page .dt-info {
  color: #64748b;
  font-size: 0.8rem;
  font-weight: 600;
}

.validation-report-page .dt-search input {
  min-height: 2.1rem;
  border: 1px solid #cbd5e1;
  border-radius: 0.4rem;
  padding: 0 0.65rem;
  background: #ffffff;
  color: #1f2937;
}

.validation-report-page .dt-buttons .dt-button {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  min-height: 2.1rem;
  padding: 0 0.7rem;
  border-radius: 0.4rem;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #334155;
  font-size: 0.78rem;
  font-weight: 700;
  box-shadow: none;
}

.validation-report-page .dt-buttons .dt-button:hover {
  border-color: #8c2f39;
  background: #ffffff;
  color: #8c2f39;
}

.validation-report-page div.dt-scroll-body {
  max-height: 400px !important;
  border-bottom: 1px solid #e2e8f0;
}

.validation-report-page table.dataTable thead th,
.validation-report-page table.dataTable thead td {
  border-bottom: 1px solid #e2e8f0;
}

.validation-empty {
  color:      #64748b !important;
  text-align: center !important;
  padding:    1.25rem !important;
}

.validation-stack {
  display:        flex;
  flex-direction: column;
  gap:            1rem;
}

.validation-mini {
  display:     flex;
  align-items: center;
  gap:         0.8rem;
  min-height:  6.5rem;
}

.validation-mini > i {
  width:           2.55rem;
  height:          2.55rem;
  border-radius:   0.45rem;
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  background:      #f1f5f9;
  color:           #8c2f39;
  font-size:       1.5rem;
  flex-shrink:     0;
}

.validation-mini--good > i { color: #15803d; }
.validation-mini--warn > i { color: #b45309; }
.validation-mini--bad > i  { color: #b91c1c; }

.validation-mini span {
  display:        block;
  color:          #64748b;
  font-size:      0.72rem;
  font-weight:    800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.validation-mini strong {
  display:     block;
  color:       #111827;
  font-size:   1.7rem;
  line-height: 1.05;
  margin-top:  0.15rem;
}

.validation-mini small {
  display:    block;
  color:      #64748b;
  font-size:  0.78rem;
  margin-top: 0.2rem;
}

.validation-notes {
  display:     flex;
  flex-wrap:   wrap;
  gap:         0.55rem;
  padding:     0 0 3rem;
}

.validation-notes span {
  display:       inline-flex;
  align-items:   center;
  gap:           0.4rem;
  padding:       0.45rem 0.7rem;
  border-radius: 0.45rem;
  color:         #475569;
  border:        1px solid #d8dee8;
  background:    #ffffff;
  font-size:     0.78rem;
}

.validation-notes i {
  color: #15803d;
}


/* ── Responsive: tablets y mobiles ───────────────────────────── */
@media (max-width: 1100px) {
  body.dashboard-page.overflow-hidden { overflow-y: auto !important; }
  body.dashboard-page.h-screen        { height: auto !important; min-height: 100vh; }
  .dashboard-shell                    { padding: 1rem !important; }
  .validation-grid-six,
  .validation-grid-four,
  .validation-grid-three { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .validation-grid-two   { grid-template-columns: 1fr; }
  .validation-hero       { grid-template-columns: 1fr; }
  .validation-filters    { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .validation-select-wide { min-width: 0; }
}

@media (max-width: 760px) {
  .dashboard-header {
    flex-direction: column;
    align-items:    flex-start;
    gap:            0.5rem;
    padding:        0.85rem 1rem !important;
  }
  .dash-subheader {
    flex-direction: column;
    align-items:    flex-start;
  }
  .dash-subheader__actions { width: 100%; justify-content: flex-end; }
  .dash-stat-value,
  .kpi-tile .kpi-value     { font-size: 1.35rem; }

  body.dashboard-page.tv-mode .text-xs  { font-size: 0.84rem !important; }
  body.dashboard-page.tv-mode .text-sm  { font-size: 0.95rem !important; }
  body.dashboard-page.tv-mode .text-base{ font-size: 1.05rem !important; }
  body.dashboard-page.tv-mode .text-lg  { font-size: 1.2rem !important; }
  body.dashboard-page.tv-mode .text-xl  { font-size: 1.35rem !important; }
  body.dashboard-page.tv-mode .text-2xl { font-size: 1.65rem !important; }
  body.dashboard-page.tv-mode .text-3xl { font-size: 1.95rem !important; }
  body.dashboard-page.tv-mode .dash-stat-value,
  body.dashboard-page.tv-mode .kpi-tile .kpi-value { font-size: 1.95rem; }
  body.dashboard-page.tv-mode .kpi-tile .kpi-detail,
  body.dashboard-page.tv-mode .kpi-tile .kpi-meta { font-size: 0.86rem; }
  body.dashboard-page.tv-mode .status-dot { width: 0.78rem; height: 0.78rem; }
  body.dashboard-page.tv-mode .track { min-height: 0.72rem; }
  .validation-report-header {
    align-items: flex-start;
    flex-direction: column;
    padding: 0.9rem 1rem;
  }
  .validation-report-header__meta {
    width: 100%;
    justify-content: space-between;
    text-align: left;
  }
  .validation-shell { padding: 1rem; }
  .validation-grid-six,
  .validation-grid-four,
  .validation-grid-three { grid-template-columns: 1fr; }
  .validation-filters { grid-template-columns: 1fr; }
  .validation-section__head,
  .validation-section-title {
    align-items: flex-start;
    flex-direction: column;
  }
  .validation-hero h1 { font-size: 1.45rem; }
  .validation-metric__value { font-size: 1.55rem; }
}