/* web/static/theme.css — tema visual RobCo/Fallout terminal, compartido por
   chat, login y catálogo. Solo variables, tipografía y efectos CRT: cada
   página conserva su propio layout. */

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=Archivo+Black&display=swap');

:root {
  --rc-bg: #030a03;
  --rc-bg-panel: #071607;
  --rc-bg-panel-2: #0b1f0b;
  --rc-green: #33ff66;
  --rc-green-bright: #7bffa0;
  --rc-green-dim: #1f8c3f;
  --rc-green-faint: #0f5c26;
  --rc-glow: rgba(51, 255, 102, 0.55);
  --rc-halo-seleccion: #33ff66;
  --rc-halo-seleccion-glow: rgba(51, 255, 102, 0.55);
  --rc-halo-seleccion-glow-suave: rgba(51, 255, 102, 0.4);
  --rc-font: 'Share Tech Mono', 'Courier New', monospace;
  --rc-cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><path d='M5 4 L5 33 L13.5 25 L18.5 36 L24 33.5 L19 22.5 L30 22.5 Z' fill='%2333ff66' stroke='%23030a03' stroke-width='2.5' stroke-linejoin='round'/></svg>") 5 4, auto;
  --rc-cursor-mira: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><g stroke='%23030a03' stroke-width='4' fill='none'><circle cx='20' cy='20' r='12'/><line x1='20' y1='1' x2='20' y2='10'/><line x1='20' y1='30' x2='20' y2='39'/><line x1='1' y1='20' x2='10' y2='20'/><line x1='30' y1='20' x2='39' y2='20'/></g><g stroke='%2333ff66' stroke-width='2' fill='none'><circle cx='20' cy='20' r='12'/><line x1='20' y1='1' x2='20' y2='10'/><line x1='20' y1='30' x2='20' y2='39'/><line x1='1' y1='20' x2='10' y2='20'/><line x1='30' y1='20' x2='39' y2='20'/></g><circle cx='20' cy='20' r='2' fill='%2333ff66'/></svg>") 20 20, crosshair;
}

* { box-sizing: border-box; }

html, body {
  background: var(--rc-bg);
  color: var(--rc-green);
  font-family: var(--rc-font);
  cursor: var(--rc-cursor);
}

/* Ninguna barra de scroll de la web usa el gris nativo del navegador: siempre
   el color del tema activo (verde fósforo en Fallout, navy en Classic, ver
   variables redefinidas en classic.css). Se aplica a la página entera; los
   contenedores con su propio scroll interno (carrito, dropdown de color,
   listado de productos) heredan el mismo criterio explícitamente donde hace
   falta, ver landing.css. */
html {
  scrollbar-width: thin;
  scrollbar-color: var(--rc-green-dim) var(--rc-bg-panel);
}
html::-webkit-scrollbar { width: 10px; }
html::-webkit-scrollbar-track { background: var(--rc-bg-panel); }
html::-webkit-scrollbar-thumb {
  background: var(--rc-green-dim);
  border: 1px solid var(--rc-green-faint);
  box-shadow: 0 0 6px -1px var(--rc-glow);
}
html::-webkit-scrollbar-thumb:hover {
  background: var(--rc-green);
  box-shadow: 0 0 8px var(--rc-glow);
}

body {
  text-shadow: 0 0 1px var(--rc-glow), 0 0 4px var(--rc-glow);
}

/* --- Overlay CRT: scanlines + viñeta + flicker sutil, no intercepta clicks --- */
.rc-crt {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: normal;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0) 0px,
      rgba(0, 0, 0, 0.12) 1px,
      rgba(0, 0, 0, 0) 2px
    ),
    radial-gradient(
      ellipse at center,
      rgba(0, 0, 0, 0) 72%,
      rgba(0, 0, 0, 0.22) 100%
    );
  animation: rc-flicker 6.5s infinite;
}

@keyframes rc-flicker {
  0%, 96%, 100% { opacity: 1; }
  97% { opacity: 0.94; }
  98% { opacity: 1; }
  98.5% { opacity: 0.9; }
  99% { opacity: 1; }
}

/* --- Distorsión sutil tipo TV de tubo (vertical-hold), transiciones de sección --- */
.rc-deformando {
  animation: rc-deformar 0.45s ease-in-out;
  transform-origin: center;
}

@keyframes rc-deformar {
  0%   { transform: none;                                        filter: none; }
  20%  { transform: translateY(-0.5px) scaleY(1.0015);            filter: brightness(1.03); }
  40%  { transform: translateY(0.5px) scaleY(0.9985) skewX(0.12deg); filter: brightness(0.98); }
  60%  { transform: translateY(-0.25px) skewX(-0.08deg);          filter: brightness(1.015); }
  80%  { transform: none;                                        filter: brightness(0.99); }
  100% { transform: none;                                        filter: none; }
}

