/* ============================================================
   Identidad CompLook Sistemas — tokens de marca
   Origen: design_handoff_complook_brand/TOKENS.md
   OJO: este archivo esta duplicado en SSC/wwwroot/complook-tokens.css.
   Son dos proyectos Blazor independientes; si cambias un valor aca,
   cambialo tambien alla.
   ============================================================ */

:root {
  /* Colores de marca */
  --cl-navy:       #152348;
  --cl-emerald:    #2EC98A;
  --cl-deep:       #0B1528;
  --cl-muted:      #5D6B8A;
  --cl-mint:       #C8F0E1;
  --cl-bg:         #F2F4FA;
  --cl-surface:    #FFFFFF;
  --cl-border:     #E2E6F0;
  --cl-border-alt: #DDE2EE;

  /* Tipografia */
  --font-sans: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', 'Fira Code', monospace;

  /* Radios */
  --radius-sm:   7px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-pill: 99px;

  /* ── Mapeo sobre Bootstrap 5.3 ──────────────────────────
     Esta capa es la que hace barato el cambio: los btn-primary,
     card, table y demas que ya existen heredan la marca sin
     tocar el markup. */
  --bs-primary:           var(--cl-navy);
  --bs-primary-rgb:       21, 35, 72;
  --bs-body-bg:           var(--cl-bg);
  --bs-body-color:        var(--cl-deep);
  --bs-body-font-family:  var(--font-sans);
  --bs-border-color:      var(--cl-border);
  --bs-secondary-color:   var(--cl-muted);
}

body {
  font-family: var(--font-sans);
  background-color: var(--cl-bg);
  color: var(--cl-deep);
}

/* Boton primario de marca: fondo esmeralda, texto marino profundo (~8:1, AA) */
.btn-primary {
  background-color: var(--cl-emerald);
  border-color: var(--cl-emerald);
  color: var(--cl-deep);
  font-weight: 700;
  border-radius: var(--radius-sm);
  transition: filter 150ms ease;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--cl-emerald);
  border-color: var(--cl-emerald);
  color: var(--cl-deep);
  filter: brightness(1.06);
}

/* Boton secundario: marino con texto blanco */
.btn-secondary {
  background-color: var(--cl-navy);
  border-color: var(--cl-navy);
  color: #FFFFFF;
  border-radius: var(--radius-sm);
  transition: filter 150ms ease;
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--cl-navy);
  border-color: var(--cl-navy);
  filter: brightness(1.06);
}

/* Cards */
.card {
  background-color: var(--cl-surface);
  border: 1px solid var(--cl-border);
  border-radius: var(--radius-lg);
}

/* Badge de marca — SOLO para etiquetas neutras (chips informativos,
   contadores). Los badges de estado operativo conservan su color
   semantico y no usan esta clase. */
.badge-marca {
  background-color: var(--cl-mint);
  color: var(--cl-emerald);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
}

/* ── Navbar de marca ─────────────────────────────────────── */
.navbar, .top-row.navbar, .sidebar .top-row {
  background-color: var(--cl-navy);
}

.cl-wordmark {
  font-size: 15px;
  font-weight: 800;
  color: #FFFFFF;
  letter-spacing: -0.2px;
}

.navbar .nav-link,
.nav-scrollable .nav-link {
  color: rgba(255, 255, 255, 0.50);
  font-size: 12px;
  font-weight: 500;
  padding: 5px 14px;
  border-radius: var(--radius-sm);
  transition: color 150ms ease, background-color 150ms ease;
}

.navbar .nav-link:hover,
.nav-scrollable .nav-link:hover {
  color: rgba(255, 255, 255, 0.85);
}

.navbar .nav-link.active,
.nav-scrollable .nav-link.active {
  background-color: rgba(255, 255, 255, 0.10);
  color: #FFFFFF;
  font-weight: 600;
}

/* Firma del proveedor (login / splash) */
.cl-signature {
  font-size: 13px;
  color: var(--cl-muted);
}
.cl-signature strong {
  font-weight: 800;
}
.cl-signature-sub {
  color: var(--cl-emerald);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
}