/* Katenix — identidad visual común (sistema, módulos y página de venta).
   Laboratorio e instrumentación: porcelana fría, grafito, azul petróleo como color de marca
   y ámbar de instrumento para niveles y avisos. Tipografía técnica IBM Plex. */
:root {
  --fondo: #F3F5F5;
  --superficie: #FFFFFF;
  --superficie-2: #F7F9F9;
  --tinta: #17222A;
  --tinta-2: #3D4B54;
  --tenue: #66757E;
  --linea: #DCE2E4;
  --linea-fuerte: #BAC5C9;
  --senal: #0E5E70;          /* azul petróleo: marca, enlaces, selección */
  --senal-2: #3C8A9C;
  --senal-suave: #E4EFF1;
  --ambar: #B7771A;          /* ámbar de instrumento: niveles de estanque */
  --ambar-2: #8C5A10;
  --ambar-suave: #F8EEDC;
  --ok: #1D7A50;
  --ok-suave: #E2F1E9;
  --aviso: #A8650B;
  --aviso-suave: #FAEEDA;
  --peligro: #B3261E;
  --peligro-suave: #FAE3E0;
  --foco: #0E5E70;
  --sombra: 0 1px 2px rgba(23, 34, 42, .05), 0 6px 18px -10px rgba(23, 34, 42, .16);
  --radio: 6px;
  --radio-sm: 4px;
  --fuente: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif;
  --fuente-cond: 'IBM Plex Sans Condensed', 'IBM Plex Sans', 'Arial Narrow', sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, Menlo, Consolas, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --fondo: #0F1518; --superficie: #161E22; --superficie-2: #1B252A; --tinta: #E2E8EA; --tinta-2: #B3C0C5; --tenue: #8494A0;
    --linea: #263238; --linea-fuerte: #36464D; --senal: #5BB3C5; --senal-2: #86CAD7; --senal-suave: #12303A;
    --ambar: #E0A549; --ambar-2: #F0C27A; --ambar-suave: #34280F;
    --ok: #5CC08E; --ok-suave: #12301F; --aviso: #E3A548; --aviso-suave: #33270F; --peligro: #EF7F73; --peligro-suave: #3A1B18;
    --foco: #86CAD7; --sombra: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -10px rgba(0,0,0,.6); color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --fondo: #0F1518; --superficie: #161E22; --superficie-2: #1B252A; --tinta: #E2E8EA; --tinta-2: #B3C0C5; --tenue: #8494A0;
  --linea: #263238; --linea-fuerte: #36464D; --senal: #5BB3C5; --senal-2: #86CAD7; --senal-suave: #12303A;
  --ambar: #E0A549; --ambar-2: #F0C27A; --ambar-suave: #34280F;
  --ok: #5CC08E; --ok-suave: #12301F; --aviso: #E3A548; --aviso-suave: #33270F; --peligro: #EF7F73; --peligro-suave: #3A1B18;
  --foco: #86CAD7; --sombra: 0 1px 2px rgba(0,0,0,.3), 0 6px 18px -10px rgba(0,0,0,.6); color-scheme: dark;
}

/* Barra de progreso indeterminada (reemplaza cualquier animación de "pensando"). */
.progreso { position: relative; height: 3px; background: var(--linea); border-radius: 2px; overflow: hidden; margin: 8px 0; }
.progreso i { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--senal); border-radius: 2px; animation: kx-progreso 1.2s ease-in-out infinite; }
@keyframes kx-progreso { 0% { left: -30%; } 100% { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .progreso i { animation: none; width: 100%; opacity: .5; } }