/* web/css/en-viaje.css — team En viaje (D219): Mis viajes, Hoy, Mapa and Interactivo, Costos and
   Cuentas, Resumen, Esenciales, the taxi card and the medical card. Loaded after base.css.
   E31-2 moved here, in their original order, the rules of index.html's <style> that only this
   team's screens use. A rule that could have won or lost against a later rule of base.css
   once moved (one element, one property, the same specificity) stayed in base.css; the style
   comparator (api/tests/e2e/tools/style_oracle.py) found no difference. This file loads after
   base.css: on a tie, its rule wins. */
.hlost{border-left:3px solid var(--red);background:var(--redsoft);padding:10px 12px;margin:0 0 10px;display:flex;gap:10px;align-items:flex-start;justify-content:space-between}
.hlost p{margin:0}
.hlost button{min-height:44px;min-width:44px;flex:none}
.hhello{font-weight:700;font-size:1.05rem;margin:6px 0 2px}
.hlater{margin-top:18px}
.hlater ul{margin:0;padding-left:1.1em}
.hlater li{margin:6px 0}
/* 44 px to tap, but the negative margins keep the line box at the text's height: a link that
   wraps no longer opens a gap between the lines of its item (2.22). */
.hlater a{display:inline-flex;align-items:center;min-height:44px;margin:-11px 0}
.mapcol{position:relative;border-right:1px solid var(--hair);min-width:0}
.mapbox{position:relative;height:calc(100vh - 170px);min-height:220px}
@media (min-width:981px){
  .mapbox{height:auto;aspect-ratio:25/18;min-height:0}
}
#map.drag{cursor:grabbing}
.mapbar{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px 18px;padding-block:8px;font-size:.8rem;padding-right:12px}
.key .kh{font:700 .62rem var(--gothic);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);padding:0 2px 2px;text-align:left;display:flex;justify-content:space-between;gap:12px}
.key .kh:hover{color:var(--ink)}
.key.min .kh{padding:0 2px}
.key.min .kh span{display:inline-block;transform:rotate(-90deg)}
.key .kt::before{display:none}
.key .kt:hover{background:var(--redsoft)}
.key .kt[aria-pressed="false"]{color:var(--ink3)}
.key .kt[aria-pressed="false"] svg{opacity:.25}
.key .kt[aria-pressed="false"] span{text-decoration:line-through}
.seaR{font-family:var(--gothic);fill:var(--ink3);letter-spacing:.18em;text-transform:uppercase}
.shk-o{fill:none;stroke:var(--ink3);stroke-width:3;vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round;opacity:.55}
.shk-i{fill:none;stroke:var(--paper);stroke-width:1.4;stroke-dasharray:5 5;vector-effect:non-scaling-stroke}
.seglab{font-family:var(--mono);fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-linejoin:round;text-anchor:middle;pointer-events:none}
.st .dtd{fill:var(--white);stroke:var(--dtc);stroke-width:2}
.st.on .dtd,.st.hov .dtd{fill:var(--dtc)}
.st .opd{fill:var(--paper);stroke:var(--ink3);stroke-width:1.3;stroke-dasharray:2 1.5}
.lk{font-family:var(--mincho);font-weight:900;fill:var(--ink);paint-order:stroke;stroke:var(--paper);stroke-linejoin:round;pointer-events:none}
.st.dtrip .lk{fill:var(--ink2);font-weight:600}
.st.optp .lk{fill:var(--ink3);font-weight:600}
.halo{fill:none;stroke:var(--sakura);stroke-width:2;stroke-dasharray:1 3;vector-effect:non-scaling-stroke;stroke-linecap:round}
.sk{font-family:var(--mincho);font-weight:900;fill:var(--sakura)}
.side-h{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0 10px 18px;border-bottom:1px solid var(--hair);position:sticky;top:0;background:var(--paper);z-index:2}
.side-h h2{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.side-h button{font-size:.8rem;color:var(--red);font-weight:700}
.spur{display:flex;align-items:center;gap:8px;color:var(--ink);cursor:pointer;width:fit-content}
.spur::before{content:"";width:22px;border-top:2px dotted var(--dtc);margin-left:-26px}
.spur .ro2{font-weight:700;font-size:.7rem;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2)}
.spur span.m{font:.72rem var(--mono);color:var(--ink2)}
.spur:hover .kj{color:var(--dtct)}
.sign .band{background:var(--red);height:9px}
.atl{display:flex;flex-direction:column}
.legend-at{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.72rem;color:var(--ink2);margin-top:6px}
.legend-at span{display:inline-flex;gap:5px;align-items:center}
.legend-at i{width:14px;height:10px;border:1.5px solid var(--ink);border-radius:2px;display:inline-block}
.vid{display:grid;grid-template-columns:112px minmax(0,1fr);gap:10px;align-items:start;padding:6px;border:1px solid var(--hair);color:inherit;text-decoration:none}
.vid:hover{border-color:var(--red);background:var(--redsoft)}
.vid .th{width:112px;aspect-ratio:16/9;background:var(--land);display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative}
.vid .th img{width:100%;height:100%;object-fit:cover;display:block}
.vid .th .ic{font:700 .66rem var(--mono);letter-spacing:.08em;color:var(--ink2);text-transform:uppercase;text-align:center;padding:4px}
.vid .th .pl{position:absolute;inset:auto 4px 4px auto;background:var(--redbg);color:#fff;font-size:.6rem;padding:1px 5px;border-radius:2px}
.vid b{display:block;font-size:.82rem;line-height:1.35;overflow-wrap:anywhere}
.vid small{display:block;color:var(--ink2);font-size:.72rem;margin-top:2px}
.vtag.season{border-color:var(--sakura);color:var(--sakurat)}

/* Costs */
.costgrid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:32px;align-items:start}
.tot{position:sticky;top:12px}
.tot .usd{font-family:var(--mono);color:var(--ink2);font-size:.9rem}
.tot .r b{font-family:var(--mono);font-weight:500}
.assume{display:flex;flex-direction:column;gap:7px;margin-top:20px;font-size:.82rem}
.assume label{display:flex;justify-content:space-between;align-items:center;gap:10px}
.assume input{width:66px;font:inherit;font-family:var(--mono);background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:1px 4px;text-align:right}
.assume .u{font-family:var(--mono);white-space:nowrap;color:var(--ink2)}
.assume #c-budget{width:118px}
.assume .cbuderr{color:var(--red);font-size:.74rem;text-align:right;margin-top:-3px}
.assume .cbuderr[hidden]{display:none}
/* D153: the rate's source and today's ECB reference, under "Yenes por dólar" */
.cfx{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:4px 10px;margin-top:-2px;text-align:right}
.cfx[hidden]{display:none}
.cfx .cfxs{font-family:var(--mono);font-size:.76rem;color:var(--ink2)}
.cfx .cfxm,.cfx .cfxn{flex-basis:100%;font-size:.74rem;color:var(--ink2)}
.cfx .cfxm:empty{display:none}
.cfx .cfxm.bad{color:var(--red)}
#c-fx-gastos .fxnote{margin:10px 0 -4px}
#c-fx-acc .fxnote{margin:0 0 8px}
.xt .xfx{display:block;font-size:.74rem;color:var(--ink2)}
.xt .xfxb{color:var(--red);font-weight:700;font-size:inherit;padding:0}
.xt .xfxe{display:flex;align-items:center;gap:6px;margin-top:4px;font-size:.78rem;color:var(--ink2)}
.xt .xfxe input{width:110px;font:inherit;font-family:var(--mono);background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:2px 4px;text-align:right}
@media (pointer:coarse),(max-width:640px){.xt .xfxb{min-height:44px;display:inline-flex;align-items:center}.xt .xfxe input{min-height:44px}}
.csum .cbudt{margin:4px 0 2px;max-width:320px}
.csum .ci small.cbud{color:var(--ink)}
.csum .ci small.cbud.late{color:var(--red);font-weight:700}
.sakline{font-size:.82rem;color:var(--ink2)}
.sakline b{color:var(--sakura)}
.bcard .zone .mmenu{color:inherit}

@media (max-width:980px){
  .mapcol{border-right:0}
  .mapbox{height:62vh;min-height:380px}
  .costgrid{grid-template-columns:1fr}
  .tot{position:static}
}
.tot .r.spent{border-top:2px solid var(--ink);margin-top:6px;font-weight:700}

/* Today view (its width now comes from the D85 container) */
.tsim{display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px;border:1.5px dashed var(--red);color:var(--red);font-weight:700;font-size:.86rem;padding:8px 12px;margin-bottom:14px}
.tsim[hidden]{display:none}
.tsim button{color:var(--ink);font-weight:400;text-decoration:underline}
.tpre{flex-direction:column;align-items:flex-start}
/* D147: the column blocks in one grid. Here (981-1439 px) .tc1 spans the rows of
   .tc2-.tc3, whose last track is 1fr: a tall left column only stretches that track, so
   the right column stacks with no gaps. D156: the pending list (#t-todo) is always inside
   .tc1 (orderToday() places it by moment). */
.tgrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0 40px}
.tgrid>div{min-width:0}
@media (min-width:981px){
  .tgrid{grid-template-rows:auto auto 1fr}
  .tgrid>.tc1{grid-column:1;grid-row:1/-1}
  .tgrid>.tc2{grid-column:2;grid-row:1}
  .tgrid>.tc3{grid-column:2;grid-row:2;align-self:start}
}
.tsum p{margin-top:6px}
.tatl{display:flex;flex-direction:column}
.tat{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;align-items:start;padding:6px 0;border-bottom:1px solid var(--hair);font-size:.9rem;overflow-wrap:anywhere}
.tat small{display:block;color:var(--ink2);font-size:.78rem}
.tat.done b{color:var(--ink2);text-decoration:line-through;text-decoration-color:var(--ink3)}
.tnext p{margin-top:4px}
.texpf{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.texpf input[type=text]{grid-column:1/-1}
.texpf input[type=number],#t-yen{font-family:var(--mono);text-align:right}
/* C9: the expense form's button, Hoy's and Costos': the primary one across the form. */
.texpf>.dbtn.pri{grid-column:1/-1}
#exp-form{max-width:560px;margin-top:16px}
#t-notes{resize:vertical;min-height:96px;display:block}
.texl{margin-top:10px}
.tex{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;padding:5px 0;border-bottom:1px solid var(--hair);font-size:.88rem}
.tex small{display:block;color:var(--ink2);font-size:.75rem}
.tex .del{color:var(--ink3);font-size:1.2rem;line-height:1;padding:0 6px}
.tled{grid-template-columns:1fr;margin-top:10px}
/* Round 4 of the interactive map (js/maps-links.js): "Cómo llegar" beside "Abrir en Maps",
   the other app in a small fold ("Abrir en…", inline when open, nothing over the card). */
.mdir,.mother{color:var(--red);font-weight:700;font-size:.8rem;white-space:nowrap;text-decoration:none;margin-left:10px}
.mdir:hover,.mother:hover{text-decoration:underline}
.mmore{display:inline-block;margin-left:10px;vertical-align:baseline}
.mmore[open]{display:block;margin-left:0}
.mmore>summary::-webkit-details-marker{display:none}
.mmore[open]>summary{color:var(--ink)}
.mmenu{display:flex;flex-wrap:wrap;gap:0 14px}
.mmenu .mother{margin-left:0}
.mzone{white-space:normal}
.ima .imore{align-self:center;margin-left:2px}
@media (max-width:980px){.tgrid{grid-template-columns:1fr}}
@media (pointer:coarse),(max-width:640px){
  #t-notes{min-height:120px}
}
@media (max-width:520px){   /* D161 (3): a class, the stage span comes first now */
  .tsim{flex-wrap:nowrap;gap:8px;border:0;border-left:3px solid var(--red);background:var(--redsoft);padding:0 8px;margin-bottom:10px;font-size:.76rem;white-space:nowrap;overflow:hidden}
  .tsim>span{overflow:hidden;text-overflow:ellipsis;min-width:0}
  .tsim button{flex:none;margin-left:auto}
}
@media (pointer: coarse){
  /* Map legend (mockup 2026-10-18, D70): the fold header and the four layer switches
     (ida, vuelta, day trips, red). The reference hides .key below 521 px, so this only
     reaches tablets and landscape phones, where the legend starts folded (map < 520 px). */
  #key-fold,.key .kt{min-height:44px}
}
/* Ida / Vuelta chips of the bottom bar (narrow only, .tg.narrow), drawn like the legend's
   own switches (.key .kt) they stand for: the line swatch in its colour, no square (one row
   less of chips at 120 % text on a 375-390 px phone), faded and struck through when off. */
.tgl svg{display:block;flex:none}
.tg.tgl::before{display:none}
.tgl[aria-pressed="false"]{color:var(--ink3)}
.tgl[aria-pressed="false"] svg{opacity:.25}
.tgl[aria-pressed="false"] span{text-decoration:line-through}

/* ===== UI iteration in web/ (D84-D90) ============================================== */
@media (min-width:981px){.mapcol{border-left:1px solid var(--hair)}}

/* Hoy: day title with the climate widget (D91) and the day navigation bar (D86) */
.thd{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:8px 28px;border-bottom:2px solid var(--ink);padding-bottom:10px}
.thd .thead{border-bottom:0;padding-bottom:0}
#t-head{min-width:0}
@media (max-width:640px){.thd{flex-direction:column;align-items:stretch}}
/* D86: ‹ ayer · volver a hoy · mañana ›, bordered like the theme switch */
.tnav{display:flex;align-items:center;gap:8px;padding-top:8px}
.tnav .dnav.home{border-color:var(--red);color:var(--red);margin-inline:auto}
.tnav .dnav.home:hover{background:var(--redbg);color:#fff}
#t-dnext{margin-left:auto}

/* D88: "La línea, 17.03 → 19.04" on one line, the key underneath in small grey type */
.side-h.lh{flex-direction:column;align-items:flex-start;gap:1px;padding-right:12px}
.side-h.lh h2{white-space:nowrap}
.side-h.lh .small{font-size:.72rem;color:var(--ink3)}

/* D89: Mapa at <= 520 px. The sheet takes the window below the header (fitSheet() sets
   its height, body.fit as on desktop) and the page does not scroll: the map bleeds to the
   screen edges, regions and layer switches are one sideways-scrolling row each, and the
   line column becomes a panel under a toggle bar (#side-tg). The panel opens by itself
   when a station, a leg or an attraction is chosen; the map shrinks while it is open. */
.side-tg{display:none}
@media (max-width:520px){
  body.fit .mapcol{flex:1 1 0;min-height:0;display:flex;flex-direction:column}
  body.fit .mapbox{flex:1 1 auto;height:auto;min-height:120px;
    margin-left:calc(-1 * max(16px,env(safe-area-inset-left,0px)));margin-right:calc(-1 * max(16px,env(safe-area-inset-right,0px)))}
  body.fit .mapbar{flex:none;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:0;padding:2px 0}
  body.fit .side-tg{display:flex;flex:none;width:100%;min-height:44px;justify-content:space-between;align-items:center;gap:10px;border-top:2px solid var(--ink);
    font-size:.74rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);text-align:left}
  body.fit .side-tg span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
  body.fit .side-tg i{font-style:normal;flex:none;color:var(--red);letter-spacing:0}
  body.fit.side-open .side{display:flex}
  body.fit.side-open .mapbar{display:none}
}

/* ===== D92/D93: place sheet (#v-place) ============================================= */
.pfbtn:hover{background:var(--ink);color:var(--paper)}

/* ===== D163 (a): the list of the day (js/day-route.js) and the opening hours =====
   Between two stops a light line (walk or transport, "Cómo llegar ›"); the place sheet's
   number badge (.pn) on Hoy's rows too; hours under the name, red when closed. */
.tpn{width:22px;height:22px;font-size:.7rem;vertical-align:1px}

/* ===== D100-D103: payments, dollars and the Costos sections ========================= */
/* Summary on top of Costos: estimate, spent, paid before the trip (yen and US$). */
.csum{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));gap:10px 28px;border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);padding:12px 0 14px;margin-bottom:6px}
.csum .ci{display:flex;flex-direction:column;gap:2px;min-width:0}
.csum .ci>span{font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.csum .ci b{font:500 1.45rem var(--mono);line-height:1.15;color:var(--ink)}
.csum .ci.ciest b{color:var(--red)}   /* not .est: that class is the global "estimada" tag */
.csum .ci small{font:.82rem var(--mono);color:var(--ink2);overflow-wrap:anywhere}
/* Add form: two rows of four on wide screens, two columns when narrow. */
.expf-h{grid-column:1/-1;margin:0}
/* D161 (5): en viaje, Vuelos and Hoteles (bookings paid before the trip) fold under their
   heading with the subtotal ("Vuelos · US$ 2.265 ▸"); the heading is the <summary>. */
.csfold>summary{list-style:none;cursor:pointer}
.csfold>summary::-webkit-details-marker{display:none}
.csfold>summary .csh::after{content:"▸";color:var(--red);margin-left:.1em}
.csfold[open]>summary .csh::after{content:"▾"}
.csfold>summary:focus-visible{outline:2px solid var(--red);outline-offset:2px}
.csh .csft{color:var(--ink2);font-weight:500}
.csec:not(.cfold) .csft{display:none}
@media (pointer:coarse){.csfold>summary .csh{min-height:44px;align-items:flex-end}}
#c-pane-gastos>#c-gastos-lede:last-child{margin-top:28px}   /* D161 (5): the explanation last, en viaje */
.cpfold{margin-top:18px}   /* D161 (9): Presupuesto's "Supuestos y tarifas ▸" */
.cpfold[open]>summary{margin-bottom:6px}
.xt td.xd{white-space:nowrap;font-family:var(--mono);font-size:.8rem}
.xt td.xl{color:var(--ink2);font-size:.8rem}
.xt td.xu{text-align:right;white-space:nowrap;font-family:var(--mono)}
.xt td.xdel{width:22px}
/* Same column widths in every section, with or without rows. */
.xt .xd{width:84px}.xt .xl{width:120px}.xt .xu{width:112px}
.tex>span{min-width:0;overflow-wrap:anywhere}
/* Hoy: quick expense with dollars, amounts in two currencies. */
.texpf select{grid-column:1/-1}
.texpf #t-usd{grid-column:auto}
.tex b small{display:block;font-size:.72rem;color:var(--ink2);text-align:right;font-weight:400}
.tled .r b{white-space:normal;overflow-wrap:anywhere}

/* ===== D156: Hoy as the timeline of the day ==========================================
   Events (#t-ev): one row each, a check for the done ones (muted), the one in course with
   a red bar on the left and bold, the future ones as they are; the state small after the
   title ("· en 6 h", "· en curso · faltan 2 h 30", "· hecho"). A stop inside a flight is
   a smaller row. Before the trip the flight is one line (#t-fly .fline) whose summary
   folds the D106 card; "Primer día: ver ›" (#t-go); after the trip, the summary (#t-end). */
#v-today .tsec[hidden]{display:none}
.tev{list-style:none;margin:0;padding:0}
.tev .ev{display:grid;grid-template-columns:1.1em minmax(0,1fr);gap:0 8px;align-items:baseline;padding:7px 0 7px 9px;border-left:3px solid transparent;border-bottom:1px solid var(--hair);font-size:.9rem;overflow-wrap:anywhere}
.tev .evm{color:var(--okbg);font-weight:700;text-align:center}
.tev .evb{min-width:0}
.tev .evs{color:var(--ink2);font-size:.82rem;white-space:nowrap}
.tev .evb small{display:block;color:var(--ink2);font-size:.78rem;font-weight:400;margin-top:2px}
.tev .ev.done{color:var(--ink3)}
.tev .ev.done .evs{color:var(--ink3)}
.tev .ev.now{border-left-color:var(--red);font-weight:700}
.tev .ev.now .evs{color:var(--red)}
.tev .ev.sub{padding-left:26px;font-size:.82rem;color:var(--ink2)}
.tev .ev.sub.done{color:var(--ink3)}
.tevj+.tevj,.tevj+.tev{margin-top:14px}
.tevnow{margin:0 0 4px;font-size:.8rem;color:var(--ink2)}
.tevnow b{color:var(--ink);font-weight:600}
.fdet{margin-top:8px}
.fline{margin-top:0;font-size:.9rem}
.fline>summary{color:var(--ink);overflow-wrap:anywhere}
.fline>summary,.fdet>summary{list-style:none}
.fline>summary::-webkit-details-marker,.fdet>summary::-webkit-details-marker{display:none}
.fdet>summary{color:var(--red);font-weight:700}
.tedit.fline>summary::after,.tedit.fdet>summary::after{content:none}   /* the words say it: "ver detalle ›" */
.fline .flk,.fline .flsep{color:var(--red);font-weight:700;white-space:nowrap}
.tend dd b{font-size:1.05rem}
@media (pointer:coarse),(max-width:640px){
  .tev .evl{display:inline-block;padding:13px 6px;margin:-13px -6px}
  .fline>summary,.fdet>summary{min-height:44px;display:flex;align-items:center;flex-wrap:wrap;gap:0 6px}
}

/* ===== D107: narrow screens, nothing clipped on the right ============================ */
@media (max-width:520px){
  /* Regions and layer switches share one wrapping flow (their boxes are display:contents),
     so a short last row of one is filled by the other: one 44 px row less at 120 % text.
     They stay apart by look: regions are plain words (the chosen one red), switches carry
     their square. */
  /* 5 px between chips and .7rem switches (8 px and .74rem before the Ida / Vuelta chips):
     the same rows as before them at 375-430 px, 100 and 120 % text. */
  body.fit .mapbar{flex-direction:row;flex-wrap:wrap;justify-content:flex-start;align-items:center;gap:0 5px}
}

/* ===== D111: Datos (state, import, prompts) and D113: Pendientes ==================== */
/* D205 (P14): "Lo que falta del viaje" (js/views/gaps.js): the pending rows, a dashed square
   (something still to define), the way to complete it on the right; "a definir" where a
   missing value would be read. */
.pdk.k-gap::before{border-style:dashed;border-color:var(--ink2)}
.gaps a.gapgo{text-decoration:none;display:inline-flex;align-items:center}
.gaps .gapnote{margin:6px 0 0;color:var(--ink2)}
.hhgaps{grid-area:gaps;min-width:0;margin:0 0 18px}
.hhgaps .gaps>h3{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:0 0 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.tbd{font-style:italic;color:var(--ink2)}

/* ===== E18-18 (C15, D-c): the close of every sheet and dialog =====
   One chrome everywhere (questions, the .pe sheets, Buscar, Compartir, Feedback, Recomendar,
   the document's image): the --scrim backdrop, a 2 px ink box on paper, 16 px inside, a
   1.05 rem bold title on the left and this "×" on the right, named "Cerrar"
   (js/ui-dialog.js closeX()). The backdrop rule (closes only while nothing was typed; a
   question never) is js/ui-dialog.js typed(). The taxi and medical cards keep their own
   big "Cerrar" (shown to a third person); the shell's bottom sheets (Planificar, Capas),
   their bordered ×. */
.hbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 18px;margin-bottom:6px}
.hbar h2{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}   /* E01-9: the rule above beat [hidden]: an empty box beside the button */
/* D133: the trip card, with room. One column at full width on phones and tablets; from
   980 px a grid of cards of at least 420 px. Five bands 14 px apart: head, dates, progress,
   actions, foot. */
.hlist{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:12px}
@media (min-width:981px){.hlist{grid-template-columns:repeat(auto-fill,minmax(420px,1fr));gap:24px}}
.hcard{container-type:inline-size;border:1.5px solid var(--ink);background:var(--white);display:flex;flex-direction:column;min-width:0;position:relative}
/* D137: the body under the cover; the mark straddles the cover's edge (the trip's stamp). */
.hb{padding:0 22px 14px;display:flex;flex-direction:column;gap:14px;flex:1;min-width:0}
.hcard.past{border-color:var(--ink3)}
.hcard.ongoing{border-color:var(--red);box-shadow:inset 4px 0 0 var(--red)}
.hch{display:grid;grid-template-columns:58px minmax(0,1fr);gap:4px 14px;align-items:end;margin-top:-26px;position:relative}
.hmark{box-sizing:border-box;width:58px;height:58px;border:1.5px solid var(--ink);background:var(--white);display:flex;align-items:center;justify-content:center;font-family:var(--mincho);font-weight:900;font-size:1.3rem;line-height:1;letter-spacing:-.02em;color:var(--red);text-decoration:none;overflow:hidden;white-space:nowrap}
.hcard.ongoing .hmark{border-color:var(--redbg);background:var(--redbg);color:#fff}
.hcard.past .hmark{color:var(--ink3);border-color:var(--ink3)}
.hct{min-width:0;display:flex;flex-direction:column;gap:2px;padding-top:30px}
.htitle{color:var(--ink);text-decoration:none;font-weight:700;font-size:1.25rem;line-height:1.25;overflow-wrap:anywhere;min-height:24px}
.htitle:hover{text-decoration:underline;text-decoration-color:var(--red)}
.hct small{color:var(--ink2);font-size:.86rem;line-height:1.35;overflow-wrap:anywhere}
.hst{margin-top:3px}
/* D161: the hero's eyebrow and the stage pill side by side; the flight-day words a size smaller than the number */
.hhst{display:flex;align-items:center;flex-wrap:wrap;gap:4px 10px;min-width:0}
.hhst .hst{margin-top:0}
.hn.hnw{font-size:3.2rem;line-height:1;letter-spacing:-.02em}
/* Dates in the text face, one line; if they do not fit, the nights go to a second one. */
.hwhen{display:flex;flex-direction:column;gap:3px}
.hdates{margin:0;font-size:.95rem;line-height:1.4;color:var(--ink)}
.hnights{white-space:nowrap;color:var(--ink2)}
.hsep{color:var(--ink2)}
/* The card too narrow for dates and nights on one line: nights below, without the dot. */
@container (max-width:360px){.hsep{display:none}.hnights{display:block}}
.hcd{margin:0;font-size:.8rem;font-weight:700;color:var(--red)}
.hcard.past .hdates{color:var(--ink2)}
/* Progress: two thin bars, label left, x/y right. */
.hprog{display:flex;flex-direction:column;gap:10px}
.hpb{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 12px;align-items:baseline;font-size:.84rem}
.hpl{color:var(--ink2)}
.hpn{font-variant-numeric:tabular-nums;font-weight:700;color:var(--ink)}
.hpt{grid-column:1/-1;display:block;height:4px;background:var(--hair);overflow:hidden}
.hpt i{display:block;height:100%;background:var(--red)}
:root[data-theme="dark"] .hpt{background:var(--landline)}
.hcard.past .hpt i{background:var(--ink3)}
.hmiss,.hlate{margin:0;font-size:.88rem;color:var(--ink2)}
.hcard .late{color:var(--red);font-weight:700}
.hcard .nw{white-space:nowrap}
.hmiss a{color:var(--ink);text-decoration-color:var(--red)}
/* Tester BAJA-7: the "cargalo desde Datos" link is a touch target (>= 44 px, D48). */
.hcard a.hload,.hhero a.hload{display:inline-flex;align-items:center;min-height:44px}   /* F3: the hero too (a new trip is the next one) */
/* Abrir across the card, Editar beside it; stacked, both full width, on phones. */
.hact{display:flex;gap:10px;border-top:1px solid var(--hair);padding-top:16px;margin-top:auto}   /* cards of one grid row: actions and foot level */
.hedit:empty{display:none}
.hact .dbtn.sec{flex:0 0 auto;min-width:120px}
.hact .dbtn.sec:not(:disabled):hover{color:var(--paper)}
@media (max-width:640px){
  .hb{padding:0 18px 12px}
  .hact{flex-direction:column}
  .hact .dbtn.sec{min-width:0}
}
/* Foot: this device's sync state, small and grey; "Más" at its right. */
.hfoot{position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:-4px}
.hsync{color:var(--ink2);font-size:.78rem;min-width:0;overflow-wrap:anywhere}
.harch{margin-top:22px;font-size:.86rem}
.harch summary{cursor:pointer;color:var(--ink2)}
/* The new-trip and edit form: three small groups, one column on phones. */
.hform{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;max-width:72ch}
.hnew{border:1.5px solid var(--ink);background:var(--white);padding:4px 14px 14px;margin:10px 0 4px}
.hcard .hform{border-top:1px solid var(--hair);padding-top:10px}
.hform fieldset{border:0;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:8px 12px;min-width:0}
.hform legend{font:700 .66rem var(--gothic);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2);padding:0;margin-bottom:6px}
.hform input,.hform select{font:inherit;font-size:.9rem;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:6px 8px;min-width:0;width:100%}
.hform .small{grid-column:1/-1}
.hform .dlab[hidden]{display:none}
/* D130: the trip's countries as ordered chips; the first (the principal) outlined in red.
   Each chip wraps as a whole; a long name wraps inside it, so 375 px never overflows. */
.hform .hcty{grid-column:1/-1;gap:6px}
.hchips{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.hchip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);background:var(--paper);padding:0 0 0 8px;font-size:.9rem;color:var(--ink);min-width:0;max-width:100%}
.hchip.main{border-color:var(--red)}
.hflag{font-size:1.15rem;line-height:1}
.hcn{overflow-wrap:anywhere;min-width:0}
.hmain{font:700 .6rem var(--gothic);letter-spacing:.1em;text-transform:uppercase;color:var(--red)}
.hcb{font:inherit;font-size:1rem;line-height:1;background:none;border:0;border-left:1px solid var(--hair);color:var(--ink);min-width:36px;min-height:36px;padding:0 8px;cursor:pointer}
.hcb:hover{color:var(--red)}
.hchelp{color:var(--ink2);font-size:.76rem}
.hform .ferr{display:block;color:var(--red);font-size:.76rem;margin-top:2px}
.hform .ferr[hidden]{display:none}
.hothr{display:flex;gap:6px;min-width:0}
.hothr input{flex:1}
.hform .hnote{grid-column:1/-1;margin:0}
/* Home cards: the countries' flags before the destination (at most four and "+N"). */
.hflags{white-space:nowrap;margin-right:.4em;letter-spacing:.08em;font-size:1rem;vertical-align:-.05em}
.hfmore{font:500 .72rem var(--mono);color:var(--ink2);margin-left:.2em;letter-spacing:0;vertical-align:.1em}
@media (pointer:coarse),(max-width:640px){
  .hform input,.hform select,.hact .dbtn,.harch summary{min-height:44px}
  .hcb{min-width:44px;min-height:44px}
  .harch summary{display:flex;align-items:center}
  .htitle{min-height:44px;display:flex;align-items:center}
}

