/* decypher - the two panels: the holder's and the administrator's.
   Loaded after acceso.css and using its tokens, so a colour changed on the site is changed here
   too. This file adds only what a working surface needs and the access pages do not: a full-width
   shell, sections, tables and state.
   Authorship and ownership: @Tori, @Decypher_oficial */

/* A panel is operated, not read, so it takes the width it needs instead of the reading column the
   access pages centre. */
body.app main{
  display:block; place-items:initial;
  width:100%; max-width:78rem; margin:0 auto;
  padding:clamp(1.4rem,3.5vw,2.4rem) var(--edge);
}

.top .quien{
  display:flex; align-items:center; gap:.8rem; font-size:.82rem; color:var(--text-2);
}
.top .quien .correo{font-family:var(--mono); font-size:.78rem; color:var(--text)}
.top .quien .salir{color:var(--text-2); text-decoration:none; border-bottom:1px solid var(--hair)}
.top .quien .salir:hover{color:var(--acc); border-color:var(--acc)}

/* what the panel is, and who is looking at it */
.cabecera{display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1rem}
.cabecera h1{font-size:clamp(1.4rem,3vw,1.9rem)}

/* sections: the panel shows one at a time. Buttons rather than links, because nothing navigates
   away and a back button that undid a tab would be a lie. */
.rail{
  display:flex; flex-wrap:wrap; gap:.35rem; margin:1.4rem 0 1.6rem;
  border-bottom:1px solid var(--hair-soft); padding-bottom:.7rem;
}
.rail button{
  font:inherit; font-size:.85rem; cursor:pointer; color:var(--text-2);
  background:transparent; border:1px solid transparent; border-radius:999px; padding:.45rem .95rem;
  transition:color var(--fast) var(--eo), background var(--fast) var(--eo);
}
.rail button:hover{color:var(--text); background:var(--raised)}
.rail button.is-on{background:var(--raised); border-color:var(--hair); color:var(--text); font-weight:600}
.rail button[data-cuenta]::after{
  content:attr(data-cuenta);
  font-family:var(--mono); font-size:.72rem; color:var(--acc); margin-left:.4rem;
}

.seccion[hidden]{display:none}

/* the summary, before the detail */
.tarjetas{
  display:grid; gap:.9rem; margin-bottom:1.6rem;
  grid-template-columns:repeat(auto-fit,minmax(13rem,1fr));
}
.tarjeta{
  background:var(--surface); border:1px solid var(--hair); border-radius:14px;
  padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.35rem;
}
.tarjeta .rotulo{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.tarjeta .cifra{
  font-size:1.9rem; font-weight:700; line-height:1.1; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;
}
.tarjeta .pie{font-size:.8rem; color:var(--text-2)}
.tarjeta .cifra .de{font-size:1rem; font-weight:400; color:var(--muted)}

/* tables: where the detail lives. They scroll on their own so the page never does it sideways. */
.tabla-caja{
  background:var(--surface); border:1px solid var(--hair); border-radius:14px;
  overflow-x:auto; margin-bottom:1.4rem;
}
table{width:100%; border-collapse:collapse; font-size:.86rem; min-width:34rem}
caption{
  text-align:left; padding:1rem 1.2rem .3rem; font-weight:600; color:var(--text);
}
caption .nota{display:block; font-weight:400; font-size:.8rem; color:var(--muted); margin-top:.2rem}
th,td{padding:.7rem 1.2rem; text-align:left; border-top:1px solid var(--hair-soft)}
th{
  font-family:var(--mono); font-size:.68rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--muted); font-weight:400;
}
td.num{font-variant-numeric:tabular-nums}
td .mono{font-family:var(--mono); font-size:.78rem; color:var(--text-2)}
tbody tr:hover{background:var(--raised)}

