/* 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;
}
@media (prefers-color-scheme:dark){:root{
 --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}}
*{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}