/* web/css/cuenta-y-acceso.css — team Cuenta y acceso (D219): Cuenta, Ayuda and the Feedback
   button. Loaded last.
   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. */
/* ===== D111: Datos (state, import, prompts) and D113: Pendientes ==================== */
/* D163 (g): Hoy's "Activá los avisos ›" (js/push.js pushHoyLine) */
.tpush{margin-top:4px}

/* ===== D117/D119: the trip in the masthead, and the Home ============================== */
.aform .acode{font-family:var(--mono);letter-spacing:.2em;max-width:12ch}
.pwrow{display:flex;gap:6px}
.pwrow input{flex:1 1 auto}
.pwshow{flex:none}
.pwmeter{display:flex;flex-direction:column;gap:2px;margin-top:-6px}
.pwbar{display:block;height:4px;background:var(--hair)}
.pwbar i{display:block;height:100%;width:0;background:var(--red)}
.pwmeter[data-level="1"] i{width:20%}.pwmeter[data-level="2"] i{width:50%;background:var(--ink3)}
.pwmeter[data-level="3"] i{width:75%;background:var(--dtc)}.pwmeter[data-level="4"] i{width:100%;background:var(--dtc)}
.pwmeter small{font-size:.76rem;color:var(--ink2)}
/* F17: the Google button takes the fields' text size and vertical padding (.aform input),
   so it is as tall as they are (44 px) and grows with them when the text is larger. */
.gbtn{gap:10px;width:100%;max-width:360px;min-height:44px;font-size:1rem;padding-block:8px}
.grec{margin:6px 0 0}
.gmark{font-family:var(--gothic);font-weight:900;color:var(--red)}
.gbtn:not(:disabled):hover .gmark{color:var(--paper)}
.aor{display:flex;align-items:center;gap:10px;color:var(--ink2);font-size:.8rem;margin:14px 0 4px}
.aor::before,.aor::after{content:"";flex:1;border-top:1px solid var(--hair)}
.alinks{display:flex;flex-wrap:wrap;gap:6px 18px;margin-top:12px}
.alinks.gtop{margin:0 0 2px}   /* a guide's "‹ Volver" on top, before its title (js/views/ayuda.js) */
.dchk{display:flex;gap:8px;align-items:center;min-height:44px;font-size:.88rem}
.dchk input{width:20px;height:20px;accent-color:var(--red)}
/* The phone's Cuenta (js/views/cuenta.js cuentaList): who you are, then one row per section
   (icon, name, what is inside, chevron), as iOS Settings. */
.aswho{display:flex;flex-direction:column;gap:2px;margin:6px 0 12px;overflow-wrap:anywhere}
.aswho b{font-size:1.05rem}
.aswho span{color:var(--ink2);font-size:.86rem}
.aslist{list-style:none;margin:0;padding:0;border-top:1.5px solid var(--ink)}
.aslist li{border-bottom:1px solid var(--hair)}
.asrow{display:flex;align-items:center;gap:14px;min-height:60px;padding:8px 0;color:var(--ink);text-decoration:none}
.asrow .ic.chev{width:18px;height:18px;color:var(--ink3);margin-left:auto}
.asrow-t{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.asrow-t b{font-size:.98rem}
.asrow-t small{color:var(--ink2);font-size:.8rem;line-height:1.35}
.asrow:active{background:var(--hair)}
.asrow:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* Cuenta's "Próximamente" (js/views/cuenta.js soon()): the row and the tab stay, muted, not links. */
.asoon{flex:none;margin-left:auto;font-size:.68rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink2);border:1px solid var(--hair);border-radius:3px;padding:1px 6px;white-space:nowrap}
.asrow.soon .asrow-t b{color:var(--ink2);font-weight:600}
.gsteps,.glist{margin:6px 0 12px;padding-left:1.5em}
.gsteps li,.glist li{margin:5px 0;padding-left:2px;overflow-wrap:anywhere}
.gsteps li::marker{color:var(--red);font-weight:700}
.gfig{margin:14px 0 16px}
.gfig img{display:block;width:100%;max-width:360px;height:auto;border:1px solid var(--hair)}
.gfig .dk,:root[data-theme="dark"] .gfig .lt{display:none}
:root[data-theme="dark"] .gfig .dk{display:block}
.gupd{margin-top:22px}
.atabs .chip.soon{cursor:default;color:var(--ink3);gap:4px;padding-right:4px}
.atabs .chip.soon .asoon{margin-left:0;border:0;padding:0;font-size:.7rem;font-weight:400;letter-spacing:0;text-transform:none}   /* one row at 1280 */
.alist{list-style:none;margin:0;padding:0}
.alist li{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--hair)}
.alist li>span{display:flex;flex-direction:column;min-width:0;overflow-wrap:anywhere}
.alist small{color:var(--ink2);font-size:.78rem}
.alist li.cur b{color:var(--ink)}
.atag{align-self:flex-start;margin:2px 0}
/* D177: Cuenta → Notificaciones (js/views/cuenta-notif.js). One row per kind: the whole row is
   the switch's label (>= 44 px); the checkbox (role=switch) is visually hidden and its knob drawn
   next to it, so it looks the same in WebKit and Chromium. Options sit under the row they set. */
