/* ============================================================================
   tokens.css — Marca MUELLE La Bodeguita. ÚNICA fuente de verdad de la marca.
   La usan la tienda (muelle.css la importa), el portal de operadores y el
   panel interno (panel.css). Fuente: manual "MARCA MUELLE.pdf" (2026).
   ========================================================================== */

@font-face { font-family: 'Banana Grotesk'; src: url('fonts/BananaGrotesk-Regular.woff2') format('woff2');   font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: 'Banana Grotesk'; src: url('fonts/BananaGrotesk-Medium.woff2') format('woff2');    font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: 'Banana Grotesk'; src: url('fonts/BananaGrotesk-Bold.woff2') format('woff2');      font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: 'Banana Grotesk'; src: url('fonts/BananaGrotesk-Extrabold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; }

:root {
  /* ── Constantes del manual (alias históricos: tienda y portal los usan tal cual) ── */
  --azul-muelle: #073770;   /* "Azul Muelle" — color insignia */
  --azul-logo:   #063772;   /* fondo exacto del JPEG del logotipo */
  --azul:        #0062ee;
  --azul-dk:     #004fc0;   /* derivado para hover */
  --cielo:       #7acaf0;
  --crema:       #eae7d0;
  --verde:       #00ab55;
  --verde-ink:   #00713a;
  --rojo:        #ff221d;
  --rojo-ink:    #c1150f;
  --amarillo:    #ffe72d;
  --ambar-ink:   #8a6d00;
  --paper:       #fffdf4;
  --ink:         #1c2b45;
  --muted:       #5d6a83;
  --border:      #d9d4bc;
  --campo:       #faf8ea;
  --shadow: 0 12px 40px rgba(7,55,112,.16), 0 2px 8px rgba(7,55,112,.08);
  --radius: 16px;

  /* ── Tema del panel: constantes ── */
  --mx-radius:       16px;
  --mx-radius-sm:    10px;
  --mx-font-display: 'Banana Grotesk', system-ui, sans-serif;
  --mx-font-body:    system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;

  /* ── Tema del panel: CLARO ── */
  --mx-bg-base:      #eae7d0;
  --mx-bg:           linear-gradient(160deg, #eae7d0 0%, #e4ebe6 55%, #d3e7f3 100%); /* crema → cielo al 25 % */
  --mx-blob-1:       rgba(122,202,240,.35);
  --mx-blob-2:       rgba(255,231,45,.12);
  --mx-surface:      #fffdf4;
  --mx-surface-2:    #f3f0dd;
  --mx-glass:        rgba(255,253,244,.72);
  --mx-glass-strong: rgba(255,253,244,.88);
  --mx-glass-border: rgba(7,55,112,.14);
  --mx-ink:          #1c2b45;
  --mx-muted:        #5d6a83;
  --mx-primary:      #073770;
  --mx-primary-rgb:  7,55,112;
  --mx-primary-ink:  #ffffff;
  --mx-primary-hover:#0a4a94;
  --mx-link:         #0062ee;
  --mx-link-rgb:     0,98,238;
  --mx-link-hover:   #004fc0;
  --mx-link-hover-rgb: 0,79,192;
  --mx-success:      #00ab55;
  --mx-success-ink:  #00713a;
  --mx-danger:       #ff221d;
  --mx-danger-ink:   #c1150f;
  --mx-warning:      #ffe72d;
  --mx-warning-ink:  #8a6d00;
  --mx-border:       #d9d4bc;
  --mx-blur:         14px;
  --mx-glass-sat:    1.35;                     /* saturación del vidrio (Apariencia) */
  --mx-nav-blur:     14px;                     /* desenfoque de barra y menús (Apariencia) */
  --mx-modal-bg:     rgba(255,253,244,.88);    /* tinte de modales y panel lateral (Apariencia) */
  --mx-modal-blur:   14px;                     /* desenfoque de modales (Apariencia) */
  --mx-glass-edge:   rgba(255,255,255,0.60);   /* filo superior brillante (vidrio grueso) */
  --mx-glass-edge-2: rgba(7,55,112,0.12);      /* base más densa */
  --mx-glass-sheen:  rgba(255,255,255,0.22);   /* brillo en la parte alta */
  --mx-table-bg:     rgba(255,253,244,1);      /* filas de tabla (= --mx-surface) */
  --mx-table-stripe: rgba(243,240,221,1);      /* cebra (= --mx-surface-2) */
  --mx-table-head:   rgba(243,240,221,1);      /* cabecera .table-light */
  --mx-shadow:       0 12px 40px rgba(7,55,112,.16), 0 2px 8px rgba(7,55,112,.08);
  --mx-nav-bg:       rgba(7,55,112,.86);
  --mx-nav-solid:    #073770;
  --mx-nav-ink:      rgba(255,255,255,.88);
  --mx-nav-active:   #ffe72d;
  --mx-menu-bg:      rgba(255,253,244,.94);   /* desplegables: papel en ambos modos */
  --mx-menu-ink:     #1c2b45;
}

html[data-bs-theme="dark"] {
  /* ── Tema del panel: OSCURO (Azul Muelle profundo, vidrio oscuro) ── */
  --mx-bg-base:      #04203f;
  --mx-bg:           linear-gradient(160deg, #04203f 0%, #062c58 60%, #073770 100%);
  --mx-blob-1:       rgba(122,202,240,.22);
  --mx-blob-2:       rgba(255,231,45,.07);
  --mx-surface:      #0b2a52;
  --mx-surface-2:    #0e3363;
  --mx-glass:        rgba(11,42,82,.58);
  --mx-glass-strong: rgba(11,42,82,.86);
  --mx-glass-border: rgba(122,202,240,.24);
  --mx-ink:          #eef3fb;
  --mx-muted:        #a9bbd6;
  --mx-primary:      #7acaf0;
  --mx-primary-rgb:  122,202,240;
  --mx-primary-ink:  #04203f;
  --mx-primary-hover:#9ad6f5;
  --mx-link:         #9ad6f5;
  --mx-link-rgb:     154,214,245;
  --mx-link-hover:   #c2e6fa;
  --mx-link-hover-rgb: 194,230,250;
  --mx-success:      #2ecc80;
  --mx-success-ink:  #bff3d6;
  --mx-danger:       #ff6b66;
  --mx-danger-ink:   #ffd6d4;
  --mx-warning:      #ffe72d;
  --mx-warning-ink:  #fff4b3;
  --mx-border:       #1f4a80;
  --mx-blur:         16px;
  --mx-glass-sat:    1.35;
  --mx-nav-blur:     16px;
  --mx-modal-bg:     rgba(11,42,82,.86);
  --mx-modal-blur:   16px;
  --mx-glass-edge:   rgba(122,202,240,0.30);
  --mx-glass-edge-2: rgba(0,0,0,0.35);
  --mx-glass-sheen:  rgba(122,202,240,0.10);
  --mx-table-bg:     rgba(11,42,82,1);
  --mx-table-stripe: rgba(14,51,99,1);
  --mx-table-head:   rgba(14,51,99,1);
  --mx-shadow:       0 12px 40px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.30);
  --mx-nav-bg:       rgba(4,32,63,.82);
  --mx-nav-solid:    #04203f;
  --mx-nav-ink:      rgba(255,255,255,.88);
  --mx-nav-active:   #ffe72d;
  --mx-menu-bg:      rgba(255,253,244,.94);
  --mx-menu-ink:     #1c2b45;
}