/* ------------------------------------------------------------------ base */

:root {
  --tinta:        #0d1420;
  --tinta-2:      #121b2b;
  --tinta-3:      #1a2537;
  --borde:        #24334a;
  --texto:        #e7edf6;
  --texto-suave:  #93a4bd;
  --texto-tenue:  #63758f;

  --oro:          #e0a83c;
  --oro-claro:    #f3c96b;
  --oro-oscuro:   #a9761f;
  --verde:        #4ea87a;
  --rojo:         #d1685f;

  --mapa-fuera:   #16202f;
  --mapa-falta:   #24324a;
  --mapa-borde:   #0d1420;

  --radio:   14px;
  --radio-s: 9px;
  --sombra:  0 18px 50px rgba(0, 0, 0, .45);
  --ancho:   1180px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1100px 620px at 50% -8%, #1a2740 0%, transparent 62%),
    var(--tinta);
  color: var(--texto);
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

.contenedor { width: 100%; max-width: var(--ancho); margin-inline: auto; padding-inline: 20px; }

button { font: inherit; color: inherit; cursor: pointer; }

/* -------------------------------------------------------------- cabecera */

.cabecera { padding: 34px 0 26px; }

.cabecera-fila {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}

.antetitulo {
  margin: 0 0 4px;
  font-size: .78rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase;
  color: var(--oro);
}

h1 {
  margin: 0;
  font-size: clamp(1.7rem, 4.4vw, 2.7rem);
  font-weight: 700; letter-spacing: -.02em; line-height: 1.12;
}

.marcador {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 20px;
  background: linear-gradient(160deg, rgba(224, 168, 60, .16), rgba(224, 168, 60, .05));
  border: 1px solid rgba(224, 168, 60, .34);
  border-radius: var(--radio);
}

.marcador-num {
  font-size: 2rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--oro-claro); font-variant-numeric: tabular-nums;
}

.marcador-txt { font-size: .8rem; line-height: 1.25; color: var(--texto-suave); }

/* -------------------------------------------------------------- progreso */

.panel-progreso {
  display: grid; grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
  gap: 28px; align-items: start;
  padding: 22px 24px;
  margin-bottom: 26px;
  background: var(--tinta-2);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}

.cifras { display: grid; gap: 14px; }

.cifra .cifra-num {
  font-size: 1.55rem; font-weight: 700; letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.cifra .cifra-tag { font-size: .8rem; color: var(--texto-suave); }
.cifra.destacada .cifra-num { color: var(--oro-claro); }

.regiones { display: grid; gap: 11px; }

.region-fila { display: grid; grid-template-columns: 78px 1fr auto; gap: 12px; align-items: center; }
.region-nombre { font-size: .85rem; color: var(--texto-suave); }

.barra { height: 8px; border-radius: 99px; background: var(--tinta-3); overflow: hidden; }
.barra-relleno {
  height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--oro-oscuro), var(--oro-claro));
  transition: width .8s cubic-bezier(.2, .8, .2, 1);
}
.region-cuenta {
  font-size: .8rem; color: var(--texto-tenue);
  font-variant-numeric: tabular-nums; min-width: 48px; text-align: right;
}

/* ------------------------------------------------------------------ mapa */

.bloque-mapa { margin-bottom: 40px; }

.mapa-cabecera {
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap; margin-bottom: 10px;
}

.leyenda { display: flex; gap: 18px; flex-wrap: wrap; font-size: .82rem; color: var(--texto-suave); }
.leyenda-item { display: inline-flex; align-items: center; gap: 7px; }

.muestra { width: 13px; height: 13px; border-radius: 4px; display: inline-block; }
.muestra.tengo { background: linear-gradient(150deg, var(--oro-claro), var(--oro-oscuro)); }
.muestra.falta { background: var(--mapa-falta); }
.muestra.fuera { background: var(--mapa-fuera); border: 1px solid var(--borde); }