.nlist{list-style:none;margin:4px 0 0;padding:0}
.nkind{border-bottom:1px solid var(--hair);padding:2px 0 8px}
.nsw{display:flex;align-items:center;justify-content:space-between;gap:14px;min-height:52px;padding:6px 0;cursor:pointer;position:relative}
.nsw-t{display:flex;flex-direction:column;gap:2px;min-width:0;overflow-wrap:anywhere}
.nsw-t b{font-size:.95rem}
.nsw-t small{color:var(--ink2);font-size:.78rem}
.nsw-t .nex{font-style:italic}
.nsw-t .nnote{color:var(--ink3);font-size:.76rem}
.nkind.off .nsw-t b{color:var(--ink2)}
.nsw input{position:absolute;opacity:0;width:1px;height:1px;margin:0;pointer-events:none}
.nknob{flex:none;position:relative;width:48px;height:28px;border-radius:14px;background:var(--hair);border:1.5px solid var(--ink3);transition:background .15s,border-color .15s}
.nknob::before{content:"";position:absolute;top:2px;left:2px;width:21px;height:21px;border-radius:50%;background:var(--ink3);transition:transform .15s,background .15s}
.nsw input:checked+.nknob{background:var(--red);border-color:var(--red)}
.nsw input:checked+.nknob::before{transform:translateX(20px);background:var(--paper)}
.nsw input:focus-visible+.nknob{outline:2px solid var(--ink);outline-offset:2px}
.nsw input:disabled+.nknob{opacity:.5}
.nsw:has(input:disabled){cursor:default}
.nopt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:2px 0 4px;font-size:.84rem;color:var(--ink2);border:0;padding:0;min-width:0}
.nopt 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:6px 8px;min-height:44px;min-width:7.5em}
.nseg legend{float:none;display:block;width:100%;margin:0 0 2px;padding:0}
@media (min-width:480px){.nseg legend{float:left;width:auto;margin:0 10px 0 0;line-height:44px}}
.nseg label{position:relative;display:inline-flex}
.nseg input{position:absolute;opacity:0;width:1px;height:1px;margin:0}
.nseg span{display:inline-flex;align-items:center;min-height:44px;min-width:56px;justify-content:center;padding:0 10px;border:1.5px solid var(--hair);border-radius:3px;font-weight:700;color:var(--ink2);cursor:pointer}
.nseg input:checked+span{border-color:var(--ink);background:var(--ink);color:var(--paper)}
.nseg input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.nseg input:disabled+span{opacity:.55;cursor:default}
.nshared{padding-top:8px}
.nshared .nsw-t{margin-bottom:4px}
.ntw.busy .nknob{opacity:.85}
.nfoot{padding-top:12px}
.nfoot .maplink:disabled{color:var(--ink3);cursor:default}
#nt-dev .dmsg:empty,#nt-devs .dmsg:empty{display:none}
#nt-devs .alist .dbtn{flex:none}
#nt-devs .atag{align-self:flex-start;margin:2px 0}
#nt-dev>p{margin:0 0 8px}
#nt-dev .dbar{margin-top:0}

/* ===== Tester d148-d161 B12 (WebKit on macOS; to check on the iPhone) ================= */

/* Security v1 BAJA-4: Datos → Estado → "Token del servidor" (js/views/datos.js paintTokenBoxes()). */
.tokrow{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch}
.tokrow input{flex:1 1 220px;min-width:0;font:inherit;font-family:var(--mono);font-size:.9rem;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:6px 8px}
@media (pointer:coarse),(max-width:640px){.tokrow input,.tokrow .dbtn{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). */
/* G10: the account screens in one centred column (the entry screens narrower). */
.acctw{max-width:760px;margin-inline:auto}
.acctw.entry{max-width:560px}
/* Cuenta's sections (wide screens; the phone has the list): the .ctabs pills (C13). */
.atabs{margin:14px 0 18px}
.atabs .chip{white-space:nowrap}
@media (max-width:719px){.atabs{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}}

/* ===== E03: the floating Feedback button (#fb-fab, js/feedback-app.js) =====
   Bottom-right on every size: above the phone's tab bar (--tabbar-h, safe area included) or
   the home indicator, clear of the notch's side in landscape; the window's corner on a
   desktop (the page's margin at 1280 and up). Left is taken on the phone's maps (the scale
   and the OSM credit sit bottom-left) and the update/outdated notices are centred, so the
   right corner is the one that meets nothing; with a notice up (body.sw-bar) it rises
   above it. z-index 28: under the scrim (29), the tab bar and its sheets (30-31), the menu,
   the sheets and dialogs, so an overlay covers it even where :has() is missing (iOS < 15.4);
   with :has() it is hidden outright. Hidden by visibility (not display): it keeps its box,
   so js/feedback-app.js can tell when a map's Capas button scrolls under it (body.fab-yield:
   it steps aside until the button has passed). No transition: the house style does not animate. */
/* The room it takes under the page's last row, so nothing ends up under it (76 = 52 at most + 14 + 10
   of air). The fitted maps do not scroll: there the bottom sheet keeps the room instead. */
body.fab-on{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px) + var(--fab-lift,0px))}
@media (max-width:719px),(max-height:500px){
  body.fab-on[data-view]:not([data-view="home"]):not([data-view="account"]):not([data-view="wizard"]){padding-bottom:calc(76px + var(--tabbar-h) + var(--fab-lift,0px))}
}
@media (max-width:520px){
  /* The fitted Map tab ends in a full-width bar (La línea, .side-tg) right above the tab bar:
     the sheet keeps a strip for the button under it, so nothing of the map's own is covered. */
  body.fit.fab-on .sheet{padding-bottom:calc(66px + var(--fab-lift,0px))}
}

