/* =============================================================================
   bridge.css — puentea los tokens propios de mailsvc.css al CORE del DS SISEG.
   Se carga DESPUÉS de mailsvc.css → sus :root ganan por orden de cascada.
   NO reescribe componentes: solo reapunta variables + retoca contrastes que
   asumían "texto oscuro sobre acento brillante" (rompe con el azul-lead oscuro).
   Consciente del esquema (claro/oscuro): el usuario elige con el toggle del topbar
   (se recuerda en localStorage). Por defecto oscuro.
   ============================================================================= */
:root {
  /* — Superficies → grises neutros del DS (esquema oscuro activo) — */
  --bg-0: var(--bg-default);                                   /* #1A1A1A */
  --bg-1: var(--bg-paper);                                     /* #272727 */
  --bg-2: var(--bg-neutral);                                   /* #2E2E2E */
  --bg-3: var(--grey-100);                                     /* piso profundo (claro): gris muy claro */
  --bg-elevated: color-mix(in srgb, var(--bg-paper) 84%, #fff);
  --overlay: rgba(0,0,0,0.60);                                 /* backdrop de modales (oscurece en ambos) */

  /* — Bordes → divider del DS — */
  --border-subtle: var(--divider);
  --border: var(--divider);
  --border-strong: rgb(154 154 161 / 0.32);

  /* — Texto → escala de texto del DS — */
  --text-1: var(--text-primary);                              /* #FFFFFF */
  --text-2: var(--grey-700);                                  /* énfasis intermedio: gris OSCURO en claro (dark lo aclara abajo) */
  --text-3: var(--text-secondary);                            /* #9A9AA1 */
  --text-4: var(--text-disabled);                             /* #6A6A6A */

  /* — Marca → azul-lead + naranja SISEG — */
  --primary: var(--palette-primary-main);                     /* texto/acento: azul principal (bien sobre claro) */
  --primary-hover: var(--palette-primary-dark);
  --primary-dark: var(--palette-primary-dark);
  --primary-soft: color-mix(in srgb, var(--palette-primary-main) 12%, transparent);
  --primary-soft-2: color-mix(in srgb, var(--palette-primary-main) 20%, transparent);

  --secondary: var(--palette-secondary-dark);                 /* como TEXTO en claro: tono oscuro (dark restaura -main abajo) */
  --secondary-soft: color-mix(in srgb, var(--palette-secondary-main) 16%, transparent);

  /* — Estados: como TEXTO en claro van en tono OSCURO (legibles sobre blanco/tinte);
       en oscuro se restauran a -main (abajo). Los -bg (tintes) usan siempre -main. — */
  --success: var(--palette-success-dark);
  --success-bg: color-mix(in srgb, var(--palette-success-main) 16%, transparent);
  --warning: var(--palette-warning-darker);
  --warning-bg: color-mix(in srgb, var(--palette-warning-main) 18%, transparent);
  --danger: var(--palette-error-dark);
  --danger-bg: color-mix(in srgb, var(--palette-error-main) 16%, transparent);
  --info: var(--palette-info-dark);
  --info-bg: color-mix(in srgb, var(--palette-info-main) 16%, transparent);
  --neutral: var(--grey-600);
  --neutral-bg: color-mix(in srgb, var(--grey-500) 16%, transparent);

  /* — Tipografía → Mulish (cuerpo) — */
  --font-sans: var(--font-primary);

  /* — Radios → radios del DS (esquinas más generosas) — */
  --r-sm: var(--radius-sm);                                   /* 8 (antes 6) */
  --r-md: var(--radius-md);                                   /* 12 (antes 8) */
  --r-lg: var(--radius-lg);                                   /* 16 (antes 12) */
  --r-xl: var(--radius-xl);                                   /* 24 (antes 16) */
  --r-pill: var(--radius-pill);

  /* — Sombras → elevación del DS — */
  --shadow-1: var(--shadow-z1);
  --shadow-2: var(--shadow-z8);
  --shadow-3: var(--shadow-z16);
}

/* — Acento azul consciente del esquema: en OSCURO el azul-lead como texto necesita
     un tono más claro (los rellenos sólidos siguen usando el MAIN vía overrides abajo). — */
[data-scheme="dark"] {
  --primary: var(--palette-primary-light);                    /* #6E97D6 — legible sobre oscuro */
  --primary-hover: var(--palette-primary-lighter);            /* #D6E2F5 — hover de links */
  --primary-soft: color-mix(in srgb, var(--palette-primary-main) 24%, transparent);
  --primary-soft-2: color-mix(in srgb, var(--palette-primary-main) 34%, transparent);
  --bg-3: color-mix(in srgb, var(--bg-default) 70%, #000);     /* piso profundo (oscuro) */
  --text-2: var(--grey-300);                                  /* énfasis intermedio en oscuro: gris claro */
  --neutral: var(--grey-500);
  /* estados como texto en oscuro: tono brillante (-main) */
  --secondary: var(--palette-secondary-main);
  --success: var(--palette-success-main);
  --warning: var(--palette-warning-main);
  --danger: var(--palette-error-main);
  --info: var(--palette-info-main);
}

/* — Títulos y marca en Sora (look de producto del DS) — */
h1, h2, h3, h4,
.brand, .login-brand,
.topbar h2 { font-family: var(--font-secondary-alt); }

/* — Contraste: el azul-lead es OSCURO. Como TEXTO/acento va CLARO (--primary, arriba);
     como RELLENO sólido va el MAIN oscuro con texto blanco. Los botones semánticos se
     re-afirman por orden de cascada (bridge.css carga después de mailsvc.css). — */
.btn         { background: var(--palette-primary-main); color: #fff; }
.btn:hover   { background: var(--palette-primary-dark); }
.btn-danger  { background: var(--palette-error-main);   color: #fff; }
.btn-warning { background: var(--palette-warning-main); color: var(--palette-warning-contrastText); }
.btn-outline { background: transparent; color: var(--text-1); }
.btn-ghost   { background: transparent; color: var(--text-3); }
.seg-control a.active .count,
.preset.active { background: var(--palette-primary-main); color: #fff; }
.nav-count { color: #fff; }                                   /* badge danger (rojo) con texto blanco */
.sug-card-title .count { color: var(--palette-warning-contrastText); }

/* — Superficies/hover que asumían oscuro → neutrales que sirven en claro y oscuro — */
.drawer, .drawer.ok { background: var(--bg-2); }              /* panel de detalle: inset neutro (no caja oscura en claro) */
.table tr:hover td,
.nav a:hover,
.seg-control a:hover { background: var(--action-hover); }     /* hovers visibles en ambos esquemas */