/* ══════════════════════════════════════════════════════
   MI ÁLBUM PANINI — FIFA WORLD CUP 2026™
   Diseño inspirado en el branding oficial FIFA 2026
══════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap');

:root {
  /* Base */
  --bg:      #0d0d0d;
  --bg2:     #161616;
  --bg3:     #1f1f1f;
  --bg4:     #2a2a2a;
  --border:  rgba(255,255,255,0.08);
  --fg:      #f0f0f0;
  --muted:   #888;

  /* FIFA 2026 palette */
  --wine:    #7B1818;
  --wine2:   #A52020;
  --yellow:  #f5c518;
  --yellow2: #e6a800;
  --got:     #16a34a;
  --rep:     #c2410c;
  --empty:   #1a1a1a;

  /* Rainbow accents */
  --r1: #e63030;   /* red */
  --r2: #e67e00;   /* orange */
  --r3: #c8e000;   /* lime */
  --r4: #00c8a0;   /* teal */
  --r5: #007be6;   /* blue */
  --r6: #7b2fbe;   /* purple */
  --r7: #e630a0;   /* pink */

  --rainbow: linear-gradient(90deg,
    var(--r1),var(--r2),var(--r3),var(--r4),
    var(--r5),var(--r6),var(--r7));

  --radius: 12px;
}

*,*::before,*::after { box-sizing:border-box; margin:0; padding:0 }

body {
  font-family: Inter, system-ui, Arial, sans-serif;
  background: var(--bg);
  color: var(--fg);
  min-height: 100vh;
}

/* ══ Navbar ══════════════════════════════════════════ */
.navbar {
  background: #111;
  border-bottom: none;
  padding: 0 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: sticky;
  top: 0;
  z-index: 50;
  height: 64px;
}
/* Rainbow stripe debajo del navbar */
.navbar::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rainbow);
}

.navbar-brand { display:flex; align-items:center; gap:.85rem }

/* ── Logo FIFA 2026 ── */
.brand-logo {
  position: relative;
  width: 52px; height: 52px;
  flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}
.brand-logo-bg {
  position: absolute; inset: 0;
  border-radius: 10px;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.brand-26-left {
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 2.2rem; font-weight: 900;
  color: var(--wine);
  position: absolute; left: 2px; top: 50%;
  transform: translateY(-54%);
  line-height: 1; letter-spacing: -.06em;
}
.brand-26-right {
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 2.2rem; font-weight: 900;
  color: var(--wine);
  position: absolute; right: 2px; bottom: -2px;
  line-height: 1; letter-spacing: -.06em;
}
.brand-trophy {
  font-size: 1.7rem;
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -52%);
  z-index: 2;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
}
.brand-fifa-label {
  position: absolute; bottom: 1px; left: 50%;
  transform: translateX(-50%);
  font-size: .38rem; font-weight: 900;
  letter-spacing: .08em; color: #111;
  z-index: 2;
}

.brand-title {
  font-size: .95rem; font-weight: 900;
  letter-spacing: .06em;
  background: var(--rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.brand-sub { font-size: .6rem; color: var(--muted); letter-spacing: .1em }

.navbar-links { flex:1; display:flex; gap:.5rem }
.nav-link {
  background: var(--wine);
  color: #fff; border: none; border-radius: 6px;
  padding: .38rem .9rem; font-size: .85rem;
  font-weight: 700; cursor: pointer;
}
.btn-share {
  margin-left: auto;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg); border-radius: 6px;
  padding: .38rem .85rem; font-size: .82rem;
  cursor: pointer; transition: background .2s;
}
.btn-share:hover { background: var(--bg3) }

/* ══ Rainbow header strip ════════════════════════════ */
.rainbow-hero {
  background: var(--wine);
  padding: .55rem 1.5rem;
  display: flex; align-items: center; gap: 1rem;
  position: relative; overflow: hidden;
}
.rainbow-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rainbow);
}
.rh-text {
  font-size: .78rem; font-weight: 700;
  color: rgba(255,255,255,.85);
  letter-spacing: .05em;
}
.rh-flags { font-size: 1rem; letter-spacing: .1em }

