/* ============================================================
   RETROVAULT — Bootstrap 5 · Tema Azul/Gris limpio
   Tipografía: Raleway (display/títulos) + Inter (body)
   Paleta: blancos, grises fríos, azul primario
   ============================================================ */
:root {
  /* Colores base */
  --rv-bg:           #f4f6f9;
  --rv-surface:      #ffffff;
  --rv-surface-2:    #eef1f5;
  --rv-border:       #dde2ea;
  --rv-border-strong:#bcc4d0;

  /* Texto */
  --rv-text:         #1a202c;
  --rv-text-2:       #4a5568;
  --rv-text-3:       #8a97a8;

  /* Acento azul */
  --rv-accent:       #2563eb;
  --rv-accent-soft:  #eff6ff;
  --rv-accent-hover: #1d4ed8;

  /* Azul oscuro (secundario) */
  --rv-indigo:       #1e3a5f;
  --rv-indigo-soft:  #e8f0fe;

  /* Estados */
  --rv-success:      #16a34a;
  --rv-success-soft: #f0fdf4;
  --rv-error:        #dc2626;
  --rv-error-soft:   #fef2f2;
  --rv-warning:      #d97706;

  /* Sombras */
  --rv-shadow-sm:    0 1px 3px rgba(0,0,0,.06),0 1px 2px rgba(0,0,0,.04);
  --rv-shadow:       0 4px 16px rgba(0,0,0,.07),0 1px 4px rgba(0,0,0,.04);
  --rv-shadow-lg:    0 12px 40px rgba(0,0,0,.10),0 4px 12px rgba(0,0,0,.05);

  /* Tipografía */
  --font-display:    'Raleway', 'Inter', system-ui, sans-serif;
  --font-body:       'Inter', system-ui, sans-serif;

  /* Bootstrap overrides */
  --bs-body-font-family: var(--font-body);
  --bs-body-bg:          var(--rv-bg);
  --bs-body-color:       var(--rv-text);
  --bs-border-color:     var(--rv-border);
  --bs-link-color:       var(--rv-accent);
  --bs-link-hover-color: var(--rv-accent-hover);
}

/* ── Google Fonts import ────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Raleway:wght@600;700;800&display=swap');

/* ── Base ───────────────────────────────────────────────────── */
body { background-color:var(--rv-bg);color:var(--rv-text);font-size:15px;line-height:1.6;min-height:100vh;display:flex;flex-direction:column;font-family:var(--font-body); }
a { text-decoration:none;color:inherit; }
img { display:block;max-width:100%; }
main { flex:1; }

/* ── Navbar ─────────────────────────────────────────────────── */
.rv-navbar { background:rgba(255,255,255,.95)!important;backdrop-filter:blur(12px);border-bottom:1px solid var(--rv-border);min-height:64px; }
.rv-navbar .navbar-brand { font-family:var(--font-display);font-size:19px;font-weight:700;letter-spacing:-.2px;color:var(--rv-text); }
.rv-navbar .navbar-brand .logo-icon { color:var(--rv-accent); }
.rv-navbar .nav-link { font-size:14px;font-weight:500;color:var(--rv-text-2)!important;border-radius:6px;padding:6px 14px!important;transition:background .15s,color .15s; }
.rv-navbar .nav-link:hover,.rv-navbar .nav-link.active { background:var(--rv-surface-2);color:var(--rv-text)!important; }
.rv-navbar .navbar-toggler { border-color:var(--rv-border); }
.rv-navbar .navbar-toggler:focus { box-shadow:none; }