/* ===== D137: Home v2 (docs/archive/mockups/home-v2/, approved as it is) =====
   The header of the trip in progress or the next one, the cover of each card, the three
   steps, the first-time screen and the page's foot. Colours from the palette only, so both
   themes follow (the dark-only bits repeat for the system's dark mode). */
.home .hbar{margin:6px 0 6px}
.hhw:not([hidden])+.hbar{margin-top:34px}
#v-home [hidden]{display:none}
.heye{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.hhero{margin-top:10px;border:2px solid var(--ink);background:var(--white);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);
  grid-template-areas:"id map" "cd map" "when due" "prog due" "gaps gaps" "act act" "edit edit";column-gap:36px;padding:26px 28px 0;min-width:0}
.hhero.ongoing{border-color:var(--red);box-shadow:inset 5px 0 0 var(--red)}
.hhid{grid-area:id;min-width:0}.hhcd{grid-area:cd}.hhwhen{grid-area:when;min-width:0}.hhprog{grid-area:prog}.hhero .hmapw{grid-area:map}.hhero .hdue{grid-area:due;min-width:0}.hhact{grid-area:act}.hhero .hedit{grid-area:edit}
.hhtop{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px;min-height:36px}
.htools{position:relative;display:flex;align-items:center;gap:4px;font-size:.84rem}
.htool{font:inherit;background:none;border:0;cursor:pointer;color:var(--ink2);padding:0 8px;min-height:36px;min-width:44px}
.htool:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--red)}
.htool:disabled{opacity:.45;cursor:default;text-decoration:none}
.htools .hmore>summary{padding:0 8px}
.hhname{display:flex;align-items:center;gap:16px;min-width:0}
.hhname>div{min-width:0}
.hhero .hmark{width:68px;height:68px;font-size:1.65rem;flex:none}
.hhero.ongoing .hmark{background:var(--redbg);border-color:var(--redbg);color:#fff}
.hhname h2{margin:0;font-size:2.15rem;line-height:1.1;letter-spacing:-.005em}
.hhname h2 .htitle{font-size:inherit;line-height:inherit}
.hhname small{display:block;margin-top:6px;font-size:.95rem;color:var(--ink2);overflow-wrap:anywhere}
/* The countdown is the loudest thing on the page: one number, red, in the text face. */
.hhcd{margin-top:22px}
.hlab{margin:0;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.hbig{margin:2px 0 0;display:flex;flex-wrap:wrap;align-items:baseline;gap:0 12px}
.hn{font-size:5.2rem;line-height:.9;font-weight:700;color:var(--red);font-variant-numeric:tabular-nums;letter-spacing:-.03em}
.hu{font-size:1.6rem;font-weight:700}
.hu small{font-size:1rem;font-weight:400;color:var(--ink2)}
/* During the trip: one mark per day, the past ones red, today ringed. */
.hticks{display:flex;gap:2px;margin-top:12px;max-width:430px}
.hticks i{flex:1;height:10px;background:var(--hair)}
.hticks i.d{background:var(--red)}
.hticks i.t{background:var(--paper);outline:2px solid var(--red);outline-offset:-2px;height:14px;margin-top:-2px}
:root[data-theme="dark"] .hticks i:not(.d):not(.t){background:var(--landline)}
.hhwhen{margin-top:18px;display:flex;flex-direction:column;gap:4px}
.hhwhen .hdates{font-size:1.02rem}
.hbases{margin:0;font-size:.86rem;color:var(--ink2);overflow-wrap:anywhere}
.hbases b{color:var(--ink);font-weight:400}
.hhprog{margin:20px 0 24px;display:flex;flex-direction:column;gap:11px}
.hpn small{font-weight:400;color:var(--ink2)}
.hpb.over .hpn{color:var(--red)}
/* E01-9: "Gastado (gastos + reservas pagadas)" and its amounts ("≈ US$ 18.888 de ≈ US$ 20.652")
   share the line while both fit; when not (a phone, the landscape phone's narrow card) the
   amounts go to their own line, right-aligned, instead of squeezing the label to four lines. */
.hpb[data-k="spent"]{display:flex;flex-wrap:wrap;justify-content:space-between}
.hpb[data-k="spent"] .hpn{margin-left:auto;text-align:right}
.hpb[data-k="spent"] .hpt{flex:1 0 100%}
/* Hoy's box during the trip: what today is, the leg, where you sleep, the taxi card. */
.htoday{border-left:3px solid var(--red);background:var(--redsoft);padding:10px 14px;font-size:.9rem;line-height:1.45;display:flex;flex-direction:column;overflow-wrap:anywhere}
.htoday b{font-size:1rem}
.htoday .hsl{color:var(--ink2)}
/* The map of the header and the covers (D137). */
.hmapw{margin:0;position:relative;border:1.5px solid var(--ink);background:var(--land);align-self:start;aspect-ratio:611/285;overflow:hidden;min-width:0}
.hmapw>svg,.hmapw>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hmapw figcaption{position:absolute;left:10px;top:8px;font:500 .66rem var(--mono);color:var(--ink2);background:var(--land);padding:0 4px}
.hmapw.hnomap{display:flex;align-items:center;justify-content:center;padding:16px;text-align:center;font-size:.86rem;color:var(--ink2)}
.hmap .mld{fill:var(--land);stroke:var(--landline);stroke-width:.8;vector-effect:non-scaling-stroke}
.hmap{background:var(--paper)}
.mrt{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.mrt.done{stroke:var(--red)}
.mrt.now{stroke:var(--red);stroke-dasharray:5 4}
.mrt.rest{stroke:var(--ink3);stroke-dasharray:6 5}
.mrt.back{stroke:var(--vuelta);stroke-width:1.8;stroke-dasharray:5 5}
.mbs{fill:var(--paper);stroke:var(--red);stroke-width:2.6;vector-effect:non-scaling-stroke}
.mapt{fill:var(--ink);stroke:var(--paper);stroke-width:1.5;vector-effect:non-scaling-stroke}
.mlb text{font-family:var(--gothic);font-weight:700;fill:var(--ink);paint-order:stroke;stroke:var(--land);stroke-width:3.5px;stroke-linejoin:round}
.hovl .mrt.done,.hovl .mrt{stroke:var(--red);stroke-width:3.5;stroke-dasharray:2 7}
.hovl .mbs{stroke-width:3.5}
.hgen .cap{fill:var(--ink2)}
.hgen .lnk{stroke:var(--ink2);stroke-width:2.5}
.hgen .cn{font:700 15px var(--gothic);fill:var(--ink)}
.hgen .cn.sm{font-size:13px}
.hgen .cnn{font:400 12.5px var(--gothic);fill:var(--ink2)}
.hosm{object-position:50% 45%}
:root[data-theme="dark"] .hosm{filter:invert(1) hue-rotate(180deg) brightness(.82) contrast(.9) saturate(.6)}
.hattr{position:absolute;right:6px;bottom:4px;font:500 .6rem var(--mono);color:#333;background:rgba(255,255,255,.75);padding:0 4px;z-index:1}
:root[data-theme="dark"] .hattr{background:rgba(20,21,24,.75);color:var(--ink2)}
/* 2026-11-02: the main card's interactive map (js/home-map.js), a still figure over the row of
   bases (which shows until the map is drawn, and whenever it cannot be); a tap opens Mapa →
   Interactivo. The caption stays on top, the credit small in the corner. */
.hmapw .hgl{position:absolute;inset:0;opacity:0;transition:opacity .25s;pointer-events:none}
.hmapw.hglon .hgl{opacity:1;background:var(--land)}
.hmapw .hglhit,.hmapw .hglattr{display:none}
.hmapw.hglon .hglhit{display:block;position:absolute;inset:0;z-index:1}
.hmapw.hglon .hglhit:focus-visible{outline:2.5px solid var(--red);outline-offset:-3px}
.hmapw.hglon figcaption{z-index:2}
.hmapw.hglon .hglattr{display:block;position:absolute;right:0;bottom:0;z-index:2;padding:0 5px;font:500 .58rem/1.5 var(--gothic);color:var(--ink2);
  background:color-mix(in srgb,var(--paper) 78%,transparent);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.hglattr a{color:inherit;text-decoration:none}
.hglattr a:hover{text-decoration:underline}
.hmapw.hglon.hnomap>p{visibility:hidden}
.hmapw:not(.hglon) .hglcap{display:none}
/* Due items: date, what, kind; the overdue ones in red. */
.hdue{margin:20px 0 24px}
.wrap .hdue h3{margin:0 0 8px;font-size:.72rem;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.hdl{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.hdl li{display:grid;grid-template-columns:minmax(118px,max-content) minmax(0,1fr) auto;gap:4px 14px;align-items:baseline;padding:10px 0;border-bottom:1px solid var(--hair);font-size:.9rem;line-height:1.4}
.hdd{color:var(--ink2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hdd em{display:block;font-style:normal;font-size:.72rem}
.hdt{overflow-wrap:anywhere;min-width:0}
.hdl li.over{box-shadow:inset 3px 0 0 var(--red);padding-left:10px}
.hdl li.over .hdd{color:var(--red);font-weight:700}
.hdl li.over .hdk{border-color:var(--red);color:var(--red)}
.hhact{display:flex;gap:10px;border-top:1px solid var(--hair);padding:18px 0 22px;align-items:center}
.hhact .sp{flex:1}
.hhact .hsync{margin:0;font-size:.8rem;text-align:right}
/* The hero's "Compartir el viaje" (js/home.js): a row of its own under the buttons (wide: after
   the sync line, which keeps its place right of them), quieter than Hoy: no box, the shell's
   person-with-plus icon, 44 px to tap. */
.hhsh{order:3;flex-basis:100%;margin-top:-6px}
.hhshare{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 6px 0 2px;margin-left:-2px;background:none;border:0;color:var(--ink);font:inherit;font-size:.95rem;font-weight:700;cursor:pointer;text-align:left}
.hhshare .ic{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--ink2)}
.hhshare span{text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
.hhshare:hover span{text-decoration-color:currentColor}
.hhshare:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* The Home's "Recomendar Wayfolio" strip (#h-rec): after the list (and the empty state), a
   hairline above it, the lead in --ink2 and a secondary button; never a card. */
.hrec{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:32px 0 8px;padding-top:18px;border-top:1px solid var(--hair)}
.hrec-l{margin:0;color:var(--ink2);font-size:.95rem;flex:1 1 220px;min-width:0}
.hrec-b{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;flex:0 1 auto;max-width:100%;white-space:normal;color:var(--ink);border-color:var(--ink);text-decoration:none}
.hrec-b .ic{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
/* E18-17, E18-20: on every screen with the foot (the Home and body.foot-x) the strip is a child of
   body right above it (js/home.js placeRecommend): the foot's column and left edge, 40 px above
   the foot's rule (30 here + the foot's 10, in the wide flex column and the phone's flow alike);
   one component, laid out the same everywhere (the human: "consistencia en toda la UI"). On the
   Home, 10 px above it + the list's 22 px of bottom padding = the 32 px it had inside the list. */
body>.hrec{width:100%;max-width:var(--maxw);margin:32px auto 0;padding-bottom:30px}
body[data-view="home"]>.hrec{margin-top:10px}
body:not([data-view="home"],.foot-x)>.hrec{display:none}
.hhero .hedit:not(:empty){border-top:1px solid var(--hair);padding:10px 0 18px}
/* Card covers (D137): 2.5:1, the state and the countdown on them. */
.hcov{display:block;position:relative;aspect-ratio:2.5/1;overflow:hidden;background:var(--land);border-bottom:1.5px solid var(--ink);color:var(--ink2)}
.hcard.past{border-color:var(--ink3)}
.hcard.past .hcov{border-bottom-color:var(--ink3)}
.hcov>svg,.hcov>img,.hcov>canvas.hsnap{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hcard.past .hcov>svg,.hcard.past .hcov>img,.hcard.past .hcov>canvas.hsnap{filter:grayscale(1);opacity:.75}
.hcov0{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:.86rem}
/* 2026-11-02: the cover as a picture of the trip's interactive map (js/home-snaps.js): over
   its fallback (the row of bases, the old route picture), which hides; while the picture is
   being made, only the cover's own neutral ground (same box: nothing moves). */
.hcov.hsnapon>svg,.hcov.hsnapon>img,.hcov.hsnapon>.hattr:not(.hsnapattr),.hcov.hsnapon>.hcov0{display:none}
.hcov.hsnapwait>svg,.hcov.hsnapwait>img,.hcov.hsnapwait>.hattr,.hcov.hsnapwait>.hcov0{visibility:hidden}
.hcov>.hsnapattr{font-family:var(--gothic);font-size:.56rem;line-height:1.5;padding:0 5px;right:0;bottom:0}   /* js/home-map.js coverPad() keeps the pins above this strip */
.htag{position:absolute;left:12px;top:12px;z-index:1}
.htag .pill.st-ongoing{background:var(--redbg)}
.hgap{position:absolute;right:12px;top:10px;z-index:1;background:var(--white);border:1.5px solid var(--ink);padding:1px 8px;font-size:.8rem;font-weight:700;color:var(--red)}
.hwhen .hbases{font-size:.84rem}
/* Past trips: three numbers instead of bars. */
.hsum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.hsum>div{padding:10px 0 10px 12px;border-left:1px solid var(--hair);display:flex;flex-direction:column;min-width:0}
.hsum>div:first-child{border-left:0;padding-left:0}
.hsum b{font-size:1.25rem;line-height:1.2;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.hsum b small{font-size:.8rem;font-weight:400;color:var(--ink2)}
.hsum span{font-size:.76rem;color:var(--ink2)}
.hcard.past .hdates{color:var(--ink2)}
/* "¿Otro viaje? Tres pasos" and "Empezá un viaje". */
.hstart{margin-top:34px;border:1.5px solid var(--ink);background:var(--white);padding:22px 24px}
.hstart h2{margin:0;font-size:1.25rem}
.hstart>.hsl{color:var(--ink2);margin:4px 0 0;font-size:.92rem}
.hsteps{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.hsteps li{display:flex;flex-direction:column;gap:10px;padding:4px 22px 4px 0;margin-right:22px;border-right:1px solid var(--hair);position:relative;min-width:0}
.hsteps li:last-child{border-right:0;margin-right:0;padding-right:0}
.hsh{display:flex;flex-wrap:wrap;align-items:center;gap:10px 12px}
.wrap .hsh h3{margin:0;font-size:1.02rem;line-height:1.3;flex-basis:100%;letter-spacing:0;text-transform:none;color:var(--ink);text-wrap:balance}
.hsn{flex:none;width:44px;height:44px;border:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--mincho);font-weight:900;font-size:1.35rem;color:var(--red)}
.hsi{width:28px;height:28px;color:var(--ink);flex:none}
.hsteps p{margin:0;font-size:.86rem;color:var(--ink2);line-height:1.45}
.hsteps p code{font:500 .78rem var(--mono);color:var(--ink);background:var(--land);padding:0 4px}
.hcopied{margin:12px 0 0;font-size:.86rem;color:var(--ink2);min-height:1.2em}
.hcopied.bad{color:var(--red);font-weight:700}
.hcopied:empty{margin:0;min-height:0}
.hstart.compact{padding:18px 22px}
.hstart.compact .hsteps p,.hstart.compact .hsi{display:none}
.hstart.compact .hsteps li{display:grid;grid-template-columns:36px minmax(0,1fr);gap:8px 12px;align-items:center}
.hstart.compact .hsh{display:contents}
.wrap .hstart.compact .hsh h3{flex-basis:auto}
.hstart.compact .hsn{width:36px;height:36px;font-size:1.1rem}
.hfirst{margin:34px auto 0;max-width:860px;text-align:center}
.hfirst h1{margin:18px auto 0;font-size:2.1rem;line-height:1.2;max-width:26ch;letter-spacing:-.005em;text-wrap:balance}
.hlead{text-wrap:balance;margin:14px auto 0;max-width:58ch;font-size:1.02rem;color:var(--ink2);line-height:1.55}
.hfirst .hstart{text-align:left;border-width:2px}
.hfeat{list-style:none;margin:30px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:2px solid var(--ink);text-align:left}
.hfeat li{padding:14px 14px 0 0;display:flex;flex-direction:column;gap:4px}
.hfeat li+li{padding-left:14px;border-left:1px solid var(--hair)}
.hfeat b{font-size:.92rem;display:flex;align-items:center;gap:7px}
/* The nav shell's line icons (bottom tabs: Hoy, Mapa, Costos, Esenciales; Planificar: Bases), not kanji (D176). */
.hfeat b .ic{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;color:var(--red)}
.hfeat span{font-size:.8rem;color:var(--ink2);line-height:1.4}
.henote{margin:26px auto 0;max-width:62ch;font-size:.84rem;color:var(--ink2);border-left:3px solid var(--ink3);padding:4px 10px;text-align:left}
/* "Para después" (2.22): the page's centred text left its bullets at the edge and the lines
   in the middle. Now one left-aligned column, the same width and size as .henote above it
   (62ch at .84rem), centred as a block: bullets under the note's bar. */
.hfirst .hlater{margin:22px auto 0;max-width:62ch;font-size:.84rem;text-align:left}
.hfirst .hlater h2{font-size:1rem}
.hfirst .hlater li{margin:8px 0;line-height:1.45}
@media (max-width:860px){
  .hhero{grid-template-columns:minmax(0,1fr);grid-template-areas:"id" "cd" "when" "map" "due" "gaps" "prog" "act" "edit";padding:20px 18px 0}
  .hhero .hmapw{margin-top:18px}
  .hhero .hdue{margin-bottom:6px}
  .hsteps{grid-template-columns:minmax(0,1fr);gap:16px}
  .hsteps li{border-right:0;margin-right:0;padding-right:0;border-bottom:1px solid var(--hair);padding-bottom:16px}
  .hsteps li:last-child{border-bottom:0;padding-bottom:0}
  .hfeat{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hfeat li,.hfeat li+li{padding:12px 12px 12px 0;border-left:0;border-bottom:1px solid var(--hair)}
  .hfeat li:nth-child(even){padding-left:12px;border-left:1px solid var(--hair)}
  .hfeat li:last-child{grid-column:1/-1;border-bottom:0;border-left:0;padding-left:0}
}
@media (max-width:640px){
  .hhact{flex-wrap:wrap}
  .hhact .dbtn.pri,.hhact .dbtn.sec{flex:1 1 0;min-width:0}
  .hhact .sp{display:none}
  .hhact .hsync{flex-basis:100%;text-align:left;order:4}
  .hhsh{margin-top:-4px}   /* under the buttons, before the sync line */
  .hstart{padding:18px}
}
@media (max-width:520px){
  .hhero{margin-top:6px}
  .hhname{gap:12px}
  .hhero .hmark{width:54px;height:54px;font-size:1.3rem}
  .hhname h2{font-size:1.65rem}
  .hhcd{margin-top:18px}
  .hn{font-size:4rem}
  .hu{font-size:1.3rem}
  .hdl li{grid-template-columns:minmax(0,1fr) auto;gap:2px 10px}
  .hdd{grid-column:1;grid-row:1}
  .hdd em{display:inline}
  .hdd em::before{content:" · "}
  /* D139 review: at 375 px "sáb 13 mar 2027 · en 142 días · 23:00" ran under the kind
     chip; the relative part goes to the next line, whole, when it does not fit. */
  .hdd{white-space:normal;min-width:0}
  .hdd em,.hdd .nw{white-space:nowrap}
  .hdk{grid-column:2;grid-row:1}
  .hdt{grid-column:1/-1}
  .hhact .dbtn.pri{flex-basis:100%}
  .hhwhen .hx{display:block}
  .hhwhen .hsep{display:none}
  .hfirst{margin-top:20px}
  .hfirst h1{font-size:1.55rem}
  .hlead{font-size:.95rem}
}
@media (pointer:coarse),(max-width:640px){.htool,.htools .hmore>summary{min-height:44px}}

/* ===== D127-D130: "Mostrar al taxista" and Esenciales ================================= */
body.taxi-on{overflow:hidden}
/* The taxi card is a modal <dialog> (focus kept inside, Esc closes, the page under it inert):
   sized to its content on a desktop, the whole screen on a phone (shown to the driver). The
   medical card (#medc) keeps the full-page .taxi above. */
.txdlg{box-sizing:border-box;border:0;margin:auto;background:#fff;color:#000;color-scheme:light;font-family:var(--gothic);
  width:min(780px,calc(100vw - 48px));max-width:none;max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;
  padding:0 24px 20px;box-shadow:0 18px 60px rgba(0,0,0,.35)}
.txdlg::backdrop{background:rgba(10,10,12,.62)}
@media (max-width:640px),(orientation:landscape) and (max-height:540px){
  .txdlg{width:100%;height:100%;max-height:none;margin:0;box-shadow:none;
    padding:env(safe-area-inset-top,0px) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
}
/* The map link as a QR code (js/qr.js, made on the device: works offline). It leads the card
   when the address is only in Latin letters (a Booking.com confirmation): a Japanese
   driver reads romaji badly, his navigation reads the code. */
.txqr{margin:6px 0 0;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.txqr .qr{display:block;width:min(240px,62vw);height:auto;border:1px solid #000}
.txqr.lead .qr{width:min(300px,78vw)}
.txqr figcaption{display:flex;flex-direction:column;gap:2px}
.txqr figcaption .loc{font-size:20px;font-weight:700;line-height:1.3}
.txqr figcaption .lat{font-size:15px;color:#333}
.txqr figcaption .es{font-size:15px;color:#555}
.txaddr.lat{font-size:clamp(20px,5vw,28px)}
.txtel{margin:4px 0 0;display:flex;flex-direction:column;gap:2px}
.txtel .lbl{font-size:16px;color:#333}
.txhint{font-size:14px;color:#555;margin:0}
.txlink{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:#000;font:inherit;font-weight:700;text-decoration:underline;cursor:pointer}
.txbar{display:flex;justify-content:flex-end;padding-top:10px}
.txbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;min-height:48px;min-width:48px;padding:8px 18px;border:2px solid #000;background:#fff;color:#000;font:700 1rem var(--gothic);text-decoration:none;text-align:center;cursor:pointer}
.txbtn .mono{font-weight:500}
.txbtn:focus-visible{outline:3px solid #c8102e;outline-offset:2px}
.txbody{display:grid;grid-template-columns:minmax(0,1fr);gap:22px;padding-block:12px 20px}
.txmain,.txside{min-width:0;display:flex;flex-direction:column;gap:10px}
.txname{margin:0;font-weight:700;font-size:clamp(32px,9vw,60px);line-height:1.18;overflow-wrap:anywhere}
.txaddr{margin:8px 0 0;font-weight:700;font-size:clamp(24px,6.6vw,42px);line-height:1.35;overflow-wrap:anywhere}
.txsub{margin:0;font-size:18px;line-height:1.35;color:#333;overflow-wrap:anywhere}
.txmiss{margin:8px 0 0;font-size:24px;font-weight:700;color:#b0001e}
.txphrase{border-top:2px solid #000;padding-top:12px}
.txphrase .loc{font-size:clamp(24px,6.6vw,38px);font-weight:700;line-height:1.35;overflow-wrap:anywhere}
.txphrase .lat{font-size:17px;color:#333;margin-top:4px}
.txphrase .es{font-size:15px;color:#555;margin-top:2px}
.txact{display:flex;flex-wrap:wrap;gap:10px}
.txnote{font-size:14px;color:#555}
@media (orientation:landscape) and (max-height:540px){
  .txbar{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);right:max(16px,env(safe-area-inset-right,0px));padding:0}
  .txbody{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:12px 28px;padding-top:12px}
  .txmain{padding-top:4px}
  .txside{padding-top:60px}
  .txname{font-size:clamp(32px,7vh,48px)}
  .txaddr{font-size:clamp(24px,6vh,34px)}
  .txphrase .loc{font-size:clamp(22px,5.4vh,30px)}
}
/* The Esenciales sheet: folding sections, phone numbers as big buttons, phrases with "Copiar". */
.ewrap{max-width:860px}
.ehead{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;border-bottom:1px solid var(--hair);padding:0 0 4px}
.ecc{color:var(--ink2);font-weight:700;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase}
.esel{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink2);margin-left:auto}
.esel[hidden]{display:none}
.esel select{font:inherit;font-size:.9rem;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:6px 8px;min-height:44px}
#e-body{margin-top:6px}
#e-body>.hnote{margin-top:12px}
.esec{border-bottom:1px solid var(--hair)}
.esec>summary{cursor:pointer;min-height:48px;display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:700;font-size:1rem;list-style:none}
.esec>summary::-webkit-details-marker{display:none}
.esec>summary::after{content:"+";font:500 1.3rem var(--mono);color:var(--red)}
.esec[open]>summary::after{content:"−"}
.esb{padding-bottom:14px;min-width:0}
/* An emergency row: the name and its number side by side, the note under both. */
.eemg{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px 14px;align-items:center;padding:10px 0;border-top:1px solid var(--hair)}
.eemg:first-child{border-top:0}
.eemg>b{min-width:0;overflow-wrap:anywhere;line-height:1.35}
.eemg>small{grid-column:1/-1;color:var(--ink2);font-size:.8rem;line-height:1.45;overflow-wrap:anywhere}
.etel{display:inline-flex;align-items:center;justify-content:center;min-height:48px;min-width:64px;padding:4px 14px;border:2px solid var(--red);color:var(--red);font:500 1.35rem var(--mono);text-decoration:none;white-space:nowrap}
.etel:hover{background:var(--red);color:var(--paper)}
.etel.sm{font-size:1rem;min-height:44px}
.ename{margin:4px 0 8px;overflow-wrap:anywhere}
.ekv{font-size:.86rem}
.ekv dd{overflow-wrap:anywhere}
.eloc{display:block;font-size:1.05rem;margin-top:2px}
.egrp{border-top:1px solid var(--hair)}
.egrp>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;color:var(--ink2);font-size:.9rem}
.ephr{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:1px 12px;align-items:center;padding:10px 0 10px 12px;border-top:1px dashed var(--hair)}
.ephr>span{grid-column:1;min-width:0;overflow-wrap:anywhere}
.ephr .es{font-size:.8rem;color:var(--ink2)}
.ephr .loc{font-size:1.45rem;line-height:1.4;font-weight:700}
.ephr .lat{font-size:.82rem;color:var(--ink2);font-style:italic}
.etip{padding:8px 0;border-top:1px solid var(--hair);font-size:.88rem;line-height:1.55}
.etip:first-child{border-top:0}
.etip b{display:block}
.efoot{margin-top:18px;font-size:.78rem;color:var(--ink2)}
/* Sources: one line each, cut with an ellipsis (the full URL is the link's title). */
.efoot ul{margin:4px 0 0;padding:0;list-style:none}
.efoot li{min-width:0}
@media (pointer:coarse),(max-width:640px){
  .taxibtn{min-height:44px;min-width:44px}
  .efoot .elnk{min-height:44px;line-height:34px}
  .ekv .maplink{min-height:44px}
}
/* Home card: the rare actions in a small menu under "Más" at the card's foot (D133):
   Archivar, Borrar la copia local. It opens over what is below, right-aligned. */
.hmore{flex:0 0 auto;font-size:.84rem;position:relative}
.hmore>summary{cursor:pointer;color:var(--ink2);display:inline-flex;align-items:center;justify-content:center;gap:5px;min-height:36px;min-width:44px;padding:0 2px 0 8px;list-style:none}
.hmore>summary:hover{color:var(--ink)}
.hmore>summary::-webkit-details-marker{display:none}
.hmore>summary::after{content:"▾";font-size:.8em}
.hmore[open]>summary{color:var(--ink)}
.hmore[open]>summary::after{content:"▴"}
.hmb{position:absolute;z-index:6;right:0;top:calc(100% + 2px);width:300px;max-width:calc(100vw - 32px);box-sizing:border-box;display:flex;flex-direction:column;align-items:stretch;gap:10px;padding:12px;background:var(--white);border:1.5px solid var(--ink);box-shadow:0 6px 18px rgba(0,0,0,.14)}
.hdel{display:flex;flex-direction:column;gap:4px;min-width:0}
.hdel small{color:var(--ink2);font-size:.76rem;overflow-wrap:anywhere}
/* E01-17: the owner's "Borrar el viaje…" (for everyone), last and set apart from the copy's (this device only). */
.hkill{border-top:1px solid var(--hair);padding-top:10px}
@media (pointer:coarse),(max-width:640px){.hmore>summary{min-height:44px}.hmb .dbtn{min-height:44px}}

/* ===== D135-D138: travellers, split of expenses and Cuentas ========================= */
/* "Lo pagó" / "Cómo se reparte" in the two expense forms and the booking editor. */
.xsplit{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:6px 12px;align-items:end;border-top:1px dashed var(--hair);padding-top:8px;min-width:0}
.xsplit[hidden]{display:none}
.xsl{display:flex;flex-direction:column;gap:2px;font-size:.76rem;color:var(--ink2);min-width:0}
.xsplit select,.ssplit select{font:inherit;font-size:.88rem;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:5px 8px;min-width:0;width:100%}
.xswho{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0}
.xswl{font-size:.76rem;color:var(--ink2);margin-right:2px}
.xchip{display:inline-flex;align-items:center;gap:6px;border:1.5px solid var(--ink);background:var(--paper);padding:2px 10px 2px 6px;font-size:.86rem;color:var(--ink);cursor:pointer;min-width:0;max-width:100%}
.xchip span{overflow-wrap:anywhere;min-width:0}
.xchip input{accent-color:var(--dtc);width:18px;height:18px;margin:0;flex:none}
.xchip:has(input:not(:checked)){border-color:var(--hair);color:var(--ink2)}
.xpct{display:inline-flex;align-items:center;gap:4px;font-size:.84rem;color:var(--ink);min-width:0}
.xpct span:first-child{overflow-wrap:anywhere;min-width:0}
.xpct input{font:inherit;font-family:var(--mono);width:4.6em;text-align:right;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:4px 6px}
.xsum{font:.76rem var(--mono);color:var(--ink2)}
.xsum.bad{color:var(--red);font-weight:700}
.xsinv{margin:0;font-size:.84rem;color:var(--ink2)}
.xserr{grid-column:1/-1;color:var(--red);font-size:.78rem}
.xserr:empty{display:none}
.ssplit{grid-column:1/-1;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,150px),1fr));gap:8px 12px;align-items:end;border-top:1px dashed var(--hair);padding-top:8px;min-width:0}
.ssh{grid-column:1/-1;margin:0;font-size:.76rem;color:var(--ink);font-weight:700}
.ssh small{font-weight:400;color:var(--ink2)}
.ssplit .ferr[hidden]{display:none}
.resv .ssplit label.xchip,.resv .ssplit label.xpct{flex-direction:row;align-items:center;color:var(--ink);font-size:.86rem}
.ssplit .ferr{grid-column:1/-1}
/* "pagó Ana" and the split, under the concept of an expense row (Costos and Hoy). */
.xpay{display:flex;flex-wrap:wrap;gap:3px 6px;margin-top:2px}
.xpb,.xpm{font:500 .68rem var(--mono);border:1px solid var(--hair);border-radius:3px;padding:0 5px;color:var(--ink2);overflow-wrap:anywhere;max-width:100%}
.xpb{border-color:var(--ink3);color:var(--ink)}
.cpaxn{margin:-2px 0 6px;color:var(--ink2);font-size:.76rem}
/* Cuentas (#c-acc), between the form and the six sections. */
.cacc[hidden],.cacc [data-group][hidden]{display:none}
.acctop{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;margin-top:10px}
.accwho{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink2)}
.accwho select{font:inherit;font-size:.88rem;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:5px 8px;max-width:60vw}
.accmsg{font-size:.8rem;color:var(--dtct)}
.accbox{min-width:0}
.accpl{display:grid;gap:10px}
.accp{min-width:0}
.accp.dim{opacity:.4}
.accph{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.88rem}
.accph b{overflow-wrap:anywhere;min-width:0}
.accbal{font:500 .8rem var(--mono);white-space:nowrap}
.accbal.pos{color:var(--dtct)}.accbal.neg{color:var(--red)}.accbal.zero{color:var(--ink2)}
.accbars{display:block;width:100%;height:22px;margin-top:3px}
.accsal{display:block;width:100%;height:8px;margin-top:4px}
.cacc .bt{fill:var(--land)}
.cacc .bp{fill:var(--ink)}
.cacc .bs{fill:var(--ink3)}
.cacc .bd{fill:none;stroke:var(--red);stroke-width:1.5;vector-effect:non-scaling-stroke;fill:var(--redsoft)}
.cacc .bpos{fill:var(--dtc)}.cacc .bneg{fill:var(--red)}.cacc .bzero{fill:none}
.accsal line{stroke:var(--ink);stroke-width:1.5}
.accpv{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:.78rem;color:var(--ink2);margin-top:3px}
.accpv b{color:var(--ink);font-weight:500}
.accpv small{font:.74rem var(--mono)}
.acctr{display:block;font:.72rem var(--mono);color:var(--ink2);margin-top:2px}
.acck{display:flex;flex-wrap:wrap;gap:2px 14px;font-size:.72rem;color:var(--ink2);margin:8px 0 0}
.cacc i.ak-p,.cacc i.ak-s,.cacc i.ak-b,.cacc i.ak-d{display:inline-block;width:10px;height:10px;margin-right:5px;vertical-align:-1px}
.cacc i.ak-p{background:var(--ink)}.cacc i.ak-s{background:var(--ink3)}.cacc i.ak-d{border:1.5px solid var(--red);background:var(--redsoft)}
.cacc i.ak-b{width:18px;height:6px;vertical-align:1px;background:linear-gradient(90deg,var(--red) 0 50%,var(--dtc) 50% 100%)}
.ringw{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px}
.cring{width:150px;height:150px;flex:none}
.cring .rbg{fill:none;stroke:var(--land);stroke-width:16}
.cring .rseg{fill:none;stroke:var(--c);stroke-width:16}
.cring .rtt{font:500 12px var(--mono);fill:var(--ink);text-anchor:middle}
.cring .rts{font:9px var(--mono);fill:var(--ink2);text-anchor:middle}
.ringl{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr));gap:3px 22px;flex:1 1 210px;min-width:0;font-size:.82rem}
.ringl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto 3em;gap:8px;align-items:center;min-width:0}
.ringl li.zero{color:var(--ink3)}
.ringl b{font-weight:500;text-align:right;white-space:nowrap}
.ringl small{text-align:right;color:var(--ink2);font:.74rem var(--mono)}
.ringl .sw{width:12px;height:12px;background:var(--c);display:inline-block}
.accpdb{display:block;width:100%;height:12px}
.accd{list-style:none;margin:0;padding:0}
.accd li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 14px;padding:8px 0;border-bottom:1px solid var(--hair)}
.accdt{font-size:.92rem;min-width:0;overflow-wrap:anywhere}
.accdt small{display:block;font:.76rem var(--mono);color:var(--ink2)}
.accok{font-size:.9rem;color:var(--dtct);margin:0}
.stf{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px 10px;align-items:end}
.stf label{display:flex;flex-direction:column;gap:2px;font-size:.76rem;color:var(--ink2);min-width:0}
.stf input,.stf select{font:inherit;font-size:.88rem;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:5px 8px;min-width:0;width:100%}
.stf #st-amt{font-family:var(--mono);text-align:right}
.stf .stnote{grid-column:span 3}
.stmsg{grid-column:1/-1;color:var(--red);font-size:.78rem}
.stmsg:empty{display:none}
.stl{margin-top:8px}
.sti{display:grid;grid-template-columns:auto minmax(0,1fr) auto auto;gap:4px 12px;align-items:center;padding:5px 0;border-bottom:1px solid var(--hair);font-size:.86rem}
.sti .stw{min-width:0;overflow-wrap:anywhere}
.sti small{display:block;color:var(--ink2);font-size:.76rem}
.sti b.mono{font-weight:500}
.sti .del{color:var(--ink3);font-size:1.2rem;line-height:1;padding:0 6px}
.sti .del:hover{color:var(--red)}
@media (max-width:640px){
  .stf{grid-template-columns:1fr 1fr}
  .stf .stnote,.stf button{grid-column:1/-1}
  .cring{width:132px;height:132px}
}
@media (pointer:coarse),(max-width:640px){
  .xsplit select,.ssplit select,.accwho select,.stf input,.stf select,.xpct input{min-height:44px}
  .xchip{min-height:44px}
  .xchip input{width:22px;height:22px}
  .sti .del{min-width:44px;min-height:44px}
  .esrch{display:inline-flex;align-items:center;min-height:44px}
  .eembf .elnk{min-height:44px;line-height:34px}
  /* The embassy's Sitio and Mail (E01-8): a 44 px row each; flex so a long URL still wraps. */
  .ekv dd>a.elnk:only-child{display:flex;align-items:center;min-height:44px}
}
/* The trip form's travellers (D135): one card per person, "vos" outlined in red. */
.hform .htrvf{grid-template-columns:minmax(0,1fr)}
.htrvs{list-style:none;margin:0;padding:0;display:grid;gap:8px;min-width:0}
.htrv{border:1.5px solid var(--hair);background:var(--paper);padding:4px 10px 10px;display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1.3fr) minmax(0,1.2fr);gap:6px 10px;align-items:end;min-width:0}
.htrv.main{border-color:var(--red)}
.htrv .dlab[hidden]{display:none}
.htvh{grid-column:1/-1;display:flex;align-items:center;gap:8px;min-width:0}
.htvh .sp{flex:1}
.htvk{font:700 .66rem var(--gothic);letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.htrv.main .htvk{color:var(--red)}
.htvh .hcb{border:1px solid var(--hair)}
.htvadd{justify-self:start}
/* E17: a row with an account: the name is the account's, shown, not typed. */
.htvfix{margin:0;min-height:36px;display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px;font-size:.9rem;color:var(--ink);overflow-wrap:anywhere}
.htvfix small{color:var(--ink2);font-size:.74rem}
@media (max-width:640px){.htrv{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.htrv .htvn{grid-column:1/-1}}
/* Esenciales: one embassy per nationality of the travellers. */
.embx+.embx{border-top:1px solid var(--hair);margin-top:12px;padding-top:4px}
.enat{margin:8px 0 2px;font-size:.95rem}
.ewho{margin:0 0 4px;font-size:.8rem;color:var(--ink2)}
.emiss{margin:4px 0 6px;font-size:.9rem}
/* E17: "Tus datos de viajero" at the end of the embassy section, and the note while mine is unset. */
.eunset{color:var(--ink2)}
.eself{border-top:1px solid var(--hair);margin-top:12px;padding-top:8px}
.eself p{margin:2px 0}
.eself .dbar{margin-top:8px}
.eself select,.eself input[type=date]{min-height:44px;font:inherit;padding:6px 10px;border:1.5px solid var(--ink2);background:var(--paper);color:var(--ink);width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.eselff{margin-top:6px}
.eselfn{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.eselfn .ctl{min-height:44px}
.eself .eselfoff{margin-top:6px;font-weight:600}
.vfollow{display:none}
body[data-scope=follower] #v-cost>.vfollow{display:block;max-width:640px;margin:24px auto;padding:0 16px}
.ewarn{margin:6px 0 4px;font-size:.8rem;color:var(--red);border-left:3px solid var(--red);padding:2px 8px}
.eembf{margin-top:14px;font-size:.76rem;color:var(--ink2)}
.eembf ul{margin:4px 0 0;padding:0;list-style:none}
.eembf summary{cursor:pointer;min-height:44px;display:flex;align-items:center}
.zoom #zhome{font-size:1rem}

/* ===== D142: the sub-tabs of Costos, Resumen's big ring, Cuentas' detail per person =====
   The sub-tabs are a row of square chips under the view's top (the selected one inked),
   44 px on touch screens (D48). Resumen: the ring by category at 240 px with its legend on
   the right; narrow, the ring takes the width and the legend goes under it. Cuentas: one
   card per person in a grid (two columns when wide), each with its folds "Qué pagó",
   "Qué le corresponde de otros" and "Transferencias" (+ / − like the Esenciales). */
.cglance .accbox:first-child h4{margin-top:4px}
.cglance .ringw{flex-wrap:nowrap;gap:14px 36px}
.cglance .cring{width:240px;height:240px}
.cglance .ringl{grid-template-columns:minmax(0,1fr);max-width:440px;gap:9px;font-size:.9rem}
.cglance .accpv{font-size:.82rem}
#c-acc .csh{margin-bottom:4px}
#c-acc .accbox+.accbox{margin-top:22px}
#c-acc .accpl{grid-template-columns:repeat(auto-fit,minmax(min(100%,380px),1fr));gap:22px 40px;align-items:start}
#c-acc .accp{border-top:1.5px solid var(--ink);padding-top:10px}
#c-acc .accph{font-size:1rem}
#c-acc .accbal{font-size:.86rem}
.accdets{margin-top:10px}
.accdet{border-top:1px solid var(--hair)}
.accdet:last-child{border-bottom:1px solid var(--hair)}
.accdet>summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:36px;font-size:.86rem;font-weight:700;color:var(--ink);list-style:none}
.accdet>summary::-webkit-details-marker{display:none}
.accdet>summary::after{content:"+";font:500 1.1rem var(--mono);color:var(--red);margin-left:auto}
.accdet[open]>summary::after{content:"−"}
.accdet .accn{font-weight:400;color:var(--ink2)}
.accdl{list-style:none;margin:0;padding:0}
.accdl li{display:grid;grid-template-columns:3em minmax(0,1fr) auto;gap:2px 10px;align-items:baseline;padding:7px 0;border-top:1px dashed var(--hair);font-size:.86rem}
.accdl li:first-child{border-top:0}
.accdd{color:var(--ink2);font-size:.76rem}
.accdc{min-width:0;overflow-wrap:anywhere}
.accdc b{font-weight:500}
.accdc small{display:block;color:var(--ink2);font-size:.76rem;margin-top:1px}
.accdv{font-weight:500;white-space:nowrap}
.accsub{margin:4px 0 12px;padding-top:6px;border-top:1.5px solid var(--ink);font-size:.82rem;color:var(--ink2)}
.accsub b{color:var(--ink);font-weight:500}
.accdl+.accsub{margin-top:0}
.hacc{margin:-4px 0 0;font-size:.82rem;text-align:right}
.hacc a:hover,.hresume a:hover{text-decoration:underline;text-underline-offset:3px}
.hcl{color:inherit;text-decoration:underline;text-decoration-color:var(--hair);text-underline-offset:3px}
.hcl:hover{color:var(--ink);text-decoration-color:currentColor}
@media (max-width:640px){
  .cglance .ringw{flex-direction:column;align-items:stretch}
  .cglance .cring{width:100%;height:auto;aspect-ratio:1}
  .cglance .ringl{max-width:none;flex:none}
}
@media (pointer:coarse),(max-width:640px){
  .accdet>summary{min-height:44px}
  /* E01-9: the Home's "Gastado (gastos + reservas pagadas)" wraps on a phone: as a block its
     first line stays on the row's baseline and the row grows (an inline-block's baseline is
     its last line: the lines above rode over the previous bar). */
  .hpl>.hcl{display:block}
}

/* ===== D145: the destination's local time =========================================
   A chip of its own (line clock icon, as the climate's D91, and the text in the normal
   face, "Ahora en Roma · 15:41 (+5 h)"): right of the dates (#tsub), in the trip header
   under the bar (nav-shell; #tclock-w, the one copy). A tap folds open
   #tclock-p, the time in each country of the trip. Home: the same, small, in the header
   and each card (.hclk). The button is the 44 px target; .tck is the visible chip. */
.hhname .hclk{margin-top:4px;font-size:.82rem}
.hb>.hclk{margin-top:-6px}

/* ===== D147 wide: from 1440 px the views spend the fluid column on more columns ======
   Below 1440 px nothing here applies. Font sizes are the same as on any desktop. */
@media (min-width:1440px){
  .mapcol{container-type:inline-size}
  .mapbox{aspect-ratio:auto;height:min(calc(100cqw * 5 / 7),900px)}

  /* Hoy: three columns. the day · quick expense and tomorrow · notes (.tc1/.tc2 span
     every row; the last track is 1fr). */
  .tgrid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr}
  .tgrid>.tc1{grid-column:1;grid-row:1/-1}
  .tgrid>.tc2{grid-column:2;grid-row:1/-1}
  .tgrid>.tc3{grid-column:3;grid-row:1}

  /* Costos · Resumen: the ring (with its legend) and paid / to pay side by side, the
     transport total on the right: three columns. */
  .cglance{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:0 40px;align-items:start}
  .cglance .accbox h4{margin-top:4px}
  /* Costos · Gastos: the six sections in two columns, in reading order (1 | 2, 3 | 4, 5 | 6). */
  .csecs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;align-items:start}

  /* Home: the header keeps its two columns, the text side the wider one, so the map (its
     height follows its width) does not open gaps between the lines on the left. */
  .hhero{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
  /* Home: trip cards up to three columns (420 px minimum, a third of the row at most). */
  .hlist{grid-template-columns:repeat(auto-fill,minmax(max(420px,calc((100% - 48px) / 3)),1fr))}

  /* Esenciales: emergencies on the left, the other sections on the right (js/views/esenciales.js essHtml
     wraps them in .egrid); the note and the sources across. */
  .ewrap{max-width:none}
  .egrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;align-items:start}
}

/* ===== D150: UX review r1 (docs/archive/reports/ux-review-r1.md), batch A ========== */
.tcode{margin:6px 0 0;font-size:.86rem;color:var(--ink2);overflow-wrap:anywhere}
.tcode .mono{font-size:1.7rem;font-weight:500;color:var(--ink);letter-spacing:.04em;line-height:1.2}
.tnotes{color:var(--ink);font-size:.9rem}
.tnf{margin-top:8px}
.tnf .bnotes{margin-top:4px}

/* D150 (9), P9/P14: Costos → Resumen, one main figure ("Gastado X de Y (p %)" and its
   bar) with its three parts small under it; the ring's hole is labelled. Presupuesto: the
   budget field on top, then the fares (left) and the transport total (right). */
#c-sum{display:block}
.csum .cimain{flex-direction:row;flex-wrap:wrap;align-items:baseline;column-gap:10px}
.csum .cimain>span:first-child,.csum .cimain>small,.csum .cimain>.cbudt{flex-basis:100%}
.csum .cimain>b{font-size:2rem}
.csum .cimain .cbudof{font:500 1rem var(--mono);color:var(--ink2)}
.csum .cimain .cbudof.late{color:var(--red);font-weight:700}
.csum .cimain .cbudt{max-width:480px;height:6px}
.csum .cimain .cbudno{flex-basis:100%;margin:0;font-size:.82rem;color:var(--ink2)}
.cparts{list-style:none;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--hair);display:flex;flex-wrap:wrap;gap:8px 32px;font-size:.8rem;color:var(--ink2)}
.cparts li{min-width:0}
.cparts li>span{display:block}
.cparts b{font:500 1rem var(--mono);color:var(--ink)}
.cparts small{display:block;font:.76rem var(--mono);overflow-wrap:anywhere}
.cring .rtc{font:7px var(--gothic);fill:var(--ink2);text-anchor:middle;letter-spacing:.04em}
.ringn{margin:8px 0 0;color:var(--ink2)}
.cbudw{max-width:420px;margin:4px 0 18px;padding:10px 0 12px;border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);font-size:.9rem}
.cbudw label>span:first-child{font-weight:700}
.cbudw .cbud{display:block;margin-top:8px;font:.8rem var(--mono);color:var(--ink2)}
.cbudw .cbud.late{color:var(--red);font-weight:700}
.cbudw .cbudt{margin-top:4px}
@media (max-width:980px){#c-pane-presupuesto .tot{order:-1}}

/* D150 (6), P7/P13: the expense form (Hoy's quick expense, Costos' since C9). Each field with a small visible label; the
   currency symbol a fixed prefix inside the amount (web/js pads the field by its length);
   who paid and the split one line with "cambiar" (.xsfold). */
.tfl{display:flex;flex-direction:column;gap:2px;min-width:0;font-size:.76rem;color:var(--ink2)}
.tfl.tfw{grid-column:1/-1}
.tfn{font-weight:700}
.texpf .tfix input,#t-yen{font-family:var(--mono);text-align:left}
.xsplit.xsfold:not([hidden]){display:block}
.xsfold>details>summary{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;cursor:pointer;list-style:none;font-size:.84rem;color:var(--ink2)}
.xsfold>details>summary::-webkit-details-marker{display:none}
.xsfold .xsline b{color:var(--ink)}
.xsfold .xschg{margin-left:auto;color:var(--red);font-weight:700}
.xsfold .xschg::after{content:" ▸"}
.xsfold>details[open] .xschg::after{content:" ▾"}
.xsgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:6px 12px;align-items:end;margin-top:8px;min-width:0}
@media (pointer:coarse),(max-width:640px){.xsfold>details>summary{min-height:44px;align-items:center}}
/* D150 (6): the transport estimate and the transport spent, small under the main figure. */
.csum .ctr{grid-template-columns:1fr;max-width:520px;margin-top:12px}
.csum .ctr .r{font-size:.8rem;color:var(--ink2)}
@media (pointer:coarse){.csum .ctr a{display:inline-flex;align-items:center;min-height:44px;margin-block:-12px}}
/* D150 (5), P19: the countdown's milestone ("para tu vuelo"), small after the big words. */
.thead .tcount .tfor{font-size:.9rem;color:var(--ink2);font-family:var(--gothic);font-weight:700;white-space:nowrap}
/* D150 (10), P11: Esenciales opens with today's stay and the taxi card's button. */
.estay{border:2.5px solid var(--ink);background:var(--white);padding:12px 14px;margin:0 0 18px;max-width:640px}
.estay[hidden]{display:none}
.estay h3{margin:0 0 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.estay h3 .small{letter-spacing:0;text-transform:none;font-weight:400}
.estay .thotel{margin-top:0}
.estay .eaddr{margin:4px 0 0;font-size:.9rem;overflow-wrap:anywhere}
.estay .tact{margin-top:10px;align-items:center}
.esrc>summary{cursor:pointer;margin-top:4px}
@media (pointer:coarse),(max-width:640px){.esrc>summary{min-height:44px;display:flex;align-items:center}}

/* ===== D152/D159: Bases, the zone map of each stay and the cards' layout ===============
   D159: the zone map is a vector drawing (js/vector-map.js zoneMap()) in the route map's style, all
   in the theme's tokens: the map's land (--land) as its paper, parks (--park) and water
   (--sea) as faint tints derived from the theme, main roads barely there, rails as the
   route map's (a grey line with a paper dash inside), stations as its white squares,
   labels with a --land halo (paint-order: stroke). The OSM credit sits small at the map's
   bottom right, over it. Under the map: the hotel's walking distances (.bdist), the
   attractions and the legend. */
.bmap:not(.bhint) .bmap-hint,.bmap.bhint .bmap-go{display:none}
.bmap.bhint{cursor:pointer}
.bmap.bhint:hover .bmap-hint{color:var(--red)}

/* ===== D155: Lugares (#v-places) and the ways into a place's sheet ==================
   One card per place in route order: one column on a phone, two from 900 px. A card is a
   button (44 px and more) with the names, the type, the dates, the climate line of Bases
   (.bclim, D152 (e)) and what was visited; a red › at its right. */
/* Hoy: "ver ficha de <lugar> ›" under the day's summary; Bases: the base's title opens its sheet. */
.tsum .tficw{margin-top:4px}
.tfic{color:var(--red);font-weight:700;font-size:.86rem}
.tfic .pgo{margin-left:2px}

/* ===== D163 (d): the spending pace (Costos → Resumen, Hoy) ===== */
.cpace{grid-column:1/-1;margin:0;font-size:.9rem;color:var(--ink)}
.cpace b{font-family:var(--mono);font-weight:600}
.cpace small{color:var(--ink2);font-size:.78rem}
.cpace.late,.cpace.late b,.tpace.late{color:var(--red);font-weight:700}
.tpace{margin:6px 0 0;font-size:.82rem;color:var(--ink2);overflow-wrap:anywhere}

/* ===== D165: Ritmo → Entradas and its sheet (js/views/entradas.js), Hoy's activities and
   wallet (js/views/hoy.js, js/wallet.js) and Preparar para el viaje (js/prepare.js); the
   server's state is the admin panel's (web/admin/index.html has its .srvbad/.srvno) ===== */
.tatk{cursor:pointer;margin-left:4px;vertical-align:1px;min-height:0}
.tacts{display:flex;flex-direction:column}
.tactr{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:8px;padding:6px 0;border-bottom:1px solid var(--hair);font-size:.9rem;overflow-wrap:anywhere}
.tactr .tactt{font-size:.82rem;color:var(--ink2)}
.tactr small{display:block;color:var(--ink2);font-size:.78rem}
.tactr .plink.in{display:block;font-weight:700;text-align:left;margin:0;padding:0;min-height:0;overflow-wrap:anywhere}
@media (pointer:coarse),(max-width:640px){.tactr .plink.in{min-height:44px;padding:10px 0;margin:-8px 0 -6px}}
.tev .ev.act .evl{white-space:normal;text-align:left;overflow-wrap:anywhere}
@media (pointer:coarse),(max-width:640px){.tev .ev.act .evl{display:inline;padding:0;margin:0;min-height:0;min-width:0}}
.tevact{margin-top:14px}
.twalw[hidden]{display:none}
.twalw .tprep:empty,#t-wallet:empty{display:none}
/* Before the trip the line sits under "Activá los avisos ›": clear of its enlarged tap area (D150 (4), coarse pointers). */
.twalw .tprep{margin:22px 0 0}
.twal>summary{font-weight:700;font-size:.92rem;min-height:44px;display:flex;align-items:center}
.wcards{display:flex;flex-direction:column;gap:10px;margin-top:6px}
.wcard{border:1.5px solid var(--ink);padding:10px 12px;background:var(--white);overflow-wrap:anywhere;min-width:0}
.wcard .wh{margin:0 0 6px;font-size:.92rem}
.wcard .wh .small{color:var(--ink2)}
.wkv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:2px 10px;margin:0;font-size:.86rem;align-items:baseline}
.wkv dt{color:var(--ink2)}
.wkv dd{margin:0}
.wkv .wbig{font-size:1.25rem;font-weight:700;letter-spacing:.04em}
.wlk{margin:6px 0 0;font-size:.86rem}
.wdocs{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.wdocs .wdt{width:88px;height:88px;flex:none}
.wpdf{display:flex;align-items:center;gap:8px;min-height:44px;max-width:100%;padding:4px 8px 4px 4px;border:1px solid var(--hair);color:var(--ink);text-decoration:none;font-size:.84rem}
.wpdf .wpn{overflow-wrap:anywhere;min-width:0}
.wpdf .dico{margin:0;flex:none}

/* ===== D163 (f): the diary (js/diary.js) and the printable summary (js/views/resumen.js) ===== */
.swrap{max-width:900px;margin-inline:auto}
.sumbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.sumbar .dbtn{min-height:44px}
.scover{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,360px);gap:16px 28px;align-items:center;border-top:2px solid var(--ink);border-bottom:1px solid var(--hair);padding:14px 0}
.scover h2{font-size:1.6rem;margin:0 0 4px}
.scover p{margin:2px 0}
.scb{color:var(--ink2);font-size:.9rem;overflow-wrap:anywhere}
.sumap{width:100%;height:auto;display:block;background:var(--land);border:1px solid var(--hair)}
.sumap .rti{stroke:var(--ida);stroke-width:3;stroke-linecap:round}
.sumap .rtv{stroke:var(--vuelta);stroke-width:3;stroke-linecap:round}
.sumap .rtd{stroke:var(--dtc);stroke-width:1.6;stroke-dasharray:1 4;stroke-linecap:round}
.sumap .rtb{fill:var(--white);stroke:var(--ink);stroke-width:2}
.sumap .rtl{font:700 10px var(--gothic);fill:var(--ink);paint-order:stroke;stroke:var(--land);stroke-width:3;stroke-linejoin:round}
.stot{margin-top:14px}
.stot h3,.sday h3{font-size:.72rem;margin:0 0 6px}
.sdays{margin-top:10px}
.sday{border-top:1px solid var(--hair);padding:10px 0}
.sday h3{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline}
.sday h3 span:last-child{color:var(--ink2);font-weight:400}
.sday p{margin:4px 0}
.sdn{white-space:pre-wrap;overflow-wrap:anywhere}
.sdp{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:6px 0}
.sdp figure{position:relative;margin:0;aspect-ratio:4/3;background:var(--land);overflow:hidden}
.sdp img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sdp img[hidden]{display:none}
.sdempty{opacity:.75}
@media (max-width:640px){.scover{grid-template-columns:1fr}.sdp{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ===== D166 (2): booked trains (js/trains.js): the lines under a leg, Ritmo → Tramos' list
   and its editor (a row per train, 16 px fields so iOS does not zoom), Hoy's "Próximo". */
.ctrl .evl{font-size:.74rem}
.wtr{margin:4px 0 0;display:flex;flex-direction:column;font-size:.92rem}
.tprox{margin:10px 0 0;padding:8px 12px;border-left:4px solid var(--red);background:var(--white);font-size:.95rem;line-height:1.45;overflow-wrap:anywhere}
.tprox[hidden]{display:none}
.tprox .tpk{display:block;font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:700}
.tprox b{color:var(--red)}

/* ===== D166 (3): the medical sheet (js/medical.js): its section in Esenciales, the editor
   (#med, a .pe sheet) and the card (#medc, the taxi card's black on white, D128). */
.emsel{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink2);margin:2px 0 8px}
.emsel select{font:inherit;font-size:16px;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:6px 8px;min-height:44px;min-width:0}
.emname{margin:2px 0 6px;display:flex;flex-wrap:wrap;gap:6px;align-items:baseline}
.emkv dd{white-space:normal}
.emact{margin-top:10px}
.emnote{margin:10px 0 0;color:var(--ink2)}
.medsub{margin:4px 0 0;color:var(--ink2)}
.mckl{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,180px),1fr));gap:0 12px}
.mck{font-size:.88rem}
.mednote{margin:0;color:var(--ink2);font-style:italic}
body.med-on{overflow:hidden}
.medc .mcbar{gap:10px}
.mcbody{display:flex;flex-direction:column;gap:14px;padding-block:12px 24px;max-width:720px}
.mct{margin:0;font-weight:700;font-size:clamp(30px,8.4vw,52px);line-height:1.2;overflow-wrap:anywhere}
.mct small,.mph small,.mcs h3 small,.mli small,.mfood small,.mbig small,.mkv small{display:block;font-size:15px;font-weight:400;color:#444;line-height:1.35;margin-top:2px}
.mphs{display:flex;flex-direction:column;gap:12px;border-top:3px solid #000;border-bottom:3px solid #000;padding:12px 0}
.mph{margin:0;font-weight:700;font-size:clamp(22px,6.2vw,34px);line-height:1.35;overflow-wrap:anywhere}
.mph.warn{color:#b0001e}
.mcs{border-top:1px solid #999;padding-top:10px}
.mcs h3{margin:0 0 6px;font-size:clamp(20px,5.4vw,28px);font-weight:700}
.mbig{margin:0;font-size:clamp(24px,6.6vw,38px);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.mli,.mfood{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:8px}
.mli li{font-size:clamp(22px,6vw,32px);font-weight:700;line-height:1.3;overflow-wrap:anywhere}
.mfood li{font-size:clamp(30px,8.4vw,52px);font-weight:700;line-height:1.25;border-bottom:2px solid #000;padding-bottom:8px;overflow-wrap:anywhere}
.mol{margin:0;font-size:13px;color:#555}
.mv{margin:2px 0;font-size:22px;font-weight:700;overflow-wrap:anywhere}
.mtel{color:#000}
.mrel{font-weight:400}
.mkv{margin-top:6px}
.mkv>span{font-size:18px;font-weight:700}
.mwho{margin:0;font-size:18px;color:#333}
.mcsw{display:flex;flex-wrap:wrap;gap:10px;padding-top:6px}
/* Print: the card alone, on one small sheet (about A6), Japanese and Spanish. */
@media print{
  body.med-on>:not(#medc){display:none!important}
  body.med-on #medc{position:static;inset:auto;overflow:visible;padding:0}
  #medc .mcbar,#medc .mcsw{display:none}
  #medc .mcbody{max-width:120mm;padding:4mm;border:1.5px solid #000;gap:6px}
  #medc .mct{font-size:18pt}
  #medc .mph,#medc .mbig,#medc .mli li,#medc .mv{font-size:12pt}
  #medc .mfood li{font-size:17pt}
  #medc .mcs h3{font-size:11pt;margin-bottom:2px}
  #medc .mo{font-size:10pt}
  #medc small,#medc .mol{font-size:8pt}
  #medc .mphs{padding:5px 0;gap:4px}
  #medc .mcs{padding-top:4px;break-inside:avoid}
}
@media print{   /* E01-14: the views are in <main> */
  #v-summary .sumbar{display:none}
  #v-summary .wrap{padding:0}
  .sday,.stot,.scover{break-inside:avoid}
  .sdp figure{aspect-ratio:auto;height:42mm}
  .sdempty{opacity:1}
}

/* ===== D171: Mapa → Ruta · Interactivo (js/imap.js) ===================================
   The two maps' sub-tabs (Ritmo's chips) over both map views. The interactive map: the
   filters above it (the day's select and the kinds' switches, the route map's .tg), the
   box filling the window below the header on a phone (js/imap.js fitBox(); the page does
   not scroll there, as D89's map), the zoom pair in the route map's bordered style, the
   message line, and the pin's card and the saved zones as a sheet over the map's bottom.
   Touch targets 44 px on coarse pointers; the tiles' credit small at the bottom right. */
.mtabs-o{display:none}
#v-imap .imw[hidden],#v-imap .imlock[hidden]{display:none}
.imlock{padding:40px 0;text-align:center}
.imbar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 18px;padding:0 0 8px;font-size:.8rem}
.imday select{font:inherit;font-weight:700;color:var(--ink);background:var(--paper);border:1.5px solid var(--ink);border-radius:0;padding:4px 8px;max-width:100%}
.imkinds{display:flex;flex-wrap:wrap;gap:4px 14px}
.imk{display:inline-flex;align-items:center;gap:5px}
.imsw{width:14px;height:14px;flex:none}
.imk[aria-pressed="false"] .imsw{opacity:.35}
.imbox{position:relative;height:70vh;min-height:300px;background:var(--land);outline:1px solid var(--hair);outline-offset:-1px;overflow:hidden}
.immap,.implain{position:absolute;inset:0;width:100%;height:100%;display:block}
.immap[hidden],.implain[hidden]{display:none}
.implain .impl{cursor:pointer;outline:none}
.implain .impl:focus-visible circle:first-child{stroke:var(--ink);stroke-width:2}
.imctl{position:absolute;right:10px;top:10px;display:flex;flex-direction:column;border:1.5px solid var(--ink);background:var(--paper);z-index:2}
.imctl[hidden]{display:none}
.imctl button{width:32px;height:32px;font-size:1.1rem;line-height:1}
.imctl button+button{border-top:1.5px solid var(--ink)}
/* mobile-qa 2026-11-02: the chips (.imact) and the message line (.immsg) stacked in one
   column at the box's top left, clear of the zoom buttons on the right, so the message is
   never under the chips whatever the text size; the column lets the map take the touches
   between and beside them. */
.imtop{position:absolute;left:10px;top:10px;right:58px;z-index:2;display:flex;flex-direction:column;align-items:flex-start;gap:8px;pointer-events:none}
.imtop>*{pointer-events:auto}
.imact{display:flex;flex-wrap:wrap;gap:6px;max-width:100%}
.imchip{font-weight:700;font-size:.78rem;padding:5px 12px;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink)}
.imchip:disabled{color:var(--ink3);border-color:var(--ink3)}
.immsg{align-self:stretch;box-sizing:border-box;max-width:520px;font-size:.78rem;line-height:1.4;color:var(--ink);
  background:color-mix(in srgb,var(--paper) 94%,transparent);border:1px solid var(--hair);border-left:3px solid var(--red);padding:6px 10px}
.immsg[hidden]{display:none}
.imcard{position:absolute;left:10px;right:10px;bottom:22px;z-index:3;max-width:440px;max-height:calc(100% - 64px);overflow:auto;overscroll-behavior:contain;
  background:var(--paper);border:2px solid var(--ink);padding:12px 44px 12px 14px;font-size:.86rem;box-shadow:0 4px 18px rgba(0,0,0,.18)}
.imcard[hidden]{display:none}
.impanel{max-width:520px}
.imx{position:absolute;right:2px;top:2px;width:44px;height:44px;font-size:1.35rem;line-height:1;color:var(--ink2)}
.imx:hover{color:var(--red)}
.imt{font-size:1rem;line-height:1.3;display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.imt .imkj{font-family:var(--mincho);font-weight:900;font-size:1.25rem}
.imt .pn{flex:none}
.imtime{background:var(--ink);color:var(--paper);padding:1px 6px;font-size:.82rem}
.ims{color:var(--ink2);font-size:.8rem;margin-top:2px}
.imcard p{margin:6px 0 0}
.ima{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:10px}
.imbtn{display:inline-flex;align-items:center;font-weight:700;font-size:.8rem;padding:5px 10px;border:1.5px solid var(--ink);color:var(--ink);background:var(--paper);text-decoration:none}
.imbtn.imgo{background:var(--ink);color:var(--paper)}
.imbtn:disabled{color:var(--ink3);border-color:var(--hair);cursor:default}
.imacts,.imnear,.imzones{list-style:none;margin:8px 0 0;padding:0}
.imacts li{padding:2px 0}
.imnear .imrow{display:flex;flex-direction:column;align-items:flex-start;width:100%;text-align:left;padding:6px 0;border-bottom:1px solid var(--hair)}
.imnear .imrow:hover b{color:var(--red)}
.imzones li{display:flex;flex-direction:column;gap:2px;padding:8px 0;border-bottom:1px solid var(--hair)}
.imzones .ima{margin-top:4px}
/* D171 (round 2): a group's card, one row per pin (the pin's own entry); in the sheet, rows that select. */
.imgroup{list-style:none;margin:6px 0 0;padding:0}
.imgroup>li{border-top:1px solid var(--hair);padding:8px 0 6px}
.imgroup>li.on{box-shadow:inset 3px 0 0 var(--red);padding-left:8px}
.imgroup .imt{font-size:.92rem}
.imgroup .ima{margin-top:6px}
.imrow.on{box-shadow:inset 3px 0 0 var(--red);padding-left:8px}
.imrow.on b{color:var(--red)}
.pm-gl .pm-grp{bottom:10px;max-height:62%;padding-block:8px}
.pm-grp .imnear{margin-top:2px}
.pm-grp .imrow{flex-direction:row;align-items:center;gap:8px;min-height:44px;padding-block:4px}
.pm-grp .imrow b{color:var(--ink)}
.pm-grp .imrow.on b{color:var(--red)}
.imattr{position:absolute;right:0;bottom:0;z-index:2;padding:1px 6px;font:500 .62rem/1.4 var(--gothic);color:var(--ink);
  background:color-mix(in srgb,var(--paper) 82%,transparent);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.imattr a{color:inherit;text-decoration:none}
.imattr a:hover{text-decoration:underline}
.pm-gl{position:absolute;inset:0;z-index:1;background:var(--land);outline:1px solid var(--hair);outline-offset:-1px;overflow:hidden}
.pm-gl[hidden]{display:none}
.pm-glmap{position:absolute;inset:0;width:100%;height:100%}
.pm-gl .maplibregl-cooperative-gesture-screen,.bgl .maplibregl-cooperative-gesture-screen{font:700 .9rem/1.4 var(--gothic);background:color-mix(in srgb,var(--ink) 55%,transparent);color:var(--paper)}
/* D171 (round 4): ONE map (js/gl-map.js), its element moved between #im-map, the sheet's
   .pm-glmap and a Bases card's .bglmap; out of sight it waits in #gl-park, off screen at
   its last size (nothing resized, nothing redrawn). div.glmap beats MapLibre's own
   .maplibregl-map{position:relative}, loaded after this sheet. */
div.glmap{position:absolute;inset:0;width:100%;height:100%}
.glpark{position:fixed;left:0;top:0;width:360px;height:270px;transform:translateX(-300vw);visibility:hidden;pointer-events:none;overflow:hidden;contain:strict}
/* js/home-map.js: the covers' pictures are drawn here, off screen but not hidden (the map must draw). */
.glsnap{position:fixed;left:0;top:0;transform:translateX(-300vw);pointer-events:none;overflow:hidden;contain:strict}.hmapw .hglfreeze{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
/* Bases: the map over the card's drawing (the drawing is the fallback), or the picture it
   left there ("poster", a canvas); "Guardar zona" under it. */
.bgl{position:absolute;inset:0;z-index:2;background:var(--land);overflow:hidden}
.bgl[hidden]{display:none}
.bglmap{position:absolute;inset:0}
.bgl .bposter{position:absolute;inset:0;width:100%;height:100%;display:block;cursor:pointer;z-index:1}
.bgl .bposter[hidden]{display:none}
.bgl .imctl{z-index:3}
.bgl .imattr{z-index:3}
.bgl.live .maplibregl-canvas{cursor:pointer}
.bmapc.glon .bmap-k{display:none}   /* the drawing's legend, only while the drawing shows */
.bzone{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin-top:8px}
.bzone:empty{display:none}
.bzone .imznote{flex-basis:100%}
.imback{margin-right:-6px}
.imscope{border-color:var(--red);color:var(--red)}
.imscope[hidden],.imback[hidden]{display:none}
@media (max-width:520px){
  .mtabs-o{display:flex;position:absolute;left:10px;top:10px;z-index:3;border:1.5px solid var(--ink);background:var(--paper)}
  .mtabs-o button{min-height:40px;padding:0 12px;font-weight:700;font-size:.8rem;color:var(--ink2)}
  .mtabs-o button+button{border-left:1.5px solid var(--ink)}
  .mtabs-o button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
  .imtop{top:66px}   /* under the map switch */
  #v-map .mapbox .hint{top:62px}
  .imbar{padding-bottom:6px}   /* the select and Capas share one row (the phone block below) */
  .imbox{outline:0;margin-inline:calc(-1 * max(16px,env(safe-area-inset-left,0px))) calc(-1 * max(16px,env(safe-area-inset-right,0px)))}
  .imcard{left:6px;right:6px;bottom:calc(18px + env(safe-area-inset-bottom,0px));max-width:none;max-height:calc(100% - 84px)}
  .imattr{bottom:env(safe-area-inset-bottom,0px)}
}
@media (pointer:coarse),(max-width:640px){
  .imctl button{width:44px;height:44px}
  .imchip,.imbtn,.imday select,.imkinds .tg,.mtabs-o button{min-height:44px}
  .imtop{right:60px}
}
@media (max-width:520px){
  body[data-noroute] .imtop{top:10px}
}
/* E07-10: a leg's card (js/imap.js legCardHtml()): the pin's card, its facts as a two-column
   list, the leg's colour as a short bar before its title. */
.imkv{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 12px;margin:8px 0 0;font-size:.84rem}
.imkv dt{color:var(--ink2)}
.imkv dd{margin:0;min-width:0;overflow-wrap:anywhere}
.imlegk{display:inline-block;width:18px;height:0;border-top:4px solid var(--ida);flex:none}
.imlegk-todo{border-top:2px dashed var(--ink3)}   /* D214: «traslado a cargar», never a leg's colour */
/* E07-10: "La línea" (js/imap.js paintLine(), Ruta's line component). From 1000 px a column
   beside the map at the map's height (contain:size: the map sizes the row) that scrolls on
   its own; narrower, folded behind the "La línea" chip as a sheet over the map's bottom
   (#im-lpanel, the zones panel's look). Its rows take a finger (44 px). */
.imline{display:none}
.imlpanel{padding:0 0 6px;max-height:calc(100% - 64px)}
.imlpanel .imx{z-index:3}
.imlpanel .side-h{padding-right:48px}
.imline .move,.imlpanel .move{min-height:44px}
.imline .stn,.imlpanel .stn{min-height:44px;align-content:start}
.imline .stn:focus-visible,.imlpanel .stn:focus-visible,.imline .move:focus-visible,.imlpanel .move:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
@media (min-width:1000px){
  .imgrid{display:grid;grid-template-columns:minmax(0,1fr) 340px}
  .imline{display:block;contain:size;overflow:auto;overscroll-behavior:contain;border:1px solid var(--hair);border-left:0}
  .imlineb,.imlpanel{display:none!important}
}
/* D208: the one-time suggestion to save the zones (js/imap.js zoneHint()), in the message line. */
.immsg .imhint{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:6px}
.immsg[data-kind="hint"]{border-left-color:var(--ida)}
.immsg[data-kind="invite"]{border-left-color:var(--ink3)}   /* .ctl.mlayers: .ctl, later in this stylesheet, sets a display */
.lsheet{display:contents}
@media (max-width:719px),(max-height:500px){
  .mlayers .mlc:empty{display:none}
  .mlayers .mlc{font-family:var(--mono);font-weight:500}
  /* Interactivo: [select ......][Capas]; "‹ volver" and the scope chip on a row of their own when
     they do not fit beside it (the select never narrower than 150 px). */
  .imbar{flex-wrap:wrap;gap:6px 8px;overflow:visible}
  .imbar .imday{flex:1 1 150px;min-width:0;display:flex}
  .imbar .imday select{width:100%;max-width:none;min-width:0;text-overflow:ellipsis}
  .imbar .imscope{max-width:100%;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  /* Ruta: Capas leads the regions' flow (the fitted map's wrapping row, D89). */
  body.fit .mapbar .mlayers{order:-1;margin-right:8px}
  .lsheet{display:none}
  .lsheet.open{display:flex;flex-direction:column;position:fixed;left:0;right:0;bottom:var(--tabbar-h,0px);z-index:31;
    background:var(--paper);border-top:2px solid var(--ink);box-shadow:0 -10px 30px rgba(0,0,0,.18);
    padding:4px max(0px,env(safe-area-inset-right,0px)) 10px max(0px,env(safe-area-inset-left,0px));
    max-height:calc(100dvh - var(--tabbar-h,0px) - var(--bar-h) - 24px - env(safe-area-inset-top,0px));overflow:auto;overscroll-behavior:contain;
    font-size:1rem;color:var(--ink)}
  .lsheet.open .lsh{display:flex;align-items:center;justify-content:space-between;padding:0 6px 0 16px}
  .lsheet .lsht{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);font-weight:700}
  /* each layer's mark, in a 26 px slot so the names line up */
  .lsheet.open .lsym{display:block;flex:none;width:26px;height:14px}
  .lsheet.open .tgl svg{flex:none;margin-inline:6.5px}
  .lsheet.open .imsw{width:18px;height:18px;margin-inline:4px}
  .lsheet.open .tg[aria-pressed="false"] :is(.lsym,svg){opacity:.35}
  .lsheet.open .lkey{display:flex;flex-wrap:wrap;gap:2px 18px;margin:6px 16px 0;padding-top:8px;border-top:1px solid var(--hair);font-size:.8rem;color:var(--ink2)}
  .lsheet .lkey .ks{display:flex;align-items:center;gap:8px;min-height:32px}
  .lsheet .lkey svg{display:block;flex:none}
}
/* F3: the Home's block (two buttons) and the three ways of #h-new (js/home-new.js). */
.hsbtn{display:flex;flex-wrap:wrap;gap:10px;margin-top:14px}
.hsbtn .dbtn{min-height:46px}
.hresume{margin:12px 0 0;font-size:.9rem}
.hresume a{display:inline-flex;align-items:center;min-height:44px;font-weight:700}
.hresume[hidden]{display:none}
.hpaths .hph{margin:0 0 10px;font-size:1.05rem;letter-spacing:0;text-transform:none;color:var(--ink)}
.hpathl{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.hpathb{display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-height:64px;text-align:left;border:1.5px solid var(--ink);background:var(--paper);color:var(--ink);padding:12px 14px;font:inherit;cursor:pointer}
.hpathb b{font-size:1rem}
.hpathb span{font-size:.86rem;color:var(--ink2);line-height:1.4}
.hpathb:hover,.hpathb:focus-visible{background:var(--land)}
.hai .wres,.hai .wdrop{text-align:left}
.hnew .hpaths,.hnew .hai{padding-top:10px}

/* ===== F3: "Nuevo viaje", steps 2 and 3 (#v-wizard, js/views/cargar.js) =====
   One step on screen at a time (phone first): the steps bar, then the pane. */
/* The new-trip form says it is the first of the three steps. */
.hfstep{margin:0 0 6px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}

/* ===== nav-shell (feedback 2026-10-31, G1-G6, G10-G12; option A of docs/design/nav-shell/) =====
   One bar on every screen: the landing's lockup, a pipe, the breadcrumb and the controls;
   in a trip the tabs under it (wide) or a bottom tab bar (phone: <= 719 px wide, or a
   landscape phone by its height). Metrics: --bar-h the bar's row, --tabbar-h what the
   bottom tab bar takes (0 on wide; the map's fit and the page's padding use it). */
.tot{top:calc(var(--stick-h) + 12px)}

/* ===== E18-18 (the human: "tengamos consistencia en toda la UI"): one component per role, the
   same everywhere. This block restates, at the end of the sheet (so it wins over the older
   per-screen rules with the same selectors), the one variant of links, destructive buttons,
   chips and button sizes. Button labels start upper-case (C1): that is in the markup. */
.hact .dbtn,.hsteps .dbtn,.hsbtn .dbtn{min-height:44px}
/* Viajeros (the trip's form on the Home): next to a traveller without an account. */
.htvinv{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;grid-column:1/-1;margin:2px 0 0}
.htvinv .ctl{border-color:var(--red);color:var(--red)}
.htvinv .ctl .ic{display:block;flex:none;width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.htvinv .small{font-size:.8rem}
/* The in-view currency switch (Costos, Hoy's quick expense): phone only, with a pair to switch. */
.cxrow{display:none;align-items:center;justify-content:flex-end;gap:10px;margin:8px 0;font-size:.8rem;color:var(--ink2)}
@media (max-width:719px),(max-height:500px){.cxrow:has(.curx:not([hidden])){display:flex}}

/* ===== IAM E2-E: trip lifecycle (js/lifecycle.js) ===== */
.lcbox{border:1.5px solid var(--ink);padding:10px 12px;margin:0 0 12px;display:flex;flex-direction:column;gap:8px;background:var(--paper)}
.lcbox.lcwarn{border-color:var(--red);box-shadow:inset 4px 0 0 var(--red)}
.lcbox h3{margin:0;font-weight:700;font-size:1.02rem;line-height:1.3;font-family:inherit;text-transform:none;letter-spacing:0;color:var(--ink)}
.lcbox p{margin:0;font-size:.88rem;color:var(--ink2);overflow-wrap:anywhere}
.lcbox .dbar .dbtn{min-height:44px}
.lcline{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 10px;font-size:.84rem;color:var(--ink2)}
.lcline .plink{min-height:44px;display:inline-flex;align-items:center;color:var(--ink);text-decoration:underline;text-underline-offset:3px}
.lcstrip{display:flex;flex-direction:column;gap:0;margin:0 0 6px}
.lcstrip[hidden]{display:none}
.lcev{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.lcev li{padding:8px 0;border-bottom:1px solid var(--hair);font-size:.86rem;display:flex;flex-wrap:wrap;gap:2px 10px}
.lcev time{font-family:var(--mono);font-size:.78rem;color:var(--ink2)}
.lcacts{display:flex;flex-direction:column;gap:8px}
.lcacts .dbtn{min-height:44px;text-align:left}
.lcacts small{display:block;font-size:.76rem;color:var(--ink2);font-weight:400}
.lcnow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0}

/* ===== IAM E2-E: personal medical card, sharing, insurance ===== */
.emtabs{margin:0 0 10px}
.emtabs button{min-height:44px}
.emsub{margin:14px 0 6px;font-size:.86rem;font-weight:700}
.emcard{border-top:1px solid var(--hair);padding-top:10px;margin-top:10px}
.emcard:first-child{border-top:0;margin-top:0;padding-top:0}
.emcomp{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.emcomp li{border-bottom:1px solid var(--hair)}
.emcomp button{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;width:100%;min-height:52px;padding:8px 4px;text-align:left;font:inherit;color:var(--ink);background:none;border:0;cursor:pointer}
.emcomp button:hover{background:var(--redsoft)}
.emcomp .nm{font-weight:700;flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.emcomp .bt{font-family:var(--mono);font-size:.9rem}
.emcomp small{flex-basis:100%;font-size:.76rem;color:var(--ink2)}
.pill.emred{border-color:var(--red);background:var(--red);color:#fff}
.emgone{font-size:.82rem;color:var(--ink2);margin:8px 0 0}
.emgone .dbtn{min-height:44px}
.medf .emec{display:flex;flex-direction:column;gap:8px}
.medf .emec+.emec{border-top:1px dashed var(--hair);padding-top:8px}
.medf .emdanger{border-top:1.5px solid var(--ink);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.medf .emdanger .dbtn{align-self:flex-start}
.insc{display:flex;flex-direction:column;gap:8px}
.insc+.insc{border-top:1px solid var(--hair);padding-top:12px;margin-top:12px}
.inscall{display:flex;flex-direction:column;gap:8px}
.inscb{display:flex;flex-direction:column;align-items:flex-start;gap:1px;min-height:56px;padding:8px 14px;text-decoration:none;text-align:left}
.inscb b{font-size:1rem}
.inscb small{font-family:var(--mono);font-size:.82rem;font-weight:400}
.insdocs{list-style:none;margin:0;padding:0}
.insdocs li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:44px;font-size:.86rem}
.insdocs li .nm{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.insdocs .dbtn{min-height:44px}
.insclaim{white-space:pre-line;font-size:.86rem;margin:4px 0 0;overflow-wrap:anywhere}
.insph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr) auto;gap:6px;align-items:end}
.insph .dbtn{min-height:44px}
.insmoney{display:grid;grid-template-columns:minmax(0,1fr) 7.5em;gap:6px;align-items:end}
.inswarn{color:var(--red);font-weight:700;font-size:.84rem;margin:0}
.mcall{background:#000;color:#fff}
@media print{.mcall{display:none!important}}

/* --- Recomendar Wayfolio (js/recommend.js) --- */
.rectoast{position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top,0px));z-index:60;
  background:var(--ink);color:var(--paper);font-size:.9rem;padding:10px 16px;border-radius:3px;box-shadow:0 2px 10px rgba(0,0,0,.25);
  width:max-content;max-width:calc(100vw - 24px);overflow-wrap:anywhere;pointer-events:none}
.rectoast:empty{display:none}
.recfb[hidden]{display:none!important}
.recfb{display:block;margin:0;text-align:left;width:100%}
.recfb label{display:block;font-weight:700;font-size:.9rem;color:var(--ink);margin:0 0 6px;max-width:none}
.recfb input{display:block;width:100%;min-width:0;min-height:44px;font:inherit;font-size:16px;padding:8px;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink)}
.recbtn svg{display:block;flex:none;width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
dialog.recdlg{border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:16px;margin:auto;
  width:min(420px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-width:none}
dialog.recdlg::backdrop{background:var(--scrim,rgba(0,0,0,.4))}
.recdlg .recfb{margin-top:10px}
.recbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px}

/* ===== E01-14, E18-26 (mobile-qa, 2026-11-01): structure and the last strays of D203 =====
   At the end of the sheet, so it wins over the older per-screen rules with the same selectors. */
/* C2: the one internal link (red, bold, .8rem, never underlined; the E18-18 block above) for the
   last four: Hoy's "Ver ficha de <lugar> ›", Mis viajes' "Gastado (…)", and the two pictures
   that are links, the trip card's cover and Bases' zone map: no underline on them (they were
   the browser's, ink or grey), their corner words in the link's red. */
.tsum .tfic,.hpl>a.hcl{font-size:.8rem}
.hcov0{font-size:.8rem}