/* ═══════════════════════════════════════════════════════════════
   NUXZLOQUE - Pokémon Themed Stylesheet
   ═══════════════════════════════════════════════════════════════ */

/* ─── FONTS ─── */
@font-face {
  font-family: 'Pokemon Solid';
  src: url('../assets/font/Pokemon Solid.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pokemon Hollow';
  src: url('../assets/font/Pokemon Hollow.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}


@font-face {
  font-family: 'Pokemon Rubi';
  src: url('../assets/font/pokemon rubi.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ─── RESET / BASE ─── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --pk-red:     #E3350D;
  --pk-dark:    #1A1A2E;
  --pk-navy:    #16213E;
  --pk-blue:    #0F3460;
  --pk-gold:    #E2B714;
  --pk-white:   #F0F0F0;
  --pk-light:   #FAFAFA;
  --pk-gray:    #B0B0B0;
  --pk-card:    #1E2A45;
  --pk-border:  #2A3A5A;
  --radius:     12px;
  --shadow:     0 4px 20px rgba(0,0,0,.3);
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Pokemon Rubi', 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--pk-dark);
  color: var(--pk-white);
  line-height: 1.6;
  min-height: 100vh;
}

a { color: var(--pk-gold); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ─── BUTTONS ─── */
.btn {
  display: inline-block;
  padding: .7rem 1.6rem;
  border: none;
  border-radius: var(--radius);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.btn-primary {
  background: var(--pk-red);
  color: #fff;
}

/* ─── HEADER ─── */
.site-header {
  background: linear-gradient(135deg, var(--pk-navy) 0%, var(--pk-blue) 100%);
  border-bottom: 4px solid var(--pk-red);
  position: sticky; top: 0; z-index: 100;
}
.header-inner {
  max-width: 1200px; margin: 0 auto;
  padding: .75rem 1.5rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "logo sprites"
    "nav nav";
  align-items: center;
  gap: .55rem 1rem;
}
.logo { font-size: 1.8rem; grid-area: logo; min-width: 0; line-height: 1.1; }
.logo-poke {
  font-family: 'Pokemon Solid', 'Segoe UI', sans-serif;
  color: var(--pk-gold);
  font-weight: 400;
  font-size: 1.9rem;
  text-shadow: 2px 2px 0 var(--pk-red), 3px 3px 0 rgba(0,0,0,.3);
  letter-spacing: 0.05em;
}
.logo-nux {
  font-family: 'Pokemon Hollow', 'Segoe UI', sans-serif;
  color: #fff;
  font-weight: 400;
  font-size: 1.9rem;
  margin-left: .35rem;
  text-shadow: 1px 1px 0 var(--pk-blue);
}
.main-nav { display: flex; gap: .4rem; flex-wrap: wrap; width: 100%; min-width: 0; grid-area: nav; }
.nav-left, .nav-right { display: flex; gap: .4rem; flex-wrap: wrap; align-items: center; }
.nav-right { margin-left: auto; }
.nav-link {
  padding: .4rem .75rem;
  border-radius: 8px;
  color: var(--pk-white);
  font-weight: 600;
  transition: background .2s;
  white-space: nowrap;
}
.nav-link:hover,
.nav-link.active {
  background: var(--pk-red);
  text-decoration: none;
}

/* ─── CONTAINER ─── */
.container {
  max-width: 1200px; margin: 0 auto;
  padding: 0 1.5rem 3rem;
}

/* ─── HEADER SPRITES ─── */
.header-sprites { display: flex; gap: .25rem; align-items: center; grid-area: sprites; flex-shrink: 0; }
.header-sprites img { width: 36px; height: 36px; image-rendering: pixelated; }

/* ─── SECTIONS ─── */
.page-section {
  margin-top: 3rem;
}
.section-title {
  font-family: 'Pokemon Solid', 'Segoe UI', sans-serif;
  font-size: 1.6rem;
  color: var(--pk-gold);
  border-left: 5px solid var(--pk-red);
  padding-left: .8rem;
  margin-bottom: .5rem;
}
.section-desc {
  color: var(--pk-gray);
  margin-bottom: 1.5rem;
}

/* ─── TABLE ─── */
.table-wrapper { overflow-x: auto; }
#stats-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--pk-card);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}
#stats-table th {
  background: var(--pk-blue);
  color: var(--pk-gold);
  padding: .9rem 1rem;
  text-align: left;
  font-size: .85rem;
  text-transform: uppercase;
  letter-spacing: .05em;
}
#stats-table td {
  padding: .75rem 1rem;
  border-bottom: 1px solid var(--pk-border);
}
#stats-table tbody tr:hover { background: rgba(255,255,255,.04); }
.empty-row td { text-align: center; color: var(--pk-gray); padding: 2rem; }
.badge-dot {
  display: inline-block; width: 12px; height: 12px;
  border-radius: 50%; margin: 0 2px;
}
.badge-on  { background: var(--pk-gold); }
.badge-off { background: var(--pk-border); }


/* --- UPLOAD ZONE --- */
.upload-zone {
  background: var(--pk-card);
  border: 3px dashed var(--pk-border);
  border-radius: var(--radius);
  padding: 3rem 2rem;
  text-align: center;
  transition: border-color .3s, background .3s;
  cursor: pointer;
}
.upload-zone.drag-over {
  border-color: var(--pk-gold);
  background: rgba(226,183,20,.08);
}
.upload-icon { font-size: 3rem; margin-bottom: 1rem; }
.upload-zone p { margin-bottom: 1.2rem; color: var(--pk-gray); }

.parse-result {
  margin-top: 1.5rem;
  background: var(--pk-card);
  border: 1px solid var(--pk-border);
  border-radius: var(--radius);
  padding: 1.5rem;
}
.parse-result h3 {
  color: var(--pk-gold);
  margin-bottom: .8rem;
}
.parse-result pre {
  background: var(--pk-dark);
  color: #7fdbca;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  font-size: .85rem;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 1rem;
}
.hidden { display: none !important; }

/* --- BLOG CARDS --- */
.blog-card {
  background: var(--pk-card);
  border: 1px solid var(--pk-border);
  border-radius: var(--radius);
  padding: 1.5rem 2rem;
  margin-bottom: 1.2rem;
  transition: border-color .2s;
}
.blog-card:hover { border-color: var(--pk-gold); }
.blog-card h3 {
  color: var(--pk-gold);
  margin-bottom: .6rem;
  font-size: 1.15rem;
}
.blog-card ul, .blog-card ol { padding-left: 1.4rem; }
.blog-card li { margin-bottom: .3rem; }
.blog-card p { margin-bottom: .8rem; line-height: 1.7; color: var(--pk-gray); }
.blog-card p:last-child { margin-bottom: 0; }
.blog-card a { color: var(--pk-gold); }
.blog-card code {
  background: var(--pk-dark);
  padding: .15rem .45rem;
  border-radius: 4px;
  font-size: .88rem;
  color: var(--pk-gold);
}

/* --- GUÍA --- */
.guide-toc {
  display: flex; flex-wrap: wrap; gap: .5rem;
  margin-bottom: 1.5rem;
}
.guide-toc a {
  background: var(--pk-card);
  border: 1px solid var(--pk-border);
  color: var(--pk-gold);
  text-decoration: none;
  padding: .4rem .9rem;
  border-radius: 999px;
  font-size: .85rem;
  font-weight: 600;
  transition: border-color .2s, background .2s;
}
.guide-toc a:hover { border-color: var(--pk-gold); background: rgba(226,183,20,.1); }
.guide-block { scroll-margin-top: 6rem; }
.guide-block h3 { font-size: 1.25rem; }
.guide-block h4 { color: var(--pk-white); margin: .2rem 0 .4rem; font-size: 1.05rem; }
.guide-block .guide-rules, .guide-block .guide-steps { padding-left: 1.3rem; color: var(--pk-gray); line-height: 1.7; }
.guide-block .guide-rules li, .guide-block .guide-steps li { margin-bottom: .55rem; }
.guide-block .guide-rules strong, .guide-block .guide-steps strong { color: var(--pk-white); }

.guide-feature {
  display: grid;
  grid-template-columns: 1fr minmax(180px, 280px);
  gap: 1.2rem;
  align-items: start;
  padding: 1rem 0;
  border-top: 1px solid var(--pk-border);
}
.guide-feature:first-of-type { border-top: none; padding-top: .4rem; }
.guide-feature-text p { margin-bottom: .6rem; }

.guide-caps {
  display: flex; flex-wrap: wrap; gap: .4rem;
  margin-top: .4rem;
}
.guide-caps span {
  background: var(--pk-dark);
  border: 1px solid var(--pk-border);
  color: var(--pk-gold);
  padding: .2rem .55rem;
  border-radius: 6px;
  font-size: .82rem;
  font-variant-numeric: tabular-nums;
}

.guide-shot {
  margin: 0;
  background: var(--pk-dark);
  border: 1px dashed var(--pk-border);
  border-radius: 10px;
  overflow: hidden;
  min-height: 140px;
  display: flex; flex-direction: column;
}
.guide-shot img {
  display: block; width: 100%; height: 160px;
  object-fit: cover; background: #0d1528;
}
.guide-shot figcaption {
  padding: .45rem .7rem;
  font-size: .75rem;
  color: var(--pk-gray);
  text-align: center;
}
.guide-shot.empty img { display: none; }
.guide-shot.empty {
  align-items: center; justify-content: center;
  min-height: 140px;
  position: relative;
}
.guide-shot.empty::before {
  content: "📷 Sube la captura a assets/guide/";
  color: var(--pk-gray);
  font-size: .78rem;
  padding: 2rem 1rem 2.4rem;
  text-align: center;
}
.guide-shot.empty figcaption { position: absolute; bottom: 0; left: 0; right: 0; }

.faq-group {
  color: var(--pk-gold);
  font-size: 1rem;
  margin: 1.4rem 0 .6rem;
}
.faq-group:first-of-type { margin-top: .4rem; }
.faq-item a { color: var(--pk-gold); }

@media (max-width: 768px) {
  .guide-feature { grid-template-columns: 1fr; }
  .guide-shot img { height: 180px; }
}


/* --- FAQ --- */
.faq-list { display: flex; flex-direction: column; gap: .8rem; }
.faq-item {
  background: var(--pk-card);
  border: 1px solid var(--pk-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq-item summary {
  padding: 1rem 1.4rem;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
  display: flex; align-items: center; gap: .6rem;
  transition: background .2s;
}
.faq-item summary::before {
  content: "+";
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; flex-shrink: 0;
  background: var(--pk-red); color: #fff;
  border-radius: 50%; font-weight: 700; font-size: 1.1rem;
  transition: transform .3s;
}
.faq-item[open] summary::before { content: "-"; transform: rotate(180deg); }
.faq-item summary:hover { background: rgba(255,255,255,.04); }
.faq-item p {
  padding: 0 1.4rem 1.2rem;
  color: var(--pk-gray);
  line-height: 1.7;
}
.faq-item code {
  background: var(--pk-dark);
  padding: .1rem .4rem;
  border-radius: 4px;
  color: var(--pk-gold);
  font-size: .88rem;
}

/* --- FOOTER --- */
.site-footer {
  text-align: center;
  padding: 2rem;
  color: var(--pk-gray);
  font-size: .82rem;
  border-top: 2px solid var(--pk-border);
  margin-top: 3rem;
}

/* --- MAPA PROPIO (SVG) --- */
.map-wrapper { background: var(--pk-card); border: 1px solid var(--pk-border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 1rem; }
.map-switch { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-bottom: .6rem; }
.map-arrow { padding: .4rem 1rem; font-size: 1rem; }
.map-name { color: var(--pk-gold); font-size: 1.1rem; margin: 0; min-width: 90px; text-align: center; }
.map-panel { position: relative; border-radius: 8px; overflow: hidden; }
.map-img { width: 100%; height: auto; display: block; image-rendering: pixelated; }
.map-legend { display: flex; flex-wrap: wrap; gap: .5rem 1rem; margin-top: .8rem; }
.map-legend-item { display: inline-flex; align-items: center; gap: .4rem; background: var(--pk-dark); border: 1px solid var(--pk-border); border-radius: 999px; padding: .25rem .7rem; font-size: .85rem; }
.map-dot { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.map-pin-html { position: absolute; width: 26px; height: 26px; margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid #fff; color: #fff; font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 8px rgba(0,0,0,.5); z-index: 3; }
/* Zonas: lima brillante = libre, gris pizarra = consumida (alto contraste) */
.map-zone-dot { position: absolute; width: 13px; height: 13px; margin: -6px 0 0 -6px; border-radius: 50%; z-index: 2; }
.map-zone-dot.free { background: #c8ff3d; border: 2px solid #20301a; box-shadow: 0 0 7px #c8ff3d; }
.map-zone-dot.done { background: #6b6b80; border: 2px solid #14141c; }
.map-zone-dot.partial { background: #ffb020; border: 2px solid #3a2500; box-shadow: 0 0 7px #ffb020; }
/* Resaltado rosa al pulsar su chip */
.map-zone-dot.sel { background: #ff4d9d; border: 2px solid #fff; box-shadow: 0 0 12px #ff4d9d; width: 18px; height: 18px; margin: -9px 0 0 -9px; z-index: 6; }
.zone-chip { cursor: pointer; }
.zone-chip.sel { border-color: #ff4d9d; color: #ff4d9d; }
/* Ciudad sin zona de captura: referencia fija */
.map-town-dot { position: absolute; width: 9px; height: 9px; margin: -4px 0 0 -4px; border-radius: 50%; background: #e8e4d8; border: 2px solid #0d2240; z-index: 1; }

/* --- CALIBRACIÓN --- */
.calib-cursor { cursor: crosshair; }
.map-pin-html.custom { outline: 3px solid var(--pk-gold); }
.place-btn { cursor: pointer; }
.place-btn.sel { border-color: var(--pk-gold); color: var(--pk-gold); }
.team-cell { white-space: nowrap; }
.team-sprite { width: 40px; height: 40px; image-rendering: pixelated; vertical-align: middle; margin-right: 2px; }

/* --- CONFIGURAR PERFIL --- */
.cfg-input { display: block; width: 100%; max-width: 320px; padding: .6rem .8rem; margin-bottom: .6rem; border-radius: 8px; border: 1px solid var(--pk-border); background: var(--pk-dark); color: var(--pk-white); font-size: .95rem; }
.modal-content .cfg-input { max-width: 100%; margin-left: auto; margin-right: auto; }
.auth-switch { margin-top: 1rem; text-align: center; color: var(--pk-gray); }
.auth-switch a { color: var(--pk-gold); font-weight: 600; }
.avatar-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.avatar-pick { width: 56px; height: 56px; border-radius: 12px; border: 2px solid transparent; cursor: pointer; image-rendering: pixelated; background: var(--pk-dark); }
.avatar-pick.sel { border-color: var(--pk-gold); box-shadow: 0 0 10px rgba(226,183,20,.5); }
.user-avatar { width: 38px; height: 38px; border-radius: 50%; vertical-align: middle; image-rendering: pixelated; background: var(--pk-dark); }

/* --- PRIVADA: cajas + modal --- */
.box-grid { display: flex; flex-wrap: wrap; gap: .6rem; }
.mon-btn { background: var(--pk-card); border: 1px solid var(--pk-border); border-radius: var(--radius); padding: .5rem; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: .2rem; color: var(--pk-white); }
.mon-btn:hover { border-color: var(--pk-gold); }
.mon-btn small { font-size: .72rem; color: var(--pk-gray); }
.box-sprite { width: 56px; height: 56px; image-rendering: pixelated; }
.box-tab { cursor: pointer; }
.modal { position: fixed; inset: 0; background: rgba(0,0,0,.65); display: flex; align-items: center; justify-content: center; z-index: 200; padding: 1rem; }
.modal-content { background: var(--pk-card); border: 1px solid var(--pk-border); border-radius: var(--radius); padding: 1.5rem 2rem; max-width: 560px; width: 100%; max-height: 88vh; overflow-y: auto; position: relative; text-align: center; }
.close-btn { position: absolute; top: .6rem; right: 1rem; font-size: 1.6rem; cursor: pointer; color: var(--pk-gray); }
.modal-sprite { width: 96px; height: 96px; image-rendering: pixelated; }

/* --- PERFIL PÚBLICO --- */
.profile-table th { width: 190px; white-space: nowrap; }
.badge-chip { display: inline-block; padding: .15rem .55rem; margin: .1rem; border-radius: 999px; font-size: .8rem; border: 1px solid var(--pk-border); background: var(--pk-dark); color: var(--pk-gray); }
.badge-chip.has { border-color: var(--pk-gold); color: var(--pk-gold); background: rgba(226,183,20,.08); }
.mon-row { cursor: pointer; }

/* --- MEDALLAS --- */
.medal-row { display: inline-flex; gap: .3rem; flex-wrap: wrap; align-items: center; }
.medal { width: 44px; height: 44px; object-fit: contain; }
.medal.missing { filter: grayscale(1); opacity: .35; }

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
  .header-inner { grid-template-columns: 1fr; grid-template-areas: "logo" "sprites" "nav"; text-align: center; justify-items: center; }
  .main-nav, .nav-left, .nav-right { justify-content: center; }
  .nav-right { margin-left: 0; }
  .logo { font-size: 1.4rem; }
  .logo-poke, .logo-nux { font-size: 1.5rem; }
  .section-title { font-size: 1.3rem; }
  .header-sprites img { width: 28px; height: 28px; }
  #stats-table th, #stats-table td { padding: .55rem .6rem; font-size: .82rem; }
  .blog-card { padding: 1rem 1.2rem; }
}