/* ── Botones ────────────────────────────────────────────────── */
.btn { font-weight:600;font-size:14px; }
.btn-rv-primary { background:var(--rv-accent);color:#fff;border:none;border-radius:7px; }
.btn-rv-primary:hover,.btn-rv-primary:focus { background:var(--rv-accent-hover);color:#fff; }
.btn-rv-secondary { background:var(--rv-surface);color:var(--rv-text);border:1px solid var(--rv-border-strong);border-radius:7px; }
.btn-rv-secondary:hover { background:var(--rv-surface-2);color:var(--rv-text);border-color:var(--rv-border-strong); }
.btn-rv-ghost { background:transparent;color:var(--rv-text-2);border:none;border-radius:7px; }
.btn-rv-ghost:hover { background:var(--rv-surface-2);color:var(--rv-text); }
.btn-rv-indigo { background:var(--rv-indigo);color:#fff;border:none;border-radius:7px; }
.btn-rv-indigo:hover,.btn-rv-indigo:focus { background:#162d4a;color:#fff; }

/* ── Form controls ──────────────────────────────────────────── */
.form-control,.form-select { background-color:var(--rv-surface);border-color:var(--rv-border);color:var(--rv-text);font-family:var(--font-body);font-size:14px;border-radius:7px; }
.form-control:focus,.form-select:focus { background-color:var(--rv-surface);border-color:var(--rv-accent);box-shadow:0 0 0 3px rgba(37,99,235,.12);color:var(--rv-text); }
.form-control.is-invalid,.form-control.error { border-color:var(--rv-error); }
.invalid-feedback,.form-error { color:var(--rv-error);font-size:12px; }
.input-group-text { background:var(--rv-surface-2);border-color:var(--rv-border);color:var(--rv-text-3); }
.form-label { font-size:13px;font-weight:600;color:var(--rv-text-2); }
.filter-label { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.6px;color:var(--rv-text-3);display:block;margin-bottom:4px; }
.form-text { font-size:11px;color:var(--rv-text-3); }

/* ── Hero ───────────────────────────────────────────────────── */
.rv-hero { padding:56px 0 40px;border-bottom:1px solid var(--rv-border);margin-bottom:48px; }
.rv-hero h1 { font-family:var(--font-display);font-size:clamp(30px,5vw,40px);font-weight:800;line-height:1.1;letter-spacing:-.5px;margin-bottom:12px; }
.rv-hero h1 em { font-style:normal;color:var(--rv-accent); }
.rv-hero p { font-size:16px;color:var(--rv-text-2);max-width:600px; }

/* ── Section headers ────────────────────────────────────────── */
.section-title { font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:-.1px; }
.section-link { font-size:13px;font-weight:600;color:var(--rv-accent); }
.section-link:hover { text-decoration:underline;color:var(--rv-accent-hover); }

/* ── Game cards ─────────────────────────────────────────────── */
.game-card { background:var(--rv-surface);border:1px solid var(--rv-border);border-radius:10px;overflow:hidden;box-shadow:var(--rv-shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;display:flex;flex-direction:column;height:100%;color:inherit;text-decoration:none; }
.game-card:hover { transform:translateY(-3px);box-shadow:var(--rv-shadow);border-color:var(--rv-accent);color:inherit; }
.game-card-cover { aspect-ratio:3/4;background:var(--rv-surface-2);overflow:hidden; }
.game-card-cover img { width:100%;height:100%;object-fit:cover;transition:transform .3s; }
.game-card:hover .game-card-cover img { transform:scale(1.04); }
.game-card-cover-placeholder { width:100%;height:100%;display:flex;align-items:center;justify-content:center;font-size:40px;color:var(--rv-border-strong); }
.game-card-body { padding:12px 14px;flex:1;display:flex;flex-direction:column; }
.game-card-title { font-family:var(--font-display);font-size:14px;font-weight:700;line-height:1.3;margin-bottom:6px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden; }
.game-card-meta { font-size:11px;color:var(--rv-text-3);display:flex;gap:8px;flex-wrap:wrap;margin-top:auto; }
.game-card-rating { font-size:11px;font-weight:600;color:var(--rv-warning); }

/* ── Chips / Tags ───────────────────────────────────────────── */
.chip { display:inline-flex;align-items:center;padding:3px 10px;border-radius:20px;font-size:11px;font-weight:600;letter-spacing:.2px;background:var(--rv-surface-2);color:var(--rv-text-2);border:1px solid var(--rv-border);text-decoration:none; }
.chip:hover { color:var(--rv-text-2); }
.chip-accent  { background:var(--rv-accent-soft); color:var(--rv-accent);      border-color:transparent; }
.chip-indigo  { background:var(--rv-indigo-soft); color:var(--rv-indigo);      border-color:transparent; }
.chip-success { background:var(--rv-success-soft);color:var(--rv-success);     border-color:transparent; }

/* ── Filters bar ────────────────────────────────────────────── */
.filters-bar { background:var(--rv-surface);border:1px solid var(--rv-border);border-radius:10px;padding:20px;margin-bottom:28px;box-shadow:var(--rv-shadow-sm); }

/* ── Game detail ────────────────────────────────────────────── */
.game-detail-title { font-family:var(--font-display);font-size:clamp(22px,4vw,36px);font-weight:800;line-height:1.15;letter-spacing:-.3px; }
.game-detail-cover img { border-radius:10px;box-shadow:var(--rv-shadow-lg);width:100%; }
.game-detail-cover-placeholder { aspect-ratio:3/4;background:var(--rv-surface-2);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:64px; }
.game-detail-desc { font-size:15px;color:var(--rv-text-2);line-height:1.8;border-left:3px solid var(--rv-accent);padding-left:20px; }
.meta-label { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.8px;color:var(--rv-text-3); }

/* ── Stars ──────────────────────────────────────────────────── */
.star { font-size:18px;color:var(--rv-border-strong); }
.star.filled { color:#f59e0b; }
.star-btn { font-size:28px;background:none;border:none;cursor:pointer;color:var(--rv-border-strong);transition:color .1s,transform .1s;line-height:1;padding:0; }
.star-btn:hover,.star-btn.active { color:#f59e0b;transform:scale(1.1); }

/* ── Action box ─────────────────────────────────────────────── */
.action-box { background:var(--rv-surface);border:1px solid var(--rv-border);border-radius:10px;padding:24px;box-shadow:var(--rv-shadow-sm); }
.action-box h3 { font-family:var(--font-display);font-size:16px;font-weight:700;margin-bottom:12px; }
.global-rating-score { font-family:var(--font-display);font-size:36px;font-weight:800;color:var(--rv-accent);line-height:1; }

/* ── Platform cards ─────────────────────────────────────────── */
.platform-card { background:var(--rv-surface);border:1px solid var(--rv-border);border-radius:10px;padding:24px 20px;text-align:center;box-shadow:var(--rv-shadow-sm);transition:transform .2s,box-shadow .2s,border-color .2s;color:inherit;display:block;text-decoration:none; }
.platform-card:hover { transform:translateY(-2px);box-shadow:var(--rv-shadow);border-color:var(--rv-accent);color:inherit; }
.platform-card-icon { font-size:32px;margin-bottom:10px; }
.platform-card-name { font-family:var(--font-display);font-size:14px;font-weight:700; }
.platform-card-maker { font-size:11px;color:var(--rv-text-3);margin-top:3px; }

/* ── Auth ───────────────────────────────────────────────────── */
.auth-card { background:var(--rv-surface);border:1px solid var(--rv-border);border-radius:12px;padding:40px;box-shadow:var(--rv-shadow); }
.auth-card h2 { font-family:var(--font-display);font-size:26px;font-weight:800;margin-bottom:8px; }
.auth-sub { color:var(--rv-text-2);font-size:14px;margin-bottom:28px; }
.auth-switch { margin-top:20px;text-align:center;font-size:13px;color:var(--rv-text-2); }
.auth-switch a { color:var(--rv-accent);font-weight:600; }
.auth-switch a:hover { text-decoration:underline; }

/* ── Breadcrumb ─────────────────────────────────────────────── */
.rv-breadcrumb { display:flex;align-items:center;gap:6px;padding:20px 0 8px;font-size:13px;color:var(--rv-text-3); }
.rv-breadcrumb a { color:var(--rv-text-2); }
.rv-breadcrumb a:hover { color:var(--rv-accent); }
.rv-breadcrumb span { color:var(--rv-border-strong); }

/* ── Pagination ─────────────────────────────────────────────── */
.pagination { padding:32px 0 48px; }
.page-link { color:var(--rv-text-2);background-color:var(--rv-surface);border-color:var(--rv-border);font-size:14px;font-weight:600;border-radius:7px!important;margin:0 2px; }
.page-link:hover { color:var(--rv-accent);background-color:var(--rv-surface-2);border-color:var(--rv-border); }
.page-item.active .page-link { background-color:var(--rv-accent);border-color:var(--rv-accent);color:#fff; }
.page-item.disabled .page-link { opacity:.4; }

/* ── Toast ──────────────────────────────────────────────────── */
.rv-toast { position:fixed;bottom:24px;right:24px;z-index:1100;background:var(--rv-indigo);color:#fff;padding:12px 20px;border-radius:8px;font-size:14px;font-weight:500;box-shadow:var(--rv-shadow-lg);opacity:0;transform:translateY(8px);transition:all .25s;pointer-events:none;max-width:320px; }
.rv-toast.show { opacity:1;transform:translateY(0); }
.rv-toast.success { background:var(--rv-success); }
.rv-toast.error   { background:var(--rv-error); }

/* ── Flash ──────────────────────────────────────────────────── */
.flash-message { position:fixed;top:64px;left:0;right:0;z-index:200;padding:14px 24px;text-align:center;font-size:14px;font-weight:500; }
.flash-success { background:var(--rv-success);color:#fff; }
.flash-error   { background:var(--rv-error);color:#fff; }

/* ── RV Card ────────────────────────────────────────────────── */
.rv-card { background:var(--rv-surface);border:1px solid var(--rv-border)!important;border-radius:10px!important;box-shadow:var(--rv-shadow-sm); }

/* ── Admin table ────────────────────────────────────────────── */
.rv-table { border-color:var(--rv-border); }
.rv-table thead th { background:var(--rv-surface-2);font-size:11px;text-transform:uppercase;letter-spacing:.8px;color:var(--rv-text-3);font-weight:600;border-color:var(--rv-border);padding:12px 16px; }
.rv-table td { border-color:var(--rv-border);vertical-align:middle;padding:12px 16px; }
.rv-table tbody tr:hover td { background:var(--rv-bg); }

/* ── Admin tabs ─────────────────────────────────────────────── */
.rv-tabs { border-bottom:2px solid var(--rv-border);margin-bottom:28px;gap:0; }
.rv-tabs .nav-link { color:var(--rv-text-2)!important;border:none!important;border-bottom:2px solid transparent!important;border-radius:0!important;margin-bottom:-2px;padding:10px 20px!important;font-size:14px;font-weight:500;background:none!important;transition:color .15s,border-color .15s; }
.rv-tabs .nav-link:hover { color:var(--rv-text)!important; }
.rv-tabs .nav-link.active { color:var(--rv-accent)!important;border-bottom-color:var(--rv-accent)!important; }

/* ── Collection stats ───────────────────────────────────────── */
.collection-stat .num { font-family:var(--font-display);font-size:28px;font-weight:800;color:var(--rv-accent);line-height:1; }
.collection-stat .label { font-size:11px;color:var(--rv-text-3);text-transform:uppercase;letter-spacing:.6px; }

/* ── Empty state ────────────────────────────────────────────── */
.empty-state { text-align:center;padding:64px 20px;color:var(--rv-text-3); }
.empty-state-icon { font-size:48px;margin-bottom:16px; }
.empty-state h3 { font-family:var(--font-display);font-size:20px;color:var(--rv-text-2);margin-bottom:8px;font-weight:700; }
.empty-state p { font-size:14px; }

/* ── Footer ─────────────────────────────────────────────────── */
.site-footer { border-top:1px solid var(--rv-border);padding:20px;text-align:center;font-size:13px;color:var(--rv-text-3);margin-top:auto; }
.site-footer a { color:var(--rv-accent); }
.site-footer a:hover { text-decoration:underline; }

/* ── Page animation ─────────────────────────────────────────── */
.page-enter { animation:pageIn .25s ease both; }
@keyframes pageIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── Responsive ─────────────────────────────────────────────── */
@media(max-width:576px){
  .rv-hero{padding:32px 0 24px}
  .rv-hero h1{font-size:26px}
  .auth-card{padding:28px 20px}
  .action-box{padding:18px}
  .filters-bar{padding:14px}
}