/* ============================================================
   assets/css/theme.css
   Modo noche / día — RallyTimer
   Se carga en TODAS las páginas después del CSS principal
   ============================================================ */

/* ── VARIABLES MODO OSCURO (defecto) ── */
:root {
  --bg:        #0a0a0c;
  --surface:   #111116;
  --surface2:  #1a1a22;
  --surface3:  #222230;
  --border:    #2a2a38;
  --border2:   #333344;
  --accent:    #e8ff00;
  --accent2:   #ff4d00;
  --accent3:   #00d4ff;
  --text:      #f0f0f0;
  --text2:     #c0c0d0;
  --muted:     #6a6a82;
  --success:   #00e676;
  --warning:   #ffab00;
  --danger:    #ff3d3d;

  --shadow:    0 2px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
}

/* ── TEMA ROJO — Ferrari / F1 ── */
html[data-theme="red"] {
  --bg:        #080808;
  --surface:   #111111;
  --surface2:  #191919;
  --surface3:  #222222;
  --border:    #2e1a1a;
  --border2:   #3d2020;
  --accent:    #ff7700;
  --accent2:   #ffcc00;
  --accent3:   #ff2244;
  --text:      #f0f0f0;
  --text2:     #c0c0c0;
  --muted:     #7a6060;
  --success:   #00e676;
  --warning:   #ffab00;
  --danger:    #ff3d3d;
  --shadow:    0 2px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
}

/* ── TEMA VERDE — Rally / Subaru ── */
html[data-theme="green"] {
  --bg:        #080808;
  --surface:   #111111;
  --surface2:  #191919;
  --surface3:  #222222;
  --border:    #1a2e1a;
  --border2:   #203d20;
  --accent:    #c8ff00;
  --accent2:   #00ccff;
  --accent3:   #00e676;
  --text:      #f0f0f0;
  --text2:     #c0c0c0;
  --muted:     #607a60;
  --success:   #00e676;
  --warning:   #ffab00;
  --danger:    #ff3d3d;
  --shadow:    0 2px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
}

/* ── TEMA DORADO — Premium ── */
html[data-theme="gold"] {
  --bg:        #080808;
  --surface:   #111111;
  --surface2:  #191919;
  --surface3:  #222222;
  --border:    #2e2410;
  --border2:   #3d3015;
  --accent:    #ffd700;
  --accent2:   #ff4400;
  --accent3:   #ffaa00;
  --text:      #f0f0f0;
  --text2:     #c0c0c0;
  --muted:     #7a6a40;
  --success:   #00e676;
  --warning:   #ffab00;
  --danger:    #ff3d3d;
  --shadow:    0 2px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
}

/* ── TEMA MORADO — eSports ── */
html[data-theme="purple"] {
  --bg:        #080808;
  --surface:   #111111;
  --surface2:  #191919;
  --surface3:  #222222;
  --border:    #261836;
  --border2:   #322048;
  --accent:    #cc55ff;
  --accent2:   #ff44dd;
  --accent3:   #9d4edd;
  --text:      #f0f0f0;
  --text2:     #c0c0c0;
  --muted:     #7060a0;
  --success:   #00e676;
  --warning:   #ffab00;
  --danger:    #ff3d3d;
  --shadow:    0 2px 12px rgba(0,0,0,.5);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.6);
}

/* ── VARIABLES MODO CLARO ── */
/* html[data-theme] tiene especificidad (0,1,1) vs :root (0,1,0)
   así los overrides de tema ganan sobre cualquier :root de página */
html[data-theme="light"] {
  --bg:        #f0f0f4;
  --surface:   #ffffff;
  --surface2:  #f4f4f8;
  --surface3:  #e8e8f0;
  --border:    #d0d0e0;
  --border2:   #c0c0d4;
  --accent:    #5a8a00;    /* verde oscuro — legible sobre blanco */
  --accent2:   #d43000;
  --accent3:   #0080bb;
  --text:      #1a1a2e;
  --text2:     #404058;
  --muted:     #8080a0;
  --success:   #008844;
  --warning:   #cc7700;
  --danger:    #cc2222;

  --shadow:    0 2px 12px rgba(0,0,0,.1);
  --shadow-lg: 0 8px 32px rgba(0,0,0,.15);
}

