/* La Forja de Ideas · base */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--text); }
img, svg { display: block; }

:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

.t-title { margin: 0; font-size: var(--fs-title); line-height: var(--lh-title); font-weight: 600; letter-spacing: -.01em; }
.t-muted { color: var(--text-2); font-size: var(--fs-sm); line-height: var(--lh-sm); }
.t-hint  { color: var(--text-2); font-size: var(--fs-xs); }

/* Estructura de la app */
.app {
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding-bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom, 0px));
}
.app-main { flex: 1; display: flex; flex-direction: column; min-height: 0; }

@media (min-width: 900px) {
  .app { padding-bottom: 0; padding-left: var(--sidebar-w); }
  .app-main { max-width: 760px; width: 100%; margin: 0 auto; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}