/* Página de soporte: TypeUI Simple + paleta Helpdesk cyan (docs/arkflow/pagina-soporte/03-diseno.md).
   Un solo :root; el tema oscuro redefine los MISMOS tokens (tema.js pone data-tema en <html>). */

@font-face { font-family: 'IBM Plex Sans'; font-weight: 400; font-style: normal; font-display: swap;
  src: url('/static/fuentes/ibm-plex-sans-400.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/static/fuentes/ibm-plex-sans-500.woff2') format('woff2'); }
@font-face { font-family: 'IBM Plex Sans'; font-weight: 600; font-style: normal; font-display: swap;
  src: url('/static/fuentes/ibm-plex-sans-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-weight: 500; font-style: normal; font-display: swap;
  src: url('/static/fuentes/jetbrains-mono-500.woff2') format('woff2'); }

:root {
  color-scheme: light;
  --bg: #F2F5F7; --surface: #FCFDFD; --surface-2: #E7EDF0;
  --fg: #13232B; --muted-fg: #52626C; --border: #D6DEE3; --border-strong: #7F939E;
  --primary: #0E7490; --primary-fg: #F5FCFE; --primary-soft: #DDF1F6; --primary-ink: #0B5A70;
  --ok: #047857; --ok-bg: #E7F7F0; --bad: #B42318; --bad-bg: #FDEEEC;
  --velo: #0A161C8C; --sombra: #0D1E2624;
  --ring: var(--primary);
  --font-ui: 'IBM Plex Sans', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;
  --t-xs: 12px; --t-sm: 13px; --t-base: 15px; --t-md: 17px; --t-lg: 20px; --t-xl: 24px;
  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px;
  --r-sm: 8px; --r-md: 10px; --r-lg: 12px; --r-hoja: 16px;
  --dur: 150ms; --ease: cubic-bezier(.16, 1, .3, 1);
}

:root[data-tema="oscuro"] {
  color-scheme: dark;
  --bg: #0D1317; --surface: #141C21; --surface-2: #1B252B;
  --fg: #E4ECEF; --muted-fg: #9AABB4; --border: #24313A; --border-strong: #5E727C;
  --primary: #22C3DD; --primary-fg: #062129; --primary-soft: #123440; --primary-ink: #7DDCEC;
  --ok: #3DD39B; --ok-bg: #0F2A21; --bad: #F2877D; --bad-bg: #2C1714;
  --velo: #000000A6; --sombra: #00000066;
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--bg); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--bg); color: var(--fg);
  font-family: var(--font-ui); font-size: var(--t-base); line-height: 1.5;
}
[hidden] { display: none !important; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; }
:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.app {
  max-width: 640px; margin: 0 auto; min-height: 100vh; min-height: 100dvh;
  display: flex; flex-direction: column;
  padding-bottom: env(safe-area-inset-bottom);
}

/* ---------- botones ---------- */
.btn {
  min-height: 48px; padding: 0 var(--s-5); border-radius: var(--r-md); border: 0;
  background: var(--primary); color: var(--primary-fg); font-size: 16px; font-weight: 600;
}
.btn:hover:not(:disabled) { filter: brightness(1.08); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .5; }
.btn[aria-busy="true"] { opacity: .8; }
.btn-borde {
  min-height: 44px; padding: 0 14px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--fg);
  font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px;
}
.btn-borde:hover { background: var(--surface-2); }
.btn-plano {
  min-height: 44px; padding: 0 var(--s-3); border-radius: var(--r-md); border: 0; background: transparent;
  color: var(--fg); font-size: 14px; display: inline-flex; align-items: center; gap: 6px;
}
.btn-plano:hover { background: var(--surface-2); }
.ico {
  width: 44px; height: 44px; flex: none; border-radius: var(--r-md); border: 0; background: transparent;
  color: var(--fg); display: inline-flex; align-items: center; justify-content: center;
}
.ico:hover:not(:disabled) { background: var(--surface-2); }
.ico:disabled { opacity: .7; }
.ico[aria-busy="true"] { color: var(--muted-fg); opacity: .7; }
.ico.on { background: var(--primary-soft); color: var(--primary-ink); }
.ico.ok { background: var(--ok-bg); color: var(--ok); }
.ico svg, .btn-borde svg, .btn-plano svg { pointer-events: none; }