/* ── TRANSICIÓN SUAVE AL CAMBIAR TEMA ── */
*, *::before, *::after {
  transition:
    background-color .25s ease,
    border-color     .25s ease,
    color            .2s ease;
}
/* Excepciones — no animar transforms ni opacity con transition global */
button, a, input, select, textarea {
  transition:
    background-color .25s ease,
    border-color     .25s ease,
    color            .2s ease,
    opacity          .15s ease,
    transform        .12s ease;
}

/* ── OVERRIDES MODO CLARO ── */
html[data-theme="light"] body::before,
html[data-theme="light"] body::after {
  opacity: .4;
}

html[data-theme="light"] .topbar,
html[data-theme="light"] .sidebar,
html[data-theme="light"] header {
  box-shadow: var(--shadow);
}

html[data-theme="light"] .tbl-wrap,
html[data-theme="light"] table {
  box-shadow: var(--shadow);
}

html[data-theme="light"] .stat-card,
html[data-theme="light"] .rally-card,
html[data-theme="light"] .form-card,
html[data-theme="light"] .live-panel {
  box-shadow: var(--shadow);
}

/* Badge accent en modo claro — fondo más visible */
html[data-theme="light"] .live-badge {
  background: rgba(212, 48, 0, .08);
}

html[data-theme="light"] thead {
  background: var(--surface2);
}

/* Input en modo claro */
html[data-theme="light"] input,
html[data-theme="light"] select,
html[data-theme="light"] textarea {
  background: var(--surface2);
  color: var(--text);
}
html[data-theme="light"] input::placeholder {
  color: var(--muted);
}

/* Sidebar modo claro */
html[data-theme="light"] .sidebar {
  border-right-color: var(--border);
}

/* Grid overlay en modo claro — casi invisible */
html[data-theme="light"] body::before {
  background-image:
    linear-gradient(rgba(0,0,0,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0,0,0,0.03) 1px, transparent 1px);
}

/* ── BOTÓN TOGGLE TEMA (legacy) ── */
.theme-toggle {
  display: flex;
  align-items: center;
  gap: .5rem;
  cursor: pointer;
  background: transparent;
  border: 1px solid var(--border2);
  padding: .3rem .7rem;
  color: var(--muted);
  font-family: 'Share Tech Mono', monospace;
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  transition: all .15s;
  white-space: nowrap;
}
.theme-toggle:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.theme-toggle .tt-icon {
  font-size: .9rem;
  line-height: 1;
}
.theme-toggle .tt-label { }

/* ── SELECTOR DE TEMAS (swatches) ── */
.theme-picker {
  display: flex;
  gap: .32rem;
  flex-wrap: wrap;
  padding: .25rem 0 .1rem;
  align-items: center;
}
.theme-picker-label {
  font-family: 'Share Tech Mono', monospace;
  font-size: .6rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  width: 100%;
  margin-bottom: .15rem;
}
.theme-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  padding: 0;
  outline: none;
  transition: transform .12s ease, border-color .12s ease, box-shadow .12s ease;
  flex-shrink: 0;
}
.theme-swatch:hover { transform: scale(1.25); }
.theme-swatch.active {
  border-color: var(--text);
  transform: scale(1.15);
  box-shadow: 0 0 6px rgba(255,255,255,.25);
}
.theme-swatch[data-tema="dark"]   { background: #e8ff00; }
.theme-swatch[data-tema="light"]  { background: #d8d8e8; border-color: #8888aa; }
.theme-swatch[data-tema="red"]    { background: #ff2244; }
.theme-swatch[data-tema="green"]  { background: #00e676; }
.theme-swatch[data-tema="gold"]   { background: #ffd700; }
.theme-swatch[data-tema="purple"] { background: #9d4edd; }
.theme-swatch.active[data-tema="light"] { border-color: #444466; }

/* ── INCLUSIÓN EN PHP ──────────────────────────────────────────
   En cada página PHP, antes del </head> agregar:

   <link rel="stylesheet" href="<?= BASE_URL ?>/assets/css/theme.css">
   <script src="<?= BASE_URL ?>/assets/js/theme.js"></script>

   En el header HTML agregar el botón toggle:

   <button class="theme-toggle" onclick="toggleTheme()">
     <span class="tt-icon" id="theme-icon">🌙</span>
     <span class="tt-label" id="theme-label">Noche</span>
   </button>
   ──────────────────────────────────────────────────────────── */