/* Drink, Food & Bed · trozo 1
   Tokens de Diseño/tokens.json (Carta · Lunes con café). La pantalla principal sigue al prototipo (Producto/prototipo/). */
:root{
 --fondo:#F5F7F9;--sup:#FDFEFF;--s2:#E9EBEE;--texto:#15191D;--sec:#575B61;--borde:#D3D4D6;--bfuerte:#848688;
 --acento:#2964F8;--sacento:#F8FAFD;--acento-texto:#215BEE;
 --ok:#00773B;--okf:#E0ECE4;--aviso:#8B6000;--avisof:#EEE9E0;--alerta:#AF3D36;--alertaf:#F6E5E3;--info:#006BB3;--infof:#DFEBF6;
 --r-ctl:12px;--r-hoja:20px;--r-etq:8px;
 --ease-out:cubic-bezier(.23,1,.32,1);--ease-drawer:cubic-bezier(.32,.72,0,1);
 --f:"Geist",system-ui,sans-serif;--fm:"Geist Mono",ui-monospace,monospace;
}
/* v10.21 · tema: Sistema (sigue al aparato), Claro u Oscuro (Ajustes, al tocar DFB) */
@media (prefers-color-scheme:dark){:root:not([data-tema="claro"]){
 --fondo:#0D0E11;--sup:#16181C;--s2:#212428;--texto:#F0F4F9;--sec:#ADB1B8;--borde:#343638;--bfuerte:#64666A;
 --acento-texto:#5287FF;--ok:#71D790;--okf:#24322D;--aviso:#EFB146;--avisof:#332E26;--alerta:#FFA096;--alertaf:#362B2E;--info:#85C4FF;--infof:#26303B}}
:root[data-tema="oscuro"]{
 --fondo:#0D0E11;--sup:#16181C;--s2:#212428;--texto:#F0F4F9;--sec:#ADB1B8;--borde:#343638;--bfuerte:#64666A;
 --acento-texto:#5287FF;--ok:#71D790;--okf:#24322D;--aviso:#EFB146;--avisof:#332E26;--alerta:#FFA096;--alertaf:#362B2E;--info:#85C4FF;--infof:#26303B}
:root[data-tema="claro"]{color-scheme:light}:root[data-tema="oscuro"]{color-scheme:dark}
*{box-sizing:border-box}
html{-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;overscroll-behavior:none}
html,body{height:100%;margin:0}
body{font:16px/1.45 var(--f);color:var(--texto);background:var(--fondo)}
button,[role="button"]{touch-action:manipulation;user-select:none;-webkit-user-select:none;font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
input,select,textarea{font:inherit;font-size:16px;color:var(--texto)}
.mono{font-family:var(--fm);font-variant-numeric:tabular-nums}
.ph{font-size:20px;line-height:1}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
[hidden]{display:none!important}

.app{height:100dvh;display:flex;flex-direction:column;max-width:1100px;margin:0 auto;position:relative;overflow:hidden}
.cab{padding:12px 16px 8px;padding-top:calc(12px + env(safe-area-inset-top));display:flex;align-items:center;justify-content:space-between;gap:10px}
.marca{display:flex;align-items:center;gap:8px;font-weight:600;font-size:17px;white-space:nowrap;min-width:0}
.marca .dfb{font:600 11px/1 var(--fm);padding:5px;border-radius:6px;background:var(--texto);color:var(--fondo);letter-spacing:.04em}
.marca .ruta{font-weight:400;color:var(--sec);font-size:14px;overflow:hidden;text-overflow:ellipsis}
.icono{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;position:relative;flex:none}
.icono:active{transform:scale(.95);background:var(--s2)}
.icono .n{position:absolute;top:6px;right:5px;min-width:18px;height:18px;border-radius:9px;background:var(--acento);color:var(--sacento);font:600 11px/18px var(--fm);text-align:center;padding:0 4px}
.barra{display:flex;gap:6px;padding:0 16px 10px;overflow-x:auto;scrollbar-width:none}
.barra::-webkit-scrollbar{display:none}
.pill{flex:none;min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--bfuerte);color:var(--sec);font-size:14px;font-weight:500;white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.pill[aria-pressed="true"],.pill[aria-selected="true"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
.pill:active{transform:scale(.97)}
.aviso{margin:0 16px 10px;padding:10px 12px;border-radius:var(--r-ctl);background:var(--alertaf);border:1.5px solid var(--alerta);display:flex;gap:10px;align-items:flex-start;text-align:left;width:calc(100% - 32px)}
.aviso .x{font:700 18px/1.1 var(--fm);color:var(--alerta);flex:none}
.aviso b{display:block;font-size:15px;font-weight:600}
.aviso span span{display:block;font-size:13.5px;color:var(--sec);margin-top:2px}
.aviso.ok{background:var(--okf);border-color:var(--ok)}.aviso.ok .x{color:var(--ok)}
.mapa{flex:1;min-height:200px;position:relative;background:var(--s2)}
#map{position:absolute;inset:0}
.leaflet-container{font:inherit;background:var(--s2)}
.leaflet-top,.leaflet-bottom{z-index:400}
.leaflet-control-zoom a{width:40px!important;height:40px!important;line-height:40px!important}
.leyenda{position:absolute;left:10px;bottom:22px;z-index:500;display:flex;gap:10px;align-items:center;background:var(--sup);border:1px solid var(--borde);border-radius:10px;padding:6px 10px;font-size:12.5px;color:var(--sec)}
.leyenda .x{font:700 13px var(--fm);color:var(--alerta)}
.lista-btn{position:absolute;right:10px;top:10px;z-index:500;min-height:40px;padding:0 12px;border-radius:999px;background:var(--sup);border:1px solid var(--bfuerte);font-size:14px;display:inline-flex;gap:6px;align-items:center}
.bandas{display:inline-flex;flex-direction:column;gap:2px;flex:none}
.bandas i{display:block;width:14px;height:4px;border-radius:2px}
.bandas i:first-child{background:var(--sup);outline:1px solid var(--bfuerte)}
.bandas i:last-child{background:var(--ok)}
/* etiquetas del mapa (divIcon) */
.etq{display:inline-flex;align-items:center;gap:5px;background:var(--sup);color:var(--texto);border:1px solid var(--bfuerte);border-radius:var(--r-etq);padding:0 8px;min-height:32px;font:500 13px var(--f);white-space:nowrap;box-shadow:0 1px 2px rgba(15,23,32,.12);transform:translate(10px,-50%);position:relative}
.etq::before{content:"";position:absolute;inset:-6px}
.etq b{font-weight:600}
.etq .ph{font-size:15px;color:var(--sec)}
.etq.refu{border-style:dashed}
.etq.izq{transform:translate(calc(-100% - 10px),-50%)}
.hueco{display:inline-flex;align-items:center;gap:5px;background:var(--sup);color:var(--alerta);border:1.5px dashed var(--alerta);border-radius:var(--r-etq);padding:0 8px;min-height:32px;font:600 13px var(--f);white-space:nowrap;transform:translate(-50%,-50%);position:relative}
.hueco::before{content:"";position:absolute;inset:-6px}
.punto{position:relative;width:18px;height:18px;border-radius:50%;background:var(--sup);border:2.5px solid var(--info);display:grid;place-items:center;font-size:10px;color:var(--info)}
.punto::before{content:"";position:absolute;inset:-13px}
.leaflet-div-icon{background:none;border:0}
/* hoja */
.velo{position:absolute;inset:0;background:rgba(15,23,32,.32);opacity:0;pointer-events:none;transition:opacity 220ms ease;z-index:900}
.velo.on{opacity:1;pointer-events:auto}
.hoja{position:absolute;left:0;right:0;bottom:0;max-height:82%;background:var(--sup);border-radius:var(--r-hoja) var(--r-hoja) 0 0;z-index:901;transform:translateY(105%);transition:transform 300ms var(--ease-drawer);display:flex;flex-direction:column;box-shadow:0 -10px 40px rgba(15,23,32,.18);padding-bottom:env(safe-area-inset-bottom)}
.hoja.on{transform:none}
.asa{width:40px;height:5px;border-radius:3px;background:var(--borde);margin:8px auto 2px;flex:none}
.hcab{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:6px 16px 8px;flex:none}
.hoja h2{margin:0;font-size:21px;font-weight:600;letter-spacing:-.01em}
.sub{font-size:13.5px;color:var(--sec);margin-top:2px}
.cuerpo{overflow-y:auto;overscroll-behavior:contain;padding:0 16px 18px}
.cerrar{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:var(--s2);flex:none}
.bloque{margin-top:14px}
.bloque h3{font-size:13px;font-weight:600;color:var(--sec);margin:0 0 4px;display:flex;align-items:center;gap:6px}
.vacio-b{font-size:14px;color:var(--sec);padding:8px 0;border-top:1px solid var(--borde)}
.sitio{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 0;border-top:1px solid var(--borde)}
.sitio>.ph{color:var(--sec);margin-top:2px}
.nom{font-size:15.5px;font-weight:500;overflow-wrap:anywhere}
.det{font-size:13.5px;color:var(--sec);margin-top:1px;overflow-wrap:anywhere}
.meta{margin-top:3px;font-size:12.5px;line-height:1.35}
.fecha{font:12.5px var(--fm);color:var(--sec);white-space:nowrap}
.fecha.tuyo{color:var(--ok);font-weight:600}.fecha.viejo{color:var(--aviso);font-weight:600}.fecha.sinf{font-style:italic}
.fuente{font-size:12.5px;color:var(--sec)}
.apunte{margin-top:6px;padding:6px 8px;border-radius:8px;background:var(--okf);font-size:13.5px}
.apunte .quien{font:12px var(--fm);color:var(--ok);font-weight:600}
.acc{display:flex;gap:6px;align-items:center}
.marcar,.nota{width:44px;height:44px;border-radius:12px;display:grid;place-items:center;border:1.5px solid var(--bfuerte);color:var(--sec)}
.marcar[aria-pressed="true"]{background:var(--acento);border-color:var(--acento);color:var(--sacento)}
.marcar:active,.nota:active{transform:scale(.95)}
.aviso-pern{font-size:12.5px;color:var(--sec);margin-top:6px}
.formap{margin-top:8px;padding:12px;border-radius:var(--r-ctl);background:var(--s2)}
.formap label{display:block;font-size:13.5px;font-weight:600;margin-bottom:6px}
.formap .fila{display:flex;gap:8px;flex-wrap:wrap}
.formap input{flex:1 1 180px;min-width:0;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--bfuerte);background:var(--sup)}
.formap select{min-height:44px;border-radius:10px;border:1px solid var(--bfuerte);background:var(--sup);padding:0 8px}
.btn{min-height:48px;padding:0 16px;border-radius:var(--r-ctl);font-weight:600;font-size:15px;display:inline-flex;align-items:center;justify-content:center;gap:8px;transition:transform 120ms var(--ease-out);white-space:nowrap}
.btn:active{transform:scale(.97)}
.btn.pri{background:var(--acento);color:var(--sacento)}
.btn.sec{background:var(--s2)}
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}
.chip{min-height:36px;padding:0 12px;border-radius:999px;border:1px solid var(--bfuerte);font-size:13.5px;background:var(--sup)}
/* pantallas */
.pant{position:absolute;inset:0;background:var(--fondo);z-index:950;display:flex;flex-direction:column;overflow:hidden}
.pant .cuerpo{flex:1;padding:8px 16px 24px;max-width:640px;width:100%;margin:0 auto}
.pant h2{font-size:24px;line-height:1.15;margin:6px 0 6px;letter-spacing:-.015em;font-weight:600}
.l{color:var(--sec);margin:0 0 16px;font-size:15.5px}
.caja{border:1.5px dashed var(--bfuerte);border-radius:16px;padding:22px 16px;text-align:center;background:var(--sup)}
.caja>.ph{font-size:34px;color:var(--acento-texto)}
.caja b{display:block;font-size:17px;margin:8px 0 4px}
.caja span{display:block;font-size:14px;color:var(--sec);margin-bottom:14px}
.campo{margin-top:18px}
.campo label{display:block;font-weight:600;font-size:14px;margin-bottom:6px}
.campo input{width:100%;min-height:48px;padding:0 12px;border-radius:12px;border:1px solid var(--bfuerte);background:var(--sup)}
.ayuda{font-size:13px;color:var(--sec);margin-top:6px}
.error{margin-top:14px;padding:12px;border-radius:12px;background:var(--alertaf);border:1.5px solid var(--alerta);font-size:14.5px}
.error b{display:block}
.progreso{height:6px;border-radius:3px;background:var(--s2);overflow:hidden;margin:10px 0 4px}
.progreso i{display:block;height:100%;width:30%;background:var(--acento);animation:ir 1.1s var(--ease-out) infinite alternate}
@keyframes ir{to{transform:translateX(230%)}}
.fila-lista{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--borde);width:100%;text-align:left;min-height:56px}
.fila-lista .km{font:13px var(--fm);color:var(--sec)}
.toast{position:absolute;left:16px;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));z-index:1000;background:var(--texto);color:var(--fondo);border-radius:12px;padding:12px 14px;font-size:14.5px;transform:translateY(16px);opacity:0;visibility:hidden;transition:transform 220ms var(--ease-out),opacity 180ms ease,visibility 0s linear 220ms;max-width:560px;margin:0 auto}
.toast.on{transform:none;opacity:1;visibility:visible;transition:transform 220ms var(--ease-out),opacity 180ms ease}
.atrib{position:absolute;right:0;bottom:0;z-index:500}
@media (hover:hover) and (pointer:fine){.pill:hover,.chip:hover{border-color:var(--texto)}}
@media (prefers-reduced-motion:reduce){
 .hoja,.toast{transition:opacity 160ms ease}.hoja{transform:none;opacity:0;pointer-events:none}.hoja.on{opacity:1;pointer-events:auto}
 .progreso i{animation:none;width:100%}
}