/* ---------- vistas de un solo mensaje (sin acceso, reabrir, falla, cargando) ---------- */
.estado {
  flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center;
  gap: var(--s-3); padding: var(--s-6) var(--s-5);
}
.estado h1 { margin: 0; font-size: var(--t-lg); line-height: 1.3; font-weight: 600; }
.estado p { margin: 0; color: var(--muted-fg); max-width: 60ch; }
.sello {
  width: 44px; height: 44px; border-radius: var(--r-md); background: var(--primary-soft);
  color: var(--primary-ink); display: inline-flex; align-items: center; justify-content: center;
}
.esqueleto { display: block; border-radius: var(--r-lg); background: var(--surface-2); }
.esqueleto.barra-e { height: 56px; margin: var(--s-3) var(--s-4); }
.esqueleto.tarjeta-e { height: 168px; margin: var(--s-3) var(--s-4) 0; }
.esqueleto.linea { display: inline-block; width: 120px; height: 12px; border-radius: 6px; vertical-align: middle; }

/* ---------- entrar ---------- */
.entrar { padding: 28px var(--s-5) var(--s-6); display: flex; flex-direction: column; gap: var(--s-5); }
.marca { display: flex; align-items: center; gap: 10px; color: var(--primary-ink); font-weight: 600; }
.marca .sello { width: 36px; height: 36px; }
.entrar h1 { margin: 0; font-size: var(--t-xl); line-height: 1.2; font-weight: 600; }
.intro { margin: -8px 0 0; color: var(--muted-fg); max-width: 65ch; }
.form { display: flex; flex-direction: column; gap: 18px; }
.campo { display: flex; flex-direction: column; gap: 6px; }
.campo label { font-size: 14px; font-weight: 500; }
.entrada {
  display: flex; align-items: center; min-height: 48px; border-radius: var(--r-md);
  border: 1px solid var(--border-strong); background: var(--surface); padding: 0 4px 0 var(--s-3);
}
.entrada:focus-within { outline: 2px solid var(--ring); outline-offset: 2px; }
.entrada input {
  flex: 1; border: 0; background: transparent; font-size: 16px; min-width: 0; min-height: 46px; outline: none;
}
.entrada input:disabled { opacity: .6; }
.entrada.error { border-color: var(--bad); }
.pista { margin: 0; font-size: var(--t-sm); color: var(--muted-fg); }
.msg-error { margin: 0; min-height: 1.5em; font-size: var(--t-sm); color: var(--bad); font-weight: 500; }
.aviso { margin: 0; padding: var(--s-3) 14px; border-radius: var(--r-md); background: var(--surface-2);
  font-size: var(--t-sm); color: var(--muted-fg); }

/* ---------- principal ---------- */
.dentro { flex: 1; display: flex; flex-direction: column; }
.barra {
  position: sticky; top: 0; z-index: 2; background: var(--bg);
  padding: var(--s-3) var(--s-4) 10px; border-bottom: 1px solid var(--border);
}
.cab { display: flex; align-items: center; gap: var(--s-3); }
.cab h1 { margin: 0; font-size: var(--t-md); line-height: 1.3; font-weight: 600; }
.cab p { margin: 0; font-size: var(--t-sm); color: var(--muted-fg); }
.cab .btn-borde { margin-left: auto; }
.lista { padding: var(--s-3) var(--s-4) var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.tarjeta { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg);
  padding: var(--s-3) 6px 4px 14px; }
