/* Top of every screen: the title on the left, the trip button (EP) on the right. */
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:18px;min-height:76px}
.top h1{min-width:0}
.top .sub{display:block;font:600 var(--fs-s)/1.2 var(--body);color:var(--muted);letter-spacing:0;margin-bottom:6px}
.top .right{display:flex;gap:8px;align-items:center;flex:none}
/* EP button: white circle ringed in the trip's own color */
.tripbtn{flex:none;width:48px;height:48px;border-radius:50%;border:3px solid var(--accent);background:var(--panel);color:var(--ink);box-shadow:var(--shadow);
  font:800 16px/1 var(--display);letter-spacing:.01em;display:grid;place-items:center;padding:0}
.chip.offline{background:var(--now-bg);color:var(--now)}

/* Floating menu at the bottom: Ara · Dies · Mapa · Apps · Info.
   The open tab grows into a turquoise pill with its name (dark text: white on turquoise is unreadable). */
.bar{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:6;
  background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  border-radius:999px;padding:6px;box-shadow:0 10px 30px rgba(21,49,58,.14)}
.bar .wrap{display:flex;gap:4px;max-width:none}
.tabbtn{display:flex;align-items:center;justify-content:center;gap:8px;height:52px;min-width:52px;padding:0;border:0;border-radius:999px;
  background:transparent;color:var(--ink);font:700 var(--fs-m)/1 var(--body)}
.tabbtn span:not(.ico){display:none}
.tabbtn .ico,.tabbtn .ico svg{width:22px;height:22px}
.tabbtn[aria-current="page"]{background:var(--brand);color:var(--on-brand);padding:0 18px 0 14px}
.tabbtn[aria-current="page"] span:not(.ico){display:inline}
.tabbtn[aria-current="page"] .ico{color:var(--on-brand)}
.tabbtn[aria-current="page"] .ico svg{stroke-width:2.3}
/* Small phones (iPhone SE): five tabs still fit */
@media (max-width:360px){.tabbtn{min-width:46px;height:48px}.tabbtn[aria-current="page"]{padding:0 14px 0 11px}}

/* Edit mode strip */
.editbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--panel);border:2px dashed var(--line);border-radius:18px;padding:10px 12px;margin-top:12px}
.editbar .label{margin-right:auto}

/* Two-option switch (Ajustos) */
.seg{display:flex;gap:6px;flex-wrap:wrap;background:var(--panel-2);border-radius:999px;padding:4px;width:max-content;max-width:100%}
.seg .btn{min-height:40px;background:transparent}
.seg .btn[aria-pressed="true"]{background:var(--brand);color:var(--on-brand)}
.editbar .btn{background:var(--panel-2)}

/* Pull down from the top to update: a pill that slides down with the finger. */
html,body{overscroll-behavior-y:none}
.ptr{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 6px);z-index:30;display:flex;align-items:center;gap:8px;
  padding:8px 14px 8px 8px;border-radius:999px;background:var(--panel);box-shadow:0 8px 24px rgba(21,49,58,.16);
  font:700 var(--fs-s)/1 var(--body);color:var(--ink);white-space:nowrap;pointer-events:none;opacity:0;
  transform:translate(-50%,calc(var(--d,0px) - 70px));transition:transform .25s ease,opacity .2s}
.ptr.drag{transition:none}
.ptr.on{opacity:1}
.ptr .ico{width:30px;height:30px;border-radius:50%;background:var(--panel-2);display:grid;place-items:center;transform:rotate(var(--turn,0deg))}
.ptr .ico svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.ptr.ready .ico,.ptr.busy .ico{background:var(--brand);color:var(--on-brand)}
.ptr.busy .ico{animation:ptrspin .8s linear infinite}
@keyframes ptrspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.ptr.busy .ico{animation:none}}

/* Ajustos: version + check for updates */
.updrow{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.updrow .ver{font:600 var(--fs-xl)/1 var(--display)}
#updMsg.ok{color:var(--ok)}
#updMsg.warn{color:var(--now)}