/* css/main/scroll-list-and-desktop-door.css — part 28/30 of the app styles (was css/main.css; loaded in this order by index.html). */
      /* ══════════════════════════════════════════════════════════════
         .lista-scroll — A LIST THAT SCROLLS AND SAYS SO

         ⛔ Where it comes from: the restore-from-Drive dialog had
         `max-height:320px` with rows of ~45 px, so it showed EXACTLY 7
         of the 12 copies there were —no cut-off border, no visible bar,
         nothing—. Santi counted 7 on 2026-09-01 and concluded that the
         app was LOSING backups. It wasn't an
         aesthetic problem: a list silently truncated, on the
         backups screen, reads like a breakdown.

         The signal is a fade on the bottom edge. ⚠️ JavaScript adds and
         removes it (class `hay-mas`), because a fixed fade
         would lie twice: when everything fits, and when you're already at the end.

         ⛔ `overscroll-behavior: contain` is not optional here — it is required by
         `scripts/scroll-overlay-check.py`. Without it, on reaching the end the
         gesture chains to the document behind and the layer gets
         stuck halfway up the screen. It has come back three times in this project.
         ⛔ And NO `-webkit-overflow-scrolling: touch`: it is obsolete and
         is the direct cause of iOS's "I reach the bottom and it won't scroll up".
         ══════════════════════════════════════════════════════════════ */
      .lista-scroll {
        overflow-y: auto;
        overscroll-behavior: contain;
      }
      .lista-scroll.hay-mas {
        -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
        mask-image: linear-gradient(to bottom, #000 calc(100% - 28px), transparent 100%);
      }

/* ══════════════════════════════════════════════════════════════════════
   WORKING ON A COMPUTER — the door of `tirolog.app/app` (ticket #169)

   ⛔ FULL screen and no menu: there is no identity here yet, so there is
   nothing to navigate to. It is the only screen of the product painted
   over the empty `body`.

   ⛔ Everything by TOKENS, in both themes. A hex here would look fine in dark
   —where it is written— and be unreadable in light, which is exactly the
   failure that already cost the eleven uses of `--text-dim` (2026-08-19).
   ══════════════════════════════════════════════════════════════════════ */
/* ⛔ THE `body` IS NOT TOUCHED, AND THAT IS THE FIX. The first version set
   `margin: 0` on it, which cancels the app's `margin: 0 auto`: on a computer the
   screen ended up STUCK TO THE LEFT over a huge empty space. It wasn't visible
   reading the code —the `body` is styled 400 lines above— and it was as soon as
   it was photographed at 1280 px.
   ⭐ And there is a deeper reason not to touch it: the app already has its desktop frame
   mode (≥1024 px, 820 px centered with zoom). This screen is the door
   of that same app, so it inherits that frame instead of inventing another width. */
/* ⛔⭐ THE SAME DOOR AS SCORE, AND IT LOOKS THE SAME (Santi, 2026-09-03). Structure,
   sizes and weights are those of `#screen-login` (`score/score.css:296-375`) with the
   app's tokens: where Score says `--gold` / `--gold-soft`, here it is
   `--accent` / `--accent-dim`. No new family is invented for a
   screen that does exactly the same as another that already exists. */
#pcEntrada {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px 24px;
  box-sizing: border-box;
  background:
    radial-gradient(1200px 600px at 50% -10%, var(--accent-dim), transparent 60%),
    var(--bg);
}
.pce-logo {
  width: 84px;
  height: 84px;
  margin-bottom: 16px;
  flex: none;
  filter: drop-shadow(0 4px 24px var(--accent-dim));
}
.pce-logo svg { width: 100%; height: 100%; display: block; }
.pce-marca {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--text);
  text-align: center;
  line-height: 1.1;
}
.pce-beta {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .14em;
  color: var(--accent);
  background: var(--accent-dim);
  border: 1px solid var(--border);
  border-radius: 999px;
  vertical-align: middle;
}
.pce-ver {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 4px;
}
.pce-caja {
  width: 100%;
  max-width: 420px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px 18px;
  margin-top: 18px;
  text-align: center;
  box-sizing: border-box;
  box-shadow: var(--shadow-modal);
}
/* The card's label, like Score's `.login-card-title`: small,
   in small caps and in the accent color. It says WHAT is being done here
   now that the product name takes up the big title above. */
.pce-titulo {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent);
  line-height: 1.3;
  margin: 0 0 8px;
}
.pce-intro {
  font-size: 14px;
  line-height: 1.5;
  margin: 0 0 16px;
  color: var(--text-dim);
}

