/* =========================================================
   Eurotrip 2026 — Sistema Eurotrip v1
   Modo claro únicamente (ver manual: un código de barras sobre
   fondo oscuro no lo lee ningún escáner).
   ========================================================= */

:root{
  --paper:#F7F6F3; --card:#FFFFFF; --line:#E3DFD6; --soft:#F0EDE7; --fill:#EDEAE3;
  --ink:#14202A; --ink2:#5E6B76; --ink3:#8A939B;
  --move:#186B72; --stay:#8F5B05; --eat:#B4472F; --see:#5B6E2E; --alert:#B5122C;
  --NL:#1F6F78; --LU:#2E7E74; --CH:#4F8A63; --AT:#7E9350;
  --HR:#A8913F; --HU:#B9762C; --ES:#B4472F; --XX:#8A939B;

  --f-d:'Archivo','Helvetica Neue',Arial,sans-serif;
  --f-b:'IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --f-m:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace;

  --pad:18px;
  --top:env(safe-area-inset-top,0px);
  --bot:env(safe-area-inset-bottom,0px);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:var(--f-b);font-size:19px;line-height:1.45;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  overscroll-behavior-y:none;
}
h1,h2,h3,h4,h5{font-family:var(--f-d);margin:0;line-height:1.15;letter-spacing:-.02em;text-wrap:balance}
button{font-family:inherit;font-size:inherit;color:inherit;border:none;background:none;padding:0;cursor:pointer}
input{font-family:inherit;font-size:inherit}
.mono{font-family:var(--f-m);font-variant-numeric:tabular-nums}
:focus-visible{outline:3px solid var(--move);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- estructura ---------- */
#app{display:flex;flex-direction:column;height:100dvh;max-width:560px;margin:0 auto;background:var(--paper);position:relative;overflow:hidden}
.safe{height:var(--top);flex:none;background:var(--paper)}
.hd{padding:6px var(--pad) 12px;flex:none;background:var(--paper);display:flex;align-items:flex-start;gap:12px}
.hd .hdmain{flex:1;min-width:0}
.loc{font-family:var(--f-m);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--move)}
.h1{font-size:30px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-top:5px}
.h1.sm{font-size:25px}
.sub{font-size:16px;color:var(--ink2);margin-top:4px}
.who{flex:none;width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--f-d);font-weight:700;font-size:16px;letter-spacing:-.02em;margin-top:6px}

main{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:0 var(--pad) 24px;display:flex;flex-direction:column;gap:12px}
main::-webkit-scrollbar{width:0}

