/* ============================================================
   BORRACHINES — Sistema de marca
   - Tokens de color
   - Tipografías
   ============================================================ */

@font-face {
  font-family: 'Instrument Serif';
  src: url('/Assets/TIPOGRAFIAS/Instrument_Serif/InstrumentSerif-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Instrument Serif';
  src: url('/Assets/TIPOGRAFIAS/Instrument_Serif/InstrumentSerif-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'Piscolabis';
  src: url('/Assets/TIPOGRAFIAS/piscolabis-main/fonts/web/Piscolabis-Regular.woff2') format('woff2'),
       url('/Assets/TIPOGRAFIAS/piscolabis-main/fonts/web/Piscolabis-Regular.woff') format('woff'),
       url('/Assets/TIPOGRAFIAS/piscolabis-main/fonts/Piscolabis-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Acumin Pro';
  src: url('/Assets/TIPOGRAFIAS/FontsFree-Net-Acumin-Pro-Light%20%281%29.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

:root {
  /* Superficies */
  --bg-base:       #111214;
  --bg-surface:    #0a0a0c;
  --bg-card:       rgba(247, 244, 235, 0.04);
  --bg-card-hover: rgba(247, 244, 235, 0.07);
  --border:        rgba(247, 244, 235, 0.07);
  --border-mid:    rgba(247, 244, 235, 0.15);

  /* Azul (único acento de marca) */
  --blue:          #0f00e6;
  --blue-dim:      rgba(15, 0, 230, 0.15);
  --blue-border:   rgba(15, 0, 230, 0.4);
  --blue-soft:     #6b5fff;

  /* Crema (texto) */
  --cream:         #f7f4eb;
  --cream-60:      rgba(247, 244, 235, 0.6);
  --cream-35:      rgba(247, 244, 235, 0.35);
  --cream-15:      rgba(247, 244, 235, 0.15);
  --cream-07:      rgba(247, 244, 235, 0.07);
  --cream-04:      rgba(247, 244, 235, 0.04);

  /* Rojo (errores, sin info) */
  --red:           #fd380c;
  --red-dim:       rgba(253, 56, 12, 0.12);

  /* Amarillo (revisita) */
  --yellow:        #fdc80c;
  --yellow-dim:    rgba(253, 200, 12, 0.12);

  /* Fuentes */
  --font-serif: 'Instrument Serif', Georgia, serif;
  --font-pisco: 'Piscolabis', system-ui, sans-serif;
  --font-body:  'Acumin Pro', system-ui, -apple-system, sans-serif;

  /* ========================================================
     ALIASES legacy (compatibilidad con HTML/JS existente)
     Mapean los nombres viejos a los nuevos del rebranding.
     ======================================================== */
  --text-light:       var(--cream);
  --text-muted:       var(--cream-35);
  --text-muted-light: var(--cream-35);
  --text-dark:        var(--cream);

  --bg-dark:          var(--bg-base);
  --bg-dark-2:        var(--bg-surface);
  --bg-card-dark:     var(--bg-card);
  --bg-light:         var(--bg-base);
  --bg-light-2:       var(--bg-surface);

  --border-dark:      var(--border);
  --border-light:     var(--border);

  --green:            var(--blue);
  --green-hover:      var(--blue);
  --red-hover:        var(--red);
  --blue-dark:        var(--blue);
  --blue-accent:      var(--blue);

  --shadow-soft:      none;

  /* color-scheme: ayuda al navegador a estilizar controles nativos
     (scrollbars, dropdowns, date pickers) de forma consistente */
  color-scheme: dark;
}

/* ============================================================
   TEMA CLARO (basado en branding)
   - Fondo crema (#f7f4eb), texto casi-negro (#111214)
   - Azul (#0f00e6) y rojo (#fd380c) se mantienen como acentos
   ============================================================ */
[data-theme="light"] {
  --bg-base:       #f7f4eb;
  --bg-surface:    #ffffff;
  --bg-card:       rgba(17, 18, 20, 0.035);
  --bg-card-hover: rgba(17, 18, 20, 0.07);
  --border:        rgba(17, 18, 20, 0.08);
  --border-mid:    rgba(17, 18, 20, 0.18);

  /* "cream" pasa a representar el color de texto principal */
  --cream:         #111214;
  --cream-60:      rgba(17, 18, 20, 0.7);
  --cream-35:      rgba(17, 18, 20, 0.5);
  --cream-15:      rgba(17, 18, 20, 0.2);
  --cream-07:      rgba(17, 18, 20, 0.07);
  --cream-04:      rgba(17, 18, 20, 0.04);

  /* En tema claro, el blue-soft necesita ser más oscuro para tener contraste */
  --blue-soft:     #0f00e6;
  --blue-dim:      rgba(15, 0, 230, 0.10);
  --blue-border:   rgba(15, 0, 230, 0.35);

  /* yellow/red dim un toque más opacos sobre fondo claro */
  --red-dim:       rgba(253, 56, 12, 0.10);
  --yellow-dim:    rgba(253, 200, 12, 0.18);

  color-scheme: light;
}

/* ============================================================
   Fix de contraste en tema claro:
   Elementos con fondo azul/rojo necesitan texto claro (no oscuro).
   Redefinimos --cream localmente dentro de esos elementos.
   ============================================================ */
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn-danger,
[data-theme="light"] .recorrido-card:not(.disabled),
[data-theme="light"] .metric.accent,
[data-theme="light"] .kpi-card.accent,
[data-theme="light"] .sidebar nav a.active,
[data-theme="light"] .admin-avatar,
[data-theme="light"] .horarios-tab.active,
[data-theme="light"] .toast,
[data-theme="light"] .realtime-banner,
[data-theme="light"] .parada-card.activa .parada-num,
[data-theme="light"] .live-badge,
[data-theme="light"] .item-row .item-del,
[data-theme="light"] .parada-row button,
[data-theme="light"] .offline-banner {
  --cream:    #f7f4eb;
  --cream-60: rgba(247, 244, 235, 0.7);
  --cream-35: rgba(247, 244, 235, 0.55);
  --cream-15: rgba(247, 244, 235, 0.2);
  color: #f7f4eb;
}

/* live-badge tiene fondo translúcido (--blue-dim) y borde, su texto sigue siendo --blue-soft */
[data-theme="light"] .live-badge {
  --cream: var(--blue-soft);
  color: var(--blue-soft);
}

/* Base reset por encima de todo */
html, body {
  background: var(--bg-base);
  color: var(--cream);
  font-family: var(--font-body);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selección global */
::selection { background: var(--blue); color: var(--cream); }