/* =========================================================================
   PRIME THEME · Re-skin de NASCAR.Web hacia el design system del Prototipo
   (Prime DS — Navy deportivo #0B1739 + Naranja energía #FF6B35)

   Esta hoja se carga DESPUÉS del template Ynex en _Host.cshtml para ganar
   en cascada. Re-mapea las variables de marca de Ynex y sobreescribe los
   componentes (cards, botones, tablas, inputs) sin reescribir las páginas.
   Tokens copiados de Prototipo/wwwroot/css/tokens.css.
   ========================================================================= */

:root {
  /* ---------- Prime DS · Brand (Navy) ---------- */
  --ps-brand-50:  #EAEEF8;
  --ps-brand-100: #D4DCEF;
  --ps-brand-200: #B8C2D6;
  --ps-brand-300: #8294C1;
  --ps-brand-400: #5C75AC;
  --ps-brand-500: #3A57B4;
  --ps-brand-600: #2F468F;
  --ps-brand-700: #1F3163;
  --ps-brand-800: #142147;
  --ps-brand-900: #0B1739;
  --ps-brand-950: #060E25;

  /* ---------- Prime DS · Accent (Naranja) ---------- */
  --ps-accent-50:  #FFF2EB;
  --ps-accent-100: #FFE3D5;
  --ps-accent-200: #FFC4A5;
  --ps-accent-400: #FF8E5C;
  --ps-accent-500: #FF7847;
  --ps-accent-600: #FF6B35;
  --ps-accent-700: #E5521E;
  --ps-accent-800: #B84017;

  /* ---------- Prime DS · Neutrals ---------- */
  --ps-surface-0:   #FFFFFF;
  --ps-surface-25:  #FBFCFD;
  --ps-surface-50:  #F7F8FB;
  --ps-surface-100: #EEF1F6;
  --ps-surface-200: #E2E6EE;
  --ps-surface-300: #CBD2DC;
  --ps-surface-400: #94A3B8;
  --ps-surface-500: #64748B;
  --ps-surface-600: #475569;
  --ps-surface-700: #334155;
  --ps-surface-800: #1E293B;
  --ps-surface-900: #0F172A;

  /* ---------- Prime DS · Semantic text/border ---------- */
  --ps-text-default: var(--ps-surface-900);
  --ps-text-muted:   var(--ps-surface-600);
  --ps-text-subtle:  var(--ps-surface-500);
  --ps-border-subtle:  var(--ps-surface-200);
  --ps-border-default: var(--ps-surface-300);
  --ps-bg-page: var(--ps-surface-50);
  --ps-bg-card: var(--ps-surface-0);

  /* ---------- Prime DS · Radius / shadow ---------- */
  --ps-radius-sm: 6px;
  --ps-radius-md: 10px;
  --ps-radius-lg: 14px;
  --ps-shadow-1: 0 1px 2px rgba(15,23,42,0.06), 0 1px 1px rgba(15,23,42,0.04);
  --ps-shadow-2: 0 4px 12px rgba(15,23,42,0.08);
  --ps-shadow-3: 0 12px 32px rgba(15,23,42,0.12);
  --ps-shadow-focus: 0 0 0 3px rgba(58,87,180,0.18);

  /* =====================================================================
     Override de variables del template Ynex (triples RGB, usados como
     rgb(var(--primary)) y rgb(var(--primary) / <alpha>)).
     Navy #0B1739 = 11 23 57 pasa a ser la marca primaria en TODA la app:
     botones, links, focus, tabs, badges, tints, etc.
     ===================================================================== */
  --primary:        11 23 57;
  --primary-rgb:    11, 23, 57;
  --primary-color:  rgb(var(--primary-rgb));

  /* Fondo de página y texto muted alineados a Prime DS */
  --body-bg:          247 248 251;   /* #F7F8FB */
  --default-background: 247 248 251;
  --text-muted:       71 85 105;     /* #475569 */
  --menu-prime-color:  71 85 105;
  --header-prime-color: 71 85 105;
}

