/* ═══════════════════════════════════════════════════════════════════════
   RETROTASA — Tasación IA de videojuegos retro
   Sistema visual: HARDWARE RETRO · plástico de consola (NES · SNES · Game Boy)
   Gris plástico cálido · biseles moldeados · banda roja Nintendo ·
   botones de color SNES · pantallas LCD verde Game Boy
   ═══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;700;800&family=Press+Start+2P&display=swap');

:root {
  /* fonts */
  --font: 'Space Grotesk', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
  --pixel: 'Press Start 2P', monospace;

  /* ── plástico de consola (superficies) ─────────────────────────────── */
  --bg:        #C9C5B8;   /* plástico gris cálido — la página (cuerpo NES/SNES/GB) */
  --bg-2:      #D4D0C4;
  --card:      #EFEDE5;   /* plástico crema claro — tarjetas (cara Game Boy) */
  --card-2:    #F7F5EF;   /* plástico elevado */
  --inset:     #DAD6CA;   /* hueco hundido (ranura de cartucho) */
  --charcoal:  #2E2E32;   /* negro plástico (tapa NES) */
  --charcoal-2:#3A3A40;

  /* ── pantalla LCD Game Boy (DMG) ───────────────────────────────────── */
  --lcd-0:     #0F380F;   /* píxel más oscuro */
  --lcd-1:     #306230;
  --lcd-2:     #8BAC0F;
  --lcd-3:     #9BBC0F;   /* fondo LCD claro */
  --lcd-screen:#1A3A18;   /* fondo de pantalla apagada/encendida */

  /* ── acentos reales de las consolas ────────────────────────────────── */
  /* swappable "acento primario" — por defecto: índigo/violeta mando SNES */
  --cyan:      #6D5BD0;   /* (nombre heredado) acento primario · SNES violeta */
  --cyan-deep: #4F3FB0;
  --cyan-dim:  #5B4BC0;
  --green:     #4C7A2E;   /* verde LCD para valor/éxito (legible sobre claro) */
  --green-dim: #3C6322;
  --green-bright:#6FA82F;
  --magenta:   #C13E72;   /* botones A/B Game Boy */
  --magenta-d: #A2305C;
  --amber:     #D99524;   /* botón amarillo SNES / aviso */
  --amber-d:   #B5781A;
  --red:       #C5282E;   /* ROJO NINTENDO (NES) */
  --red-d:     #A21F25;

  /* consolas: paletas completas */
  --nes:        #C5282E;  --nes-2: #B7BBC2;
  --nes-surface:#2C2F36;  --nes-text: #E3E5EA;  --nes-border:#52313a;
  --snes:       #6D5BD0;  --snes-surface:#2A2442; --snes-text:#D7CCF6; --snes-border:#4a3d74;
  --snes-a: #C94B4F; --snes-b: #E8B53D; --snes-x: #4FA05E; --snes-y: #3E78C0;
  --gb:         #6FA82F;  --gb-mid: #4C7A2E; --gb-dark: #306230; --gb-deepest: #0F380F;
  --gb-surface: #16321A;  --gb-text: #B7D43C; --gb-border:#2E5A2C;

  /* text (oscuro sobre plástico claro) */
  --text:      #28282C;
  --text-2:    #54545A;
  --muted:     #7E7E78;
  --faint:     #A4A299;

  /* líneas / bordes (oscuras de baja opacidad sobre claro) */
  --line:      rgba(40,40,44,.16);
  --line-2:    rgba(40,40,44,.12);
  --line-soft: rgba(40,40,44,.08);

  /* radii — plástico de consola: esquinas suaves pero no exageradas */
  --r-sm: 7px;
  --r-md: 11px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-pill: 999px;

  /* sombras / biseles de plástico moldeado */
  --bevel-top:   inset 0 1px 0 rgba(255,255,255,.75);
  --bevel-bot:   inset 0 -2px 3px rgba(0,0,0,.06);
  --shadow-sm:   0 1px 2px rgba(40,40,44,.10), 0 4px 14px rgba(40,40,44,.07);
  --shadow:      0 2px 4px rgba(40,40,44,.12), 0 12px 34px rgba(40,40,44,.10);
  --shadow-screen: inset 0 2px 10px rgba(0,0,0,.55), inset 0 0 0 1px rgba(0,0,0,.4);

  --sidebar-w: 246px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