.controles-zoom { display: flex; gap: 6px; }
.controles-zoom button {
  min-width: 34px; height: 34px; padding: 0 10px;
  background: var(--tinta-2); border: 1px solid var(--borde);
  border-radius: var(--radio-s); color: var(--texto-suave);
  font-size: 1.05rem; line-height: 1;
  transition: background .15s, color .15s, border-color .15s;
}
.controles-zoom button.reset { font-size: .82rem; }
.controles-zoom button:hover { background: var(--tinta-3); color: var(--texto); border-color: #33455f; }

.mapa-caja {
  position: relative;
  background: linear-gradient(180deg, #0c1725, #0a1220);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  overflow: hidden;
}

#mapa { display: block; width: 100%; height: auto; touch-action: none; cursor: grab; }
#mapa.arrastrando { cursor: grabbing; }

.cargando, .pista {
  position: absolute; left: 50%; transform: translateX(-50%);
  font-size: .78rem; color: var(--texto-tenue); pointer-events: none;
}
.cargando { top: 50%; transform: translate(-50%, -50%); }
.pista { bottom: 10px; opacity: .75; }

/* --- países --- */

.pais { stroke: var(--mapa-borde); stroke-width: .35; stroke-linejoin: round; fill: var(--mapa-fuera); }
.pais.en-lista { fill: var(--mapa-falta); cursor: pointer; }
.pais.tengo    { fill: url(#degradado-oro); cursor: pointer; }

.pais.en-lista:hover { fill: #33456485; fill: #334564; }
.pais.tengo:hover    { fill: var(--oro-claro); }
.pais.activo         { stroke: #fff; stroke-width: 1.1; paint-order: stroke; }

/* --- chinchetas --- */

.chincheta { cursor: pointer; }
.chincheta-cuerpo { fill: var(--oro-claro); stroke: #4a3208; stroke-width: .8; }
.chincheta-punto  { fill: #4a3208; }
.chincheta-sombra { fill: rgba(0, 0, 0, .45); }
.chincheta:hover .chincheta-cuerpo { fill: #fff3d6; }
.chincheta.activa .chincheta-cuerpo { fill: #fff; stroke: #000; }

.chincheta-suelta .chincheta-cuerpo { fill: var(--verde); stroke: #10321f; }
.chincheta-suelta .chincheta-punto  { fill: #10321f; }

/* --------------------------------------------------------------- filtros */

.bloque-listado { margin-bottom: 44px; }

.filtros { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }

.buscador { flex: 1 1 240px; min-width: 200px; }
.buscador input {
  width: 100%; padding: 10px 14px;
  background: var(--tinta-2); border: 1px solid var(--borde);
  border-radius: var(--radio-s); color: var(--texto); font: inherit; font-size: .92rem;
}
.buscador input::placeholder { color: var(--texto-tenue); }
.buscador input:focus { outline: 2px solid rgba(224, 168, 60, .5); outline-offset: 1px; }

.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px;
  background: var(--tinta-2); border: 1px solid var(--borde);
  border-radius: 99px; color: var(--texto-suave); font-size: .84rem;
  transition: background .15s, color .15s, border-color .15s;
}
.chip:hover { background: var(--tinta-3); color: var(--texto); }
.chip.activo {
  background: rgba(224, 168, 60, .16); border-color: rgba(224, 168, 60, .5); color: var(--oro-claro);
}

.resultado-cuenta { margin: 0 0 14px; font-size: .84rem; color: var(--texto-tenue); }

/* --------------------------------------------------------------- rejilla */

.rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 12px; }

.tarjeta {
  display: flex; flex-direction: column; gap: 6px; align-items: flex-start;
  width: 100%; padding: 14px 16px; text-align: left;
  background: var(--tinta-2); border: 1px solid var(--borde);
  border-radius: var(--radio-s);
  transition: transform .12s, border-color .15s, background .15s;
}
.tarjeta:hover { transform: translateY(-2px); border-color: #33455f; background: var(--tinta-3); }
.tarjeta.tengo { border-left: 3px solid var(--oro); }

.tarjeta-nombre { font-weight: 600; font-size: .95rem; line-height: 1.3; }
.tarjeta-meta { font-size: .78rem; color: var(--texto-tenue); }
.tarjeta-billete { font-size: .8rem; color: var(--oro); }
.tarjeta-falta { font-size: .8rem; color: var(--texto-tenue); }

.vacio { padding: 30px; text-align: center; color: var(--texto-tenue); grid-column: 1 / -1; }

/* ------------------------------------------------------------------ pie */

.pie { padding: 22px 0 40px; font-size: .8rem; color: var(--texto-tenue); border-top: 1px solid var(--borde); }
.pie p { margin: 0 0 4px; }
.pie-nota { opacity: .7; }

/* ----------------------------------------------------------------- ficha */

.velo {
  position: fixed; inset: 0; z-index: 40;
  background: rgba(6, 10, 18, .62); backdrop-filter: blur(2px);
  animation: aparecer .18s ease;
}

.ficha {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 50;
  width: min(430px, 100%);
  background: var(--tinta-2); border-left: 1px solid var(--borde);
  box-shadow: var(--sombra);
  overflow-y: auto; overscroll-behavior: contain;
  animation: entrar-derecha .22s cubic-bezier(.2, .8, .2, 1);
}

.cerrar {
  position: absolute; top: 12px; right: 14px; z-index: 2;
  width: 34px; height: 34px;
  background: var(--tinta-3); border: 1px solid var(--borde); border-radius: 50%;
  color: var(--texto-suave); font-size: 1.35rem; line-height: 1;
}
.cerrar:hover { color: var(--texto); background: #26344b; }

.ficha-cuerpo { padding: 26px 26px 40px; }

.ficha-region { font-size: .76rem; letter-spacing: .12em; text-transform: uppercase; color: var(--oro); }
.ficha-titulo { margin: 5px 0 12px; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; line-height: 1.18; }

.etiquetas { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.etiqueta {
  padding: 3px 10px; border-radius: 99px;
  font-size: .74rem; font-weight: 600;
  background: var(--tinta-3); border: 1px solid var(--borde); color: var(--texto-suave);
}
.etiqueta.si { background: rgba(224, 168, 60, .16); border-color: rgba(224, 168, 60, .45); color: var(--oro-claro); }
.etiqueta.no { background: rgba(209, 104, 95, .13); border-color: rgba(209, 104, 95, .38); color: var(--rojo); }

.aviso-mapa {
  padding: 10px 13px; margin-bottom: 16px;
  background: var(--tinta-3); border-left: 3px solid var(--borde); border-radius: 0 6px 6px 0;
  font-size: .82rem; color: var(--texto-suave);
}

.miembros { margin-bottom: 18px; }
.miembros h3, .billete h3 { margin: 0 0 7px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--texto-tenue); }
.miembros ul { margin: 0; padding-left: 18px; font-size: .87rem; color: var(--texto-suave); }

.billete {
  padding: 18px 0;
  border-top: 1px solid var(--borde);
}
.billete-denominacion { font-size: 1.08rem; font-weight: 600; color: var(--oro-claro); }
.billete-moneda { font-size: .82rem; color: var(--texto-tenue); margin-bottom: 12px; }

.billete-foto {
  width: 100%; border-radius: 8px; margin-bottom: 14px;
  border: 1px solid var(--borde); display: block;
}
.foto-pendiente {
  display: grid; place-items: center;
  aspect-ratio: 5 / 2.4; margin-bottom: 14px;
  background: repeating-linear-gradient(45deg, #16202f, #16202f 9px, #182437 9px, #182437 18px);
  border: 1px dashed var(--borde); border-radius: 8px;
  font-size: .8rem; color: var(--texto-tenue);
}

.datos { display: grid; gap: 9px; }
.dato { display: grid; grid-template-columns: 96px 1fr; gap: 12px; font-size: .87rem; }
.dato dt { color: var(--texto-tenue); }
.dato dd { margin: 0; color: var(--texto); }

.pastilla { display: inline-block; padding: 2px 9px; border-radius: 99px; font-size: .76rem; font-weight: 600; }
.pastilla.vigente        { background: rgba(78, 168, 122, .16); color: #7fd0a4; }
.pastilla.descatalogado  { background: rgba(209, 104, 95, .14); color: #e59189; }
.pastilla.conmemorativo,
.pastilla.parcial,
.pastilla.no_curso_legal { background: rgba(224, 168, 60, .14); color: var(--oro-claro); }

.sin-detalle {
  padding: 16px; margin-top: 8px;
  background: var(--tinta-3); border-radius: 8px;
  font-size: .87rem; color: var(--texto-suave);
}

.boton-ebay {
  display: inline-block; margin-top: 14px; padding: 9px 16px;
  background: var(--tinta-3); border: 1px solid var(--borde); border-radius: var(--radio-s);
  color: var(--texto-suave); font-size: .85rem; text-decoration: none;
}
.boton-ebay:hover { border-color: rgba(224, 168, 60, .5); color: var(--oro-claro); }

@keyframes aparecer { from { opacity: 0; } }
@keyframes entrar-derecha { from { transform: translateX(100%); } }

/* ----------------------------------------------------------- responsive */

@media (max-width: 820px) {
  .panel-progreso { grid-template-columns: 1fr; gap: 20px; }
  .cifras { grid-template-columns: repeat(3, 1fr); }
  .pista { display: none; }
}

@media (max-width: 620px) {
  .contenedor { padding-inline: 15px; }
  .cabecera { padding: 24px 0 18px; }
  .marcador { padding: 10px 15px; }
  .marcador-num { font-size: 1.6rem; }
  .rejilla { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }

  .ficha {
    top: auto; left: 0; width: 100%; max-height: 86vh;
    border-left: none; border-top: 1px solid var(--borde);
    border-radius: var(--radio) var(--radio) 0 0;
    animation: entrar-abajo .24s cubic-bezier(.2, .8, .2, 1);
  }
  .ficha-cuerpo { padding: 22px 18px 34px; }
  @keyframes entrar-abajo { from { transform: translateY(100%); } }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}