.gmaps{display:inline-flex;align-items:center;gap:6px;min-height:40px;margin-top:6px;padding:0 10px;border-radius:10px;border:1px solid var(--bfuerte);color:var(--texto);text-decoration:none;font-size:13.5px}
.gmaps:active{transform:scale(.97)}
a.btn{text-decoration:none;color:var(--texto)}
.marcado{padding:14px 0;border-top:1px solid var(--borde)}
.correo{margin-top:8px;padding:12px;border-radius:12px;background:var(--s2);font-size:14px;white-space:pre-wrap;user-select:text}
/* trozo 3 · tus puntos traídos (Organic Maps, My Maps) */
.punto.tuyo{border-color:var(--acento);color:var(--acento-texto)}
.etq.tuyo{border-color:var(--acento);border-style:solid}
.reclas{display:inline-flex;align-items:center;gap:6px;margin-left:8px;color:var(--sec)}
.reclas select{min-height:32px;border-radius:8px;border:1px solid var(--bfuerte);background:var(--sup);color:var(--texto);font:inherit;padding:0 6px}
.btn:disabled{opacity:.45;cursor:default}
.formato{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 10px}
/* pantalla importar / exportar */
.tarjeta{border:1px solid var(--bfuerte);border-radius:16px;padding:14px;margin-top:14px;background:var(--sup)}
.tt{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600;margin:0 0 4px}
.tt .num{width:24px;height:24px;border-radius:50%;background:var(--acento);color:var(--sacento);display:grid;place-items:center;font:600 13px var(--fm);flex:none}
.etq-sec{font:500 11px var(--fm);color:var(--sec);border:1px solid var(--bfuerte);border-radius:6px;padding:2px 6px;margin-left:auto;text-transform:uppercase;letter-spacing:.04em}
.pasos-t{font-weight:600;font-size:13.5px;margin:12px 0 6px;padding:0}
.tarjeta fieldset{border:0;margin:0;padding:0}
.como{border-top:1px solid var(--bfuerte);padding:2px 0}
.como summary{min-height:44px;display:flex;align-items:center;cursor:pointer;font-weight:500;font-size:14.5px}
.como summary::after{content:"+";margin-left:auto;color:var(--sec);font:500 18px var(--fm)}
.como[open] summary::after{content:"–"}
.como p{margin:0 0 10px;font-size:13.5px;line-height:1.45;color:var(--sec)}
.opcion{display:flex;align-items:flex-start;gap:10px;border:1.5px solid var(--bfuerte);border-radius:12px;padding:11px 12px;margin-bottom:8px;cursor:pointer}
.opcion input{position:absolute;opacity:0;pointer-events:none}
.opcion > .ph{font-size:20px;color:var(--sec);margin-top:1px}
.opcion > span{display:flex;flex-direction:column;gap:2px}
.opcion > span > span{font-size:13px;color:var(--sec);line-height:1.35}
.opcion:has(input:checked){border-color:var(--acento);box-shadow:inset 0 0 0 1px var(--acento)}
.opcion:has(input:checked) > .ph{color:var(--acento-texto)}
.opcion:has(input:focus-visible){outline:2px solid var(--acento);outline-offset:2px}
.opcion:has(input:disabled){opacity:.5;cursor:default}
.marca .ver{font:500 11px/1 var(--fm);color:var(--sec);border:1px solid var(--bfuerte);border-radius:6px;padding:3px 5px;flex:none}
.marca{overflow:hidden}
@media (max-width:440px){.marca .nomapp{display:none}}
/* sin conexión (trozo 4) */
.sinred{display:flex;gap:10px;align-items:flex-start;margin:0 16px 8px;padding:10px 12px;border-radius:12px;background:var(--s2);border:1px solid var(--bfuerte);font-size:13.5px;line-height:1.4}
.sinred .ph{font-size:18px;margin-top:1px;flex:none}
.sinred[hidden]{display:none}
body.offline .gmaps,body.offline a[href*="google.com/maps"]{display:none!important}
/* v5.3 · móvil: la casilla de fecha del iPhone no se sale, y abrir copia desde el inicio */
.campo input{min-width:0;max-width:100%;box-sizing:border-box;-webkit-appearance:none;appearance:none;display:block}
.campo input::-webkit-date-and-time-value{text-align:left}
.copia-ini{margin-top:14px;border-style:solid}
/* v5.4 · cuatro tipos caben a 375 px: los botones de tipo reparten el ancho */
#tipos .pill{flex:1 1 0;justify-content:center;padding:0 8px;min-width:0}
@media (max-width:400px){#tipos .pill{font-size:13.5px;gap:4px}#tipos .pill .ph{font-size:15px}}
body.tipo-bici .leyenda{display:none}
/* v5.5 · el aviso ocupa dos líneas (se despliega al tocarlo) y barra mientras sigue buscando */
.aviso > span > span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.aviso.abierto > span > span{display:block;-webkit-line-clamp:unset;max-height:40vh;overflow-y:auto}
.bbar{display:flex;align-items:center;gap:10px;margin:0 16px 8px;padding:8px 12px;border-radius:12px;background:var(--s2);font-size:13px;line-height:1.35;color:var(--sec)}
.bbar[hidden]{display:none}
.bbar .btn{min-height:36px;padding:0 12px;margin-left:auto;flex:none}
.bbar.mal .spin{display:none}
.spin{width:14px;height:14px;border-radius:50%;border:2px solid var(--bfuerte);border-top-color:var(--acento);flex:none;animation:giro .9s linear infinite}
@keyframes giro{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spin{animation:none}}
.etq.buscando{color:var(--sec);font-weight:500;gap:6px;border-style:dashed}
/* v5.6 · soltar archivos encima del recuadro */
.caja.encima,.tarjeta.encima{border-color:var(--acento);border-style:solid;box-shadow:0 0 0 3px color-mix(in srgb, var(--acento) 25%, transparent)}
.caja .solo-raton{display:inline;margin:0;font-size:inherit}
@media (hover:none){.solo-raton{display:none!important}}
/* v5.7 · la ficha cerrada no asoma nunca: además de bajarla, se oculta del todo al terminar de cerrarse */
.hoja{transform:translateY(calc(100% + 60px));visibility:hidden;transition:transform 300ms var(--ease-drawer),visibility 0s linear 300ms}
.hoja.on{transform:none;visibility:visible;transition:transform 300ms var(--ease-drawer),visibility 0s}
@media (prefers-reduced-motion:reduce){.hoja{transform:none;transition:opacity 160ms ease,visibility 0s linear 160ms}.hoja.on{transition:opacity 160ms ease,visibility 0s}}
.ver-todo{width:100%;margin-top:12px;justify-content:flex-start;white-space:normal;text-align:left;min-height:48px;line-height:1.3;padding:8px 14px}
/* v5.9 · soltar en toda la pantalla: se resalta y dice qué hará */
[data-soltar]{position:relative}
[data-soltar].encima{outline:3px dashed var(--acento);outline-offset:-10px;border-radius:16px}
[data-soltar].encima::after{content:attr(data-soltar);position:sticky;bottom:16px;display:block;margin:12px 16px;padding:12px 14px;border-radius:12px;background:var(--acento);color:var(--sacento);font-weight:600;font-size:14px;text-align:center;z-index:5;pointer-events:none}
.ayuda.solo-raton{display:block}
/* v5.11 · el aviso recortado enseña que hay más */
.aviso{position:relative}
.aviso.recortado{padding-right:34px}
.aviso.recortado::after{content:"";position:absolute;right:12px;top:50%;width:8px;height:8px;border-right:2px solid var(--sec);border-bottom:2px solid var(--sec);transform:translateY(-70%) rotate(45deg)}
.aviso.recortado.abierto::after{transform:translateY(-20%) rotate(-135deg)}
/* v5.12 · ruta abierta y empezar de nuevo */
.actual{display:flex;flex-direction:column;gap:10px;margin:4px 0 18px;padding:12px 14px;border-radius:14px;background:var(--s2);font-size:14px}
.actual b{display:block;font-size:15px}
.actual span{display:block;color:var(--sec);margin-top:2px;line-height:1.4}
.actual[hidden]{display:none}
.btn.peligro{color:var(--alerta)}
/* v5.14 · color de la ruta a elegir */
.bandas i:last-child{background:var(--ruta, var(--ok))}
.etq .bandas i:last-child{background:var(--ruta, var(--ok))}
.color-ruta{display:inline-flex;align-items:center;gap:4px;color:var(--sec)}
.color-ruta select{min-height:30px;border-radius:8px;border:1px solid var(--bfuerte);background:var(--sup);color:var(--texto);font:inherit;font-size:13px;padding:0 4px}
/* v5.15 · cada icono de arriba dice qué hace */
.icono.con-nombre{width:auto;min-width:52px;height:50px;padding:4px 4px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px}
.icono.con-nombre .ph{font-size:20px}
.icono .lbl{font-size:10.5px;line-height:1.1;font-weight:500;color:var(--sec);white-space:nowrap}
.icono.con-nombre .n{top:0;right:2px}
/* v5.16 · etapas por km */
.etapas-ed{display:flex;flex-direction:column;gap:6px}
.etapas-ed .fila{display:flex;gap:8px}
.etapas-ed input{flex:1;min-width:0;min-height:44px;padding:0 12px;border-radius:10px;border:1px solid var(--bfuerte);background:var(--sup);color:var(--texto)}
.lista-etapas{margin:4px 0 0;padding-left:18px;display:flex;flex-direction:column;gap:4px;color:var(--sec);font-size:13.5px;line-height:1.4}
.lista-etapas b{color:var(--texto);font-weight:600}
.lista-etapas .mal{color:var(--alerta)}

/* v5.17 · buscador en la lista */
.buscador{position:sticky;top:0;z-index:2;background:var(--fondo);padding:8px 0 6px}
.caja-busca{display:flex;align-items:center;gap:8px;border:1px solid var(--borde);border-radius:10px;padding:0 12px;background:var(--sup);min-height:44px}
.caja-busca i{color:var(--sec);font-size:18px}
.caja-busca input{flex:1;min-width:0;border:0;background:transparent;font:16px var(--f);color:var(--texto);padding:10px 0;outline:none}
.chips-lista{display:flex;gap:6px;overflow-x:auto;margin-top:8px;padding-bottom:2px}
.chips-lista .pill{flex:none}
.marc-l{font-weight:500;color:var(--sec);font-size:13px}

/* v5.18 · alfiler del sitio abierto */
.foco{width:34px;height:40px;display:grid;place-items:start center;font-size:34px;line-height:1;color:#D6246E;filter:drop-shadow(0 1px 0 #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 2px 3px rgba(0,0,0,.35))}
button.gmaps.ver-mapa{background:var(--sup);cursor:pointer;font-family:inherit;margin-right:6px}

/* v5.21 · dirección al añadir un sitio */
.anadir input.dir{width:100%;margin-top:8px}
body.situando #map{cursor:crosshair;outline:3px solid var(--acento);outline-offset:-3px}

/* aviso del mapa cuando hay más sitios de los que se pintan (v5.27) */
.mas-zoom{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:800;pointer-events:none;white-space:nowrap;background:var(--texto);color:var(--fondo);border-radius:10px;padding:6px 10px;font-size:13px;display:flex;gap:6px;align-items:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.mas-zoom[hidden]{display:none}
@media (max-width:560px){.mas-zoom{top:56px;font-size:12.5px}}
.lejos-btn{position:absolute;right:10px;top:58px;z-index:500;min-height:36px;padding:0 4px 0 10px;border-radius:999px;background:var(--sup);border:1px solid var(--bfuerte);font-size:13.5px;display:inline-flex;gap:4px;align-items:center}
.lejos-btn select{border:0;background:transparent;font:inherit;color:var(--texto);padding:6px 2px;max-width:170px}
@media (max-width:560px){.mas-zoom{top:104px}}
.etapas-ed .ayuda.mal{color:var(--alerta)}
.etapas-ed .reparto{align-items:center;margin-top:4px}
.etapas-ed .reparto label{flex:1;font-size:.9em}
.etapas-ed .reparto input{flex:0 0 72px;text-align:center}
/* capa del tiempo (D-38) */
body.con-tiempo .leyenda{display:none}
.marca-t{display:inline-block;width:10px;height:10px;border-radius:3px;flex:0 0 auto;vertical-align:middle;margin-right:3px}
.flecha{display:inline-block;font-size:14px;line-height:1}
.etq.tmp{gap:4px;font-variant-numeric:tabular-nums}
.punto .flecha{font-size:11px}
.tiempo-cfg .fila{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:8px}
.tiempo-cfg label{display:flex;flex-direction:column;gap:4px;font-size:13px;color:var(--sec);flex:1 1 120px}
.tiempo-cfg input{min-height:44px;padding:0 10px;border-radius:10px;border:1px solid var(--bfuerte);background:var(--sup);color:var(--texto);font:inherit;width:100%;box-sizing:border-box}
.tiempo-cfg .con-ud{display:flex;align-items:center;gap:6px;color:var(--texto)}
.tiempo-cfg .btn{margin-top:8px}
.tramo-t{display:flex;gap:10px;align-items:flex-start;padding:8px 0;border-bottom:1px solid var(--borde)}
.tramo-t .marca-t{margin-top:5px}
.tramo-t .nom{font-weight:600;font-variant-numeric:tabular-nums}
.tramo-t .det{font-size:13px;color:var(--sec)}
.aviso.tiempo{background:var(--sup);border-color:var(--bfuerte)}.aviso.tiempo .x{color:var(--texto);font-size:20px}
/* v10.1 · cinco tipos caben en el móvil: icono encima y nombre debajo; el nombre de la ruta, solo si cabe entero */
@media (max-width:560px){
 #tipos{gap:5px}
 #tipos .pill{flex-direction:column;gap:2px;min-height:50px;padding:4px 2px;border-radius:14px;font-size:12px;line-height:1.1}
 #tipos .pill .ph{font-size:18px}
 .marca .ruta{display:none}
}
/* v10.2 · Traer de Strava (D-40): el color de Strava en su botón; la lista de rutas en la hoja */
.btn.strava{width:100%;margin-top:10px;background:#fc4c02;color:#fff}
.ruta-st{display:block;width:100%;text-align:left;padding:12px 2px;border-top:1px solid var(--borde)}
.ruta-st:first-of-type{border-top:0}
.ruta-st .nom{font-weight:600;font-size:15px;line-height:1.3}
.ruta-st .nom .ph{font-size:14px;color:var(--sec);vertical-align:-1px}
.ruta-st .sub{color:var(--sec);font-size:13px;margin-top:2px}
.ruta-st:disabled{opacity:.6}
.ruta-st:active{background:var(--s2)}
button.enlace{color:var(--acento-texto);text-decoration:underline;font:inherit;padding:0}
.velo.encima{z-index:960}.hoja.encima{z-index:961}

/* v10.3 · dibujar la ruta por pueblos */
.caja.dibujar{margin-top:14px}
.caja.dibujar input{width:100%;margin-bottom:10px}
.fila-dib{display:flex;align-items:center;gap:8px;margin-bottom:12px;text-align:left;font-size:14px;color:var(--sec)}
.fila-dib select{flex:1;min-width:0}
#dibTxt{margin-top:10px;text-align:left}
#dibTxt ol{margin:6px 0 0 18px;padding:0}
#dibTxt .donde{color:var(--sec)}
.caja.dibujar input,.fila-dib select{min-height:48px;padding:0 12px;border-radius:12px;border:1px solid var(--bfuerte);background:var(--fondo, var(--sup));box-sizing:border-box;max-width:100%}
.caja.dibujar input{display:block;-webkit-appearance:none;appearance:none}
#dibTxt .donde{display:inline;margin:0;font-size:inherit}
/* v10.5 · Strava: rutas guardadas | últimas actividades */
.pest-st{display:flex;gap:4px;padding:4px;margin-bottom:12px;border-radius:12px;background:var(--s2)}
.pest-st button{flex:1;min-height:40px;border-radius:9px;font-weight:600;font-size:14px;color:var(--sec)}
.pest-st button[aria-selected="true"]{background:var(--sup);color:var(--texto);box-shadow:0 1px 2px rgba(0,0,0,.12)}

/* v10.6 · el mapa del tiempo: lluvia, nubes y viento hora a hora, con barra de tiempo */
.tmapa{position:absolute;left:10px;right:10px;bottom:22px;z-index:500;background:var(--sup);border:1px solid var(--borde);border-radius:14px;padding:8px 10px;box-shadow:0 2px 10px rgba(0,0,0,.15);font-size:13px}
.tmapa .capas{display:flex;gap:4px;margin-bottom:6px}
.tmapa .capas button{flex:1;min-height:34px;border-radius:9px;font-weight:600;font-size:13px;color:var(--sec);background:var(--s2);display:flex;align-items:center;justify-content:center;gap:5px}
.tmapa .capas button[aria-pressed="true"]{background:var(--acento);color:#fff}
.tmapa .barra-t{display:flex;align-items:center;gap:8px}
.tmapa .barra-t input{flex:1;min-width:0;accent-color:var(--acento)}
.tmapa .play{width:38px;height:38px;border-radius:50%;background:var(--texto);color:var(--sup);display:grid;place-items:center;flex:none;font-size:16px}
.tmapa .cuando{font:700 13px var(--fm);min-width:76px;text-align:right;white-space:nowrap}
.tmapa .esc{display:flex;align-items:center;gap:6px;margin-top:6px;color:var(--sec);font-size:11.5px;flex-wrap:wrap}
.tmapa .esc i{display:inline-block;width:18px;height:9px;border-radius:2px;vertical-align:middle}
.tmapa .tnota{color:var(--sec);font-size:13px;line-height:1.35;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tmapa .tnota>span{flex:1 1 180px;min-width:0}
.tmapa .tnota .ph{font-size:18px;flex:none}
.tmapa .tnota .btn{min-height:36px;padding:0 12px;flex:none}
.yo-t{width:22px;height:22px;border-radius:50%;background:var(--texto);color:var(--sup);border:2px solid #fff;display:grid;place-items:center;font-size:13px;box-shadow:0 1px 4px rgba(0,0,0,.4)}
body.con-tiempo .mapa .leaflet-bottom.leaflet-right{bottom:150px}

/* v10.9 · perfil de la etapa */
.perfil-btn{position:absolute;right:10px;top:58px;z-index:500;min-height:36px;padding:0 12px;border-radius:999px;background:var(--sup);border:1px solid var(--bfuerte);font-size:13.5px;display:inline-flex;gap:6px;align-items:center}
.perfil-svg{width:100%;height:auto;max-height:38vh;display:block;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.perfil-svg .pf-rej{stroke:var(--borde);stroke-width:.6}
.perfil-svg .pf-t{font:9.5px var(--fm);fill:var(--sec)}
.perfil-svg .pf-l{fill:none;stroke:var(--texto);stroke-width:1.6;stroke-linejoin:round}
.perfil-svg .pf-n{font:700 9px var(--fm);fill:#fff}
.perfil-svg .pf-cur{stroke:var(--texto);stroke-width:1.2;stroke-dasharray:3 2}
.pf-lee{font-size:14px;margin:6px 0 10px;min-height:20px}
.pf-ley{display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--sec);margin-bottom:12px}
.pf-ley i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px}
.pf-h{font-size:15px;margin:4px 0 8px}
.pf-subs{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:10px;scroll-snap-type:x mandatory}
.pf-sub{flex:none;scroll-snap-align:start;display:flex;gap:10px;align-items:center;text-align:left;border:1px solid var(--borde);border-radius:var(--r-ctl);padding:8px 12px 8px 8px;background:var(--sup);min-width:200px}
.pf-sub>span:last-child{display:flex;flex-direction:column;font-size:13px;line-height:1.35}
.pf-sub b{font-size:15px}.pf-sub .sec{color:var(--sec);font-size:12px}
.pf-num{flex:none;width:34px;height:34px;border-radius:8px;display:grid;place-items:center;color:#fff;font:700 15px var(--fm)}
.pf-nav{display:flex;gap:8px;margin:4px 0 10px}.pf-nav .btn{flex:1}
.pf-sub{transition:border-color .15s,box-shadow .15s}.pf-sub.on{border-color:var(--texto);box-shadow:0 0 0 1px var(--texto)}
.pf-subs{position:relative;scroll-snap-type:none}
.pf-sub .pf-nom{font-size:14.5px;max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* v10.14 · modo ordenador (D-52): mapa + perfil fijo debajo + columna con los sitios de la etapa, todo a la vez */
.zona{flex:1;min-height:0;display:flex;flex-direction:column;position:relative}
.pf-dock,.lado{display:none}
@media (min-width:1000px) and (min-height:560px){
 .app{max-width:none}
 .app{--ancho-subs:270px;--ancho-lado:clamp(320px,28vw,420px);--alto-perfil:clamp(190px,30vh,320px)}
 .zona{display:grid;grid-template-columns:minmax(0,1fr) var(--ancho-lado);grid-template-rows:minmax(0,1fr) var(--alto-perfil)}
 .zona .mapa{grid-column:1;grid-row:1;min-height:0}
 .pf-dock{display:block;grid-column:1;grid-row:2;border-top:1px solid var(--borde);background:var(--sup);padding:8px 16px 6px;transition:box-shadow .3s}
 .pf-dock.destello{box-shadow:inset 0 0 0 2px var(--texto)}
 .pf-dock:not(:empty){display:grid;grid-template-columns:minmax(0,1fr) var(--ancho-subs);grid-template-rows:auto minmax(0,1fr) auto;grid-template-areas:"cab cab" "svg subs" "lee subs";column-gap:12px;min-height:0;overflow:hidden}
 .pf-graf{grid-area:svg;min-height:0;min-width:0;position:relative}
 .pf-graf .perfil-svg{position:absolute;inset:0;width:100%;height:100%;max-height:none}
 .pf-dock .perfil-svg .pf-t{font-size:11px}
 .pf-dock .pf-cab{grid-area:cab}
 .pf-dock .pf-lee{grid-area:lee;margin:0 0 2px}
 .pf-dock .pf-subs{grid-area:subs;flex-direction:column;overflow-x:hidden;overflow-y:auto;height:0;min-height:100%;margin:4px 0 0;padding:0 2px 0 0}
 .pf-dock .pf-sub{padding:6px 10px 6px 6px;min-width:0;width:100%}
 .pf-dock .pf-sub .pf-nom{max-width:none}
 .pf-dock .pf-sub>span:last-child{min-width:0}
 .pf-dock .pf-subs{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));align-content:start;gap:8px}
 .pf-dock>.ayuda{grid-column:1/-1}
 .pf-cab{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font-size:13.5px;color:var(--sec)}
 .pf-cab b{color:var(--texto);font-size:15px}
 .pf-cab .pf-ley{margin:0 0 0 auto}
 .lado{display:flex;flex-direction:column;grid-column:2;grid-row:1/3;border-left:1px solid var(--borde);background:var(--sup);min-height:0}
 .lado-cab{padding:12px 16px 8px;display:flex;flex-direction:column;gap:2px;border-bottom:1px solid var(--borde)}
 .lado-cab b{font-size:16px}.lado-cab .sec{font-size:13px;color:var(--sec)}
 .lado-filas{overflow-y:auto;flex:1;padding:4px 8px 16px}
 .perfil-btn{display:none}
 /* la ficha se abre encima de la columna, sin tapar el mapa ni el perfil */
 .velo{display:none}
 .hoja{left:auto;top:0;width:var(--ancho-lado);max-height:none;border-radius:0;border-left:1px solid var(--borde);box-shadow:-8px 0 30px rgba(15,23,32,.12);transform:translateX(calc(100% + 40px))}
 .hoja.on{transform:none}
 .hoja .asa{display:none}
}
/* v10.15 · tiradores entre mapa, perfil y columna (solo ordenador) */
.tirador{display:none}
@media (min-width:1000px) and (min-height:560px){
 .tirador{display:block;position:absolute;z-index:700;touch-action:none}
 .tirador.h{left:0;right:var(--ancho-lado);bottom:calc(var(--alto-perfil) - 5px);height:10px;cursor:row-resize}
 .tirador.s{bottom:0;height:calc(var(--alto-perfil) - 34px);right:calc(var(--ancho-lado) + var(--ancho-subs) + 17px);width:10px;cursor:col-resize}
 .tirador.s::after{top:50%;left:3px;width:4px;height:44px;margin-top:-22px}
 .tirador.v{top:0;bottom:0;right:calc(var(--ancho-lado) - 5px);width:10px;cursor:col-resize}
 .tirador::after{content:"";position:absolute;background:var(--bfuerte);border-radius:3px;opacity:.7;transition:opacity .15s,background .15s}
 .tirador.h::after{left:50%;top:3px;width:44px;height:4px;margin-left:-22px}
 .tirador.v::after{top:50%;left:3px;width:4px;height:44px;margin-top:-22px}
 .tirador:hover::after,.tirador:focus-visible::after,body.arrastrando .tirador::after{opacity:1;background:var(--texto)}
 body.arrastrando{user-select:none;-webkit-user-select:none}
 body.arrastrando #map{pointer-events:none}
}
/* v10.18 · quitar y poner los puntos del mapa */
.puntos-btn{display:none;position:absolute;right:10px;top:148px;z-index:500;min-height:36px;padding:0 12px;border-radius:999px;background:var(--sup);border:1px solid var(--bfuerte);font-size:13.5px;display:inline-flex;gap:6px;align-items:center}
.puntos-btn[aria-pressed="false"]{background:var(--texto);color:var(--fondo);border-color:var(--texto)}
@media (min-width:1000px) and (min-height:560px){.puntos-btn{top:104px}}
/* v10.21 · Ajustes (al tocar DFB) */
button.dfb{cursor:pointer;border:0}
button.dfb:active{transform:scale(.94)}
.ajustes{display:flex;flex-direction:column;gap:16px;padding-top:6px}
.ajustes h3{font-size:13px;font-weight:600;color:var(--sec);margin:0 0 6px}
.segm{display:flex;gap:4px;padding:4px;border-radius:12px;background:var(--s2);flex-wrap:wrap}
.segm button{flex:1 1 0;min-width:0;min-height:40px;border-radius:9px;font-size:14px;font-weight:500;color:var(--sec);display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:0 8px;white-space:nowrap}
.segm button[aria-pressed="true"]{background:var(--sup);color:var(--texto);box-shadow:0 1px 3px rgba(0,0,0,.15)}
.segm .muestra{width:14px;height:14px;border-radius:50%;flex:none;border:2px solid var(--sup);outline:1px solid var(--bfuerte)}
body.sin-perfil .perfil-btn{display:none}
@media (min-width:1000px) and (min-height:560px){body.sin-perfil .zona{grid-template-rows:minmax(0,1fr) 0}body.sin-perfil .pf-dock,body.sin-perfil .tirador.h,body.sin-perfil .tirador.s{display:none}}
/* v10.22 · móvil compacto: qué mirar, el resumen y las capas del tiempo van dentro de DFB; el mapa gana sitio */
body.compacto #tipos,body.compacto #aviso,body.compacto .leyenda,body.compacto .tmapa .capas,body.compacto .tmapa .esc{display:none!important}
body.compacto .tmapa{padding:6px 8px}
body.compacto .leaflet-control-attribution{font-size:9.5px;line-height:1.3;max-width:70vw}
button.dfb i{font-size:13px;margin-left:5px;vertical-align:-2px}
.segm.mirar button{flex-direction:column;gap:2px;min-height:52px;font-size:12.5px}
.segm.mirar button .ph{font-size:18px}
.aviso.en-hoja{margin:0;width:100%}
.esc-hoja{display:flex;align-items:center;gap:6px;margin-top:8px;color:var(--sec);font-size:12px;flex-wrap:wrap}
.esc-hoja i{display:inline-block;width:18px;height:9px;border-radius:2px;vertical-align:middle}