/* web/css/planificar.css — team Planificar (D219): Ritmo, Bases, Lugares and the place sheet,
   Datos, Personas, Nuevo viaje, documents, the plan editor and Entradas. Loaded after
   en-viaje.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. */
/* IAM E2-B: Personas (a tab of Planificar since 2026-11-01). Its first block, who travels
   (js/views/viajeros.js): the header's rings (#ttrv) beside each full name. */
.pptv{list-style:none;margin:0 0 6px;padding:0}
.pptv li{display:flex;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair);min-width:0}
.pptv .ttc{flex:none;display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border:1.5px solid var(--ink2);border-radius:50%;font:700 .72rem/1 var(--gothic);white-space:nowrap;overflow:hidden}
.pptv .pri .ttc{border-color:var(--red);color:var(--red)}
.pptn{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere;line-height:1.35}
.plist{list-style:none;margin:0;padding:0}
.pmem{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--hair)}
.pmem .dbar{margin:0}
.pmem select,.invcard select{min-height:44px;font:inherit;padding:6px 10px;border:1.5px solid var(--ink2);background:var(--paper);color:var(--ink)}
/* IAM E2-B: the welcome's invitations, lost-access notices and "Para después" (08 §6) */
.hinv{margin:6px 0 18px}
.invcard{border:1.5px solid var(--ink);background:var(--white);padding:12px 14px;margin:0 0 10px}
.invcard p{margin:4px 0}
.invcard .dbar{margin-top:10px}
.invcard select{min-height:44px}
/* E17 (D193): "¿Viajás en este viaje?", "¿Sos uno de estos?" and the optional nationality / passport. */
.invq{border:0;margin:10px 0 0;padding:0;min-width:0}
.invq legend{padding:0;font-weight:700;font-size:.92rem;margin-bottom:2px}
.invseg{display:flex;gap:4px 18px;flex-wrap:wrap}
.invr{display:flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.invr input{width:20px;height:20px;margin:0;flex:none;accent-color:var(--ink)}
.invr span{min-width:0;overflow-wrap:anywhere}
.invme{margin-top:8px}
.invcard 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}
.invcard .invrow select{width:100%;min-width:0}
.ds-k{font-family:var(--mincho);font-weight:900;fill:var(--ink)}
.ds-r{font-family:var(--gothic);font-weight:700;fill:var(--ink2);letter-spacing:.06em;text-transform:uppercase}
.ds-m{font-family:var(--mono);fill:var(--ink2)}
.ds-mi{fill:none;stroke:var(--ink2);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.qs ol{margin:8px 0 0;padding-left:20px;font-size:.88rem;display:flex;flex-direction:column;gap:6px}

/* Rhythm: the 33-column grid of the reference was replaced by the calendar of D90 (block
   "Ritmo" at the end of this sheet). What stays here is the alternatives comparator. */
.bro{font-family:var(--gothic);font-weight:700;font-size:.62rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2)}
.cmpbar .bro{margin:0 4px 0 2px}
.cmpbar{display:flex;height:30px;border:1.5px solid var(--ink)}
.cmpbar div{border-right:1.5px solid var(--ink);display:flex;align-items:center;justify-content:center;font-family:var(--mincho);font-weight:900;font-size:.8rem;overflow:hidden;white-space:nowrap}
.cmpbar div:last-child{border-right:0}
.cmpbar div.short{background:var(--redsoft)}
.book .bro{display:block}
.prio.hi{background:var(--redbg);border-color:var(--redbg);color:#fff}
.bcard .hd{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.bcard .hd .kj{font-size:2rem;line-height:1}
.bmap-l{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:2px 14px;font-size:.78rem}
.bmap-l li{display:flex;gap:6px;align-items:baseline;min-width:0}
.bmap-l span{font:500 .66rem var(--mono);border:1.2px solid var(--ink);border-radius:50%;width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center;flex:none}
.bmap-l span.p{background:var(--redbg);border-color:var(--redbg);color:#fff}
.bmap-k{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:.72rem;color:var(--ink2);margin-top:6px}
.bmap-k span{display:inline-flex;align-items:center;gap:5px}
.bmap-l span.ok{background:var(--okbg);border-color:var(--okbg);color:#fff}
.tbtn{grid-column:1/-1;background:var(--ink);color:var(--paper);font-weight:700;padding:8px 12px}
.tsimrow{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;align-items:center;margin:8px 0 6px}
.tsimrow button{text-decoration:underline;color:var(--ink)}
.resv-wrap{margin-top:16px;border-top:1px solid var(--hair);padding-top:10px}
@media (max-width:520px){.tsimrow{grid-template-columns:1fr}}
@media (pointer: coarse){
  /* Bases summary: "Reservar primero" lists several hotels in one nowrap <b>, 2 px wider
     than a 390 px screen (tester r1); let it wrap. */
  #book-sum .r b{white-space:normal;overflow-wrap:anywhere}
}

/* ===== UI iteration in web/ (D84-D90) ============================================== */
.tplanb .dpre{flex:1 1 100%;text-align:left}

/* Ritmo (D90): the trip calendar. Summary, one row per day grouped by base, the
   alternatives comparator folded at the end. */
.rsum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:2px solid var(--ink);border-bottom:1px solid var(--hair)}
.rsum>div{padding:10px 14px 12px;border-left:1px solid var(--hair);min-width:0}
.rsum>div:first-child{border-left:0;padding-left:0}
.rsum b{display:block;font:500 1.9rem/1.15 var(--mono);color:var(--ink)}
.rsum span{display:block;font-size:.8rem;color:var(--ink2)}
.rsum .wet b{color:var(--vuelta)}
.rmore{margin-top:8px;font-size:.8rem;color:var(--ink2)}
.rmore .rn{margin:0 4px 1px}
.rgrp{margin-top:24px}
.rgh{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 10px;margin:0;padding-bottom:6px;border-bottom:2px solid var(--ink);font-weight:400}
.rgh .ro{font-weight:700;font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
/* D161 (7): en viaje, the metrics of Días folded above the calendar ("Métricas ▸"). */
.rmet{margin:4px 0 10px}
.rmet[open]>summary{margin-bottom:8px}
.rk{min-width:0}
@media (max-width:640px){
  .rsum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rsum>div:nth-child(3){border-left:0;padding-left:0}
  .rsum>div:nth-child(n+3){border-top:1px solid var(--hair)}
  .rsum b{font-size:1.5rem}.rk{grid-area:k}
}

/* ===== D92/D93: place sheet (#v-place) ============================================= */
/* Layout: map and list on the left (the map's 640 logical px), the rest on the right;
   one column up to 980 px. #p-body is display:contents so the static notes block takes
   the right column under the trains, videos and the rest. */
.pwrap{display:grid;grid-template-columns:minmax(0,640px) minmax(0,1fr);gap:0 40px;align-items:start;padding-top:12px}
.pbar,.phead,.pclimw{grid-column:1/-1;min-width:0}
.pleft{grid-column:1;grid-row:span 2;min-width:0}
.pright,#p-notes-sec{grid-column:2;min-width:0}
.phead{display:flex;flex-wrap:wrap;align-items:flex-end;gap:6px 16px;border-bottom:2px solid var(--ink);padding:6px 0 12px}
.pnm{display:flex;flex-direction:column;min-width:0}
.pnm h2{margin:0;font-size:1.45rem;line-height:1.15}
.pnm .ro{font-weight:700;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink2)}
.pfacts{flex-basis:100%;display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 14px;font-size:.88rem;color:var(--ink2)}
.pwhen{color:var(--ink)}
.pclimw:empty{display:none}
.pclimw{padding-top:14px}
.pclim{margin-left:0;grid-template-columns:repeat(auto-fill,minmax(min(100%,200px),1fr));gap:10px 28px}
.pclim.one{grid-template-columns:minmax(0,1fr)}
.psec{margin-top:20px}
/* The list: the marker's number, name, kanji, status, note, Maps link, visited check. */
.patl{display:flex;flex-direction:column}

/* ===== 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. */
.droute{display:flex;flex-direction:column}
.dleg{display:flex;flex-wrap:wrap;align-items:center;gap:0 12px;padding:1px 0 1px 34px;font-size:.76rem;color:var(--ink2)}
.dleg .dlt::before{content:"↓\00a0";color:var(--ink3)}
.dleg.dfrom .dlt::before{content:"⌂\00a0"}
.dacts{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;margin-top:6px}
.dacts .ddayl{font-size:.76rem;color:var(--ink2)}
.rs small.rclosed{color:var(--red);font-weight:700}
.dopt{border:1.5px solid var(--ink);padding:8px 12px;margin:8px 0 4px;font-size:.84rem;display:flex;flex-direction:column;gap:6px}
.dopt p{margin:0}
.dopl{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.dopl li{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.dopl .pn{width:22px;height:22px;font-size:.7rem;flex:none}
.rdx{padding:6px 6px 12px 96px;border-bottom:1px solid var(--hair);background:var(--redsoft)}
.dstop{display:grid;grid-template-columns:28px minmax(0,1fr);gap:2px 10px;align-items:start;padding:5px 0;font-size:.86rem;overflow-wrap:anywhere}
.dstop+.dstop,.dleg+.dstop{border-top:1px solid var(--hair)}
.rdx .dleg{padding-left:38px}
@media (max-width:640px){
  .rdx{padding-left:6px}
}
/* The place sheet's "Qué ver" by day. */
.pday+.pday{margin-top:18px}
.patl .dleg{padding-left:42px}
.pleg .tleg{border-top:0;padding-top:2px}
@media (max-width:980px){
  .pwrap{grid-template-columns:minmax(0,1fr)}
  .pleft,.pright,#p-notes-sec{grid-column:1;grid-row:auto}
}
@media (max-width:520px){
  .pnm h2{font-size:1.25rem}
}

/* ===== D100-D103: payments, dollars and the Costos sections ========================= */
.bkw{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.resv-wrap h4 .pill{text-transform:none;letter-spacing:0;margin-left:6px;vertical-align:1px}
/* Place sheet of a base: its hotel(s) with booking and payment state (D100). */
.pstay{padding:6px 0 10px;border-bottom:1px solid var(--hair)}
.pstay .thotel{margin-top:0;font-size:.98rem}

/* ===== 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). */
/* Ritmo: the plane under the date of a flight day; flight-only rows are not buttons. */
.rd .rfly{display:inline-flex;color:var(--red);margin-top:1px}
.rrow.rfl{cursor:default}
.rrow.rfl:hover{background:none}
.kb.k-flight::before{display:none}
.rfg .rgh .ro{display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.rfg .rgh .plane{color:var(--red)}

/* ===== D111: Datos (state, import, prompts) and D113: Pendientes ==================== */
/* The labels' column at most 61 % of the row (at 100 % on 375 px as before): at 200 % text «Espacio en este dispositivo» wraps
   instead of pushing the values past the screen (mobile-qa 2026-11-02). */
.dkv{grid-template-columns:fit-content(61%) minmax(0,1fr)}
.dkv dd .small{display:block}
#v-datos .tsec p>.maplink{white-space:normal}   /* «Cuenta ›», «Panel de administración ›» wrap at 200 % text */
.dcounts{margin-top:10px;font-size:.84rem}
.dimp{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;max-width:72ch}
/* 2026-11-02: a map run's "Detalle", the server's own words under the plain message (js/views/datos-mapas.js). */
.ddet{font-size:.8rem;color:var(--ink2)}
.ddet[hidden]{display:none}
.ddet>summary{cursor:pointer;min-height:44px;display:flex;align-items:center;width:max-content}
.ddet p{margin:0;white-space:pre-line;overflow-wrap:anywhere}
.drep{margin-top:12px;max-width:80ch}
.dparts{margin-top:12px;max-width:80ch}
.dpart{margin-bottom:12px}
.dpart .dph,.drev .dph{font-size:.86rem;margin:10px 0 4px}   /* E21-15: a marks file's review warnings, as a part's headings */
.dpart li small.late{display:block}
.dfile{border-top:1px solid var(--hair);padding:10px 0;overflow-wrap:anywhere}
.dfh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px}
.dfh b{font-family:var(--mono);font-weight:500;min-width:0}
.dprompts{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,340px),1fr));gap:14px 28px}
.dpr{border:1.5px solid var(--ink);background:var(--white);padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-width:0}
.dpr p{font-size:.84rem;color:var(--ink2)}
.dfields{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:8px 12px}
.dfields label{display:flex;flex-direction:column;gap:2px;font-size:.76rem;color:var(--ink2);min-width:0}
.dpre{margin:6px 0 0;max-height:320px;overflow:auto;white-space:pre-wrap;overflow-wrap:anywhere;font:.76rem/1.5 var(--mono);background:var(--paper);border:1px solid var(--hair);padding:8px}
.dpre mark{background:var(--redsoft);color:var(--red)}
.dcopy{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.dcopy .small{min-width:0}
/* Pendientes: one row per item. Own items carry a check (done) and a delete; the automatic
   ones a square of their colour (they leave the list when the plan or a mark changes). */
.pnd{padding-top:0;margin-bottom:22px}
.dpr.pjump{outline:2px solid var(--red);outline-offset:3px;transition:outline-color .6s}
/* F10: the derived block's one line, and the online check-in's "Ya lo hice" under its text. */
.pdlede{font-size:.8rem;color:var(--ink2);margin:0 0 4px;max-width:68ch}
#r-todo-a{padding-top:4px}
.pdadd{margin-top:10px;font-size:.86rem}
.pdfd{display:flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink2)}
.pdfd input{width:auto}

/* ===== D125: documents (Datos, the bookings, the image sheet) and D126: calendar ===== */
.ddup{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:10px 16px;align-items:end;max-width:80ch}
.ddup .dbar,.ddup .dmsg,.ddup .dl,.ddup progress{grid-column:1/-1}
.ddup progress{width:100%;height:6px;accent-color:var(--red)}
.ddup progress[hidden],.dsheet[hidden],#doc-toast[hidden]{display:none}
.ddup .dl{margin:0;padding-left:18px;font-size:.84rem}
.ddup .dl:empty{display:none}
.ddup .dl li.bad{color:var(--red)}
.ddl{list-style:none;margin:12px 0 0;padding:0;max-width:80ch}
.ddi{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:4px 12px;align-items:start;padding:8px 0;border-top:1px solid var(--hair)}
.ddi:last-child{border-bottom:1px solid var(--hair)}
.ddb{min-width:0;display:flex;flex-direction:column;gap:1px}
.ddb small{color:var(--ink2);font-size:.78rem;overflow-wrap:anywhere}
.ddb .doff.on{color:var(--dtct)}
.dopen{color:var(--ink);font-weight:700;text-decoration:underline;text-decoration-color:var(--red);overflow-wrap:anywhere;align-self:flex-start}
.dded{margin-top:0}
.dded[open]{grid-column:1/-1}
.dedf{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:8px 14px;margin-top:6px;align-items:end}
.dedf .dbar,.dedf .dmsg{grid-column:1/-1}
.ddi.hid{grid-template-columns:auto minmax(0,1fr)}
.ddi.hid .dbtn{grid-column:1/-1;justify-self:start}
/* In a booking: "Abrir <name>" links (the placeholder is empty when it has none). */
.dlinks{display:flex;flex-wrap:wrap;gap:2px 16px;margin-top:4px}
.dlinks:empty{display:none}
.tact .dlinks{display:contents}
.dlinks .maplink{white-space:normal;overflow-wrap:anywhere;text-align:left}
#doc-toast{position:fixed;left:50%;transform:translateX(-50%);top:calc(10px + env(safe-area-inset-top,0px));z-index:30;background:var(--ink);color:var(--paper);font-size:.85rem;padding:8px 14px;border-radius:3px;box-shadow:0 2px 10px rgba(0,0,0,.25);width:max-content;max-width:calc(100vw - 24px);overflow-wrap:anywhere}
#doc-toast.bad{background:var(--redbg);color:#fff}
.dsheet{position:fixed;inset:0;z-index:40;background:var(--paper);display:flex;flex-direction:column;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px)}
.dshb{display:flex;align-items:center;gap:8px;padding:8px 16px;border-bottom:1.5px solid var(--ink)}
.dshb h2{flex:1;min-width:0;margin:0;font-size:1.05rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dsheet .dbtn[hidden]{display:none}
.dsheet .dmsg{padding:0 12px;margin:6px 0 0}
.dshi{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch;display:flex;align-items:flex-start;justify-content:center;padding:8px}
.dshi img{max-width:100%;height:auto;display:block;cursor:zoom-in}
.dshi img.full{max-width:none;cursor:zoom-out}
body.dsheet-on{overflow:hidden}
a.dbtn.dcal[hidden]{display:none}
@media (pointer:coarse),(max-width:640px){
  .dopen{display:inline-flex;align-items:center}
  a.dbtn.dcal{min-height:44px}
}

/* ===== 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 ×. */
.dpdl{margin-bottom:4px}
a.dbtn#d-plan-dl-a{text-decoration:none;color:inherit;display:inline-flex;align-items:center}
a.dbtn#d-plan-dl-a[hidden]{display:none}

/* ===== D127-D130: "Mostrar al taxista" and Esenciales ================================= */
.resv-wrap>.tact{margin-top:8px}
/* D132: the four calendar files in one row (two on a phone). */
/* D143: one row per set (name and what it holds; Suscribirse, Abrir ahora, Copiar enlace,
   Descargar), two lines when narrow. */
.dcsets{list-style:none;margin:10px 0 0;padding:0}
.dcs{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px 18px;align-items:center;padding:10px 0;border-top:1px solid var(--hair)}
.dcs:last-child{border-bottom:1px solid var(--hair)}
.dcst{display:flex;flex-direction:column;gap:2px;min-width:0}
.dcst b{font-size:.95rem}
.dcs .dbar{justify-content:flex-end}
a.dbtn.dcal.pri{color:var(--paper)}
@media (max-width:760px){.dcs{grid-template-columns:minmax(0,1fr)}.dcs .dbar{justify-content:flex-start}}
.dcalh p+p{margin-top:4px}
.dcalkey{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:10px}
.dcalkey[hidden]{display:none}

/* ===== 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){

  /* Datos (D150 (8): in sub-tabs): each pane spends the width. Importar: the form and the
     report side by side; Documentos: the documents and the Esenciales shortcut. */
  .dpane:not([hidden]){display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;align-items:start}
  .dpane>.tsec{grid-column:1/-1}
  #d-pane-documentos>#d-docs-sec{grid-column:1;grid-row:1/span 4}
  #d-pane-documentos>#d-ess-sec{grid-column:2}
  /* Estado (mobile-qa 2026-11-02): every section is one cell, in reading order, two to a row.
     It used to pin the state to the left (rows 1-4) and Mapas de zona and the date simulation
     to the right, the rest across; once D208 hid «Mapa de ruta» and «Paquete de mapa» that
     left a staircase of empty halves. Cells in order fill both columns with any set of
     visible sections (each one shows or hides itself in js). */
  #d-pane-estado>.tsec{grid-column:auto;grid-row:auto}
  /* The first row's titles on one line: the second visible section starts as the first does. */
  #d-pane-estado>.tsec:not([hidden])~.tsec:not([hidden]):not(#d-pane-estado>.tsec:not([hidden])~.tsec:not([hidden])~.tsec){padding-top:4px}
  #d-imp-sec{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 48px;align-items:start}
  #d-imp-sec>h3,#d-imp-sec>.lede{grid-column:1/-1}
}

/* ===== D150: UX review r1 (docs/archive/reports/ux-review-r1.md), batch A ========== */
.dfile{display:flex;align-items:center;flex-wrap:wrap;gap:6px 12px}
.dfnames{color:var(--ink2);overflow-wrap:anywhere;font-size:.8rem}
@media (pointer:coarse){.dfile .dbtn{min-height:44px}}

/* D150 (7), P6/P20: Bases. The editor of each booking is folded under a one-line summary.
   At <= 520 px each row of the table is a card on the same <tr>/<td> (no horizontal
   scroll, D107): base (kanji and name) with the urgency and booked status on its right,
   the dates and nights under it, the hotel field across, the zone with "ver zona ↓". */
.bsum{margin:6px 0 0;font-size:.86rem;overflow-wrap:anywhere}
.bconf{font-size:.8rem}
.bsum .pill{vertical-align:1px}
.book .bnu,.book .bkl{display:none}
@media (max-width:520px){
  .book td.bco::before{content:"→ "}
  .book .bnu{display:inline}
  .book .bkw{display:inline-flex;align-items:center;gap:6px}
  .book .bkl{display:inline;font-size:.8rem;color:var(--ink2)}
}

/* D150 (8), P5: Datos in sub-tabs (Costos' chips, D142). Narrow, D-a (E18-18, C13): every
   sub-tab row is the same even grid, Datos': cells of one width, three to a row (Ritmo's and
   Datos' five as 3 + 2), two to a row for two or four tabs (Costos with Cuentas: 2 + 2), so
   no tab is stretched alone. Hidden tabs (Costos' Cuentas) do not count. */
.dpane[hidden],.rpane[hidden]{display:none}
.dtech summary{cursor:pointer}
.dtech .dtech-h{margin:12px 0 4px}
@media (pointer:coarse),(max-width:640px){.dtech>summary{min-height:44px;display:flex;align-items:center}}
/* D150 (6): the date simulation in Datos → Estado. */
#d-sim-sec .tsimrow{max-width:72ch}
#d-sim-sec .tsimrow .dbtn{text-decoration:none}
@media (pointer:coarse),(max-width:640px){#d-sim-sec .tsimrow input{min-height:44px}}

/* ===== 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. */
/* D152: "Mapas de zona" in Datos → Estado: a long status ("mapas del … · N estadías · M
   hoteles ubicados") goes under the title on a phone instead of squeezing it. */
#d-zone-sec h3,#d-place-sec h3{flex-wrap:wrap;gap:2px 12px}   /* D160: "Mapas de lugar" too */
#d-zone-sec h3>span:first-child,#d-place-sec h3>span:first-child{white-space:nowrap}
.bmapa:hover .bmap-go,.bmapa:focus-visible .bmap-go{color:var(--red)}
/* D161 (4): a booked stay's card. "Tu reserva" under the title and the map beside it (under
   it on a phone); how the zone was chosen folds under both ("Cómo elegimos la zona ▸"). From
   720 px (the card's two columns) the fold sits in the text column, right under "Tu reserva", the map spanning both
   rows. The note of a booked hotel the zone map could not locate goes under the map. */
.bcard.bkd>.bwhy{margin:0;min-width:0}
.bcard.bkd>.bwhy[open]>summary{margin-bottom:2px}
.bcard.bkd .resv-wrap{margin-top:12px}
.bnoloc{margin:8px 0 0;overflow-wrap:anywhere}
@media (min-width:720px){
  .bcard.bkd,#base-list .bcard.bkd{grid-template-rows:auto 1fr}
  .bcard.bkd>.bmapc{grid-column:2;grid-row:1 / span 2}
  .bcard.bkd>.bwhy{grid-column:1;grid-row:2}
}

/* ===== 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. */
.plist{display:grid;grid-template-columns:minmax(0,1fr);gap:0 36px;margin-top:8px}
@media (min-width:900px){.plist{grid-template-columns:repeat(2,minmax(0,1fr))}}
.plc{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:4px;width:100%;min-width:0;min-height:44px;
  text-align:left;border-top:2px solid var(--ink);padding:12px 30px 14px 0}
.plc-h{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 10px;min-width:0}
.plc-h .ro{font-weight:700;font-size:.78rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink2)}
.plc-h .pill{align-self:center}
.plc-w{font-size:.82rem;color:var(--ink)}
.plc .bclim{margin:0}
.plc-v{font-size:.8rem;color:var(--ink2)}   /* D161 (8): today's base, en viaje */
.pnotes{margin-top:20px;font-size:inherit}   /* D161 (8): "Notas del plan ▸" of the sheet, en viaje */
.pnotes>summary{font-size:.84rem}
.plc-v.all{color:var(--dtct);font-weight:500}
.plc>.pgo{position:absolute;right:6px;top:50%;transform:translateY(-50%);color:var(--red);font:700 1.3rem var(--gothic)}
.plc:hover .kj,.plc:hover .ro{color:var(--red)}
.plc:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* The sheet's bar: back on the left, "‹ Anterior" "Siguiente ›" (Hoy's .dnav boxes) on the right. */
.pbar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 16px}
.pnav{display:inline-flex;align-items:center;gap:8px}
@media (pointer:coarse),(max-width:640px){
  .bcard .hd .bpl{align-items:center}
}

