/* CUTHALF · base
   Sistema de color, reset, lienzo de la página y controles comunes. */

/* ═══════════════════════════════════════════════════════════════
   HALF · sistema de diseño
   ground  gris frío de taller     ink  azul-negro
   signal  azul de instrumento — sólo marca la medida válida
   tipos   DM Mono (telemetría) · Archivo (dato)
   ═══════════════════════════════════════════════════════════════ */
:root{
  --ground:#DFE1DA;
  --ink:#0F1211;
  --signal:#2438F5;
  --hair:rgba(15,18,17,.22);
  --mono:"DM Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --sans:"Archivo",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif;
  color-scheme:light;
}
[data-theme="dark"]{
  --ground:#0F1211;
  --ink:#DDE0D9;
  --signal:#5468FF;
  --hair:rgba(221,224,217,.22);
  color-scheme:dark;
}
/* destello: un solo fotograma en negativo al fallar */
[data-theme="light"].flash{--ground:#0F1211;--ink:#DDE0D9;--hair:rgba(221,224,217,.22)}
[data-theme="dark"].flash{--ground:#DFE1DA;--ink:#0F1211;--hair:rgba(15,18,17,.22)}
.flash body,.snap body{transition:none}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{height:100%;width:100%;overflow:hidden;overscroll-behavior:none}
body{
  background:var(--ground);color:var(--ink);
  font-family:var(--mono);font-weight:400;
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;
  user-select:none;-webkit-user-select:none;touch-action:none;
  transition:background .35s ease,color .35s ease;
}
#app{
  position:fixed;inset:0;overflow:hidden;display:grid;grid-template-rows:auto 1fr auto;
  padding:max(14px,env(safe-area-inset-top)) 18px max(16px,env(safe-area-inset-bottom));
}
.lnk{
  font:inherit;font-size:11px;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ink);background:none;border:0;padding:2px 0;cursor:pointer;
  border-bottom:1px solid var(--ink);
  /* son dos palabras contadas: si la fila se estrecha, que ceda el
     logotipo —que se reescala— y no «Cerrar» partido en dos          */
  white-space:nowrap;
}
.lnk[hidden]{display:none}
/* El único enlace con dibujo. La raya subraya la palabra y no el
   icono, que quedaría tachado por debajo. El `:not([hidden])` no es
   remilgo: un `display` puesto por identificador le ganaría a la
   regla de arriba y el botón saldría hasta cuando no hay nada que
   instalar.                                                         */
#install-intro:not([hidden]){display:inline-flex;align-items:center;gap:7px;border-bottom:0}
#install-intro svg{width:13px;height:13px;display:block;flex:none}
#install-intro span{border-bottom:1px solid var(--ink);padding-bottom:2px}
.lnk:focus-visible,.btn:focus-visible,.tag:focus-visible{outline:2px solid var(--signal);outline-offset:3px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}