/*
 * Pantalla "no pudimos conectar" (ola 58) — estilos propios, SIN depender del
 * paquete de la app: este archivo se pide desde `index.html` y entra al
 * precache del service worker, de modo que se ve aunque el JS de la app no
 * haya arrancado. Colores = tokens del design system (`src/index.css`); aquí
 * van como variables `--pc-*` propias para no depender de que ese CSS cargue.
 * Claro por defecto; oscuro con el atributo `data-theme` que fija
 * `theme-init.js` o, si no hay elección guardada, con el tema del sistema.
 */
.pc-conexion {
  --pc-bg: #eef1f4;
  --pc-panel: #ffffff;
  --pc-ink: #111b21;
  --pc-ink-2: #3b4a54;
  --pc-sec: #52636d;
  --pc-line: #e9edef;
  --pc-line-2: #dbe1e4;
  --pc-brand: #0b8043;
  --pc-brand-ink: #0b6b38;
  --pc-on-brand: #ffffff;
  --pc-focus: #1479c4;
  --pc-warn-bg: #fbeceb;
  --pc-warn-ink: #8f1d17;
  --pc-shadow: 0 10px 34px rgba(11, 20, 26, 0.1);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .pc-conexion {
    --pc-bg: #0b141a;
    --pc-panel: #111b21;
    --pc-ink: #e9edef;
    --pc-ink-2: #b6c0c5;
    --pc-sec: #8a9ba5;
    --pc-line: #222d34;
    --pc-line-2: #2a3942;
    --pc-brand: #0d954e;
    --pc-brand-ink: #2fbf75;
    --pc-on-brand: #0b141a;
    --pc-focus: #4fa8e8;
    --pc-warn-bg: #3d1c1a;
    --pc-warn-ink: #ff8a80;
    --pc-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
  }
}
:root[data-theme="dark"] .pc-conexion {
  --pc-bg: #0b141a;
  --pc-panel: #111b21;
  --pc-ink: #e9edef;
  --pc-ink-2: #b6c0c5;
  --pc-sec: #8a9ba5;
  --pc-line: #222d34;
  --pc-line-2: #2a3942;
  --pc-brand: #0d954e;
  --pc-brand-ink: #2fbf75;
  --pc-on-brand: #0b141a;
  --pc-focus: #4fa8e8;
  --pc-warn-bg: #3d1c1a;
  --pc-warn-ink: #ff8a80;
  --pc-shadow: 0 10px 34px rgba(0, 0, 0, 0.45);
}

body:has(.pc-conexion) {
  margin: 0;
}
.pc-conexion {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  min-height: 100dvh;
  padding: 16px;
  background: var(--pc-bg);
  color: var(--pc-ink);
  font-family: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.5;
}
.pc-conexion *,
.pc-conexion *::before,
.pc-conexion *::after {
  box-sizing: border-box;
}
.pc-conexion [hidden] {
  display: none !important;
}
.pc-conexion__card {
  width: 100%;
  max-width: 560px;
  padding: 40px 24px;
  text-align: center;
  background: var(--pc-panel);
  border: 1px solid var(--pc-line);
  border-radius: 28px;
  box-shadow: var(--pc-shadow);
}
@media (min-width: 640px) {
  .pc-conexion__card {
    padding: 48px;
  }
}
.pc-conexion__logo {
  display: block;
  width: 100px;
  height: 100px;
  margin: 0 auto;
  padding: 8px;
  background: #ffffff;
  border-radius: 24px;
}
.pc-conexion__brand {
  margin: 16px 0 0;
  font-size: 1.875rem;
  font-weight: 800;
  line-height: 1.2;
  color: var(--pc-ink);
}
.pc-conexion__brand-accent {
  color: var(--pc-brand-ink);
}
.pc-conexion__title {
  margin: 24px 0 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--pc-ink);
}
.pc-conexion__text {
  margin: 8px 0 0;
  font-size: 0.9375rem;
  color: var(--pc-ink-2);
}
.pc-conexion__offline {
  margin: 16px 0 0;
  padding: 10px 14px;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--pc-warn-ink);
  background: var(--pc-warn-bg);
  border-radius: 12px;
}
.pc-conexion__countdown {
  margin: 20px 0 0;
  font-size: 0.875rem;
  color: var(--pc-sec);
}
.pc-conexion__button {
  min-height: 44px;
  margin-top: 16px;
  padding: 10px 20px;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--pc-on-brand);
  background: var(--pc-brand);
  border: 0;
  border-radius: 10px;
  cursor: pointer;
}
/* Las páginas estáticas de error (`/error/*.html`) usan un enlace con aspecto de botón y el «404» grande. */
a.pc-conexion__button {
  display: inline-block;
  text-decoration: none;
}
.pc-conexion__code {
  margin: 24px 0 0;
  font-size: 3rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--pc-brand-ink);
}
.pc-conexion__code + .pc-conexion__title {
  margin-top: 8px;
}
.pc-conexion__button:hover {
  filter: brightness(0.95);
}
.pc-conexion__button:disabled {
  cursor: progress;
  opacity: 0.75;
}
.pc-conexion__button--quiet {
  min-height: 40px;
  margin-top: 8px;
  font-size: 0.8125rem;
  color: var(--pc-brand-ink);
  background: transparent;
  border: 1px solid var(--pc-line-2);
}
.pc-conexion__button:focus-visible,
.pc-conexion__details summary:focus-visible {
  outline: 3px solid var(--pc-focus);
  outline-offset: 2px;
}
.pc-conexion__details {
  margin-top: 24px;
  text-align: left;
  font-size: 0.8125rem;
  color: var(--pc-ink-2);
}
.pc-conexion__details summary {
  display: block;
  padding: 6px 0;
  font-weight: 600;
  text-align: center;
  color: var(--pc-sec);
  cursor: pointer;
}
.pc-conexion__details pre {
  margin: 8px 0 0;
  padding: 12px;
  overflow-x: auto;
  font: 0.75rem/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  white-space: pre-wrap;
  word-break: break-word;
  color: var(--pc-ink);
  background: var(--pc-bg);
  border: 1px solid var(--pc-line);
  border-radius: 10px;
}
.pc-conexion__hint {
  margin: 8px 0 0;
  font-size: 0.75rem;
  color: var(--pc-sec);
}
.pc-conexion__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
@media (prefers-reduced-motion: no-preference) {
  .pc-conexion__button {
    transition: filter 0.15s ease;
  }
}