/* GENERATED desde /Applications/XAMPP/htdocs/obox/assets/css_onebox/omnis-core.css por trim-ob-css.py — no editar a mano.
   Recortador: ~/.config/opencode/outputs/css-trim/trim-ob-css.py
   (selectores sin uso en el sitio; universo = /ob/**.php+js) */
@layer omnis.tokens, omnis.base, omnis.shell, omnis.ui, omnis.utilities;
@layer omnis.base {
  *,
*::before,
*::after { box-sizing: border-box; }
  body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--tipo-base);
    font-size: var(--fluid-base);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  h1,
h2,
h3,
h4,
h5,
h6 { margin: 0 0 var(--space-sm); line-height: 1.25; font-weight: 600; }
  h1 { font-size: var(--fluid-2xl); }
  h2 { font-size: var(--fluid-xl); }
  h3 { font-size: var(--fluid-lg); }
  h4 { font-size: var(--fluid-md); }
  h5 { font-size: var(--fluid-base); }
  h6 { font-size: var(--fluid-base); color: var(--text-soft, inherit); font-weight: 500; }
  h5,
h6 { margin-top: var(--space-md); }
  p { margin: 0 0 var(--space-md); }
  a { color: var(--brand); text-decoration: none; }
  a:hover { color: var(--brand-hover); text-decoration: underline; }
  a.btn {
    color: revert-layer;
  }
  img { max-width: 100%; height: auto; }
  :focus-visible {
    outline: 2px solid var(--brand);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
  }
  @media (prefers-reduced-motion: reduce) {
    *,
*::before,
*::after {
      animation-duration: 0.01ms !important;
      transition-duration: 0.01ms !important;
    }
  }
}
@layer omnis.shell {
  .app {
    display: grid;
    grid-template-columns: var(--sidebar-w) 1fr;
    grid-template-rows: var(--topbar-h) 1fr;
    grid-template-areas: "brand topbar" "nav main";
    height: 100vh;
    height: 100dvh;
    overflow: hidden;
  }
  .app__brand {
    grid-area: brand;
    display: flex; align-items: center; gap: var(--space-sm);
    padding-inline: var(--space-md);
    background: var(--nav-bg);
    color: var(--brand-contrast);
    font-weight: 600;
    border-bottom: 1px solid var(--nav-rule);
  }
  .app__brand-mark {
    width: 28px; height: 28px; flex: none;
    display: grid; place-items: center;
    background: var(--brand); color: var(--brand-contrast);
    border-radius: var(--radius-sm);
    font-size: var(--fluid-sm);
  }
  .app__topbar {
    grid-area: topbar;
    display: flex; align-items: center; gap: var(--space-md);
    padding-inline: var(--space-lg);
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 20;
  }
  .app__nav {
    grid-area: nav;
    background: var(--nav-bg);
    padding: var(--space-sm) 0;
    overflow-y: auto;
    /* Scrollbar nativo: niceScroll se retiró en 2026-09-10 */
    scrollbar-width: thin;
    scrollbar-color: #57534e transparent;
  }
  .app__main {
    grid-area: main;
    padding: var(--space-xl);
    /* El panel que scrollea es éste, no el documento. */
    overflow: auto;
    /* Nada de `scroll-behavior: smooth` aquí: convierte cada salto en una
       animación que hay que esperar, y donde el navegador no la corre
       —capturas, pestaña oculta, motor sin animaciones— el salto
       sencillamente no ocurre. Un enlace a una sección tiene que llegar. */
  }
  @media print {
    .app { height: auto; overflow: visible; display: block; }
    .app__main { overflow: visible; padding: 0; }
  }
  .app[data-nav="mini"] { grid-template-columns: var(--sidebar-sm) 1fr; }
  .app[data-nav="mini"] .app__brand-text { display: none; }
  @media (max-width: 840px) {
    .app,
.app[data-nav="mini"],
.app[data-nav="open"] {
      grid-template-columns: 1fr;
      grid-template-areas: "topbar" "main";
    }
    .app__brand { display: none; }
    .app__nav {
      position: fixed; inset-block: 0; inset-inline-start: 0;
      width: min(80vw, var(--sidebar-w));
      transform: translateX(-100%);
      transition: transform var(--t-base);
      z-index: 40;
    }
    .app[data-nav="open"] .app__nav { transform: none; }
    .app[data-nav="open"]::after {
      content: ""; position: fixed; inset: 0;
      background: rgb(0 0 0 / 0.45); z-index: 30;
    }
  }
}
@layer omnis.ui {
  .omnis-dots {
    position: relative;
    display: inline-block;
    width: 0.32em;
    height: 0.32em;
    margin: 0 0.62em;          /* el hueco donde caen los dos hermanos */
    border-radius: 50%;
    background: currentColor;
    animation: omnisDots 1.4s ease-in-out 0.16s infinite;
  }
  .omnis-dots::before,
.omnis-dots::after {
    content: "";
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: currentColor;
    animation: omnisDots 1.4s ease-in-out infinite;
  }
  .omnis-dots::before { left: -0.62em; }
  .omnis-dots::after { left:  0.62em; animation-delay: 0.32s; }
  @keyframes omnisDots {
    0%, 60%, 100% { transform: translateY(0);       opacity: 0.35; }
    30%           { transform: translateY(-0.42em); opacity: 1; }
  }
  .omnis-busy {
    display: inline-flex;
    align-items: baseline;
    gap: 0.15em;
    color: var(--text-mute);
  }
  .omnis-busy-label {
    background: linear-gradient(90deg,
      var(--text-mute)  0%,
      var(--text-mute) 45%,
      var(--text)      50%,
      var(--text-mute) 55%,
      var(--text-mute) 100%);
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;   /* Safari lo pide aparte */
    animation: omnisBusySweep 2.4s linear infinite;
  }
  @keyframes omnisBusySweep {
    from { background-position: 100% 0; }
    to   { background-position:   0% 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .omnis-dots,
.omnis-dots::before,
.omnis-dots::after { animation: none; opacity: 0.55; }
    .omnis-busy-label {
      animation: none;
      background: none;
      color: var(--text-mute);
      -webkit-text-fill-color: currentColor;
    }
  }
}