/* ==========================================================================
   Jesús Pons — Brand tokens (override sobre sh-tokens.css)
   Cargar SIEMPRE después de sh-tokens.css en base.html.
   Manual de marca: azul corporativo #1D2F4D · grafito #5B5B5E · gris de
   apoyo #F2F4F7 · blanco. Tipografía: Inter (texto/UI) + Roboto Condensed
   (titulares/numeración técnica). Acento: cortes diagonales sutiles.
   ========================================================================== */

:root {
  /* ---- Paleta principal Jesús Pons (manual de marca) ---- */
  --jp-blue:        #1D2F4D;   /* azul corporativo — institucional, headers, CTAs */
  --jp-blue-light:  #33507D;   /* tinte claro — hover, acentos interactivos */
  --jp-graphite:    #5B5B5E;   /* texto secundario / neutro */
  --jp-gray:         #F2F4F7;  /* superficie de apoyo, fondos claros */
  --jp-white:        #FFFFFF;

  /* Escala derivada del azul corporativo (lighten/darken ~12-15%) */
  --jp-blue-50:   #EBEEF3;
  --jp-blue-100:  #CBD3DF;
  --jp-blue-200:  #A6B4C8;
  --jp-blue-300:  #7E93B0;
  --jp-blue-400:  #567299;
  --jp-blue-500:  var(--jp-blue-light);
  --jp-blue-600:  var(--jp-blue);
  --jp-blue-700:  #182740;
  --jp-blue-800:  #14213A;
  --jp-blue-900:  #0F1A2C;

  /* ---- Override de tokens Springhead semánticos ---- */
  /* La identidad visual de Jesús Pons reemplaza el navy/teal/yellow de Springhead.
     Un único azul corporativo hace de "navy" (estructural) y "teal" (interactivo),
     diferenciados por tono — sin introducir un segundo color fuera del manual. */
  --sh-navy:        var(--jp-blue);        /* estructural — sidebar, login, headings */
  --sh-navy-deep:   var(--jp-blue-800);
  --sh-teal:        var(--jp-blue-light);  /* interactivo — botones, focus, links */
  --sh-teal-soft:   #6B87AD;               /* variante clara para texto sobre fondos oscuros */
  --sh-yellow:       var(--jp-blue-light); /* sin amarillo en el manual JP — reusa el azul claro como acento activo */
  --sh-yellow-soft:  #8FA6C4;
  --sh-yellow-ink:   var(--jp-blue);

  /* Escala ink: derivada del grafito de marca (#5B5B5E fijado en ink-700) */
  --sh-ink-900: #1A1A1B;
  --sh-ink-800: #38383B;
  --sh-ink-700: var(--jp-graphite);
  --sh-ink-600: #6E6E71;
  --sh-ink-500: #8A8A8D;
  --sh-ink-400: #A8A8AB;
  --sh-ink-300: #C7C7CA;
  --sh-ink-200: #DEDFE2;
  --sh-ink-100: #EDEEF0;
  --sh-ink-50:  #F7F8F9;

  /* Backgrounds neutros — blanco + gris de apoyo del manual (nunca papel cálido) */
  --sh-paper:      var(--jp-gray);
  --sh-paper-warm: #E8EBF0;
  --sh-off-white:  var(--jp-white);
  --sh-cream:      #E4E7EC;

  /* Semánticos — se mantienen los valores de estado del kit (no son identidad de marca) */
  --sh-positive: #2E7D5B;
  --sh-negative: #B14B3F;
  --sh-warning:  #C68B2F;

  /* Superficies oscuras (dark-mode bg layers) — derivadas del azul corporativo */
  --sh-navy-surface:   #182A46;
  --sh-navy-surface-2: #1E3252;
  --sh-navy-sidebar:   #0F1A2C;

  /* Foco / sombras — recalibradas al azul corporativo */
  --sh-teal-glow: 0 0 0 3px rgba(29, 47, 77, 0.14);
  --sh-shadow-sm:  0 4px 12px rgba(29, 47, 77, 0.08);
  --sh-shadow-pop: 0 4px 12px rgba(29, 47, 77, 0.16);
  --sh-hairline:   rgba(29, 47, 77, 0.10);

  /* ---- Tipografías Jesús Pons (Inter + Roboto Condensed) ---- */
  --jp-f-body:    'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --jp-f-display: 'Roboto Condensed', 'Inter', ui-sans-serif, system-ui, sans-serif;

  /* Override Springhead font tokens */
  --sh-f-sans:    var(--jp-f-body);
  --sh-f-serif:   var(--jp-f-display);
  --sh-f-display: var(--jp-f-display);
  --sh-f-mono:    'Roboto Condensed', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Charts: monocromático azul + escala de grafito */
  --sh-chart-c1:        var(--jp-blue);
  --sh-chart-c2:        var(--jp-blue-light);
  --sh-chart-c3:        var(--jp-blue-300);
  --sh-chart-c4:        var(--sh-ink-400);
  --sh-chart-highlight: var(--jp-blue-light);
}

