/* ============================================================
   WOLFBITE UI · base.css · v1.0.0
   Reset mínimo, tipografía base, foco visible, utilidades y
   contenedores de app. Requiere tokens.css antes.
   ============================================================ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;font-size:100%}
body{
  background:var(--wb-navy);color:var(--wb-tinta);
  font-family:var(--wb-f-ui);font-size:var(--wb-t-base);line-height:var(--wb-lh);
  font-variant-numeric:tabular-nums;
  -webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;
  min-height:100dvh;
}
/* Mesa de plano: degradado fijo + retícula + resplandor (misma identidad que wolfbit.co).
   Va detrás de todo (z-index:-1) y no se mueve con el scroll; sin animación (es una herramienta). */
body::before{
  content:'';position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    linear-gradient(var(--wb-fondo-malla) 1px,transparent 1px),
    linear-gradient(90deg,var(--wb-fondo-malla) 1px,transparent 1px),
    radial-gradient(900px 600px at 12% -8%,var(--wb-aurora),transparent 62%),
    radial-gradient(700px 500px at 96% 18%,rgba(163,230,255,.14),transparent 60%),
    linear-gradient(165deg,var(--wb-navy) 0%,var(--wb-blueprint) 52%,var(--wb-blueprint-2) 100%);
  background-size:48px 48px,48px 48px,auto,auto,auto;
}
/* Texto que va directamente sobre la mesa (fuera de paneles) */
.wb-sobre-fondo{color:var(--wb-fondo-texto)}
.wb-sobre-fondo-2{color:var(--wb-fondo-texto-2)}
img,svg{max-width:100%;height:auto;display:block}
button,input,select,textarea{font:inherit;color:inherit;border-radius:var(--wb-radio)}
button{background:none;border:0;cursor:pointer}
button:disabled{cursor:not-allowed}
a{color:var(--wb-plano);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
a:hover{color:var(--wb-plano-osc)}
:focus-visible{outline:var(--wb-foco);outline-offset:var(--wb-foco-offset)}
::selection{background:var(--wb-plano-foco)}
strong,b{font-weight:600}
table{border-collapse:collapse;border-spacing:0}
hr{border:0;border-top:var(--wb-borde-fino) solid var(--wb-linea)}

/* ── Títulos de app ───────────────────────────────────── */
.wb-h1{font-family:var(--wb-f-titulo);font-weight:700;font-size:var(--wb-t-xl);line-height:var(--wb-lh-ajustado);letter-spacing:-.005em;text-wrap:balance}
.wb-h2{font-family:var(--wb-f-titulo);font-weight:600;font-size:var(--wb-t-lg);line-height:var(--wb-lh-ajustado);text-wrap:balance}
.wb-h3{font-family:var(--wb-f-titulo);font-weight:600;font-size:var(--wb-t-base);line-height:var(--wb-lh-ajustado)}
.wb-rotulo{font-family:var(--wb-f-mono);font-size:var(--wb-t-xs);font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:var(--wb-cota)}
.wb-mono{font-family:var(--wb-f-mono)}
.wb-cota{color:var(--wb-cota);font-size:var(--wb-t-sm)}
.wb-p{color:var(--wb-tinta-2);max-width:62ch}

/* ── Montos (siempre mono tabular) ───────────────────── */
.wb-monto{font-family:var(--wb-f-mono);font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}
.wb-monto--lg{font-size:var(--wb-t-monto)}
.wb-monto--xl{font-size:var(--wb-t-monto-xl);line-height:1.1}
.wb-monto.is-pos,.is-pos{color:var(--wb-ok)}
.wb-monto.is-neg,.is-neg{color:var(--wb-oxido)}
.wb-num{font-family:var(--wb-f-mono);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

/* ── Contenedores ─────────────────────────────────────── */
.wb-app{min-height:100dvh;display:flex;flex-direction:column}
.wb-container{width:100%;margin-inline:auto;padding-inline:var(--wb-s4)}
.wb-container--estrecho{max-width:var(--wb-ancho-estrecho)}
.wb-container--ancho{max-width:var(--wb-ancho-ancho)}
/* contenido principal: deja espacio a la barra inferior + FAB en móvil */
.wb-content{flex:1;padding-block:var(--wb-s4) calc(var(--wb-nav-h) + var(--wb-safe-b) + var(--wb-s7))}
@media(min-width:700px){.wb-content{padding-block:var(--wb-s6) var(--wb-s8)}}
.wb-malla{background-image:linear-gradient(var(--wb-malla) 1px,transparent 1px),linear-gradient(90deg,var(--wb-malla) 1px,transparent 1px);background-size:48px 48px}

/* ── Composición ──────────────────────────────────────── */
/* Guarda anti-desborde: los hijos de grids/flex no pueden forzar el ancho
   del contenedor (min-width:auto es la causa nº1 de scroll horizontal) */
.wb-stack>*,.wb-cluster>*,.wb-grid-2>*,.wb-grid-3>*,.wb-fields-2>*,.wb-stats>*,.wb-between>*{min-width:0}
pre,code,.wb-scroll-x{min-width:0;max-width:100%}
.wb-stack{display:flex;flex-direction:column;gap:var(--wb-s4)}
.wb-stack--sm{gap:var(--wb-s2)}
.wb-stack--lg{gap:var(--wb-s6)}
.wb-cluster{display:flex;flex-wrap:wrap;gap:var(--wb-s2);align-items:center}
.wb-between{display:flex;justify-content:space-between;align-items:center;gap:var(--wb-s3)}
.wb-grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wb-s3)}
.wb-grid-3{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--wb-s3)}
@media(min-width:700px){.wb-grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.wb-right{text-align:right}
.wb-center{text-align:center}
.wb-mt-2{margin-top:var(--wb-s2)} .wb-mt-4{margin-top:var(--wb-s4)} .wb-mt-6{margin-top:var(--wb-s6)}
.wb-mb-2{margin-bottom:var(--wb-s2)} .wb-mb-4{margin-bottom:var(--wb-s4)}

/* ── Utilidades de estado ─────────────────────────────── */
.wb-hidden{display:none!important}
.wb-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.wb-scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}

/* ── Movimiento ───────────────────────────────────────── */
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}