/* RedesPlus · páginas públicas (portal /revisar/<token> y la lista /demo/prueba de la demo): UN solo sistema con el panel.
 * Los mismos tokens (tokens.css: colores, oscuro, letra Archivo, resortes, movimiento reducido), los mismos botones,
 * tarjetas y listas agrupadas que el panel, el logo real y el mismo pie. Cada página añade solo su maquetación.
 * Celebrar SOLO cuando el servidor confirmó (La Vara 121): la clase .celebrate la pone el código tras la respuesta. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 400 var(--fs-base)/var(--lh) var(--font);
  -webkit-font-smoothing: antialiased;
}
button, input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, p { margin: 0; }
.ic { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
::selection { background: var(--select); color: var(--ink); }
a, button, label, summary { -webkit-tap-highlight-color: transparent; }

/* --- marca y pie (el logo real de RedesPlus, como el panel) ------------------------------------------------------ */
.pub-brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.pub-brand img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.pub-word { font-size: var(--fs-lg); font-weight: 800; font-stretch: var(--wdth-wide); letter-spacing: -.02em; }
.pub-word b { font-weight: 800; color: var(--accent-text); }
.pub-foot {
  display: flex; align-items: center; justify-content: center; gap: 8px; margin: var(--s-10) 0 0; color: var(--ink-3);
  font-size: var(--fs-sm);
}
.pub-foot img { width: 18px; height: 18px; border-radius: 5px; }

/* --- títulos (los del panel: anchos, apretados, en frase normal) --------------------------------------------------- */
.pub-h1 { font-size: var(--fs-2xl); font-weight: 760; font-stretch: var(--wdth-wide); letter-spacing: -.025em; line-height: var(--lh-tight); }
.pub-h2 { font-size: var(--fs-lg); font-weight: 720; line-height: var(--lh-tight); }
.pub-lead { color: var(--ink-2); }

/* --- botones: los del panel (.btn), a tamaño de dedo --------------------------------------------------------------- */
.pub-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2); min-height: 44px; padding: 0 var(--s-4);
  border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); color: var(--ink);
  font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; user-select: none;
  transition: transform var(--dur-1) var(--ease-out), background-color var(--dur-1) var(--ease-out);
}
.pub-btn:hover { background: var(--surface-2); }
.pub-btn:active { transform: scale(.97); }
.pub-btn.primary { background: var(--accent); color: var(--on-accent); border-color: var(--accent-edge); font-weight: 700; }
.pub-btn.primary:hover { filter: brightness(1.04); }
.pub-btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); }
.pub-btn.big { min-height: 52px; font-size: var(--fs-lg); width: 100%; }

/* --- tarjeta y lista agrupada (las .ios-group / .ios-list del panel) ----------------------------------------------- */
.pub-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.pub-list { margin: 0; padding: 0; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
.pub-list > li + li { border-top: 1px solid var(--line); }

/* --- la celebración (UNA por página y solo con la confirmación del servidor) --------------------------------------- */
.celebrate { animation: pub-celebrate var(--dur-party) var(--resorte-gelatina) both; }
@keyframes pub-celebrate { from { transform: scale(.45); } }