/* state carries in shape as well as in the word, so what needs attention reads at a glance */
.pastilla{
  display:inline-block; font-size:.72rem; letter-spacing:.04em; padding:.18rem .6rem;
  border-radius:999px; border:1px solid var(--hair); color:var(--text-2); white-space:nowrap;
}
.pastilla.bien{border-color:#2f6b46; color:#7fd8a4; background:rgba(47,107,70,.14)}
.pastilla.aviso{border-color:var(--gold-deep); color:var(--gold-soft); background:rgba(245,165,36,.12)}
.pastilla.alto{border-color:#7a3340; color:#ff9fae; background:rgba(122,51,64,.16)}
:root[data-theme="light"] .pastilla.bien{color:#1d6b40; background:rgba(47,107,70,.10)}
:root[data-theme="light"] .pastilla.aviso{color:#8a5400; background:rgba(201,127,0,.12)}
:root[data-theme="light"] .pastilla.alto{color:#96233a; background:rgba(150,35,58,.10)}

.mini{
  font:inherit; font-size:.78rem; cursor:pointer; padding:.3rem .7rem; border-radius:999px;
  border:1px solid var(--hair); background:transparent; color:var(--text);
}
.mini:hover{border-color:var(--acc); color:var(--acc)}
.mini[disabled]{opacity:.45; cursor:default}
.mini[disabled]:hover{border-color:var(--hair); color:var(--text)}
.mini.peligro:hover{border-color:#a8455a; color:#ff9fae}

/* the state of the whole section: loading, empty or refused, said as three different things. An
   empty table while still asking looks exactly like one whose answer was nothing. */
.estado{
  padding:1.4rem 1.2rem; color:var(--muted); font-size:.87rem; text-align:center;
}
.estado.malo{color:#ff9fae}

/* forms inside a panel sit in a card and do not stretch across the whole width */
.ficha{
  background:var(--surface); border:1px solid var(--hair); border-radius:14px;
  padding:clamp(1.2rem,3vw,1.6rem); max-width:30rem; margin-bottom:1.4rem;
}
.ficha h2{font-size:1.05rem; margin-bottom:.3rem}
.ficha .lede{margin-bottom:.4rem}
.ficha form{margin-top:1rem}
.dato{display:flex; justify-content:space-between; gap:1rem; padding:.55rem 0; border-top:1px solid var(--hair-soft); font-size:.87rem}
.dato:first-of-type{border-top:0}
.dato dt{color:var(--muted)}
.dato dd{color:var(--text); text-align:right; font-family:var(--mono); font-size:.8rem}

/* what a form said back, in the same place every time */
.dicho{margin-top:.9rem; font-size:.85rem; color:var(--text-2); min-height:1.2em}
.dicho.malo{color:#ff9fae}
.dicho.bien{color:#7fd8a4}
:root[data-theme="light"] .dicho.malo{color:#96233a}
:root[data-theme="light"] .dicho.bien{color:#1d6b40}

/* the site styles inputs; a panel also has lists to pick from and text to type into */
select,textarea{
  font:inherit; color:var(--text); background:var(--ink-2);
  border:1px solid var(--hair); border-radius:8px; padding:.7rem .8rem;
}
select:focus-visible,textarea:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
td input,td select{padding:.4rem .5rem; font-size:.85rem}

/* the marketplace: cards, because what is being read is an offer, not a row of data */
.filtros{display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:1.1rem}
.filtros button{
  font:inherit; font-size:.78rem; cursor:pointer; color:var(--text-2);
  background:transparent; border:1px solid var(--hair); border-radius:999px; padding:.3rem .8rem;
}
.filtros button.is-on{background:var(--gold); border-color:var(--gold); color:#0b0b12; font-weight:600}

.vitrina{display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(17rem,1fr))}
.oferta{
  background:var(--surface); border:1px solid var(--hair); border-radius:14px;
  padding:1.1rem 1.2rem; display:flex; flex-direction:column; gap:.5rem;
}
.oferta .cat{
  font-family:var(--mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--muted);
}
.oferta h3{font-size:1rem; line-height:1.25}
.oferta p{font-size:.85rem; color:var(--text-2); flex:1}
.oferta .fila{display:flex; align-items:center; justify-content:space-between; gap:.6rem; margin-top:.3rem}
.precio{font-weight:700; font-variant-numeric:tabular-nums}
.precio.libre{color:#7fd8a4}
:root[data-theme="light"] .precio.libre{color:#1d6b40}

/* a rating drawn with marks, not pictograms: the shape carries it and no glyph is borrowed */
.estrellas{display:inline-flex; gap:2px; vertical-align:middle}
.estrellas i{width:9px; height:9px; border:1px solid var(--gold-deep); border-radius:2px; display:block}
.estrellas i.llena{background:var(--gold)}
.estrellas i.media{background:linear-gradient(90deg,var(--gold) 50%,transparent 50%)}
.voto{display:flex; gap:.3rem}
.voto button{
  font:inherit; font-size:.85rem; width:2rem; height:2rem; cursor:pointer;
  border:1px solid var(--hair); border-radius:8px; background:transparent; color:var(--text-2);
}
.voto button.is-on{background:var(--gold); border-color:var(--gold); color:#0b0b12; font-weight:700}

.opinion{border-top:1px solid var(--hair-soft); padding:.8rem 0; font-size:.86rem}
.opinion .quien-dijo{display:flex; align-items:center; gap:.5rem; color:var(--muted); font-size:.76rem}
.opinion .texto{margin-top:.35rem; color:var(--text-2)}
.opinion .retirado{margin-top:.35rem; color:var(--muted); font-style:italic}
.opinion .respuesta{
  margin-top:.5rem; margin-left:.9rem; padding-left:.8rem; border-left:2px solid var(--gold);
  color:var(--text-2);
}
.opinion .respuesta .marca{
  display:block; font-family:var(--mono); font-size:.66rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--gold-soft); margin-bottom:.2rem;
}

/* Millrac3r: the canvas and the terminal, side by side, because they are one thing */
.taller{display:grid; gap:1rem; grid-template-columns:1fr; align-items:start}
@media (min-width:60rem){ .taller{grid-template-columns:1.1fr .9fr} }

.lienzo{
  background:var(--surface); border:1px solid var(--hair); border-radius:14px;
  padding:1rem; min-height:18rem; display:flex; flex-direction:column; gap:.6rem;
}
.lienzo .paso{
  border:1px solid var(--hair); border-radius:10px; background:var(--raised);
  padding:.7rem .9rem; display:flex; flex-direction:column; gap:.25rem;
}
.lienzo .paso .nombre{font-weight:600; font-size:.9rem}
.lienzo .paso .clase{font-family:var(--mono); font-size:.74rem; color:var(--acc)}
.lienzo .paso .ajuste{font-family:var(--mono); font-size:.74rem; color:var(--muted)}
.lienzo .flecha{
  align-self:center; font-family:var(--mono); color:var(--muted); font-size:.8rem; line-height:1;
}
.lienzo .paso.suelto{border-style:dashed}

.terminal{
  background:var(--ink-2); border:1px solid var(--hair); border-radius:14px; padding:1rem;
  display:flex; flex-direction:column; gap:.6rem;
}
.terminal textarea{
  font-family:var(--mono); font-size:.82rem; line-height:1.55; min-height:14rem; resize:vertical;
  color:var(--text); background:transparent; border:0; outline:none; width:100%;
}
.terminal textarea:focus-visible{outline:2px solid var(--gold); outline-offset:4px; border-radius:4px}
.terminal .barra{display:flex; align-items:center; justify-content:space-between; gap:.6rem}

/* Ligatures off: the mono face draws -> as one typographic arrow and the diagrams here are ASCII.
   The text is already ASCII; this stops the font from redrawing it. */
.orden,.lienzo .flecha,.lienzo .paso .ajuste{font-variant-ligatures:none}
.orden{font-family:var(--mono); font-size:.76rem; color:var(--muted)}
.terminal textarea{font-variant-ligatures:none}
.orden b{color:var(--text-2); font-weight:400}

footer{
  padding:1.4rem var(--edge); border-top:1px solid var(--hair-soft);
  color:var(--muted); font-size:.8rem;
}

@media (max-width:40rem){
  .top .quien .correo{display:none}
  th,td{padding:.6rem .8rem}
}
@media (prefers-reduced-motion:reduce){
  .rail button,.mini,.btn{transition:none}
}

/* On a phone the header wraps to two rows instead of shrinking: a switch smaller than the finger
   pressing it is not a switch. */
@media (max-width: 30rem){
  .top{flex-wrap:wrap; row-gap:.55rem}
  .top .quien{flex-wrap:wrap; gap:.5rem; justify-content:flex-end; width:100%}
  .top .quien .correo{
    flex:1 1 100%; text-align:right; overflow-wrap:anywhere; font-size:.72rem;
  }
}

/* ================================================================================================
   Aerial glass, the same values as the site and the administration panel. The light differs: a fixed
   field with no animation, because a tool must not spend battery on decoration.
   ============================================================================================= */

:root{ --breath:rgba(245,165,36,.10); --breath2:rgba(139,143,255,.06) }
:root[data-theme="light"]{ --breath:rgba(201,127,0,.10); --breath2:rgba(74,79,212,.05) }

body.app::before{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(60rem 40rem at 12% -8%, var(--breath), transparent 62%),
    radial-gradient(48rem 34rem at 92% 8%, var(--breath2), transparent 60%),
    radial-gradient(52rem 38rem at 70% 108%, var(--breath), transparent 64%),
    var(--ink);
}

.tarjeta,.tabla-caja,.ficha,.oferta,.lienzo{
  background:linear-gradient(158deg, rgba(9,12,19,.30), rgba(9,12,19,.14));
  -webkit-backdrop-filter:blur(20px) saturate(1.35); backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid rgba(255,255,255,.13); border-radius:18px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), inset 0 0 0 1px rgba(255,255,255,.02),
             0 18px 44px -16px rgba(0,0,0,.5);
}
/* Light is the exact mirror of dark: same alpha, blur and saturation. Only the tint polarity flips,
   and the hairline holds the frame. */
:root[data-theme="light"] :is(.tarjeta,.tabla-caja,.ficha,.oferta,.lienzo){
  background:linear-gradient(158deg, rgba(255,255,255,.30), rgba(255,255,255,.14));
  border:1px solid color-mix(in srgb, var(--gold-deep) 22%, rgba(26,22,14,.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), inset 0 0 0 1px rgba(26,22,14,.02),
             0 18px 44px -16px rgba(23,20,16,.22);
}

/* The terminal is deliberately opaque: veiling what sits behind a block of code makes it harder to
   read, not better looking. */
.terminal{
  background:color-mix(in srgb, var(--ink-2) 82%, transparent);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  border:1px solid rgba(255,255,255,.11); border-radius:18px;
}
:root[data-theme="light"] .terminal{
  background:color-mix(in srgb, #fff 86%, transparent);
  border-color:color-mix(in srgb, var(--gold-deep) 20%, rgba(26,22,14,.12));
}

/* The rail is a control rather than a row of links: one piece of glass holding the sections, the
   active one held in gold. */
.rail{
  gap:.2rem; padding:.32rem; border-bottom:0; border-radius:999px;
  background:linear-gradient(158deg, rgba(9,12,19,.30), rgba(9,12,19,.14));
  -webkit-backdrop-filter:blur(20px) saturate(1.35); backdrop-filter:blur(20px) saturate(1.35);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14), 0 14px 34px -18px rgba(0,0,0,.5);
  width:fit-content; max-width:100%;
}
:root[data-theme="light"] .rail{
  background:linear-gradient(158deg, rgba(255,255,255,.30), rgba(255,255,255,.14));
  border-color:color-mix(in srgb, var(--gold-deep) 22%, rgba(26,22,14,.13));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8), 0 14px 34px -18px rgba(23,20,16,.2);
}
.rail button{padding:.5rem 1rem; border-radius:999px}
.rail button:hover{background:color-mix(in srgb, var(--gold) 12%, transparent); color:var(--text)}
.rail button.is-on{
  background:var(--gold); border-color:var(--gold); color:#0b0b12; font-weight:700;
  box-shadow:0 6px 18px -8px rgba(245,165,36,.7);
}
.rail button.is-on[data-cuenta]::after{color:#0b0b12; opacity:.72}

/* On glass a highlighted row tints instead of filling with an opaque block. */
tbody tr:hover{background:color-mix(in srgb, var(--gold) 7%, transparent)}
th{position:sticky; top:0; z-index:1; background:transparent; backdrop-filter:blur(6px)}

/* The table header needs no box of its own inside another box. */
caption{padding:1.1rem 1.3rem .5rem}
th,td{border-top-color:color-mix(in srgb, var(--text) 8%, transparent)}

/* An action button inside glass: a solid border reads as stuck on top. */
.mini{
  background:color-mix(in srgb, var(--text) 6%, transparent);
  border-color:color-mix(in srgb, var(--text) 16%, transparent);
}
.mini:hover{background:color-mix(in srgb, var(--gold) 14%, transparent)}

/* Form inputs, of the same material as the box that contains them. */
input,select,textarea{
  background:color-mix(in srgb, var(--ink) 34%, transparent);
  border-color:color-mix(in srgb, var(--text) 15%, transparent);
}
:root[data-theme="light"] :is(input,select,textarea){
  background:color-mix(in srgb, #fff 62%, transparent);
  border-color:color-mix(in srgb, var(--gold-deep) 18%, rgba(26,22,14,.14));
}

/* Header and footer are hairlines, not bars: over a lit field a solid border cuts the page. */
.top{border-bottom-color:color-mix(in srgb, var(--text) 10%, transparent)}
footer{border-top-color:color-mix(in srgb, var(--text) 10%, transparent)}

/* ================================================================================================
   Rhythm between boxes. The container spaces its children, so a block the script fills in needs no
   margin rule of its own and none is forgotten when the next one arrives.
   ============================================================================================= */
.seccion > * + *{margin-top:1.4rem}
.seccion .tarjetas{margin-bottom:0}
.seccion .tabla-caja{margin-bottom:0}
.seccion .ficha{margin-bottom:0}

/* The corner mark, at the same measurements as the cover and the administration panel. Declared
   here because each surface declares its own. */
.brandlogo{width:30px; height:30px; display:inline-grid; place-items:center; flex:none}
.brandlogo img,.brandlogo svg{width:100%; height:100%; display:block}

/* ================================================================================================
   Tabs answer the cursor with the same timing and curve as the pills and nav links on the site.
   ============================================================================================= */
.rail button,.seg .segbtn{
  will-change:transform;
  transition:transform .2s var(--eo), color var(--fast), background var(--fast),
             box-shadow .2s var(--eo);
}
.rail button:hover{box-shadow:0 6px 18px rgba(245,165,36,.22)}
.rail button.is-on:hover{box-shadow:0 9px 24px rgba(245,165,36,.5)}
.seg .segbtn:hover{color:var(--text); box-shadow:0 6px 18px rgba(245,165,36,.22)}
.seg .segbtn.is-on:hover{box-shadow:0 9px 24px rgba(245,165,36,.5)}
/* Reduced motion gets none: colour and background stay, since they inform. */
@media (prefers-reduced-motion:reduce){
  .rail button,.seg .segbtn{transition:color var(--fast), background var(--fast)}
}

/* ================================================================================================
   Rating: one mark to read it and to cast it. Marks carry the shape, the mono figure beside it the
   word, since shape alone would be a state to guess at.
   ============================================================================================= */
.opinar{margin:.9rem 0 .2rem}
.opinar .hint{margin-bottom:.5rem}

.voto{display:flex; gap:.45rem; align-items:center}
.voto button{
  /* The same mark as the read-only one; the button only gives it an area that can be touched. */
  width:auto; height:auto; padding:.5rem .35rem; border:0; background:transparent; cursor:pointer;
  border-radius:8px; line-height:0;
  transition:transform .18s var(--eo), background var(--fast);
}
.voto button i{
  display:block; width:15px; height:15px; border-radius:3px;
  border:1px solid var(--gold-deep); background:transparent;
  transition:background .18s var(--eo), box-shadow .18s var(--eo);
}
.voto button:hover{background:color-mix(in srgb, var(--gold) 10%, transparent)}
.voto button:hover i{border-color:var(--gold)}
.voto button.is-on i{background:var(--gold); box-shadow:0 4px 12px -4px rgba(245,165,36,.6)}
.voto button:focus-visible{outline:2px solid var(--gold); outline-offset:2px}
/* Shape and word: the marks give the shape, this figure the word. */
.voto .cuenta{font-family:var(--mono); font-size:.78rem; color:var(--muted); margin-left:.35rem}
.voto .cuenta.puesta{color:var(--text)}

.opinar .campo{
  display:block; width:100%; margin-top:.6rem; font:inherit; font-size:.88rem;
  padding:.6rem .75rem; border-radius:10px; color:var(--text);
}
.opinar .mandos{display:flex; justify-content:flex-end; align-items:center; gap:.7rem; margin-top:.6rem}
.opinar .mandos .dicho{margin:0; flex:1}

@media (pointer:coarse){
  /* Touch target, 44px, as everywhere else on the site. */
  .voto button{padding:.85rem .5rem}
}
@media (prefers-reduced-motion:reduce){
  .voto button,.voto button i{transition:background var(--fast)}
}

/* ================================================================================================
   Canvas drag. The held step lifts and the gap it falls into takes a gold hairline. Alt plus the
   arrow keys moves the focused step, so the gesture is not mouse-only.
   ============================================================================================= */
.lienzo .paso[draggable="true"]{cursor:grab; transition:opacity .15s var(--eo), box-shadow .18s var(--eo)}
.lienzo .paso[draggable="true"]:active{cursor:grabbing}
.lienzo .paso[draggable="true"]:hover{box-shadow:0 8px 22px -12px rgba(0,0,0,.6)}
.lienzo .paso:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.lienzo .paso.agarrado{opacity:.45}
.lienzo .paso.cae-antes{box-shadow:inset 0 3px 0 0 var(--gold)}
.lienzo .paso.cae-despues{box-shadow:inset 0 -3px 0 0 var(--gold)}
/* A branching flow does not drag: reordering would change what it does, so it says so instead of
   leaving a gesture that means something else. */
.lienzo.sin-arrastre .paso{cursor:default}
.lienzo .aviso-rama{
  font-size:.78rem; color:var(--muted); font-family:var(--mono);
  border-top:1px solid var(--hair-soft); padding-top:.6rem; margin-top:.2rem;
}
@media (prefers-reduced-motion:reduce){ .lienzo .paso[draggable="true"]{transition:none} }

/* Remove a step and add another from the canvas. Small pieces inside the glass box: remove sits at
   the end of the step and tints only on hover, so it never competes with the name. */
.lienzo .paso{position:relative}
.lienzo .paso .quitar{
  align-self:flex-end; margin-top:.35rem; font-size:.72rem; padding:.22rem .6rem;
  opacity:.55; transition:opacity var(--fast), border-color var(--fast), color var(--fast);
}
.lienzo .paso:hover .quitar,.lienzo .paso .quitar:focus-visible{opacity:1}
.lienzo .paso .quitar:hover{border-color:#a8455a; color:#ff9fae}

.lienzo .alta{
  display:flex; flex-wrap:wrap; gap:.4rem; align-items:center;
  border-top:1px solid var(--hair-soft); padding-top:.7rem; margin-top:.2rem;
}
.lienzo .alta .campo-corto{
  font:inherit; font-family:var(--mono); font-size:.76rem; padding:.38rem .55rem;
  border-radius:8px; color:var(--text); min-width:7rem; flex:1 1 7rem;
}
@media (pointer:coarse){
  .lienzo .paso .quitar{opacity:1; padding:.5rem .8rem}
  .lienzo .alta .campo-corto{padding:.55rem .6rem}
}

/* --- Exit is pressed with a finger -----------------------------------------------------------
   The underlined text draws 16px tall, so the touch area is widened underneath, invisibly. 24px and
   not 44 because the section rail sits directly below and would lose its first tab. */
@media (pointer: coarse) {
  .top .quien .salir { position: relative; }
  .top .quien .salir::after {
    content: ""; position: absolute; left: 0; right: 0; top: 50%;
    height: 24px; transform: translateY(-50%);
  }
}