.t-cab { display: flex; align-items: center; gap: var(--s-2); padding-right: var(--s-2); }
.t-cab h2 { margin: 0; font-size: var(--t-base); font-weight: 600; overflow-wrap: anywhere; }
.chip { font-size: var(--t-xs); line-height: 1.4; padding: 2px 8px; border-radius: var(--r-sm);
  background: var(--primary-soft); color: var(--primary-ink); font-weight: 500; }
.liga { display: inline-flex; align-items: center; gap: 6px; color: var(--primary); font-size: var(--t-sm);
  text-decoration: none; min-height: 44px; }
.liga:hover { text-decoration: underline; }
.fila { display: flex; align-items: center; gap: 4px; border-top: 1px solid var(--border); min-height: 52px; }
.et { width: 88px; flex: none; font-size: var(--t-sm); color: var(--muted-fg); }
.val { flex: 1; font-family: var(--font-mono); font-weight: 500; font-size: 14px; min-width: 0;
  overflow-wrap: anywhere; }
.val.tapada { letter-spacing: .2em; color: var(--muted-fg); }
.val.seleccionable { user-select: all; -webkit-user-select: all; }
.nota { margin: -6px 0 0; min-height: 0; font-size: var(--t-xs); color: var(--muted-fg); padding: 0 8px 10px 92px; }
.nota:empty { display: none; }
.nota.ok { color: var(--ok); font-weight: 500; }
.nota.mal { color: var(--bad); font-weight: 500; }
.vacio { padding: var(--s-6) var(--s-2); display: flex; flex-direction: column; gap: var(--s-2); color: var(--muted-fg); }
.vacio strong { color: var(--fg); font-weight: 600; }
.pie { margin-top: auto; padding: var(--s-3) var(--s-4); border-top: 1px solid var(--border);
  display: flex; align-items: center; gap: var(--s-3); font-size: var(--t-sm); color: var(--muted-fg); }
.pie .btn-plano { margin-left: auto; }

/* ---------- hoja de Ayuda ---------- */
.hoja {
  width: 100%; max-width: 640px; max-height: 90dvh; margin: auto auto 0; border: 0;
  border-radius: var(--r-hoja) var(--r-hoja) 0 0; padding: var(--s-2) var(--s-5) calc(var(--s-5) + env(safe-area-inset-bottom));
  background: var(--surface); color: var(--fg); box-shadow: 0 -12px 40px -12px var(--sombra);
}
.hoja[open] { display: flex; flex-direction: column; gap: 14px; }
.hoja::backdrop { background: var(--velo); }
.asa { width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); align-self: center; }
.hoja-cab { display: flex; align-items: center; }
.hoja-cab h2 { margin: 0; font-size: var(--t-lg); font-weight: 600; flex: 1; }
.sub { margin: 0; font-size: var(--t-sm); font-weight: 600; color: var(--muted-fg); }
.hoja dl { margin: 0; display: flex; flex-direction: column; }
.par { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: start;
  padding: 10px 0; border-top: 1px solid var(--border); }
.par:first-child { border-top: 0; padding-top: 0; }
.sim { width: 40px; height: 40px; border-radius: var(--r-md); background: var(--surface-2);
  display: inline-flex; align-items: center; justify-content: center; }
.hoja dt { font-weight: 600; }
.hoja dd { margin: 0; font-size: 14px; color: var(--muted-fg); }
.nota-ayuda { margin: 0; padding: var(--s-3) 14px; border-radius: var(--r-md); background: var(--primary-soft);
  color: var(--primary-ink); font-size: var(--t-sm); }

/* La única animación: la respuesta a un toque. Fuera si la persona pidió menos movimiento. */
@media (prefers-reduced-motion: no-preference) {
  .btn, .ico, .btn-borde, .btn-plano { transition: background-color var(--dur) var(--ease), filter var(--dur) var(--ease); }
}
@media (prefers-reduced-motion: reduce) {
  .btn:active:not(:disabled) { transform: none; }
}