/* --- Apagado/encendido tipo TV vieja: se usa al pasar de Fallout a Classic
   (ver landing.js). La pantalla se colapsa a una línea horizontal y luego
   a un punto en el centro, cubriéndose de negro; al entrar a Classic se
   reproduce la misma animación al revés (crece desde el punto). --- */
html { background: #000; }
@keyframes rc-tv-power {
  0%   { transform: scale(1, 1);        opacity: 1; }
  55%  { transform: scale(1, 0.004);     opacity: 1; }
  80%  { transform: scale(0.35, 0.004);  opacity: 1; }
  100% { transform: scale(0.02, 0.004);  opacity: 0; }
}
body.rc-tv-apagando {
  animation: rc-tv-power 0.5s cubic-bezier(0.4, 0, 1, 1) forwards;
  transform-origin: 50% 50%;
}
body.rc-tv-prendiendo {
  animation: rc-tv-power 0.4s cubic-bezier(0, 0, 0.2, 1) reverse forwards;
  transform-origin: 50% 50%;
}

/* Mismo efecto, pero acotado solo al Pip-Boy (no toda la pantalla): se usa
   al apagarlo/encenderlo con el power switch, ver landing.js. */
.pipboy.rc-tv-apagando {
  animation: rc-tv-power 0.5s cubic-bezier(0.4, 0, 1, 1) forwards;
  transform-origin: 50% 50%;
}
.pipboy.rc-tv-prendiendo {
  animation: rc-tv-power 0.4s cubic-bezier(0, 0, 0.2, 1) reverse forwards;
  transform-origin: 50% 50%;
}

/* --- Terminal look para controles genéricos: bordes cuadrados, sin sombras
   modernas, glow al enfocar/hacer hover --- */
.rc-crt, .rc-crt * { pointer-events: none; }

input, textarea, select {
  font-family: var(--rc-font);
  background: var(--rc-bg-panel);
  color: var(--rc-green);
  border: 1px solid var(--rc-green-dim);
  border-radius: 0;
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--rc-green);
  box-shadow: 0 0 6px var(--rc-glow);
}

button {
  font-family: var(--rc-font);
  font-weight: 600;
  background: var(--rc-bg-panel-2);
  color: var(--rc-green);
  border: 3px solid var(--rc-green-dim);
  border-radius: 0;
  cursor: var(--rc-cursor);
  box-shadow: 0 0 6px -1px var(--rc-glow), inset 0 0 6px -2px var(--rc-glow);
  transition: box-shadow 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

button:hover, button:focus-visible {
  color: var(--rc-green-bright);
  border-color: var(--rc-green);
  box-shadow: 0 0 12px var(--rc-glow), inset 0 0 8px -2px var(--rc-glow);
  outline: none;
  cursor: var(--rc-cursor-mira);
}

button:active {
  box-shadow: 0 0 2px var(--rc-glow);
}

a { color: var(--rc-green-bright); }

::selection {
  background: var(--rc-green-dim);
  color: #000;
}

/* --- Boot sequence overlay --- */
#rc-boot {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #000;
  color: var(--rc-green);
  font-family: var(--rc-font);
  font-size: clamp(11px, 3.2vw, 14px);
  line-height: 1.6;
  padding: clamp(16px, 5vw, 28px);
  white-space: pre-wrap;
  overflow: hidden;
  text-shadow:
    0 0 3px var(--rc-glow),
    5px 0 0 rgba(51, 255, 102, 0.22),
    10px 0 0 rgba(51, 255, 102, 0.12),
    15px 0 0 rgba(51, 255, 102, 0.06),
    20px 0 0 rgba(51, 255, 102, 0.03);
}

#rc-boot.rc-boot-oculto {
  display: none;
}

#rc-boot .rc-cursor {
  display: inline-block;
  animation: rc-blink 1s steps(1) infinite;
}

@keyframes rc-blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

.rc-boot-cara {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
}

.rc-boot-cara-emoji {
  margin: 0;
  font-size: clamp(72px, 30vw, 180px);
  line-height: 1;
  color: var(--rc-green);
  text-shadow:
    0 0 8px var(--rc-glow),
    5px 0 0 rgba(51, 255, 102, 0.22),
    10px 0 0 rgba(51, 255, 102, 0.12),
    15px 0 0 rgba(51, 255, 102, 0.06),
    20px 0 0 rgba(51, 255, 102, 0.03);
}

.rc-boot-frase {
  margin: 52px 0 0;
  font-size: clamp(12px, 3.5vw, 15px);
  color: var(--rc-green-bright);
  text-shadow:
    0 0 3px var(--rc-glow),
    5px 0 0 rgba(51, 255, 102, 0.22),
    10px 0 0 rgba(51, 255, 102, 0.12),
    15px 0 0 rgba(51, 255, 102, 0.06),
    20px 0 0 rgba(51, 255, 102, 0.03);
}