/* ===== D163 (c): the pre-trip checklist button of Ritmo → Pendientes ===== */
.pdck{margin-top:12px;display:flex;flex-wrap:wrap;align-items:center;gap:6px 14px}
.pdck[hidden]{display:none}
.pdck .dmsg{margin:0}

/* ===== D164: "Agregar al itinerario" and "Editar" (js/plan-edit.js) =====
   The entry points (Ritmo's unfolded day, the place sheet) and the sheet, an overlay like
   the search's: the views keep only a button (D149). */
.peaddw{display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px;margin-top:10px}
.peadd:disabled{opacity:.55;cursor:not-allowed}
.peoff{color:var(--ink2)}
.peed:not(:disabled):hover{border-color:var(--red)}
.peed:disabled{color:var(--ink3);cursor:not-allowed}
.dstop{grid-template-columns:28px minmax(0,1fr) auto}
.tact .peed{margin-left:auto}
@media (pointer:coarse),(max-width:640px){.peed{min-height:44px;min-width:44px}}
.pehit{outline:3px solid var(--red);outline-offset:3px;transition:outline-color .4s}
.pe{position:fixed;inset:0;z-index:46;background:var(--scrim);display:flex;justify-content:center;align-items:flex-start;
  padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.pe[hidden]{display:none}
.peq{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:end}
.pecl{display:flex;flex-direction:column;border-top:1px solid var(--hair)}
.pec{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:1px;min-height:44px;padding:8px;border-bottom:1px solid var(--hair);overflow-wrap:anywhere;width:100%}
.pec b{font-weight:700}
.pec small{font-size:.76rem;color:var(--ink2)}
.pec .ped{font-size:.8rem;color:var(--dtct);font-weight:700}
.pec.far .ped{color:var(--red)}
.pec[aria-pressed="true"]{background:var(--redsoft);box-shadow:inset 3px 0 0 var(--red)}
.pec:hover{background:var(--redsoft)}
.pedet{display:flex;flex-direction:column;gap:10px;border-top:1.5px solid var(--ink);padding-top:10px}
.pefar{margin:0}
.peh{font-size:.9rem;margin:0}
.pesum,.peerr,.pewarn{margin:0;padding-left:20px;font-size:.88rem;overflow-wrap:anywhere}
.pesum li+li,.peerr li+li,.pewarn li+li{margin-top:4px}
.peerr{color:var(--red)}
.pewarn{color:var(--ink2)}
/* mobile-qa 2026-11-02: the sheet's actions (.pefoot: "Ver propuesta", "Sacar del viaje…",
   "Confirmar", "Volver"; one bar in every mode) stay pinned at the bottom of the scrolling
   body however long the form or the preview is, above the safe area (.pe's padding). With
   the keyboard up, js/plan-edit.js fitKeyboard() fits the sheet to the visible part (.kbd). */
.pebody>.pefoot{position:sticky;bottom:0;z-index:1;flex:none;background:var(--paper);border-top:1px solid var(--hair);padding-top:10px}
.pe.kbd{padding-bottom:8px}
/* D206 (js/trip-edit.js): the trip edited in the app, in the same sheet (#pe). */
.tebar{margin:0 0 12px}
/* A base card's short links (trip-edit.js teLink()): accent, the app's type, no box; the
   tap area is 44 px tall around the word, the line keeps its height. Fix 2026-11-02
   (mobile-qa measured the button itself at 61x20): the button's own box is that tall too,
   an inline-block whose vertical padding the same negative margin takes back (its margin
   box, what the line box counts, is the text's line), so any tool that reads the button's
   rect sees 44 px (1lh: whatever the line height; 12 px where lh is unknown); ::after still
   adds 8 px each side. Not taller: the zone line's link is right below the dates' one. */
.telinkw{white-space:nowrap;color:var(--ink2);font-weight:400}
.telink{position:relative;display:inline-block;padding:12px 0;margin:-12px 0;padding-block:calc((44px - 1lh) / 2);margin-block:calc((1lh - 44px) / 2);color:var(--red);font-family:var(--gothic);font-weight:700;font-size:.82rem;line-height:inherit;letter-spacing:0;text-transform:none;vertical-align:baseline}
.telink::after{content:"";position:absolute;left:-8px;right:-8px;top:50%;height:44px;transform:translateY(-50%)}
/* The dates' and the zone's links are ~38 px apart: their 44 px areas share a few px, where
   the dates' one wins (as with the ::after alone before). */
.bcard .hd .telink{z-index:1}
.telink:not(:disabled):hover{text-decoration:underline}
.telink:disabled{color:var(--ink3);cursor:not-allowed}
.telinkoff{font-family:var(--gothic);color:var(--ink2);font-weight:400;white-space:nowrap}
.bcard .zone .telinkw,.bcard .zone .telinkoff{font-size:.82rem;color:var(--ink2)}
.bcard .zone .telinkw span,.bcard .zone span.telinkoff{color:inherit}
.tefs{border:1px solid var(--hair);padding:6px 10px 4px;margin:0;min-width:0}
.tefs legend{font-size:.8rem;color:var(--ink2);padding:0 4px}
.tefs .pechk input:disabled+span{color:var(--ink3)}
.temodes{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));column-gap:8px}
.tequick{display:flex;flex-wrap:wrap;gap:6px}
.tecol{flex-direction:column;align-items:stretch}
.tecol .dbtn{text-align:left}
.temm{border-top:1.5px solid var(--ink);padding-top:8px;display:flex;flex-direction:column;gap:6px}
.temm .small{margin:0}
.peops{color:var(--ink)}
.pemore summary{font-size:.82rem;color:var(--ink2);min-height:44px;display:flex;align-items:center}
.pepast{border-color:var(--red);color:var(--red)}
.telegs{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.telegs p{margin:0}
.pewhere{margin:0}

/* ===== 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) ===== */
.asum{margin:12px 0 4px}
.agrp{margin-top:14px}
.agh .ahoy{font:700 .62rem var(--mono);color:var(--red);margin-left:6px;letter-spacing:.06em}
.arows{display:flex;flex-direction:column}
.arow{display:grid;grid-template-columns:max-content minmax(0,1fr) auto;gap:4px 10px;align-items:baseline;width:100%;text-align:left;min-height:44px;padding:8px 4px;border-bottom:1px solid var(--hair);overflow-wrap:anywhere;color:var(--ink)}
.arow:hover{background:var(--redsoft)}
.arow .at{font-size:.82rem;color:var(--ink2)}
.arow .ab{display:flex;flex-direction:column;gap:2px;min-width:0}
.arow .ab small{font-size:.78rem;color:var(--ink2)}
.arow .am{text-align:right;font-family:var(--mono);font-size:.84rem;white-space:nowrap}
.arow .am small{display:block;color:var(--ink2);font-size:.72rem}
@media (max-width:520px){.arow{grid-template-columns:minmax(0,1fr) auto}.arow .at{grid-column:1/-1}}
.actf .actrow{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);gap:8px}
.actf .actrow.two{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:end}
@media (max-width:520px){.actf .actrow{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.actf .actrow>.dlab:first-child:nth-last-child(3){grid-column:1/-1}.actf .actrow.two{grid-template-columns:minmax(0,1fr)}}
.actf .dlab{min-width:0}
.actf .dlab input[type=date],.actf .dlab input[type=time]{-webkit-appearance:none;appearance:none}
.actf input.mono,#act-amount{font-family:var(--mono)}
.actfx{display:block;margin-top:4px;font-size:.8rem;color:var(--ink2)}
.actfx:empty{display:none}
.actdocs{border:1px solid var(--hair);padding:8px 10px 10px;margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.actdocs legend{font-size:.8rem;color:var(--ink2);padding:0 4px}
.actdl{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.actdl li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:8px;align-items:center;overflow-wrap:anywhere;font-size:.86rem}
.actdl .dico{width:22px;height:28px;margin:0}
.actpick{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px}
.actf .ferr{display:block;color:var(--red);font-size:.8rem;margin-top:2px}
#d-prep-prog{width:100%;margin-top:10px}
#d-prep-n:empty{display:none}
#d-prep-fl{margin:8px 0 0;padding-left:18px;font-size:.86rem}
#d-prep-fl .bad{color:var(--red)}

/* ===== D163 (f): the diary (js/diary.js) and the printable summary (js/views/resumen.js) ===== */
.dyfile{position:fixed;left:-9999px;top:0;width:1px;height:1px;opacity:0}
.rdx .tdiary{margin:10px 0 0}
.dsum{margin:4px 0 12px}

/* ===== 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". */
.trsec{margin-bottom:22px}

/* ===== 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. */
.wsteps{list-style:none;margin:0 0 18px;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-bottom:2px solid var(--ink)}
.wsteps li{display:flex;align-items:center;gap:8px;padding:0 0 10px;font-size:.84rem;color:var(--ink2);min-width:0}
.wsn{flex:none;width:30px;height:30px;border:1.5px solid var(--hair);display:flex;align-items:center;justify-content:center;font-family:var(--mincho);font-weight:900;font-size:1rem;color:var(--ink2)}
.wst{min-width:0;overflow-wrap:anywhere;line-height:1.25}
.wsteps li.on{color:var(--ink);font-weight:700}
.wsteps li.on .wsn{border-color:var(--ink);color:var(--red)}
.wsteps li.done .wsn{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.wpane[hidden]{display:none}
.weye{margin:0;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2)}
.wlede{margin:0 0 14px;color:var(--ink2);font-size:.95rem;line-height:1.5}
.wmore{margin:0 0 16px}
.wfields{display:grid;gap:10px;margin-top:8px}
.wnums{list-style:none;margin:6px 0 12px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));border-top:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.wnums li{padding:8px 0 8px 10px;border-left:1px solid var(--hair);display:flex;flex-direction:column;min-width:0}
.wnums li:first-child{border-left:0;padding-left:0}
.wnums b{font-size:1.45rem;line-height:1.15;font-variant-numeric:tabular-nums}
.wnums span{font-size:.78rem;color:var(--ink2)}
.wnums li.warn b{color:var(--red)}
/* What an itinerary leaves empty (js/views/datos.js missingHtml): one block, the same in the
   wizard's preview and in Datos → Importar (D203); the app's notice, a red rule on the left. */
.drev.dmiss{border-left:3px solid var(--red);padding:2px 0 2px 12px;margin:14px 0}
.drev.dmiss .dph{margin:0 0 4px;font-size:1rem;line-height:1.3;letter-spacing:0;text-transform:none;color:var(--ink)}
.drev.dmiss .dl{font-size:.88rem}
.drev.dmiss>p{margin:10px 0 4px;font-size:.92rem;line-height:1.5;max-width:65ch}
.drev.dmiss .wcopy{margin:8px 0 4px}
@media (max-width:420px){.wnums{grid-template-columns:repeat(2,minmax(0,1fr))}.wnums li:nth-child(3){border-left:0;padding-left:0}.wnums li:nth-child(n+3){border-top:1px solid var(--hair)}
  .wsteps li{flex-direction:column;align-items:flex-start;gap:4px}}
@media (pointer:coarse),(max-width:640px){.wsteps li{min-height:44px}}

/* ===== 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). */
.ttrv .ttp{display:inline-flex;align-items:center;gap:6px;min-width:0;flex:none}
.ttrv .ttp+.ttp{margin-left:5px}
.ttrv .ttc{flex:none;display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border:1.5px solid var(--ink2);border-radius:50%;
  font:700 .66rem/1 var(--gothic);letter-spacing:0;white-space:nowrap;overflow:hidden}
.ttrv .ttp.pri .ttc{border-color:var(--red);color:var(--red)}
.ttrv .ttp.more .ttc{border-style:dashed;color:var(--ink2);font-family:var(--mono);font-weight:400}
.ttrv .ttn{display:none;font-size:.82rem;font-weight:700;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:8.5em}
.thdr .ttrv:hover .ttc{border-color:var(--ink)}
.thdr .ttrv:hover .ttn{color:var(--ink)}
@media (min-width:1000px) and (min-height:501px){
  .ttrv .ttn{display:block}
  .ttrv .ttp{flex:0 1 auto}
  .ttrv .ttp+.ttp{margin-left:12px}
}

/* ===== E01-13 (the human, 2026-11-01): the app's foot on a wide screen =====
   A short Viajes page left the foot halfway down the window, a white gap under it and the
   floating Feedback button alone in the corner. Wide (the shell's breakpoint: not the phone,
   whose foot simply ends the page's content, above the tab bar and the button's room), on
   every screen with the foot (the Home and body.foot-x: a trip's views, the account screens;
   js/home.js paintFootHost): body is a column at least the window's height, the view on
   screen grows, and the foot ends on the window's bottom edge; a long page ends with it as
   before. The trip's header rows (.thdr, the clocks, .facts, the empty notice, Mapa's
   sub-tabs) are centred by auto margins, which in a column would shrink them to their
   content: they keep the full width (their max-width still holds). On those screens body's
   bottom room (40 px, the button's 76, the update notice's) moves into the foot, so its
   border and its rows sit on the edge, the notice's room still under them. The button keeps
   its corner: the foot keeps the strip it covers free (padding-right), only where the window
   is too narrow for the column's margin to hold it (0 once the column ends left of it). */
/* G12: the share dialog (js/views/compartir.js), centred on wide screens, a bottom sheet on
   the phone; and the invitation hints (Viajeros, the wizard's end). */
dialog.shdlg{border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:0;width:min(560px,calc(100vw - 32px));max-width:none;max-height:min(86vh,760px);
  box-shadow:0 18px 50px rgba(0,0,0,.25);overscroll-behavior:contain}
dialog.shdlg::backdrop{background:var(--scrim,rgba(0,0,0,.4))}
.shin{padding:6px 16px 16px}
.shbar{display:flex;align-items:center;justify-content:space-between;gap:10px;position:sticky;top:0;background:var(--paper);padding:6px 0 4px;z-index:1}
.shbar h2{margin:0;font-size:1.05rem;overflow-wrap:anywhere}
.shlede{font-size:.84rem}
.shsec{margin-top:18px}
.shsec h3{margin:0 0 8px;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--hair);padding-bottom:4px;font-weight:700}
.shdlg .aform .dlab small{font-size:.76rem;color:var(--ink2)}
.shdlg .aform select{font:inherit;font-size:1rem;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:8px;min-height:44px;width:100%}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:8px}
/* E29-22: the invite form's "Viaja como", hidden while "Visor" is chosen (js/invites.js
   syncInviteRole; .aform .dlab is display:flex in base.css, which would beat [hidden]). */
