/* Temas de LottoBTC. El tema por defecto vive en :root de cada página.
   El tema «matrix» se inspira en la paleta clásica de terminal (fondo casi negro,
   verde fósforo, monoespaciada). CSS reescrito, sin copiar hojas de terceros. */

html[data-theme="matrix"] {
  --bg: #0d0208;
  --card: #051208;
  --line: #003b00;
  --txt: #00ff41;
  --mut: #80ce87;
  --btc: #00ff41;
  --ok: #b8ffc8;
  --err: #ff6b6b;
  --res: #c8f560;
  --in: #001a00;
  --on-accent: #0d0208;
  color-scheme: dark;
}

html[data-theme="matrix"] body {
  background-color: var(--bg);
  background-image: radial-gradient(circle at top, #001a00, #0d0208 62%);
  color: var(--txt);
  font-family: "Courier New", Courier, ui-monospace, SFMono-Regular, Menlo, monospace;
}

html[data-theme="matrix"] h1,
html[data-theme="matrix"] h2,
html[data-theme="matrix"] .navbar-brand {
  text-shadow: 0 0 8px rgba(0, 255, 65, 0.55);
}

html[data-theme="matrix"] button {
  background: #00ff41;
  color: var(--on-accent);
  border: 1px solid #00ff41;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.35);
  text-shadow: none;
}

html[data-theme="matrix"] button:hover:not(:disabled) {
  background: #b8ffc8;
  color: var(--on-accent);
  box-shadow: 0 0 18px rgba(0, 255, 65, 0.75);
}

html[data-theme="matrix"] button.sec {
  background: #003b00;
  color: var(--txt);
  border-color: #008f11;
  box-shadow: none;
}

html[data-theme="matrix"] button.on,
html[data-theme="matrix"] .tabs button.cur {
  background: #00ff41;
  color: var(--on-accent);
}

html[data-theme="matrix"] .card,
html[data-theme="matrix"] .sheet,
html[data-theme="matrix"] .sale,
html[data-theme="matrix"] .stat,
html[data-theme="matrix"] details {
  background: rgba(5, 18, 8, 0.92);
  border-color: #003b00;
  box-shadow: 0 0 16px rgba(0, 255, 65, 0.12);
}

html[data-theme="matrix"] input,
html[data-theme="matrix"] select,
html[data-theme="matrix"] textarea {
  background: #001a00;
  color: var(--txt);
  border-color: #008f11;
}

html[data-theme="matrix"] input:focus,
html[data-theme="matrix"] select:focus,
html[data-theme="matrix"] textarea:focus {
  outline: 2px solid #00ff41;
  border-color: transparent;
}

html[data-theme="matrix"] .cell { background: #032003; color: var(--txt); }
html[data-theme="matrix"] .cell.sold { background: #1a0808; color: #8f5555; }
html[data-theme="matrix"] .cell.res { background: #1a2208; color: var(--res); }
html[data-theme="matrix"] .cell.incart { background: #00ff41; color: var(--on-accent); }

html[data-theme="matrix"] .cartbar {
  background: #00ff41;
  color: var(--on-accent);
  text-shadow: none;
}

html[data-theme="matrix"] .qr {
  background: #fff;
  filter: hue-rotate(90deg) brightness(1.15) contrast(1.1);
}

html[data-theme="matrix"] a { color: #80ce87; }
html[data-theme="matrix"] a:hover { color: #b8ffc8; }

html[data-theme="matrix"] .banner {
  background: #1a2208;
  color: var(--res);
  border: 1px solid #3a4a10;
}

html[data-theme="matrix"] .wrap,
html[data-theme="matrix"] .cartbar,
html[data-theme="matrix"] .modal {
  position: relative;
  z-index: 1;
}
html[data-theme="matrix"] .cartbar { z-index: 5; }
html[data-theme="matrix"] .modal { z-index: 9; }

#lottobtc-matrix-rain {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0.32;
}

@media (max-width: 640px) {
  #lottobtc-matrix-rain { opacity: 0.22; }
}

@media (prefers-reduced-motion: reduce) {
  html[data-theme="matrix"] h1,
  html[data-theme="matrix"] h2 {
    text-shadow: 0 0 4px rgba(0, 255, 65, 0.35);
  }
  #lottobtc-matrix-rain { display: none; }
}

html[data-theme="matrix"] {
  scrollbar-color: #008f11 #0d0208;
}