/* ---------- tira de días ---------- */
.strip{display:flex;gap:8px;padding:0 var(--pad) 14px;flex:none;overflow-x:auto;scrollbar-width:none}
.strip::-webkit-scrollbar{display:none}
.dchip{position:relative;flex:none;width:52px;height:58px;border:1px solid var(--line);background:var(--card);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--f-m)}
.dchip .d{font-size:10px;letter-spacing:.1em;color:var(--ink3);font-weight:500}
.dchip .n{font-size:19px;font-weight:600;line-height:1.1}
.dchip[aria-current="true"]{background:var(--ink);border-color:var(--ink)}
.dchip[aria-current="true"] .d{color:#93A0A9}
.dchip[aria-current="true"] .n{color:#fff}
.dchip .dot{position:absolute;bottom:6px;width:5px;height:5px;border-radius:50%;background:var(--move)}
.dchip[aria-current="true"] .dot{background:#fff}
.dchip.past{opacity:.5}

/* ---------- tarjeta de evento ---------- */
.tl{display:flex;flex-direction:column;gap:12px}
.trow{display:grid;grid-template-columns:54px 1fr;gap:12px;align-items:start}
.tm{font-family:var(--f-m);font-size:20px;font-weight:600;text-align:right;font-variant-numeric:tabular-nums;padding-top:13px;line-height:1.1}
.tm .s{display:block;font-size:10px;color:var(--ink3);letter-spacing:.09em;font-weight:500;margin-top:3px}
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 15px;display:flex;flex-direction:column;gap:10px}
.card.now{border-color:var(--alert);box-shadow:0 0 0 2px rgba(181,18,44,.11)}
.card.past{opacity:.45}
.lab{display:flex;align-items:center;gap:7px;font-family:var(--f-m);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;line-height:1.2}
.lab svg{width:15px;height:15px;flex:none}
.ttl{font-size:21px;font-weight:700;letter-spacing:-.015em;line-height:1.18}
.det{font-size:19px;line-height:1.42;color:var(--ink2)}
.det b{color:var(--ink);font-weight:600}
.code{font-family:var(--f-m);background:var(--fill);border:1px dashed #CFCAC0;border-radius:8px;padding:9px 11px;display:flex;justify-content:space-between;align-items:center;gap:10px;width:100%;text-align:left}
.code .k{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3);flex:none}
.code .v{font-size:17px;font-weight:500;letter-spacing:.04em;text-align:right;word-break:break-all}
.code.copied{border-style:solid;border-color:var(--move);background:#EAF3F3}

.btns{display:flex;gap:8px;flex-wrap:wrap}
.b{flex:1 1 0;min-width:96px;height:48px;border-radius:10px;font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;gap:7px;white-space:nowrap;padding:0 10px;transition:transform .09s}
.b:active{transform:scale(.97)}
.b svg{width:17px;height:17px;flex:none}
.bp{background:var(--ink);color:#fff}
.bs{background:var(--fill);color:var(--ink)}
.bm{background:var(--move);color:#fff}
.ba{background:var(--alert);color:#fff}
.bbig{height:56px;font-size:17px;flex:none;width:100%}

/* ---------- checklist ---------- */
.chk{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:4px 15px}
.chk .ch{font-family:var(--f-m);font-size:12px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--see);padding:13px 0 5px;display:flex;align-items:center;gap:7px}
.chk .ch svg{width:15px;height:15px}
.ci{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--soft);min-height:56px;width:100%;text-align:left}
.ci:last-of-type{border-bottom:none}
.bx{width:24px;height:24px;border:2px solid #C4BFB5;border-radius:7px;flex:none;display:flex;align-items:center;justify-content:center;margin-top:1px;color:transparent;transition:background .12s}
.bx svg{width:14px;height:14px}
.ci[aria-checked="true"] .bx{background:var(--move);border-color:var(--move);color:#fff}
.ct{font-size:17px;line-height:1.3;flex:1;min-width:0}
.ct s{text-decoration:none;display:block;font-size:14px;color:var(--ink3);margin-top:2px}
.ci[aria-checked="true"] .ct{color:var(--ink3);text-decoration:line-through}
.ci[aria-checked="true"] .ct s{text-decoration:none}
.pin{background:var(--fill);border-radius:8px;width:38px;height:38px;flex:none;display:flex;align-items:center;justify-content:center;color:var(--move);margin-top:-2px}
.pin svg{width:17px;height:17px}
.addrow{display:flex;align-items:center;gap:12px;padding:13px 0;color:var(--move);font-size:16px;font-weight:600;width:100%;border-top:1px solid var(--soft)}
.addrow svg{width:20px;height:20px}

/* ---------- barra inferior ---------- */
nav.tabbar{flex:none;background:var(--card);border-top:1px solid var(--line);display:flex;padding:8px 4px calc(8px + var(--bot))}
.nb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;font-size:11px;font-weight:600;color:#9AA3AB;padding:4px 0;min-height:52px}
.nb svg{width:22px;height:22px}
.nb[aria-current="page"]{color:var(--ink)}

/* ---------- banners ---------- */
.bn{border-radius:10px;padding:12px 13px;display:flex;gap:10px;align-items:center;font-size:15px;line-height:1.3;flex:none}
.bn svg{width:18px;height:18px;flex:none}
.bn-off{background:var(--fill);color:var(--ink2);border:1px solid var(--line)}
.bn-al{background:#FDF0F2;color:#8E0F23;border:1px solid #F0C8CF}
.bn-ps{background:var(--fill);color:var(--ink3);border:1px solid var(--line)}
.bn-ok{background:#EAF3F3;color:#0F4F55;border:1px solid #BFDCDD}

/* ---------- listas ---------- */
.vlist{display:flex;flex-direction:column;gap:9px}
.lrow{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:13px 14px;display:flex;gap:12px;align-items:center;width:100%;text-align:left}
.lrow .fl{width:5px;align-self:stretch;border-radius:3px;flex:none;min-height:40px}
.lrow .mn{flex:1;min-width:0}
.lrow h4{font-size:18px;font-weight:700;letter-spacing:-.01em;line-height:1.2}
.lrow .sb{font-size:14px;color:var(--ink2);margin-top:3px;line-height:1.3}
.lrow .dt{font-family:var(--f-m);font-size:12px;color:var(--ink3);flex:none;text-align:right;font-variant-numeric:tabular-nums}
.gh{font-family:var(--f-m);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3);padding:8px 2px 0}

.srch{background:var(--card);border:1px solid var(--line);border-radius:11px;padding:0 14px;height:52px;display:flex;gap:10px;align-items:center;flex:none}
.srch svg{width:18px;height:18px;flex:none;color:var(--ink3)}
.srch input{flex:1;border:none;outline:none;background:none;font-size:17px;color:var(--ink);min-width:0}
.srch input::placeholder{color:var(--ink3)}

/* ---------- pestañas ---------- */
.tabs{display:flex;gap:6px;padding:0 var(--pad) 12px;flex:none}
.tab{flex:1;height:46px;border-radius:10px;background:var(--fill);color:var(--ink2);font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center}
.tab[aria-selected="true"]{background:var(--ink);color:#fff}
.cityhero{height:6px;flex:none}

/* ---------- vacío ---------- */
.empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;text-align:center;padding:40px 30px}
.empty .eic{width:60px;height:60px;border-radius:50%;background:var(--fill);display:flex;align-items:center;justify-content:center;color:var(--ink3)}
.empty .eic svg{width:28px;height:28px}
.empty h4{font-size:21px;font-weight:700}
.empty p{font-size:17px;color:var(--ink2);line-height:1.4;margin:0}

/* ---------- calendario ---------- */
.cal{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 12px}
.cw{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;margin-bottom:8px}
.cw span{text-align:center;font-family:var(--f-m);font-size:11px;font-weight:600;color:var(--ink3);letter-spacing:.06em}
.cg{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px}
.cd{position:relative;aspect-ratio:1;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--f-m);font-size:16px;font-weight:600;color:#fff}
.cd.empty2{background:transparent;pointer-events:none}
.cd[aria-current="date"]{box-shadow:0 0 0 2.5px var(--ink)}
.cd .dt2{position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.92)}
.key{display:flex;flex-wrap:wrap;gap:8px 14px;padding:2px}
.key span{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.key i{width:16px;height:8px;border-radius:2px;display:block;flex:none}

/* ---------- línea de tiempo de paradas ---------- */
.tstop{display:grid;grid-template-columns:22px 1fr;gap:13px;width:100%;text-align:left}
.tstop .gut{display:flex;flex-direction:column;align-items:center}
.tstop .dotb{width:14px;height:14px;border-radius:50%;flex:none;margin-top:6px}
.tstop .lin{width:2px;flex:1;background:var(--line);margin:4px 0}
.tstop .tc{padding-bottom:16px}
.tstop h4{font-size:18px;font-weight:700;letter-spacing:-.015em;line-height:1.2}
.tstop .tn{font-size:14px;color:var(--ink2);margin-top:3px}

/* ---------- hojas modales ---------- */
.dim{position:fixed;inset:0;background:rgba(10,14,18,.55);display:flex;align-items:flex-end;justify-content:center;z-index:50;opacity:0;pointer-events:none;transition:opacity .2s}
.dim.on{opacity:1;pointer-events:auto}
.sheet{background:#fff;width:100%;max-width:560px;border-radius:22px 22px 0 0;padding:14px var(--pad) calc(28px + var(--bot));display:flex;flex-direction:column;gap:13px;max-height:94dvh;overflow-y:auto;transform:translateY(18px);transition:transform .2s;box-shadow:0 -8px 32px rgba(20,32,42,.18)}
.dim.on .sheet{transform:translateY(0)}
.grab{width:38px;height:4px;background:#DCD8CF;border-radius:2px;margin:0 auto 2px;flex:none}
.sh-eye{font-family:var(--f-m);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--move);text-align:center}
.sh-t{font-size:24px;font-weight:800;letter-spacing:-.025em;text-align:center;line-height:1.12}
.drow{display:flex;justify-content:space-between;gap:14px;padding:11px 0;border-bottom:1px solid var(--soft);font-size:15px}
.drow:last-child{border-bottom:none}
.drow .dk{color:var(--ink3);flex:none}
.drow .dv{font-family:var(--f-m);text-align:right;font-weight:500;font-variant-numeric:tabular-nums;word-break:break-word}
.drow.me{background:#F1F7F7;margin:0 -8px;padding:11px 8px;border-radius:7px;border-bottom:none}
.drow.me .dk{color:var(--move);font-weight:600}

/* tiquete */
.ticket{background:#fff;border-radius:12px;padding:6px 0}
.ticket img{width:100%;height:auto;display:block;border-radius:8px;border:1px solid var(--line)}
.sinimg{background:var(--fill);border:1px dashed #CFCAC0;border-radius:10px;padding:16px;display:flex;gap:12px;align-items:flex-start;color:var(--ink2);margin-bottom:8px}
.sinimg svg{width:22px;height:22px;flex:none;margin-top:2px}
.sinimg b{display:block;color:var(--ink);font-size:17px;font-weight:600;margin-bottom:4px}
.sinimg span{font-size:15px;line-height:1.4;display:block}
.bright{background:#FFF6D9;border:1px solid #E8D98F;border-radius:10px;padding:11px 13px;font-size:15px;color:#6B5410;display:flex;gap:9px;align-items:center;line-height:1.3}
.bright svg{width:18px;height:18px;flex:none}
body.maxbright{filter:none}

/* tarjeta de traducción */
.tcard{background:#fff;border:2px solid var(--ink);border-radius:14px;padding:18px;display:flex;flex-direction:column;gap:13px}
.tcard .tf{font-family:var(--f-m);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--move)}
.tcard .tbig{font-size:24px;line-height:1.36}
.tcard .taddr{font-family:var(--f-m);font-size:17px;background:var(--fill);padding:12px;border-radius:8px;line-height:1.4}
.tcard .tes{font-size:14px;color:var(--ink3);line-height:1.4;border-top:1px solid var(--soft);padding-top:11px}

/* elegir mapa */
.mapopt{display:flex;align-items:center;gap:14px;padding:15px 4px;border-bottom:1px solid var(--soft);font-size:18px;font-weight:500;width:100%;text-align:left}
.mapopt:last-of-type{border-bottom:none}
.mapopt .mi{width:44px;height:44px;border-radius:11px;flex:none;display:flex;align-items:center;justify-content:center;color:#fff}
.mapopt .mi svg{width:21px;height:21px}
.mapopt .mc{margin-left:auto;color:var(--ink3)}
.mapopt .mc svg{width:18px;height:18px}

/* nota / formulario */
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--f-m);font-size:11px;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:var(--ink3)}
.field input,.field textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:13px;font-size:18px;background:var(--card);color:var(--ink);outline:none;font-family:var(--f-b)}
.field input:focus,.field textarea:focus{border-color:var(--move)}
.field textarea{min-height:110px;resize:vertical;line-height:1.4}
.notecard{background:#FFFDF5;border:1px solid #E8DFC0;border-radius:14px;padding:14px 15px;display:flex;flex-direction:column;gap:9px}
.notecard .nt{font-size:18px;line-height:1.4;white-space:pre-wrap}
.notecard .nm{font-family:var(--f-m);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:#95772B;display:flex;align-items:center;gap:7px}
.notecard .nm svg{width:14px;height:14px}

/* costos */
.ctab{display:flex;flex-direction:column;background:var(--card);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ctab .cr{display:flex;justify-content:space-between;gap:12px;padding:14px 15px;border-bottom:1px solid var(--soft);font-size:17px;align-items:baseline}
.ctab .cr:last-child{border-bottom:none}
.ctab .cr.tot{background:var(--fill);font-weight:600;border-bottom:none}
.ctab .cr.me{background:#F1F7F7}
.ctab .cr.me .cn{color:var(--move);font-weight:600}
.cv{font-family:var(--f-m);font-variant-numeric:tabular-nums;font-weight:500}

/* onboarding */
.ob{flex:1;padding:0 22px;display:flex;flex-direction:column;gap:18px;overflow-y:auto}
.ob .big{font-size:38px;font-weight:800;letter-spacing:-.035em;line-height:1.02}
.ob .lede{font-size:19px;line-height:1.45;color:var(--ink2)}
.foot{flex:none;padding:14px 22px calc(24px + var(--bot));display:flex;flex-direction:column;gap:10px;background:var(--paper)}
.person{background:var(--card);border:1px solid var(--line);border-radius:14px;min-height:80px;display:flex;align-items:center;gap:14px;padding:12px 16px;width:100%;text-align:left}
.person .av{width:48px;height:48px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--f-d);font-weight:700;font-size:18px;letter-spacing:-.02em}
.person .pn{font-family:var(--f-d);font-size:19px;font-weight:700;letter-spacing:-.015em;line-height:1.15}
.person .pd{font-size:14px;color:var(--ink3);margin-top:3px}
.person[aria-pressed="true"]{border-color:var(--ink);border-width:2px}
.ribbon{display:flex;gap:2px;height:10px;border-radius:2px;overflow:hidden}
.ribbon i{display:block;height:100%}
.step{display:grid;grid-template-columns:34px 1fr;gap:14px;align-items:start}
.step .sn{width:30px;height:30px;border-radius:50%;background:var(--ink);color:#fff;font-family:var(--f-m);font-size:15px;font-weight:600;display:flex;align-items:center;justify-content:center;flex:none}
.step .st{font-size:18px;line-height:1.35}
.step .sh{font-size:14px;color:var(--ink3);margin-top:3px;line-height:1.35}

/* tutorial de instalación iOS mejorado */
.inst-paso{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-top:16px}
.inst-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.inst-head .sn{width:32px;height:32px;border-radius:50%;background:var(--move);color:#fff;font-family:var(--f-m);font-size:16px;font-weight:700;display:flex;align-items:center;justify-content:center;flex:none}
.inst-icon{width:56px;height:56px;background:#EAF4F5;border-radius:12px;display:flex;align-items:center;justify-content:center}
.inst-body{padding-left:46px}
.inst-titulo{font-size:17px;font-weight:700;line-height:1.3;margin-bottom:6px}
.inst-desc{font-size:15px;line-height:1.45;color:var(--ink2)}
.inst-tip{display:flex;align-items:flex-start;gap:8px;margin-top:10px;padding:10px 12px;background:#FBF9F5;border-radius:8px;font-size:13px;color:var(--ink3);line-height:1.4}
.inst-tip svg{width:18px;height:18px;flex:none;margin-top:1px}

/* toast */
#toast{position:fixed;left:50%;bottom:calc(96px + var(--bot));transform:translate(-50%,12px);background:var(--ink);color:#fff;padding:13px 18px;border-radius:11px;font-size:16px;font-weight:500;z-index:80;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;max-width:90vw;text-align:center}
#toast.on{opacity:1;transform:translate(-50%,0)}

/* pantalla de carga */
#boot{position:fixed;inset:0;background:var(--paper);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;z-index:90}
#boot .bt{font-family:var(--f-d);font-size:26px;font-weight:800;letter-spacing:-.03em}
#boot .bs{font-size:16px;color:var(--ink2)}
#boot.gone{display:none}


/* ---------- vista del mapa ---------- */
.mapa-main{
  flex:1 1 auto;
  position:relative;
  padding:0!important;
  overflow:hidden;
  min-height:300px;
}
#mapa-leaflet{
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:#E8E4DB;
  z-index:1;
}
/* Asegurar que el modal esté por encima del mapa */
.dim{z-index:9999!important}
.sheet{z-index:10000!important}

/* Punto verde pequeño en el encabezado */
.punto-verde-sm{
  width:10px;height:10px;border-radius:50%;background:#22C55E;flex:none;
  box-shadow:0 0 0 2px rgba(34,197,94,.3);
  animation:pulso 2s ease-in-out infinite
}
@keyframes pulso{
  0%,100%{box-shadow:0 0 0 2px rgba(34,197,94,.3)}
  50%{box-shadow:0 0 0 5px rgba(34,197,94,.15)}
}

/* Marcadores de ciudad personalizados */
.marcador-ciudad{
  display:flex;align-items:center;justify-content:center;
  border-radius:50%;
  font-family:var(--f-m);font-weight:700;
  box-shadow:0 2px 8px rgba(20,32,42,.3);
  border:2.5px solid #fff;
  transition:transform .15s ease;
  background:var(--ink);color:#fff;
}
.marcador-ciudad span{
  display:flex;align-items:center;justify-content:center;
  width:100%;height:100%;
}
.marcador-ciudad:hover{transform:scale(1.15)}

/* Estado: futuro (por visitar) */
.marcador-ciudad.futuro{
  background:var(--ink);color:#fff;
  width:28px;height:28px;font-size:11px;
}
/* Estado: actual */
.marcador-ciudad.actual{
  background:#22C55E;color:#fff;
  width:36px;height:36px;font-size:13px;
  border-color:#16A34A;
  box-shadow:0 0 0 4px rgba(34,197,94,.3),0 2px 8px rgba(20,32,42,.25);
  animation:pulsoMarcador 2s ease-in-out infinite;
}
@keyframes pulsoMarcador{
  0%,100%{box-shadow:0 0 0 4px rgba(34,197,94,.3),0 2px 8px rgba(20,32,42,.25)}
  50%{box-shadow:0 0 0 8px rgba(34,197,94,.15),0 2px 8px rgba(20,32,42,.25)}
}
/* Estado: visitado */
.marcador-ciudad.visitado{
  background:#9CA3AF;color:#fff;
  width:24px;height:24px;font-size:10px;
  opacity:.8;
}

/* Leyenda de países */
.mapa-leyenda{
  position:absolute;bottom:12px;left:12px;right:12px;z-index:1000;
  background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:10px 14px;box-shadow:0 2px 12px rgba(20,32,42,.12)
}
.mapa-leyenda-titulo{font-size:11px;font-weight:600;color:var(--ink3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:6px}
.mapa-paises{display:flex;flex-wrap:wrap;gap:4px 12px}
.mapa-paises span{display:flex;align-items:center;gap:5px;font-size:12px;color:var(--ink2)}
.mapa-paises i{width:12px;height:12px;border-radius:3px;flex:none}

/* Popups del mapa */
.leaflet-popup-content-wrapper{border-radius:14px!important;padding:0;box-shadow:0 4px 20px rgba(20,32,42,.18)!important}
.leaflet-popup-content{margin:0!important;padding:14px 16px;font-family:var(--f-b)}
.leaflet-popup-tip{box-shadow:0 4px 20px rgba(20,32,42,.18)!important}
.popup-ciudad h4{font-family:var(--f-d);font-size:18px;font-weight:700;margin:0 0 2px;letter-spacing:-.02em}
.popup-ciudad .pais{font-size:13px;color:var(--ink2);margin-bottom:8px}
.popup-ciudad .fechas{font-family:var(--f-m);font-size:12px;color:var(--ink);background:var(--fill);padding:8px 10px;border-radius:8px;margin-bottom:10px}
.popup-ciudad .btn-ver{
  display:block;width:100%;background:var(--ink);color:#fff;border:none;border-radius:8px;
  padding:10px;font-size:14px;font-weight:600;cursor:pointer;text-align:center;
  font-family:var(--f-b)
}
.popup-ciudad .btn-ver:active{opacity:.85}

/* Botón Ver detalles en popup del mapa */
.btn-ir{
  display:inline-block;background:var(--acc);color:#fff;border:none;border-radius:6px;
  padding:6px 12px;font-size:13px;font-weight:600;cursor:pointer;
  font-family:var(--f-b);margin-top:8px;transition:background .15s,transform .1s
}
.btn-ir:hover{background:var(--acc-d,#2980b9)}
.btn-ir:active{transform:scale(.97);opacity:.9}

/* Ocultar atribución para más espacio, mostrar solo en hover */
.leaflet-control-attribution{
  font-size:9px!important;background:rgba(255,255,255,.85)!important;
  padding:2px 6px!important;border-radius:4px 0 0 0!important
}
.leaflet-control-zoom{border:none!important;box-shadow:0 2px 8px rgba(20,32,42,.15)!important}
.leaflet-control-zoom a{background:#fff!important;color:var(--ink)!important;border:none!important;width:32px!important;height:32px!important;line-height:32px!important;font-size:18px!important}
.leaflet-control-zoom a:first-child{border-radius:8px 8px 0 0!important}
.leaflet-control-zoom a:last-child{border-radius:0 0 8px 8px!important}