.aform .dlab[hidden]{display:none}
/* E29-22 (D220 (4)): "¿Quién es … en el viaje?" — the dialog's select, at the size of the
   app's fields (16 px: iOS does not zoom in on it) and a 44 px target. */
.acctdlg .pwho select{font-size:1rem;min-height:44px}
.tvl{list-style:none;margin:8px 0 0;padding:0}
.tvl li{display:flex;align-items:center;gap:12px;min-height:56px;border-bottom:1px solid var(--hair);flex-wrap:wrap;padding:6px 0}
.tvn{flex:1;min-width:140px;display:flex;flex-direction:column;line-height:1.3;overflow-wrap:anywhere}
/* C12: the person's avatar is the header's and Personas' round ring (.pptv .ttc), everywhere. */
.tva{display:inline-flex;width:32px;height:32px;align-items:center;justify-content:center;border:1.5px solid var(--ink2);border-radius:50%;font:700 .72rem/1 var(--gothic);white-space:nowrap;overflow:hidden;flex:none}
.pmem>.tva+div{flex:1;min-width:140px}
.tva.off{border-style:dashed;color:var(--ink2);border-color:var(--ink3)}
.shdlg .note{border-left:3px solid var(--hair);padding:6px 10px;color:var(--ink2);font-size:.84rem;margin-top:16px}
.shdlg .note a{color:var(--ink);display:inline-flex;align-items:center;min-height:44px;margin-block:-12px}
.shdlg .shppl a{display:inline-flex;align-items:center;min-height:44px;font-weight:700;color:var(--ink)}
.ihint{display:flex;gap:12px 20px;flex-wrap:wrap;align-items:center;justify-content:space-between;border:1.5px solid var(--ink);border-left:4px solid var(--red);background:var(--white);padding:14px 16px;margin-top:22px}
.ihint[hidden]{display:none}
.ihint b{font-size:1.05rem}
.ihint .dbar{display:flex;gap:8px;flex-wrap:wrap}
.ihint .dbtn{display:inline-flex;align-items:center;gap:8px;min-height:44px}