body[data-density="compact"] { --gap: 14px; --pad: 16px; }
body { --gap: 20px; --pad: 22px; }

/* ── scrollbars ─────────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #B0AC9F; border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: #9A968A; background-clip: padding-box; }

/* ── ambiente: plástico con relieve de rejillas de ventilación ─────────── */
.rt-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(1100px 620px at 82% -10%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(900px 560px at 4% 110%, rgba(109,91,208,.06), transparent 60%);
}
.rt-bg::before {
  content: ''; position: absolute; inset: 0; opacity: .5;
  /* ranuras de ventilación de plástico (líneas finas) */
  background-image: repeating-linear-gradient(180deg, rgba(0,0,0,.025) 0 1px, transparent 1px 7px);
  -webkit-mask-image: radial-gradient(1300px 900px at 70% 0%, #000 0%, transparent 78%);
          mask-image: radial-gradient(1300px 900px at 70% 0%, #000 0%, transparent 78%);
}

/* CRT/LCD scanlines (sobre pantallas) */
.scanlines { position: relative; }
.scanlines::after {
  content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0px, rgba(0,0,0,.18) 1px, transparent 1px, transparent 3px);
  opacity: .4; mix-blend-mode: multiply;
}

/* ── tipografía ─────────────────────────────────────────────────────── */
.eyebrow {
  font-family: var(--mono); font-weight: 700; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .18em; color: var(--cyan);
}
.eyebrow.dim { color: var(--muted); }
.pixel { font-family: var(--pixel); letter-spacing: 0; line-height: 1.7; }
.mono  { font-family: var(--mono); }
h1,h2,h3,h4 { margin: 0; font-weight: 700; letter-spacing: -.02em; color: var(--text); }

/* ── app shell ──────────────────────────────────────────────────────── */
#root { position: relative; z-index: 1; }
.shell { display: flex; min-height: 100vh; min-height: 100dvh; }

/* sidebar = tapa negra NES con banda roja */
.sidebar {
  width: var(--sidebar-w); flex-shrink: 0; position: sticky; top: 0; height: 100vh;
  background: linear-gradient(180deg, var(--charcoal-2), var(--charcoal));
  border-right: 2px solid #1c1c20; display: flex; flex-direction: column;
  padding: 18px 14px; gap: 4px; z-index: 5;
  box-shadow: inset -1px 0 0 rgba(255,255,255,.04);
}
/* banda roja Nintendo bajo la marca */
.brand { display: flex; align-items: center; gap: 11px; padding: 6px 8px 16px; position: relative; }
.brand::after {
  content: ''; position: absolute; left: 8px; right: 8px; bottom: 6px; height: 3px; border-radius: 2px;
  background: linear-gradient(90deg, var(--nes), #7a1418);
  box-shadow: 0 1px 3px rgba(197,40,46,.5);
}
.brand .cart {
  width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; position: relative;
  background: linear-gradient(150deg, #4a4a52, #232328);
  border: 1px solid #15151a; display: grid; place-items: center;
  box-shadow: var(--bevel-top), 0 2px 4px rgba(0,0,0,.4);
}
.brand .wm { display: flex; flex-direction: column; line-height: 1; }
.brand .wm b { font-family: var(--pixel); font-size: .6rem; color: #F2F0EA; letter-spacing: 0; }
.brand .wm small { font-size: .66rem; color: #9C9CA4; margin-top: 5px; letter-spacing: .02em; }

.nav-group { margin-top: 12px; padding: 0 8px 6px; }
.nav-group span { font-family: var(--mono); font-size: .58rem; letter-spacing: .16em; text-transform: uppercase; color: #6E6E78; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 9px;
  color: #C4C4CC; font-size: .9rem; font-weight: 500; cursor: pointer; border: 1px solid transparent;
  transition: background .15s, color .15s; user-select: none; position: relative;
}
.nav-item:hover { background: rgba(255,255,255,.06); color: #fff; }
.nav-item.active {
  background: linear-gradient(100deg, rgba(197,40,46,.26), rgba(197,40,46,.06));
  color: #fff; border-color: rgba(197,40,46,.4);
}
/* píldora roja a la izquierda del activo (botón encendido) */
.nav-item.active::before {
  content: ''; position: absolute; left: -14px; top: 50%; transform: translateY(-50%);
  width: 4px; height: 22px; border-radius: 0 3px 3px 0; background: var(--nes); box-shadow: 0 0 8px var(--nes);
}
.nav-item.active svg { color: #fff; }
.nav-item .badge { margin-left: auto; font-family: var(--mono); font-size: .64rem; font-weight: 800; color: #fff;
  background: var(--nes); padding: 1px 7px; border-radius: 999px; }

.sidebar .spacer { flex: 1; }
.side-card {
  margin: 6px 4px 4px; padding: 14px; border-radius: 12px; border: 1px solid rgba(255,255,255,.1);
  background: linear-gradient(160deg, rgba(109,91,208,.22), rgba(255,255,255,.04));
  box-shadow: var(--bevel-top);
}
.side-card .eyebrow { color: #C9BEF5; }
.side-card p { margin: 8px 0 10px; font-size: .8rem; color: #D8D8DE; line-height: 1.45; }

/* ── main column ────────────────────────────────────────────────────── */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 4; height: 62px; flex-shrink: 0;
  display: flex; align-items: center; gap: 16px; padding: 0 30px;
  background: rgba(239,237,229,.82); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
}
.search {
  flex: 1; max-width: 440px; display: flex; align-items: center; gap: 10px;
  background: var(--inset); border: 1px solid var(--line-2); border-radius: var(--r-pill);
  padding: 9px 16px; color: var(--muted); box-shadow: inset 0 1px 3px rgba(0,0,0,.07);
}
.search input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-family: var(--font); font-size: .88rem; }
.search input::placeholder { color: var(--faint); }

.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center;
  background: var(--card-2); border: 1px solid var(--line-2); color: var(--text-2); cursor: pointer;
  transition: border-color .15s, color .15s, transform .08s;
  box-shadow: var(--bevel-top), 0 1px 2px rgba(0,0,0,.1);
}
.icon-btn:hover { border-color: var(--line); color: var(--cyan); }
.icon-btn:active { transform: translateY(1px); }

.avatar {
  width: 38px; height: 38px; border-radius: var(--r-pill); flex-shrink: 0;
  background: linear-gradient(150deg, var(--cyan), var(--magenta)); 
  display: grid; place-items: center; font-weight: 800; font-size: .82rem; color: #fff;
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2);
}

.canvas { padding: 30px; max-width: 1240px; width: 100%; margin: 0 auto; }

/* ── botones (físicos, con bisel) ───────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-weight: 700; font-size: .92rem; cursor: pointer;
  padding: 11px 20px; border-radius: var(--r-md); border: 1px solid transparent;
  transition: transform .07s, box-shadow .12s, filter .15s; white-space: nowrap;
}
.btn:active { transform: translateY(2px); }
.btn-primary {
  background: linear-gradient(180deg, var(--cyan), var(--cyan-deep)); color: #fff;
  box-shadow: var(--bevel-top), 0 3px 0 var(--cyan-deep), 0 5px 10px rgba(79,63,176,.35);
}
.btn-primary:hover { filter: brightness(1.07); }
.btn-primary:active { box-shadow: var(--bevel-top), 0 1px 0 var(--cyan-deep), 0 2px 5px rgba(79,63,176,.3); }
.btn-green {
  background: linear-gradient(180deg, var(--green-bright), var(--green-dim)); color: #fff;
  box-shadow: var(--bevel-top), 0 3px 0 var(--green-dim), 0 5px 10px rgba(60,99,34,.32);
}
.btn-green:hover { filter: brightness(1.07); }
.btn-green:active { box-shadow: var(--bevel-top), 0 1px 0 var(--green-dim), 0 2px 5px rgba(60,99,34,.28); }
.btn-red {
  background: linear-gradient(180deg, var(--nes), var(--red-d)); color: #fff;
  box-shadow: var(--bevel-top), 0 3px 0 var(--red-d), 0 5px 10px rgba(162,31,37,.32);
}
.btn-red:hover { filter: brightness(1.07); }
.btn-ghost {
  background: var(--card-2); border-color: var(--line); color: var(--text);
  box-shadow: var(--bevel-top), 0 2px 0 rgba(40,40,44,.12);
}
.btn-ghost:hover { border-color: var(--cyan); color: var(--cyan); }
.btn-ghost:active { box-shadow: var(--bevel-top); }
.btn-sm { padding: 8px 14px; font-size: .82rem; border-radius: 9px; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; box-shadow: var(--bevel-top); filter: grayscale(.3); }

/* ── cards (plástico moldeado) ──────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: var(--bevel-top), var(--shadow-sm);
}
.card-pad { padding: var(--pad); }

/* ── pantalla LCD (Game Boy) — superficie reutilizable ─────────────────── */
.screen {
  background: linear-gradient(160deg, #213f1c, #16311a 70%, #0f2810);
  border-radius: 10px; position: relative; color: var(--lcd-3);
  box-shadow: var(--shadow-screen);
  border: 1px solid #0c220c;
}
.screen .px { font-family: var(--pixel); color: var(--lcd-3); text-shadow: 0 0 6px rgba(155,188,15,.45); }

/* ── chips / badges ─────────────────────────────────────────────────── */
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: var(--r-pill);
  font-size: .76rem; font-weight: 700; border: 1px solid transparent; white-space: nowrap;
}
.chip-cyan   { background: rgba(109,91,208,.14); color: var(--cyan);    border-color: rgba(109,91,208,.3); }
.chip-green  { background: rgba(76,122,46,.16);  color: var(--green);   border-color: rgba(76,122,46,.32); }
.chip-amber  { background: rgba(217,149,36,.16); color: var(--amber-d); border-color: rgba(217,149,36,.32); }
.chip-magenta{ background: rgba(193,62,114,.14); color: var(--magenta); border-color: rgba(193,62,114,.3); }
.chip-red    { background: rgba(197,40,46,.13);  color: var(--red);     border-color: rgba(197,40,46,.3); }
.chip-ghost  { background: var(--inset); color: var(--text-2); border-color: var(--line-2); }

/* etiqueta de cartucho por plataforma (label de extremo) */
.plat {
  font-family: var(--mono); font-weight: 800; font-size: .66rem; letter-spacing: .08em;
  padding: 4px 9px; border-radius: 5px; text-transform: uppercase; display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid; box-shadow: var(--bevel-top), 0 1px 2px rgba(0,0,0,.25);
}
.plat-nes  { background: var(--nes-surface);  color: var(--nes-text);  border-color: var(--nes-border); }
.plat-snes { background: var(--snes-surface); color: var(--snes-text); border-color: var(--snes-border); }
.plat-gb   { background: var(--gb-surface);   color: var(--gb-text);   border-color: var(--gb-border); font-family: var(--mono); }
.plat-md   { background: rgba(46,107,214,.14);  color: #7EA9EE; border-color: rgba(46,107,214,.42); }
.plat-sms  { background: rgba(211,58,63,.14);   color: #E88A8D; border-color: rgba(211,58,63,.42); }
.plat-gg   { background: rgba(23,163,154,.15);  color: #63D0C7; border-color: rgba(23,163,154,.42); }

/* ── Catálogo estilo Netflix ── */
.rt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(146px, 1fr)); gap: 18px 14px; }
@media (max-width: 640px) { .rt-grid { grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); gap: 14px 10px; } }
.rt-poster { transition: transform .18s ease; }
.rt-poster:hover { transform: translateY(-4px) scale(1.03); z-index: 2; }
.rt-poster:hover > div:first-child { box-shadow: 0 10px 26px rgba(0,0,0,.5); border-color: var(--cyan); }
.rt-chip { border: 1px solid var(--line-2); background: var(--well); color: var(--text-2); border-radius: 999px; padding: 7px 14px; font-size: .78rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; transition: all .15s; }
.rt-chip:hover { border-color: var(--muted); color: var(--text); }
.rt-chip.on { background: var(--cyan); border-color: var(--cyan); color: #04202b; }
.rt-chip.on-green { background: var(--green); border-color: var(--green); color: #04240f; }
.rt-skel { background: linear-gradient(100deg, var(--inset) 30%, var(--line-2) 50%, var(--inset) 70%); background-size: 200% 100%; animation: rtshimmer 1.3s infinite; }
@keyframes rtshimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.plat .cue { display: inline-flex; align-items: center; gap: 2px; }
.plat .cue i { width: 6px; height: 6px; border-radius: 50%; display: block; }
.plat-nes  .cue i { background: var(--nes); box-shadow: 0 0 4px var(--nes); }
.plat-gb   .cue i { width: 8px; height: 8px; border-radius: 2px; background: var(--gb); box-shadow: 0 0 5px rgba(155,188,15,.7); }

/* ── progress bar (hueco hundido) ───────────────────────────────────── */
.bar { height: 8px; border-radius: 999px; background: var(--inset); overflow: hidden; box-shadow: inset 0 1px 2px rgba(0,0,0,.14); }
.bar > i { display: block; height: 100%; border-radius: 999px; transition: width 1s cubic-bezier(.2,.8,.2,1); box-shadow: var(--bevel-top); }

/* ── stepper ────────────────────────────────────────────────────────── */
.stepper { display: flex; align-items: center; gap: 6px; }
.step { display: flex; align-items: center; gap: 9px; color: var(--muted); font-size: .84rem; font-weight: 600; }
.step .dot {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--line-2); font-family: var(--mono); font-size: .72rem; font-weight: 700; color: var(--muted);
  background: var(--card-2); box-shadow: var(--bevel-top);
}
.step.done .dot { background: var(--green); border-color: var(--green-dim); color: #fff; }
.step.active .dot { border-color: var(--cyan); color: var(--cyan); box-shadow: 0 0 0 4px rgba(109,91,208,.16); background: #fff; }
.step.active { color: var(--text); }
.step-line { width: 30px; height: 2px; background: var(--line-2); }
.step-line.done { background: var(--green); }

/* ── drop slots ─────────────────────────────────────────────────────── */
.slot {
  position: relative; border: 1.5px dashed rgba(109,91,208,.4); border-radius: var(--r-md);
  background: var(--inset); aspect-ratio: 4/3; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px; cursor: pointer; overflow: hidden;
  transition: border-color .15s, background .15s; box-shadow: inset 0 1px 3px rgba(0,0,0,.08);
}
.slot:hover { border-color: var(--cyan); background: #E6E2F2; }
.slot.filled { border-style: solid; border-color: var(--green); }
.slot .slot-label { font-size: .78rem; color: var(--text-2); font-weight: 600; text-align: center; padding: 0 8px; }
.slot .slot-hint  { font-size: .66rem; color: var(--faint); }
.slot .ph {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(160deg, #213f1c, #14300f);
}
.slot .filled-tick {
  position: absolute; top: 8px; right: 8px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--green); color: #fff; display: grid; place-items: center; box-shadow: 0 2px 6px rgba(0,0,0,.3);
}

/* ── segmented control (botones físicos) ───────────────────────────── */
.seg { display: inline-flex; background: var(--inset); border: 1px solid var(--line-2); border-radius: 10px; padding: 4px; gap: 4px; box-shadow: inset 0 1px 3px rgba(0,0,0,.08); }
.seg button {
  border: none; background: none; color: var(--text-2); font-family: var(--font); font-weight: 600; font-size: .84rem;
  padding: 7px 14px; border-radius: 7px; cursor: pointer; transition: background .12s, color .12s, box-shadow .12s;
}
.seg button.on { background: var(--card-2); color: var(--cyan); box-shadow: var(--bevel-top), 0 1px 3px rgba(0,0,0,.14); }

/* ── form field ─────────────────────────────────────────────────────── */
.field label { display: block; font-family: var(--mono); font-size: .64rem; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.field input, .field select {
  width: 100%; background: var(--card-2); border: 1px solid var(--line-2); border-radius: 10px;
  padding: 11px 13px; color: var(--text); font-family: var(--font); font-size: .9rem; outline: none;
  box-shadow: inset 0 1px 2px rgba(0,0,0,.06);
}
.field input:focus, .field select:focus { border-color: var(--cyan); box-shadow: inset 0 1px 2px rgba(0,0,0,.06), 0 0 0 3px rgba(109,91,208,.14); }

/* ── animaciones ────────────────────────────────────────────────────── */
@keyframes scanmove { 0% { top: -4%; } 100% { top: 104%; } }
@keyframes pulseDot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spin { animation: spin 1s linear infinite; }
.live-dot { animation: pulseDot 1.4s ease-in-out infinite; }

/* ── checklist rows ─────────────────────────────────────────────────── */
.check-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); }
.check-row:last-child { border-bottom: none; }
.check-ic { width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center; flex-shrink: 0; box-shadow: var(--bevel-top); }
.check-ic.ok   { background: rgba(76,122,46,.18);  color: var(--green); }
.check-ic.warn { background: rgba(217,149,36,.2);  color: var(--amber-d); }
.check-ic.bad  { background: rgba(197,40,46,.16);  color: var(--red); }

/* fade-in util — base visible, entrada sutil */
@keyframes fadeUp { from { transform: translateY(9px); } to { transform: none; } }
.fade-up { animation: fadeUp .45s cubic-bezier(.2,.8,.2,1) both; }

@keyframes spin3d { from { transform: rotateX(-12deg) rotateY(0deg); } to { transform: rotateX(-12deg) rotateY(360deg); } }

/* mini caja 3D en tarjetas de colección */
.rt-minibox { transform: rotateX(-15deg) rotateY(-26deg); transition: transform .45s cubic-bezier(.2,.8,.2,1); }
.card:hover .rt-minibox { transform: rotateX(-11deg) rotateY(-42deg); }

/* pestañas del informe */
.rt-tab { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; cursor: pointer;
  font-family: var(--font); font-weight: 700; font-size: .86rem; color: var(--muted);
  background: none; border: none; padding: 10px 16px; border-bottom: 2.5px solid transparent; transition: color .15s, border-color .15s; }
.rt-tab:hover { color: var(--text-2); }
.rt-tab.on { color: var(--cyan); border-bottom-color: var(--cyan); }
.rt-tab svg { opacity: .85; }

/* transición entre pantallas (solo desplazamiento; nunca deja el contenido invisible) */
@keyframes rtRoute { from { transform: translateY(7px); } to { transform: none; } }
.rt-route { animation: rtRoute .32s cubic-bezier(.2,.8,.2,1); }

/* pantalla de arranque (boot retro) */
.rt-boot { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
  background: radial-gradient(900px 600px at 50% 30%, #14112b, #0A1020 70%);
  animation: rtBootOut .5s ease 1.5s forwards; }
@keyframes rtBootOut { to { opacity: 0; visibility: hidden; } }
@keyframes rtBootBar { from { width: 4%; } to { width: 100%; } }
.rt-boot-bar { width: 4%; animation: rtBootBar 1.6s cubic-bezier(.4,.1,.2,1) forwards; }
@media (prefers-reduced-motion: reduce) { .rt-boot { animation-delay: .2s; } .rt-boot-bar { animation-duration: .4s; } }

/* tweak hooks */
body.no-scan .scanlines::after { display: none; }
body.no-deltas .price-delta { display: none; }

/* barra de navegación inferior (solo móvil) */
.mobile-nav { display: none; }

@media (max-width: 880px) {
  html, body { overflow-x: hidden; }
  .shell { flex-direction: column; }
  .sidebar { display: none; }
  /* deja hueco para la barra inferior + notch */
  .main { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
  .canvas { padding: 16px 14px; }
  .topbar {
    height: auto; min-height: 56px; padding: 0 14px;
    padding-top: env(safe-area-inset-top);
  }
  .topbar .search { max-width: none; }

  .mobile-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    background: linear-gradient(180deg, #2E2E32, #1f1f24);
    border-top: 2px solid #C5282E;
    padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
    box-shadow: 0 -6px 20px rgba(0,0,0,.32);
  }
  .mobile-nav-item {
    flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
    background: none; border: none; cursor: pointer; padding: 6px 2px; border-radius: 10px;
    color: #9C9CA4; font-family: var(--font); font-size: .6rem; font-weight: 600;
    min-height: 46px; -webkit-tap-highlight-color: transparent; transition: color .12s;
  }
  .mobile-nav-item svg { transition: transform .12s, color .12s; }
  .mobile-nav-item.active { color: #fff; }
  .mobile-nav-item.active svg { color: #ff5a5f; transform: translateY(-1px); }
  .mobile-nav-item:active { background: rgba(255,255,255,.06); }
}

/* apila rejillas de dos columnas y ajusta densidad en móvil */
@media (max-width: 760px) {
  .rt-2col { grid-template-columns: 1fr !important; }
  .stepper { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .stepper::-webkit-scrollbar { display: none; }
  .seg { flex-wrap: wrap; }
  .rt-tabs { -webkit-overflow-scrolling: touch; }
  .canvas h1 { font-size: clamp(1.35rem, 6.5vw, 2rem) !important; }
  .card-pad { padding: 16px !important; }
}

/* tabla del catálogo: en móvil oculta columnas secundarias para que quepa */
@media (max-width: 560px) {
  .cat-col-anio, .cat-col-pvp { display: none !important; }
  .cat-col-estado { width: 150px !important; }
  /* cabecera de la landing: cabe siempre en móviles pequeños (SE/6/7/8) */
  .rt-lnav { gap: 8px !important; }
  .rt-lnav-brand { font-size: .55rem !important; letter-spacing: 0 !important; }
  .rt-lnav-planes { display: none !important; }
  .rt-lnav .btn-sm { padding: 7px 11px; }
}
@media (max-width: 360px) {
  .rt-lnav-brand { display: none; } /* pantallas muy estrechas: solo icono */
}

/* ── Modal de ficha del catálogo ── */
.rt-modal-back { position: fixed; inset: 0; background: rgba(4,7,12,.72); z-index: 60; display: flex; align-items: flex-start; justify-content: center; padding: 24px 14px; overflow-y: auto; }
.rt-modal { position: relative; width: 100%; max-width: 720px; background: var(--bg); border: 1px solid var(--line-2); border-radius: 14px; padding: 20px; box-shadow: 0 20px 60px rgba(0,0,0,.5); animation: rtmodalin .16s ease; }
@keyframes rtmodalin { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.rt-modal-x { position: absolute; top: 10px; right: 10px; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--line-2); background: var(--well); color: var(--muted); cursor: pointer; display: grid; place-items: center; z-index: 2; }
.rt-modal-x:hover { color: var(--text); }
.rt-ficha-tabla { width: 100%; border-collapse: collapse; margin: 8px 0; }
.rt-ficha-tabla th, .rt-ficha-tabla td { border-bottom: 1px solid var(--line-2); padding: 7px 4px; font-size: .86rem; }
.rt-ficha-tabla th { text-align: left; color: var(--muted); font-weight: 500; }
.rt-ficha-tabla td { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); }
@media (max-width: 560px) {
  .rt-ficha-head { grid-template-columns: 110px 1fr !important; gap: 12px !important; }
}

/* Modo captura inmersivo: mientras la cámara está abierta (GuidedCamera añade
   la clase al <body>), oculta el header global y la barra de tabs para que la
   pantalla de captura sea a pantalla completa. Se restaura al cerrar. */
body.rt-capturing .topbar,
body.rt-capturing .mobile-nav { display: none !important; }

/* pulso blanco de "foto hecha" al disparar (feedback de captura manual) */
@keyframes rtShotFlash { from { opacity: .85; } to { opacity: 0; } }
.rt-shot-flash { animation: rtShotFlash .28s ease-out forwards; }

/* spinner del botón "Abriendo…" mientras se pide permiso de cámara */
.rt-spin { animation: spin .8s linear infinite; }