/* ══ Layout ══════════════════════════════════════════ */
.layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 1.25rem;
  max-width: 1300px;
  margin: 1.25rem auto;
  padding: 0 1.25rem;
}
@media(max-width:900px){ .layout{grid-template-columns:1fr} .sidebar{order:2} }

/* ══ Sidebar ══════════════════════════════════════════ */
.sidebar { display:flex; flex-direction:column; gap:.85rem }

.card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1rem;
  position: relative;
  overflow: hidden;
}
/* Franja de color arriba de cada card */
.card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rainbow);
}

.card-label {
  font-size: .68rem; font-weight: 700;
  color: var(--muted);
  letter-spacing: .1em;
  margin-bottom: .75rem;
}

/* ── Countdown ── */
.countdown-card{}
.countdown-grid {
  display: grid; grid-template-columns: repeat(4,1fr);
  gap: .4rem; margin-bottom: .6rem;
}
.cd-unit {
  background: var(--bg3);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 8px; text-align: center;
  padding: .55rem .25rem;
  position: relative; overflow: hidden;
}
.cd-unit::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--rainbow);
}
.cd-unit span {
  display: block; font-size: 1.6rem;
  font-weight: 900; color: var(--fg);
  line-height: 1;
}
.cd-unit small { font-size:.6rem; color:var(--muted); letter-spacing:.05em }
.cd-info { font-size:.72rem; color:var(--muted); text-align:center }

/* ── Album card ── */
.album-card{}
.big-pct {
  font-size: 3rem; font-weight: 900;
  text-align: center; line-height: 1; margin: .25rem 0;
  background: var(--rainbow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pct-label { font-size:.75rem; color:var(--muted); text-align:center; margin-bottom:.65rem }
.prog-global {
  background: var(--bg4); border-radius: 99px;
  height: 8px; overflow: hidden; margin-bottom: .9rem;
}
#prog-bar {
  height: 100%;
  background: var(--rainbow);
  border-radius: 99px; transition: width .4s;
}
.stats-row { display:grid; grid-template-columns:repeat(3,1fr); gap:.4rem; margin-bottom:.6rem }
.stat {
  background: var(--bg3); border-radius: 8px;
  padding: .6rem .4rem; text-align: center;
  border: 1px solid transparent;
  transition: border-color .2s;
}
.stat:hover { border-color: rgba(255,255,255,.1) }
.stat strong { display:block; font-size:1.25rem; font-weight:800 }
.stat small   { font-size:.68rem; color:var(--muted) }
.stat-icon    { font-size:.7rem; display:block; margin-bottom:.1rem }
.stat.got  strong { color:#4ade80 }
.stat.miss strong { color:#f87171 }
.stat.rep  strong { color:#fb923c }

.stats-note { font-size:.72rem; color:var(--muted); text-align:center; margin-bottom:.25rem }
.actions-col { display:grid; grid-template-columns:1fr 1fr; gap:.5rem }

.btn-outline {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--fg); border-radius: 8px;
  padding: .45rem .5rem; font-size: .75rem;
  cursor: pointer; transition: all .18s;
  white-space: nowrap;
}
.btn-outline:hover { background:var(--bg4); border-color:rgba(255,255,255,.2) }
.btn-outline.full { grid-column:1/-1; width:100% }

.btn-yellow {
  background: var(--yellow); color: #000;
  border: none; border-radius: 8px;
  padding: .45rem .5rem; font-size: .75rem;
  font-weight: 700; cursor: pointer;
  transition: filter .2s;
}
.btn-yellow:hover { filter:brightness(1.1) }

/* Specials */
.specials-card{}
.specials-header {
  display:flex; justify-content:space-between; align-items:center;
  font-size: .82rem; font-weight: 600; margin-bottom: .65rem;
}
.spec-info { font-size:.72rem; color:var(--muted) }

/* Reset */
.btn-reset {
  background: transparent;
  border: 1px solid rgba(239,68,68,.3);
  color: #f87171; border-radius: 8px;
  padding: .5rem; font-size: .78rem;
  cursor: pointer; transition: background .2s; text-align: center;
}
.btn-reset:hover { background:rgba(239,68,68,.1) }

/* ══ Main content ════════════════════════════════════ */
.main-content { min-width:0 }

.album-title {
  font-size: 1.9rem; font-weight: 900;
  letter-spacing: .04em; margin-bottom: .2rem;
}
.album-title span {
  background: var(--rainbow);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent;
}
.album-sub { font-size:.82rem; color:var(--muted); margin-bottom:1rem }

/* ── Filtros ── */
.filters {
  display: flex; flex-wrap: wrap;
  gap: .6rem; align-items: center; margin-bottom: .75rem;
}
.search-wrap { position:relative; flex-shrink:0 }
.search-icon {
  position:absolute; left:.6rem; top:50%;
  transform:translateY(-50%);
  font-size:.85rem; pointer-events:none;
}
.search-box {
  padding:.4rem .75rem .4rem 2rem;
  background:var(--bg2); border:1px solid var(--border);
  border-radius:8px; color:var(--fg); font-size:.82rem; width:180px;
  transition:border-color .2s;
}
.search-box:focus { outline:none; border-color:var(--r5) }
.search-box::placeholder { color:var(--muted) }

.filter-status { display:flex; gap:.3rem; flex-wrap:wrap }
.fs-btn {
  padding:.35rem .7rem; border-radius:8px;
  border:1px solid var(--border);
  background:transparent; color:var(--muted);
  font-size:.78rem; cursor:pointer;
  transition:all .18s; white-space:nowrap;
}
.fs-btn:hover { border-color:var(--r5); color:#fff }
.fs-btn.active {
  background: var(--wine); color:#fff;
  border-color:var(--wine); font-weight:700;
}

.filter-conf {
  background:var(--bg2); border:1px solid var(--border);
  color:var(--fg); border-radius:8px;
  padding:.38rem .65rem; font-size:.78rem; cursor:pointer;
}

/* ── Nav grupos ── */
.group-nav { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.9rem }
.nav-btn {
  padding:.28rem .55rem; border-radius:6px;
  border:1px solid var(--border);
  background:transparent; color:var(--muted);
  font-size:.75rem; cursor:pointer; transition:all .18s;
}
.nav-btn:hover { background:var(--bg3); color:var(--fg) }
.nav-btn.active {
  background: var(--wine); color:#fff;
  border-color:var(--wine); font-weight:700;
}

/* ── Grid países ── */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill,minmax(185px,1fr));
  gap: .75rem;
}

.country-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: .9rem;
  cursor: pointer;
  transition: transform .18s, border-color .18s, box-shadow .18s;
  position: relative; overflow: hidden;
}
/* Top border rainbow on hover */
.country-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--rainbow);
  opacity: 0; transition: opacity .2s;
}
.country-card:hover::before { opacity:1 }
.country-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,.2);
  box-shadow: 0 8px 24px rgba(0,0,0,.4);
}