/* ===== 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. */
@media (max-width:719px),(max-height:500px){
  dialog.shdlg{margin:auto 0 0;width:100%;max-width:100%;max-height:calc(100% - 24px - env(safe-area-inset-top,0px));border-width:2px 0 0}
  .shin{padding:4px max(16px,env(safe-area-inset-right,0px)) calc(20px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
  .roles{grid-template-columns:1fr}
}

/* ===== IAM E2-E: personal medical card, sharing, insurance ===== */
.emshare{list-style:none;margin:6px 0 0;padding:0;font-size:.84rem;color:var(--ink2)}
.emshare li{padding:3px 0}
.emshare b{color:var(--ink)}
.emcons{align-items:flex-start;font-size:.84rem;line-height:1.4}
.emcons input{margin-top:2px}
.emconsbox{border:1.5px solid var(--ink);padding:8px 10px;display:flex;flex-direction:column;gap:6px}
.emconsbox p{margin:0;font-size:.84rem}
.shl{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.shl li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:6px 0;border-bottom:1px solid var(--hair);font-size:.88rem;min-height:44px}
.shl li .nm{flex:1 1 auto;min-width:0;overflow-wrap:anywhere}
.shl li small{font-size:.76rem;color:var(--ink2)}
.shl li .dbtn{min-height:44px}
.shaud{display:flex;flex-direction:column;gap:0}
.shnote{font-size:.84rem;color:var(--ink2);margin:0}
.shwarn{font-size:.84rem;margin:0;border-left:3px solid var(--ink3);padding:4px 10px}
.shviews{list-style:none;margin:0;padding:0;border-top:1px solid var(--hair)}
.shviews li{padding:8px 0;border-bottom:1px solid var(--hair);font-size:.86rem;display:flex;flex-direction:column;gap:2px}
.shviews time{font-family:var(--mono);font-size:.78rem;color:var(--ink2)}
.shviews li.adm{border-left:3px solid var(--red);padding-left:8px}
.shviews .why{font-size:.84rem;overflow-wrap:anywhere}

/* ===== 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. */
.rgh{font-weight:700}
.rgh :is(.kj,.mono,.small,.pgo),.rgh>span:not(.ro){font-weight:400}
#d-imp-sec>.howto{grid-column:1/-1}
#b-edit>.tebar{margin-bottom:0}   /* E04-9: Bases' "¿Cómo…?" goes right under its bar */
#b-edit>.howto{margin:0 0 12px}
/* D206: on a wide screen the bar goes beside the lede (68ch leaves the right free), so the
   first screen keeps the table and the first cards with their maps, as before E12-3. */
@media (min-width:1100px){
  #v-bases>.wrap{display:grid;grid-template-columns:minmax(0,1fr) auto;column-gap:32px}
  #v-bases>.wrap>*{grid-column:1/-1;min-width:0}
  #v-bases>.wrap>.lede{grid-column:1;grid-row:1}
  #v-bases>.wrap>#b-edit{grid-column:2;grid-row:1;align-self:start;display:flex;flex-direction:column;align-items:flex-end}
  #b-edit>.tebar{margin:0}
  #b-edit>.howto{margin:0}
}