/* Body usa Inter por defecto */
body {
  font-family: var(--jp-f-body);
  color: var(--sh-ink-900);
}

/* Titulares y numeración técnica con Roboto Condensed */
h1, h2, h3, h4, h5, h6,
.topbar-title,
.login-heading,
.kpi-value,
.kpi-val,
.infra-value {
  font-family: var(--jp-f-display);
  letter-spacing: -0.005em;
}

/* ==========================================================================
   Wordmark Jesús Pons (componente reutilizable)
   Usar en sidebar, login, headers institucionales.
   ========================================================================== */
.jp-wordmark {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
  font-family: var(--jp-f-display);
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1;
  color: var(--jp-blue);
  text-transform: uppercase;
}
.jp-wordmark--inverse {
  color: #FFFFFF;
}

/* Tamaños */
.jp-wordmark--sm { font-size: 18px; }
.jp-wordmark--md { font-size: 28px; }
.jp-wordmark--lg { font-size: 44px; }
.jp-wordmark--xl { font-size: 64px; }

/* ==========================================================================
   Login: panel izquierdo con identidad Jesús Pons + acento diagonal
   ========================================================================== */
.login-brand {
  background: linear-gradient(160deg, var(--jp-blue) 0%, var(--jp-blue-800) 70%, var(--jp-blue-900) 100%);
}
.login-brand-tagline {
  font-family: var(--jp-f-body);
  font-style: normal;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.75) !important; /* Override layout.css 0.5 — más contraste sobre el azul JP */
  letter-spacing: 0.01em;
}
.login-brand-version {
  color: rgba(255, 255, 255, 0.45) !important; /* Override layout.css 0.25 */
}
[data-theme="light"] .login-brand-logo,
[data-theme="dark"] .login-brand-logo,
.login-brand-logo {
  filter: none !important;
  max-height: none !important;
  max-width: 380px;
  width: 70%;
  height: auto;
}

/* ── Acento de marca: corte diagonal sutil (manual JP §identidad) ───────
   Un único corte en el borde derecho del panel de marca del login —
   restrained, no decorativo. Se dibuja con un pseudo-elemento superpuesto
   en vez de clip-path sobre .login-brand para no recortar el logo/tagline
   centrados dentro del panel. */
.login-brand {
  overflow: hidden;
}
.login-brand::after {
  content: "";
  position: absolute;
  top: 0;
  right: -6%;
  bottom: 0;
  width: 12%;
  background: rgba(255, 255, 255, 0.045);
  clip-path: polygon(60% 0, 100% 0, 40% 100%, 0% 100%);
  pointer-events: none;
  z-index: 1;
}
@media (max-width: 768px) {
  .login-brand::after { display: none; }
}

/* JP logo PNGs already carry the dark-background art — neutralize the
   boilerplate whitening filter (layout.css) in every theme. */
.sidebar-logo img { filter: none !important; }