/* Tipografía base */
body {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* =========================================================================
   SHELL · Sidebar (navy + ítem activo naranja)
   El template colorea .side-menu__item.active con --primary; como ahora es
   navy quedaría invisible sobre el sidebar navy, así que lo forzamos a naranja.
   ========================================================================= */
.app-sidebar {
  background-color: #0B1739 !important;
  border-right: 1px solid rgba(255,255,255,0.08) !important;
}

.app-sidebar .side-menu__item {
  color: rgba(255,255,255,0.78) !important;
  border-radius: var(--ps-radius-sm);
  margin: 2px 8px;
}
.app-sidebar .side-menu__item .side-menu__icon { color: rgba(255,255,255,0.62); }

.app-sidebar .side-menu__item:hover {
  background-color: rgba(255,255,255,0.06) !important;
  color: #fff !important;
}
.app-sidebar .side-menu__item:hover .side-menu__icon { color: #fff; }

.app-sidebar .side-menu__item.active,
.app-sidebar .slide .side-menu__item.active {
  background-color: #FF6B35 !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(255,107,53,0.32);
}
.app-sidebar .side-menu__item.active .side-menu__icon,
.app-sidebar .side-menu__item.active .side-menu__label { color: #fff !important; }

/* Títulos de sección del menú */
.app-sidebar .slide__category .category-name {
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.48) !important;
  font-weight: 600;
}

/* =========================================================================
   SHELL · Header (blanco con borde sutil estilo Prime)
   ========================================================================= */
.app-header {
  background-color: #FFFFFF !important;
  border-bottom: 1px solid var(--ps-border-subtle) !important;
  box-shadow: none !important;
}

/* =========================================================================
   COMPONENTES · Cards / box
   ========================================================================= */
.box {
  border-radius: var(--ps-radius-lg) !important;
  border: 1px solid var(--ps-border-subtle) !important;
  box-shadow: var(--ps-shadow-1) !important;
}

/* =========================================================================
   COMPONENTES · Botones primarios (navy) + acento naranja
   Los botones del template que usan rgb(var(--primary)) ya heredan navy.
   Reforzamos las clases explícitas por si tienen colores propios.
   ========================================================================= */
.ti-btn-primary,
.ti-btn-primary-full,
.btn-primary {
  background-color: #0B1739 !important;
  border-color: #0B1739 !important;
  color: #fff !important;
}
.ti-btn-primary:hover:not(:disabled),
.ti-btn-primary-full:hover:not(:disabled),
.btn-primary:hover:not(:disabled) {
  background-color: #1F3163 !important;
  border-color: #1F3163 !important;
  color: #fff !important;
}

/* Acento naranja para CTAs (úsese con la clase .ti-btn-accent) */
.ti-btn-accent {
  background-color: #FF6B35 !important;
  border-color: #FF6B35 !important;
  color: #fff !important;
}
.ti-btn-accent:hover:not(:disabled) {
  background-color: #E5521E !important;
  border-color: #E5521E !important;
}

/* =========================================================================
   COMPONENTES · Tablas (header estilo Prime)
   ========================================================================= */
.table thead th,
table.table > thead > tr > th {
  background-color: var(--ps-surface-50) !important;
  color: var(--ps-text-muted) !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.75rem;
  font-weight: 600;
}

/* =========================================================================
   COMPONENTES · Inputs (focus brand-500)
   ========================================================================= */
.form-control:focus,
.ti-form-input:focus,
.ti-form-select:focus {
  border-color: var(--ps-brand-500) !important;
  box-shadow: var(--ps-shadow-focus) !important;
}

/* =========================================================================
   UTILIDAD · Page header (reutilizable: Home y futuras páginas)
   ========================================================================= */
.page-header {
  margin: 1.5rem 0;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.page-header__titles { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.page-header__title {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--ps-text-default);
  margin: 0;
  letter-spacing: -0.01em;
}
.page-header__subtitle { font-size: 0.875rem; color: var(--ps-text-muted); margin: 0; }
.page-header__actions { display: flex; gap: 0.5rem; flex-shrink: 0; }