/* ============================================================================
   tptk-brand.css  ·  v2 (rojo + Plus Jakarta Sans)  ·  Identidad Booker
   ----------------------------------------------------------------------------
   Adaptado de design/booker-redesign/tptk-brand.css (Sebas, ago 2026). Este
   archivo NO reescribe plantillas: REMAPEA los tokens `--ds-*` del design
   system + cambia la fuente a Plus Jakarta Sans. Se carga como LO ÚLTIMO del
   <head>, después del <style> inline que fija `--crm-accent` (misma
   especificidad :root → gana el último en orden).

   Diferencias deliberadas contra el archivo de Sebas:
     · `--ds-accent` lee el gancho white-label `--crm-accent` (el tenant TPTK
       ya trae #f73463, así que el resultado es idéntico; otro tenant puede
       seguir cambiando su acento sin tocar CSS).
     · Tokens nuevos del shell (rail, topbar, buscador, rojo de Avisos,
       familia dark de tarjetas de dinero) que las figuras usan ad-hoc.

   Decisiones de identidad (Sebas, ago 2026):
     · Acento = ROJO Booker #f73463 (hover #e51f52).
     · Fuente = Plus Jakarta Sans (variable). Cifras con tabular-nums.
     · Neutros = grises fríos. Tarjetas blancas sobre fondo #f4f5f8.
     · Status pills: Confirmado=verde · Por confirmar=ámbar · Perdido=rosa ·
       Liquidado/Cancelado=gris (spec de tabla 10b, tinte 13%).
   ========================================================================== */

/* ── 0. Fuente: Plus Jakarta Sans ─────────────────────────────────────────── */
@font-face {
  font-family: 'Plus Jakarta Sans';
  font-style: normal;
  font-weight: 200 800;                 /* variable: cubre todos los pesos       */
  font-display: swap;
  src: url('/static/vendor/fonts/PlusJakartaSans-VariableFont_wght.woff2') format('woff2');
}

:root {
  /* ── 1. Acento (gancho de marca) ──────────────────────────────────────────
     `--crm-accent` viene del <style> inline por tenant (TPTK = #f73463).
     hover/soft fijos al rojo Booker; si un tenant cambia el acento, esos dos
     derivan del nuevo valor vía design-system.css.                             */
  --crm-accent-dark:  #e51f52;   /* hover/active                                 */

  --ds-accent:        var(--crm-accent, #f73463);
  --ds-accent-2:      #e51f52;   /* hover                                        */
  --ds-accent-soft:   #fde7ee;   /* fondos suaves: chips, nav activo, badges     */
  --ds-accent-fg:     #ffffff;   /* texto sobre el acento                        */

  /* ── 2. Neutros (grises fríos) ────────────────────────────────────────────
     Ramp página→hundido. Tarjetas = blanco puro sobre fondo gris frío.          */
  --ds-bg:    #e9e9ef;   /* fondo de página — las 9 figuras usan este, no el
                            #f4f5f8 del token file original de Sebas          */
  --ds-bg-2:  #eceef2;   /* rails, superficie de panel  (grey-100) */
  --ds-bg-3:  #e8e8ed;   /* hover, hundido, code        (grey-200) */
  --ds-bg-4:  #dcdce2;   /* hundido profundo            (grey-300) */

  --ds-rule:   #e8e8ed;  /* borde default               (grey-200) */
  --ds-rule-2: #dcdce2;  /* borde hover, divisor        (grey-300) */

  --ds-ink:   #18181c;   /* texto principal, títulos    (grey-900) */
  --ds-ink-2: #4f4f59;   /* secundario                  (grey-600) */
  --ds-ink-3: #6b6b76;   /* terciario, labels, muted    (grey-500) */
  --ds-ink-4: #9a9aa5;   /* quietest (kbd, hints)       (faint)    */
  --ds-ink-5: #c9c9d1;   /* ghost, disabled                        */

  /* ── 3. Semánticos ────────────────────────────────────────────────────────
     El estado se pinta con color; el rojo se reserva para "lo principal".       */
  --ds-pos:       #13a06f;  --ds-pos-soft:  #e3f5ee;   /* éxito, confirmado, EN VIVO */
  --ds-warn:      #e09020;  --ds-warn-soft: #fbf0db;   /* advertencia, por confirmar */
  --ds-neg:       #e2483d;  --ds-neg-soft:  #fdeae8;   /* crítico, perdido           */
  --ds-info:      #3b82c4;  --ds-info-soft: #e7f0f9;   /* informativo, booking       */

  /* ── 4. Shell (figuras de Sebas: rail, topbar, buscador, Avisos, dark) ────
     Valores que las figuras usan ad-hoc, promovidos a token.                    */
  --ds-rail:          #0f0f13;   /* rail de iconos 64px                          */
  --ds-rail-ink:      #8a8a95;   /* iconos del rail en reposo (--side-ink)       */
  --ds-topbar:        #e1e1e9;   /* fondo de topbar                              */
  --ds-search-bg:     #c3c4d1;   /* píldora del buscador                         */
  --ds-search-border: #b1b2c1;   /* borde del buscador                           */
  --ds-alert:         #e0453f;   /* rojo de Avisos (badge/fecha) ≠ acento marca  */
  --ds-alert-2:       #ef5a55;   /* rojo suave de Avisos                         */
  --ds-dark-1:        #1d212b;   /* tarjetas de dinero (Detalle ventas)          */
  --ds-dark-2:        #272d39;
  --ds-dark-3:        #323848;

  /* ── 5. Forma ─────────────────────────────────────────────────────────────
     Un poco más redondeado (botón 8, tarjeta 12-16).                            */
  --ds-radius:    8px;   /* base (era 6)      */
  --ds-radius-lg: 14px;  /* tarjetas (era 10) */

  /* ── 6. Fuente ────────────────────────────────────────────────────────────
     Plus Jakarta Sans reemplaza a Inter en todo el ecosistema.                  */
  --ds-font-sans: 'Plus Jakarta Sans', 'Inter', system-ui, -apple-system, sans-serif;
}

/* theme.css clava Inter directo en body; misma especificidad, gana este archivo. */
body { font-family: var(--ds-font-sans); }

/* Cifras/dinero tabulares (si el DS no lo hace ya en tablas y KPIs). */
.ds-num, .ds-mono, [class*="num"], td[class*="money"] { font-variant-numeric: tabular-nums; }

/* ── 7. Overrides puntuales: valores frambuesa hardcodeados ──────────────────
   theme.css clava rgba(...) y hex en .btn-accent (no salen de la variable).
   Los reescribimos al rojo para que no quede el color viejo.                    */
.btn-accent:hover,
.btn-accent:focus {
  box-shadow: 0 2px 8px rgba(247, 52, 99, 0.30) !important;
}
.btn-accent:active {
  background-color: #c81e4b !important;   /* red-800 */
}
.btn-outline-accent:hover,
.btn-outline-accent:focus {
  box-shadow: 0 2px 8px rgba(247, 52, 99, 0.20) !important;
}

/* ── 8. Bootstrap: alinear el "primary" nativo con el acento ─────────────────
   Por si alguna pantalla usa .btn-primary/.text-primary de Bootstrap directo.   */
:root {
  --bs-primary:            #f73463;
  --bs-primary-rgb:        247, 52, 99;
  --bs-link-color:         #e51f52;
  --bs-link-color-rgb:     229, 31, 82;
  --bs-link-hover-color:   #c81e4b;
  --bs-focus-ring-color:   rgba(247, 52, 99, 0.25);
}