/* CárgaloPR — una app de MD5TO
   Paleta: asfalto de noche, flamboyán para carga rápida, verde "libre", ámbar de apagón. */
:root{
  --asfalto:#15181d;
  --pavimento:#1f242b;
  --pavimento-2:#272d35;
  --linea:#353d48;
  --texto:#eef1f4;
  --texto-2:#a9b2be;
  --flamboyan:#e8483b;
  --flamboyan-hondo:#b8322a;
  --libre:#3fd08a;
  --ambar:#f2b233;
  --nivel2:#6aa7ff;
  --radio-s:10px;
  --radio:16px;
  --radio-l:24px;
  --tab-h:64px;
  --safe-b:env(safe-area-inset-bottom,0px);
  --font:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-ancha:"Archivo",system-ui,sans-serif;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%;background:var(--asfalto);color:var(--texto);font-family:var(--font);font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body{overscroll-behavior:none}
a{color:var(--texto)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
:focus-visible{outline:3px solid var(--ambar);outline-offset:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
img{max-width:100%;display:block}

/* ---------- tipografía ---------- */
.ancha{font-family:var(--font-ancha);font-stretch:125%;letter-spacing:-.01em}
h1,h2,h3{margin:0;font-weight:800;line-height:1.1}
h1{font-size:1.75rem;font-stretch:125%;letter-spacing:-.02em}
h2{font-size:1.25rem;font-stretch:112%}
h3{font-size:1rem}
p{margin:0}
.sub{color:var(--texto-2);font-size:.875rem}
.mini{color:var(--texto-2);font-size:.75rem}
.num{font-variant-numeric:tabular-nums}

/* ---------- estructura ---------- */
#app{position:fixed;inset:0;display:flex;flex-direction:column}
#map{position:absolute;inset:0;background:#0f1216;z-index:0}
.leaflet-container{background:#0f1216;font-family:var(--font)}
.leaflet-tile-pane{filter:invert(1) hue-rotate(185deg) brightness(.82) contrast(.9) saturate(.5)}
.leaflet-control-attribution{background:rgba(21,24,29,.8)!important;color:var(--texto-2)!important;font-size:10px}
.leaflet-control-attribution a{color:var(--texto-2)!important}
.leaflet-control-zoom{display:none}

.top{position:absolute;left:0;right:0;top:0;z-index:5;padding:max(12px,env(safe-area-inset-top)) 16px 0;display:flex;flex-direction:column;gap:12px;pointer-events:none}
.top>*{pointer-events:auto}
.buscar{display:flex;gap:10px}
.campo{flex:1;min-width:0;display:flex;align-items:center;background:rgba(31,36,43,.96);border:1px solid var(--linea);border-radius:var(--radio);height:48px;padding:0 14px}
.campo input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:16px}
.campo input::placeholder{color:var(--texto-2)}
.btn-idioma{width:56px;height:48px;border-radius:var(--radio);border:1px solid var(--linea);background:rgba(31,36,43,.96);font-weight:800;font-size:.875rem}
.chips{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;height:40px;padding:0 18px;border-radius:999px;border:1px solid var(--linea);background:rgba(31,36,43,.96);font-size:.8125rem;font-weight:600;white-space:nowrap}
.chip[aria-pressed="true"]{background:var(--texto);color:var(--asfalto);border-color:var(--texto)}
.chip.apagon[aria-pressed="true"]{background:var(--ambar);border-color:var(--ambar);color:#201600}

.leyenda{display:flex;flex-wrap:wrap;gap:8px 14px;font-size:.75rem;color:var(--texto-2);background:rgba(21,24,29,.9);border:1px solid var(--linea);border-radius:var(--radio-s);padding:6px 10px;align-self:flex-start}
.leyenda span{display:flex;align-items:center;gap:6px}
.punto{width:10px;height:10px;border-radius:50%;display:inline-block}

/* pines */
.pin{border-radius:50%;border:2px solid #0f1216;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:11px;color:#14090a;transition:transform .15s}
.pin.rapido{background:var(--flamboyan);color:#fff}
.pin.nivel2{background:var(--nivel2)}
.pin.privado{background:var(--ambar)}
.pin.dealer{background:#c9a2ff}
.pin.down{background:#5b636e;color:#d9dde2}
.pin.sel{transform:scale(1.35);box-shadow:0 0 0 4px rgba(238,241,244,.85)}
.pin.yo{background:#fff;border-color:var(--flamboyan);width:16px!important;height:16px!important}

/* hoja inferior (estilo app de carga) */
.hoja{position:absolute;left:0;right:0;bottom:calc(var(--tab-h) + var(--safe-b));z-index:6;background:var(--pavimento);border-top:1px solid var(--linea);border-radius:var(--radio-l) var(--radio-l) 0 0;padding:10px 16px 18px;display:flex;flex-direction:column;gap:16px;max-height:62vh;overflow-y:auto;transform:translateY(0);transition:transform .32s cubic-bezier(.2,.8,.2,1)}
.hoja.oculta{transform:translateY(calc(100% + 80px))}
.asa{width:44px;height:5px;border-radius:9px;background:var(--linea);align-self:center;flex-shrink:0;border:0;padding:0}

/* barra de navegación: solo texto, sin íconos */
.tabs{position:absolute;left:0;right:0;bottom:0;z-index:7;height:calc(var(--tab-h) + var(--safe-b));padding-bottom:var(--safe-b);background:var(--asfalto);border-top:1px solid var(--linea);display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.tabs a{display:flex;align-items:center;justify-content:center;text-decoration:none;font-weight:700;font-size:.8125rem;color:var(--texto-2);position:relative}
.tabs a[aria-current="page"]{color:var(--texto)}
.tabs a[aria-current="page"]::after{content:"";position:absolute;top:0;left:30%;right:30%;height:3px;border-radius:0 0 3px 3px;background:var(--flamboyan)}
.tabs a.apagon[aria-current="page"]::after{background:var(--ambar)}

/* paneles a pantalla completa */
.panel{position:absolute;inset:0;bottom:calc(var(--tab-h) + var(--safe-b));z-index:8;background:var(--asfalto);overflow-y:auto;-webkit-overflow-scrolling:touch}
.panel.sin-tabs{bottom:0;z-index:9}
.panel-in{max-width:560px;margin:0 auto;padding:max(16px,env(safe-area-inset-top)) 16px 40px;display:flex;flex-direction:column;gap:22px}
.barra{display:flex;align-items:center;gap:12px;min-height:44px}
.volver{height:44px;padding:0 14px;border-radius:var(--radio-s);border:0;background:var(--pavimento);font-weight:700;text-decoration:none;display:inline-flex;align-items:center}

/* bloques */
.caja{background:var(--pavimento);border:1px solid var(--linea);border-radius:var(--radio);padding:18px 16px}
.caja.plana{background:transparent}
.fila{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.grid3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.dato{background:var(--pavimento-2);border-radius:var(--radio-s);padding:12px}
.dato b{display:block;font-size:1.0625rem;font-weight:800;margin-top:4px}
.etiqueta{font-size:.75rem;color:var(--texto-2)}
.lista{display:flex;flex-direction:column;gap:12px}
.item{display:flex;gap:14px;align-items:center;background:var(--pavimento);border:1px solid var(--linea);border-radius:var(--radio);padding:16px;text-decoration:none;color:var(--texto)}
.item .cuerpo{flex:1;min-width:0}
.item .cuerpo strong{display:block;font-size:.9375rem;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.marca{font-size:.75rem;font-weight:700;padding:4px 8px;border-radius:8px;flex-shrink:0;white-space:nowrap}
.marca.ok{background:#123826;color:#a6f0c9}
.marca.gen{background:#3d2c08;color:#ffe2a3}
.marca.no{background:#30363f;color:#e2e6ea}
.marca.rapido{background:#3b1512;color:#ffc7c1}

/* el número grande: la pieza memorable */
.cifra{font-family:var(--font-ancha);font-stretch:125%;font-weight:800;font-size:2.75rem;line-height:1;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.cifra-m{font-family:var(--font-ancha);font-stretch:125%;font-weight:800;font-size:1.5rem;line-height:1.05;font-variant-numeric:tabular-nums}
.barra-carga{height:10px;border-radius:9px;background:var(--pavimento-2);position:relative;overflow:hidden}
.barra-carga i{position:absolute;top:0;bottom:0;border-radius:9px;background:var(--libre);transition:left .4s,width .4s}

/* botones */
.acciones{display:flex;gap:12px}
.btn{flex:1;min-height:52px;flex-direction:column;line-height:1.25;border-radius:var(--radio-s);border:1px solid var(--linea);background:transparent;font-weight:800;font-size:.9375rem;display:inline-flex;align-items:center;justify-content:center;text-align:center;text-decoration:none;padding:8px 16px;gap:2px}
.btn.claro{background:var(--texto);color:var(--asfalto);border-color:var(--texto)}
.btn.rojo{background:var(--flamboyan);color:#fff;border-color:var(--flamboyan)}
.btn.ambar{background:var(--ambar);color:#201600;border-color:var(--ambar)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.seg{display:flex;gap:10px;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:2px 16px 4px}
.seg::-webkit-scrollbar{display:none}
.seg button{flex-shrink:0;min-height:54px;padding:8px 16px;border-radius:12px;border:1px solid var(--linea);background:var(--pavimento-2);font-size:.875rem;font-weight:700;text-align:left;line-height:1.2}
.seg button small{display:block;font-weight:600;color:var(--texto-2);font-size:.75rem;margin-top:3px}
.seg button[aria-pressed="true"]{background:var(--texto);color:var(--asfalto);border-color:var(--texto)}
.seg button[aria-pressed="true"] small{color:#4a525d}
.tabs-seg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:4px;background:var(--pavimento);border:1px solid var(--linea);border-radius:14px;padding:4px}
.tabs-seg button{min-height:46px;padding:6px 8px;line-height:1.2;border-radius:10px;border:0;background:transparent;color:var(--texto-2);font-weight:700;font-size:.875rem}
.tabs-seg button[aria-selected="true"]{background:var(--texto);color:var(--asfalto)}

/* formularios */
label.f{display:flex;flex-direction:column;gap:8px;font-size:.875rem;font-weight:600}
.f input,.f select,.f textarea{min-height:48px;border-radius:12px;border:1px solid var(--linea);background:var(--pavimento);padding:10px 14px;font-size:16px;font-weight:500}
.f textarea{min-height:90px;resize:vertical}
.check{display:flex;gap:12px;line-height:1.4;align-items:flex-start;font-size:.875rem}
.check input{width:22px;height:22px;margin:0;flex-shrink:0;accent-color:var(--ambar)}

/* aviso y publicidad */
.aviso{border-radius:var(--radio);padding:12px 14px;font-size:.875rem;line-height:1.4}
.aviso.ambar{background:#2e2208;border:1px solid #7a5a12;color:#ffe2a3}
.aviso.gris{background:var(--pavimento);border:1px solid var(--linea);color:var(--texto-2)}
.aviso.verde{background:#0f2c1f;border:1px solid #1f6b47;color:#bff3d8}
.anuncio{display:flex;gap:12px;align-items:center;border:1px dashed #4a5361;border-radius:var(--radio);padding:12px 14px;text-decoration:none;color:var(--texto)}
.anuncio .tag{font-size:.6875rem;font-weight:700;color:var(--texto-2);border:1px solid var(--linea);border-radius:6px;padding:2px 6px;flex-shrink:0}
.carrusel{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;margin:0 -16px;padding:0 16px}
.carrusel::-webkit-scrollbar{display:none}
.espacio{scroll-snap-align:start;flex:0 0 86%;min-height:150px;border-radius:var(--radio-l);padding:16px;display:flex;flex-direction:column;justify-content:space-between;gap:12px;border:1px solid var(--linea)}
.espacio.a{background:linear-gradient(160deg,#1c2a44,#15181d)}
.espacio.b{background:linear-gradient(160deg,#3a1714,#15181d)}
.espacio.c{background:linear-gradient(160deg,#16352a,#15181d)}

/* bienvenida */
.bienvenida{position:absolute;inset:0;z-index:20;background:var(--asfalto);overflow-y:auto}
.bienvenida .panel-in{min-height:100%;justify-content:space-between;padding-top:max(28px,env(safe-area-inset-top))}
.marca-app{font-family:var(--font-ancha);font-stretch:125%;font-weight:900;font-size:3rem;letter-spacing:-.04em;line-height:.95}
.marca-app span{color:var(--flamboyan)}
.foto-hero{border-radius:var(--radio-l);overflow:hidden;aspect-ratio:16/10;background:var(--pavimento) center/cover no-repeat;position:relative}
.foto-hero figcaption{position:absolute;left:12px;bottom:10px;font-size:.6875rem;color:#e6e9ec;text-shadow:0 1px 2px #000}

/* carga en vivo */
.anillo{position:relative;width:240px;height:240px;align-self:center}
.anillo svg{width:100%;height:100%}
.anillo .centro{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}

/* pie */
.pie{padding:24px 0 8px;display:flex;flex-direction:column;gap:6px;align-items:center;text-align:center;color:var(--texto-2);font-size:.75rem}
.pie nav{display:flex;flex-wrap:wrap;gap:12px;justify-content:center}
.pie a{color:var(--texto-2)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(var(--tab-h) + 20px + var(--safe-b));transform:translateX(-50%) translateY(20px);opacity:0;z-index:50;background:var(--texto);color:var(--asfalto);padding:12px 16px;border-radius:12px;font-weight:700;font-size:.875rem;transition:all .25s;max-width:calc(100% - 32px);pointer-events:none}
.toast.si{opacity:1;transform:translateX(-50%) translateY(0)}

.cargando-datos{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:var(--texto-2);z-index:1}

@media (min-width:900px){
  .hoja{left:16px;right:auto;width:420px;bottom:calc(var(--tab-h) + 16px);border-radius:var(--radio-l);border:1px solid var(--linea)}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ajustes de espacio */
.panel:focus,.panel:focus-visible{outline:none}
#viaje-res{display:flex;flex-direction:column;gap:16px}
#viaje-res>.btn,.panel-in>.btn,.panel-in>form>.btn{width:100%;flex:0 0 auto}
.caja .seg{margin-top:2px}

/* rótulos de pueblos sobre la isla dibujada */
.rotulo{background:none;border:0}
.rotulo span{position:relative;left:-50%;top:-8px;display:inline-block;white-space:nowrap;font-size:11px;font-weight:700;color:#c3cad3;text-shadow:0 1px 2px #0f1216,0 0 6px #0f1216;letter-spacing:.01em}
.leaflet-container{background:#0d1a26}

/* tienda */
.producto{display:flex;flex-direction:column;gap:6px;background:var(--pavimento);border:1px solid var(--linea);border-radius:var(--radio);padding:16px;text-decoration:none;color:var(--texto)}
.producto strong{font-size:1rem}
.producto .sub{line-height:1.4}
.producto .ir{margin-top:6px;align-self:flex-start;font-size:.8125rem;font-weight:800;padding:8px 12px;border-radius:10px;background:var(--texto);color:var(--asfalto)}
.producto.destacado{border-color:#7a5a12;background:#21190a}
.grupo{display:flex;flex-direction:column;gap:12px}

.panel{overflow-x:hidden}.panel *{min-width:0}.cuenta-hola h2,.cuenta-hola .sub{overflow-wrap:anywhere;word-break:break-word}.cuenta-hola .btn{margin-top:12px;width:100%}