/* ===== 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). */
@media (min-width:720px) and (min-height:501px){
  /* The button's strip: its width (--fab-w, js/feedback-app.js; ~130 px before it is measured)
     + its right offset + 12 px of air, less what lies between the column and the window's edge
     (body's gutter + the column's margin; 100% = body's content box). */
  body.fab-on>.hpfoot{padding-right:max(0px,calc(var(--fab-w,130px) + 12px + max(16px,calc(env(safe-area-inset-right,0px) + 8px)) - max(16px,env(safe-area-inset-right,0px)) - max(0px,(100% - var(--maxw)) / 2)))}
}

/* ===== IAM E2-E: personal medical card, sharing, insurance ===== */

/* --- Feedback (js/feedback.js; the panel never opens it) --- */
.fbhd{margin-bottom:10px}
dialog.fbdlg{border:2px solid var(--ink);background:var(--paper);color:var(--ink);padding:0;margin:auto;
  width:min(560px,calc(100vw - 24px - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px)));max-width:none;
  max-height:calc(100dvh - 24px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));overflow:auto;overscroll-behavior:contain}
dialog.fbdlg::backdrop{background:var(--scrim,rgba(0,0,0,.4))}
.fbin{padding:16px}
.fbdlg [hidden]{display:none!important}
/* The page's global rules (form, label, radios) must not leak in: everything here is
   scoped to .fbdlg. */
.fbdlg .fbform{display:flex;flex-direction:column;flex-wrap:nowrap;align-items:stretch;gap:10px;margin:0}
.fbok svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.fbq{border:0;margin:0;padding:0;min-width:0}
.fbq legend{padding:0;margin:0 0 8px;font-weight:700;font-size:.95rem;line-height:1.4}
.fbsc{display:grid;grid-template-columns:repeat(11,minmax(44px,1fr));gap:3px}
.fbdlg .fbsc label{position:relative;display:block;flex:none;min-width:44px;max-width:none;margin:0;font-size:1rem;color:var(--ink)}
.fbdlg .fbsc input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;-webkit-appearance:none;appearance:none}
.fbsc span{display:flex;align-items:center;justify-content:center;height:44px;border:1.5px solid var(--hair);font-weight:700;font-variant-numeric:tabular-nums;color:var(--ink);pointer-events:none}
.fbsc input:hover+span{border-color:var(--ink)}
.fbsc input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.fbsc input:focus-visible+span{outline:2px solid var(--red);outline-offset:2px}
.fbends{display:flex;justify-content:space-between;gap:10px;margin-top:5px;font-size:.78rem;color:var(--ink2)}
.fbdlg .fblab{display:block;flex:none;max-width:none;font-weight:700;font-size:.9rem;color:var(--ink)}
.fbin textarea{font:inherit;font-size:16px;line-height:1.45;background:var(--paper);color:var(--ink);border:1px solid var(--hair);border-bottom:1.5px solid var(--ink);padding:8px;width:100%;min-height:96px;resize:vertical;display:block}
.fbmeta{display:flex;justify-content:space-between;align-items:baseline;gap:10px;font-size:.78rem;color:var(--ink2)}
.fbn{font-variant-numeric:tabular-nums;white-space:nowrap}
.fbn.over{color:var(--red);font-weight:700}
.fbmsg{margin:0;min-height:0;font-size:.86rem;color:var(--red);font-weight:700}
.fbmsg:empty{display:none}
.fbdone{display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;padding:18px 6px 6px}
.fbdone h2{margin:0;font-size:1.3rem}
.fbdone p{margin:0;color:var(--ink2);font-size:.9rem}
.fbok{color:var(--ok,#24704a)}
.fbrec{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%;margin-top:12px;padding-top:14px;border-top:1px solid var(--hair)}
.fbdone .fbrecq{margin:0;color:var(--ink);font-weight:700;font-size:1rem}
.fbrecs{display:flex;flex-direction:column;align-items:center;gap:10px;width:100%}
.fbok svg{width:34px;height:34px}
/* A phone (or any dialog narrower than eleven 44 px targets): two rows, 0–5 and 6–10. */
@media (max-width:540px){.fbsc{grid-template-columns:repeat(6,minmax(44px,1fr));gap:6px}}
/* A phone sideways (844 x 390): a shorter box for the comment, so Enviar is one scroll away at most. */
@media (max-height:500px){.fbin{padding-top:12px}.fbin textarea{min-height:64px}.fbdlg .fbform{gap:8px}}