:root{--bg:#0b0d10;--panel:#101419;--muted:#8b93a3;--line:#1b212b;--text:#e8ecf1;--accent:#61dafb;}
*{box-sizing:border-box} html,body{height:100%} body{margin:0;background:var(--bg);color:var(--text);font-family:Inter,system-ui,Segoe UI,Roboto,Helvetica,Arial}
.layout{display:grid;grid-template-columns:320px 1fr;min-height:100vh}
.panel{background:var(--panel);border-right:1px solid var(--line);padding:16px;overflow:auto}
.country-list{list-style:none;margin:10px 0 0 0;padding:0;border:1px solid var(--line);border-radius:12px;max-height:260px;overflow:auto}
.country-list li{padding:10px 12px;border-bottom:1px solid var(--line);cursor:pointer;display:flex;justify-content:space-between;gap:8px}
.country-list li:last-child{border-bottom:none}
.country-list li.is-active{background:#13202f}
.country-code{font-size:12px;color:var(--muted)}
.selected-country{margin-top:12px;border:1px solid var(--line);border-radius:12px;padding:12px;min-height:60px}
.selected-country .row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.selected-country .name{font-weight:600}
.selected-country .code{border:1px solid var(--line);background:#0f1620;color:var(--text);border-radius:10px;padding:4px 8px;font-size:12px;min-width:64px;text-align:center}
.map-wrap{position:relative}
/* Botones secundarios */
.btn.btn-secondary{
  background:#0f1620;
  border:1px solid var(--line);
  color:var(--text);
  padding:8px 10px;
  border-radius:10px;
  cursor:pointer;
  font-size:13px;
}
.btn.btn-secondary:hover{ background:#14202e; }


/* Link "Volver al inicio" */
.home-link{
  display:inline-block;
  margin-top:8px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:10px;
  text-decoration:none;
  color:var(--text);
  background:#0f1620;
  font-size:14px;
}
.home-link:hover{ background:#14202e; }

.muted{color:var(--muted);font-size:12px}

/* Mobile / tablets */
@media (max-width: 860px){
  .layout{grid-template-columns:1fr;grid-template-rows:auto 1fr}
  .panel{border-right:none;border-bottom:1px solid var(--line);max-height:48vh}
  .mymaps-wrap{height:52vh}
  .country-list{max-height:160px}
}

@media (max-width: 420px){
  .panel{padding:12px}
  #search-code-badge,#search-code-name{min-width:54px}
}


/* --- Mobile toggle (Lista / Mapa) --- */
.mobile-toggle{display:none;gap:8px;padding:10px;border-bottom:1px solid var(--line);background:var(--panel);position:sticky;top:0;z-index:1000}
.toggle-btn{flex:1;border:1px solid var(--line);background:transparent;color:var(--text);padding:10px 12px;border-radius:12px;font-weight:600;cursor:pointer}
.toggle-btn.is-active{border-color:rgba(97,218,251,.6);box-shadow:0 0 0 2px rgba(97,218,251,.12) inset}
@media(max-width: 900px){
  .layout{grid-template-columns:1fr}
  .mobile-toggle{display:flex}
  .panel{border-right:none}
  /* Default: lista */
  body[data-view="list"] .panel{display:block}
  body[data-view="list"] .map-wrap{display:none}
  /* Mapa */
  body[data-view="map"] .panel{display:none}
  body[data-view="map"] .map-wrap{display:block}
  .map-wrap{height:calc(100vh - 56px)}
  .mymaps-wrap{height:100%}
  .panel{max-height:calc(100vh - 56px);overflow:auto}
}


/* --- Google My Maps embed --- */
.mymaps-wrap{
  position:relative;
  width:100%;
  height:100vh;
}
.mymaps-wrap iframe{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  border:0;
}

/* Actions row */
.actions-row{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}

/* When join-map is disabled */
a[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;
}


/* --- Panel layout polish (v5) --- */
.panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:10px;
  margin-bottom:12px;
}
.panel h2{
  margin:0;
  font-size:20px;
  letter-spacing:.2px;
}
.home-link{
  opacity:.9;
  text-decoration:none;
}

.card{
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
}
.section-title{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  opacity:.75;
  margin-bottom:10px;
}
.helper{
  margin-top:10px;
  font-size:12px;
  opacity:.7;
  line-height:1.35;
}

.field label{
  display:block;
  font-size:12px;
  opacity:.85;
  margin-bottom:6px;
}
.field-row{
  display:flex;
  align-items:center;
  gap:10px;
}
.pill{
  min-width:62px;
  text-align:center;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  font-variant-numeric:tabular-nums;
}

.list-card{
  margin-top:12px;
  padding:10px;
}
.country-list{
  max-height:42vh;
  overflow:auto;
  margin:0;
}
.country-list li{
  padding:10px 10px;
  border-radius:12px;
}
.country-list li:hover{
  background:rgba(255,255,255,.05);
}
.country-list li.is-active{
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.10);
}

.selected-country{
  margin-top:12px;
}
.selected-country.is-hidden{
  display:none;
}

/* Buttons */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:12px;
  font-weight:600;
  text-decoration:none;
  border:1px solid rgba(255,255,255,.10);
}
.btn-primary{
  background:rgba(255,255,255,.10);
}
.btn-secondary{
  background:rgba(255,255,255,.04);
}
.actions-row{
  gap:10px;
}

/* When join-map is disabled */
a[aria-disabled="true"]{
  opacity:.55;
  pointer-events:none;
}

/* Mobile: slightly more compact cards */
@media (max-width: 640px){
  .panel{
    padding:12px;
  }
  .card{
    padding:11px;
    border-radius:14px;
  }
  .country-list{
    max-height:46vh;
  }
}


/* --- Button color override (v8) --- */
.btn-primary{
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.18);
}
.btn-primary:hover{
  background: rgba(255,255,255,.22);
}
.btn-primary:active{
  background: rgba(255,255,255,.26);
}
.btn-primary:visited,
.btn-secondary:visited,
.btn:visited{
  color: inherit;
}


/* --- Panel notice (Mapared LGC) --- */
.panel-note{
  margin-top:10px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.07);
  font-size:12px;
  line-height:1.35;
  color:rgba(232,236,241,.78);
}
.panel-note strong{ color:rgba(232,236,241,.92); font-weight:700; }
.panel-note__mail{
  color:var(--accent);
  text-decoration:none;
  font-weight:700;
  white-space:nowrap;
}
.panel-note__mail:hover{ text-decoration:underline; }