.card-top { display:flex; align-items:center; gap:.5rem; margin-bottom:.55rem }
.flag { font-size:1.6rem; line-height:1; flex-shrink:0 }
.country-name {
  font-size:.88rem; font-weight:700;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.group-badge {
  display:inline-block; font-size:.6rem; font-weight:700;
  padding:.12rem .38rem; border-radius:99px;
  margin-top:.15rem; color:#fff; letter-spacing:.04em;
}
.card-progress { margin-bottom:.3rem }
.prog-wrap {
  background:var(--bg4); border-radius:99px;
  height:5px; overflow:hidden; margin-bottom:.35rem;
}
.prog-fill {
  height:100%;
  background: var(--rainbow);
  border-radius:99px; transition:width .3s;
  min-width:2px;
}
.card-stats { display:flex; justify-content:space-between; font-size:.7rem; color:var(--muted) }
.card-pct { font-weight:700; color:var(--yellow) }

.rep-badge {
  display:inline-flex; align-items:center; gap:.2rem;
  font-size:.62rem; font-weight:700;
  color:#fb923c; background:rgba(194,65,12,.2);
  border-radius:99px; padding:.1rem .38rem; margin-left:.3rem;
}

.empty-msg { color:var(--muted); padding:2rem; text-align:center; grid-column:1/-1 }

/* ── Colores badge por grupo (paleta FIFA rainbow) ── */
.gb-A{background:#e63030}.gb-B{background:#1d4ed8}.gb-C{background:#0f766e}
.gb-D{background:#e67e00}.gb-E{background:#be185d}.gb-F{background:#0369a1}
.gb-G{background:#7b2fbe}.gb-H{background:#c8a000}.gb-I{background:#c2410c}
.gb-J{background:#0e7490}.gb-K{background:#15803d}.gb-L{background:#be123c}

/* ══ Modal ════════════════════════════════════════════ */
.modal {
  position:fixed; inset:0;
  background:rgba(0,0,0,.88);
  display:flex; align-items:center; justify-content:center;
  z-index:100; padding:1rem;
  backdrop-filter:blur(4px);
}
.modal.hidden { display:none }

.modal-inner {
  background:var(--bg2);
  border:1px solid rgba(255,255,255,.1);
  border-radius:16px;
  width:100%; max-width:860px; max-height:90vh;
  display:flex; flex-direction:column;
  overflow:hidden;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  position:relative;
}
.modal-inner::before {
  content:'';
  position:absolute; top:0; left:0; right:0;
  height:3px;
  background:var(--rainbow);
  z-index:1;
}

.modal-head {
  display:flex; align-items:flex-start;
  justify-content:space-between;
  padding:1rem 1.25rem;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.modal-head h2 { font-size:1.05rem; font-weight:800 }
.modal-sub { font-size:.75rem; color:var(--muted); margin-top:.2rem }
.modal-counter { font-size:.85rem; color:var(--yellow); font-weight:700 }
.close-btn {
  background:none; border:none; color:var(--muted);
  font-size:1.3rem; cursor:pointer;
  padding:0 .2rem; line-height:1;
  transition:color .15s;
}
.close-btn:hover { color:var(--fg) }

.hint {
  font-size:.72rem; color:var(--muted);
  padding:.45rem 1.25rem; flex-shrink:0;
  border-bottom:1px solid var(--border);
}

.modal-grid {
  overflow-y:auto; padding:.75rem 1rem;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:.55rem;
}

/* ══ Sticker tile ════════════════════════════════════ */
.sticker {
  background:var(--empty);
  border:1.5px solid rgba(255,255,255,.08);
  border-radius:10px; padding:.55rem .45rem;
  text-align:center; cursor:pointer;
  transition:transform .12s, border-color .15s, background .15s;
  user-select:none;
  position:relative;
}
.sticker:hover { transform:scale(1.05); border-color:var(--r5) }
.sticker.got  { background:#052e16; border-color:#16a34a }
.sticker.rep  { background:#2d0e00; border-color:#c2410c }

.st-num   { font-size:.62rem; color:var(--muted); margin-bottom:.1rem }
.st-code  { font-size:.72rem; font-weight:700; margin-bottom:.18rem }
.st-icon  { font-size:1.1rem; margin:.12rem 0 }
.st-label {
  font-size:.66rem; color:var(--muted);
  min-height:1.8rem; line-height:1.3; margin-bottom:.25rem;
  overflow:hidden; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; line-clamp:2;
}
.st-state { font-size:.65rem; font-weight:600; color:#60a5fa }
.sticker.got .st-state { color:#4ade80 }
.sticker.rep .st-state { color:#fb923c }

/* ── Badge numérico repetidas en sticker ── */
.st-rep-badge {
  position:absolute; top:-7px; right:-7px;
  min-width:22px; height:22px;
  background:var(--rep); color:#fff;
  border-radius:99px; font-size:.68rem; font-weight:900;
  display:flex; align-items:center; justify-content:center;
  border:2px solid var(--bg2); padding:0 4px;
  box-shadow:0 2px 6px rgba(0,0,0,.5);
  z-index:2; line-height:1;
}

/* ══ Animaciones stamp ════════════════════════════════ */
@keyframes stamp {
  0%   { transform:scale(1.4) rotate(-8deg); opacity:.5 }
  55%  { transform:scale(.92) rotate(3deg);  opacity:1 }
  100% { transform:scale(1)   rotate(0deg);  opacity:1 }
}
@keyframes stamp-rep {
  0%   { transform:scale(1.4) rotate(8deg);  opacity:.5 }
  55%  { transform:scale(.92) rotate(-3deg); opacity:1 }
  100% { transform:scale(1)   rotate(0deg);  opacity:1 }
}
.sticker.stamp-got { animation:stamp     .32s cubic-bezier(.22,.61,.36,1) both }
.sticker.stamp-rep { animation:stamp-rep .32s cubic-bezier(.22,.61,.36,1) both }

/* ══ Modal estadísticas ══════════════════════════════ */
.stats-summary {
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:.6rem; margin-bottom:1rem;
}
.ss-box {
  background:var(--bg3); border-radius:10px;
  padding:.75rem; text-align:center;
  border:1px solid var(--border);
  position:relative; overflow:hidden;
}
.ss-box::before {
  content:''; position:absolute; top:0; left:0; right:0;
  height:2px; background:var(--rainbow);
}
.ss-box strong { display:block; font-size:1.6rem; font-weight:900; color:var(--yellow) }
.ss-box small  { font-size:.68rem; color:var(--muted) }

.stats-table { width:100%; border-collapse:collapse; font-size:.8rem }
.stats-table th {
  text-align:left; color:var(--muted); font-size:.67rem;
  letter-spacing:.06em; padding:.4rem .5rem;
  border-bottom:1px solid var(--border);
}
.stats-table td {
  padding:.4rem .5rem;
  border-bottom:1px solid rgba(255,255,255,.04);
  vertical-align:middle;
}
.stats-table tr:hover td { background:var(--bg3) }
.mini-bar-wrap {
  background:var(--bg4); border-radius:99px;
  height:5px; width:80px; overflow:hidden;
  display:inline-block; vertical-align:middle; margin-left:.4rem;
}
.mini-bar-fill {
  height:100%; border-radius:99px;
  background:var(--rainbow);
}
.pct-cell { color:var(--yellow); font-weight:700 }
.complete-row td { color:#4ade80 }

/* ══ Modal repetidas ══════════════════════════════════ */
.rep-country-block { margin-bottom:1rem }
.rep-country-title {
  font-size:.83rem; font-weight:700; margin-bottom:.4rem;
  display:flex; align-items:center; gap:.4rem;
}
.rep-sticker-list { display:flex; flex-wrap:wrap; gap:.35rem }
.rep-chip {
  background:rgba(194,65,12,.18);
  border:1px solid rgba(194,65,12,.4);
  color:#fb923c; border-radius:6px;
  padding:.22rem .52rem; font-size:.72rem; font-weight:600;
}
.rep-empty { color:var(--muted); font-size:.82rem; padding:1rem 0 }

/* ══ Modal comparar ══════════════════════════════════ */
.modal-tabs { display:flex; gap:.4rem; margin-bottom:1rem }
.modal-tab {
  flex:1; padding:.4rem; border-radius:8px;
  border:1px solid var(--border);
  background:transparent; color:var(--muted);
  font-size:.78rem; cursor:pointer; transition:all .15s;
}
.modal-tab.active {
  background:var(--wine); color:#fff;
  border-color:var(--wine); font-weight:700;
}
.tab-panel { display:none }
.tab-panel.active { display:block }
.code-box {
  background:var(--bg4); border:1px solid var(--border);
  border-radius:6px; padding:.5rem .7rem;
  font-size:.68rem; color:var(--muted);
  word-break:break-all; max-height:72px;
  overflow-y:auto; font-family:monospace; margin:.4rem 0;
}
.import-input {
  width:100%; background:var(--bg4);
  border:1px solid var(--border); border-radius:8px;
  color:var(--fg); padding:.45rem .7rem;
  font-size:.78rem; font-family:monospace; margin:.4rem 0;
}
.import-input::placeholder { color:var(--muted) }
.compare-result { margin-top:.75rem }
.compare-result h4 { font-size:.82rem; font-weight:700; margin-bottom:.5rem; color:var(--yellow) }
.compare-chips { display:flex; flex-wrap:wrap; gap:.3rem; margin-bottom:.5rem }
.cmp-chip {
  background:rgba(74,222,128,.1);
  border:1px solid rgba(74,222,128,.35);
  color:#4ade80; border-radius:6px;
  padding:.22rem .52rem; font-size:.72rem; font-weight:600;
}
.compare-empty { color:var(--muted); font-size:.82rem }
.modal-actions-row { display:flex; gap:.5rem; margin-top:.6rem }
.modal-actions-row .btn-outline,
.modal-actions-row .btn-yellow { flex:1 }