/* The QR slot reserves its place BEFORE the code exists: without this the
   box jumps when the challenge arrives, and the jump reads as a failure. */
.pce-qr-hueco {
  position: relative;
  width: 100%;
  max-width: 190px;
  aspect-ratio: 1 / 1;
  margin: 0 auto 14px;
  border-radius: 10px;
  overflow: hidden;
  /* ⛔ ALWAYS WHITE BACKGROUND, also in dark theme, and it is NOT an oversight of the
     theme: a QR with inverted modules is not read by half of the readers.
     It carries its own border so it doesn't float over the white in light. */
  background: #fff;
  border: 1px solid var(--border);
}
.pce-qr { position: absolute; inset: 8px; }
.pce-tapa {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 16px;
  text-align: center;
  background: var(--card);
  color: var(--text-dim);
  font-size: 14px;
  line-height: 1.5;
}

.pce-espera {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-size: 14px;
  color: var(--text-muted);
  margin: 0 0 4px;
  min-height: 20px;
}
.pce-punto {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pce-latido 1.4s ease-in-out infinite;
  flex: none;
}
@keyframes pce-latido {
  0%, 100% { opacity: .25; transform: scale(.8); }
  50%      { opacity: 1;   transform: scale(1); }
}
/* House rule: motion is switched off if the system asks for it. */
@media (prefers-reduced-motion: reduce) {
  .pce-punto { animation: none; opacity: 1; }
}

.pce-reintentar { display: none; width: 100%; margin-top: 4px; }
.pce-nota {
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-muted);
  margin: 12px 0 0;
}

/* ── The states. Only one visible at a time, and governed by an attribute:
      that way there aren't two classes that can be left on at once. ───── */
#pcEntrada[data-estado="cargando"] .pce-espera-txt::after { content: ""; }
#pcEntrada[data-estado="listo"]     .pce-tapa { display: none; }

#pcEntrada[data-estado="entrando"] .pce-tapa,
#pcEntrada[data-estado="error"]    .pce-tapa { display: flex; }
#pcEntrada[data-estado="entrando"] .pce-qr,
#pcEntrada[data-estado="error"]    .pce-qr { visibility: hidden; }

#pcEntrada[data-estado="error"] .pce-espera { display: none; }
#pcEntrada[data-estado="error"] .pce-reintentar { display: block; }
#pcEntrada[data-estado="entrando"] .pce-espera .pce-punto { animation-duration: .7s; }

/* ── Sessions open on a computer (#169) ──────────────────────────────────
   A row with data on the left and an action on the right. Same pattern as the
   rest of the organization's lists: no new family is invented. */
/* ⛔⭐ THE ADDRESS IS THE MAIN DATUM OF THIS SCREEN, and that's why it is painted
   as such (Santi, 2026-09-03: *"I should see it really big"*). It is the only thing
   that must be TYPED on the other device: if it can't be read at a glance, the
   screen is useless.
   ⚠️ `user-select: all` so a long tap selects it whole —including
   the "/app", which is exactly what gets forgotten when copying by hand—, and `break-all`
   because on a narrow phone with large type it doesn't always fit on one line.
   Oswald is used, which is this house's typeface for data. */
.ord-url {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 4px 0 16px;
  padding: 14px 12px;
  background: var(--accent-dim);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ord-url-txt {
  font-family: 'Oswald', system-ui, sans-serif;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: .02em;
  color: var(--accent);
  text-align: center;
  line-height: 1.25;
  word-break: break-all;
  user-select: all;
  -webkit-user-select: all;
}

.ord-lista { display: flex; flex-direction: column; gap: 8px; }
.ord-fila {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 10px;
}
.ord-datos { flex: 1; min-width: 0; }
.ord-tit {
  font-size: 14px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ord-sub { font-size: 13px; color: var(--text-muted); margin-top: 2px; }
/* ⛔ THE BUTTON CANNOT BE FULL WIDTH. In this app `.btn-danger` takes up
   the whole row by default, and inside a list that squashed the data
   against the edge: the title disappeared and "Quedan 11 h" broke into three
   lines. It isn't seen reading the code —it's seen by photographing the screen— and it's the
   same failure as the diplomas button of 2026-08-30.
   ⭐ Same values as the "Qué puede hacer" button in People and access, which
   is the sibling list: no new family is invented for the same thing. */
.ord-fila .ord-cerrar {
  flex: none;
  width: auto;
  padding: 8px 14px;
  min-height: 44px;   /* touch target of the house rule */
  font-size: 13px;
}