/* @overa/ui-kit 0.12.0 · una consola de la suite montada con `OveraSuiteShell.mountConsole` (js/suite-console.js):
   `body.ov-console`, que se pone fuera de un iframe. Lo que atlas inyectaba en su menu.js y Helios tenía en su
   suite-nav.css, igual en las dos (U3). */

/* la cabecera mide lo del kit (barra 70 + pestaña 46 + migas 40): `--cfg-alto` es de donde sale el hueco de arriba */
body.ov-console {
  --cfg-alto: var(--ov-sh-head);
  /* lo que flota (modales, avisos) va por encima de la barra y del menú */
  --capa-modal: 1200;
  --capa-encima: 1250;
  --capa-aviso: 1300;
}
/* el contenido, a la derecha del menú de la suite */
@media (min-width: 901px) {
  body.ov-console.ov-shell-side .layout,
  body.ov-console .layout { padding-left: calc(var(--ov-sh-side) + 24px); transition: padding-left .15s ease; }
}
/* LAS MIGAS SON LA FRANJA DEL KIT: #crumb lleva `.ov-sh-crumbs` (la coloca el kit) */
body.ov-console .crumb.ov-sh-crumbs {
  position: fixed; top: calc(var(--ov-sh-bar-h) + var(--ov-sh-tabs-h)); left: var(--ov-sh-side); right: 0;
  height: var(--ov-sh-crumbs-h); margin: 0; padding: 0 24px; box-shadow: none; background: var(--ov-sh-bg);
  border: 0; border-bottom: 1px solid var(--ov-sh-rule); z-index: 998; display: flex; align-items: center;
}
@media (max-width: 900px) { body.ov-console .crumb.ov-sh-crumbs { left: 0; } }
body.ov-console .crumb.ov-sh-crumbs span.sep { margin: 0 10px; color: var(--ov-sh-ink3); }
body.ov-console .crumb.ov-sh-crumbs .croot,
body.ov-console .crumb.ov-sh-crumbs .cfijo { color: var(--ov-sh-ink3); }
body.ov-console .crumb.ov-sh-crumbs .croot:hover { color: var(--ov-sh-ink); }
/* sin el engranaje en la barra: el menú está en el lateral (dentro de un iframe sí, y no lleva esta clase) */
body.ov-console #ajustes, body.ov-console .cfg, body.ov-console .cfgpanel { display: none !important; }

/* lo de la derecha de la barra: el despacho */
body.ov-console .ov-console-extra { display: flex; align-items: center; gap: 6px; }
body.ov-console .ov-console-extra .desp-btn { color: var(--ov-sh-bar-ink); border-color: var(--ov-sh-bar-line); height: 32px; }
body.ov-console .ov-console-extra .desp-btn:hover,
body.ov-console .ov-console-extra .desp-btn[aria-expanded="true"] { background: var(--ov-sh-bar-control); border-color: var(--ov-sh-bar-muted); }
@media (max-width: 700px) { body.ov-console .ov-console-extra .desp-btn .desp-nm { display: none; } }

/* ── LA BARRA DE FILTROS DE LA SUITE (0.19.0, 2026-10-14) ─────────────────────────────────────────────────────────
   Francisco: «utiliza los mismos componentes y estilos en ambas aplicaciones… visualmente tienen que ser iguales».
   Es la de Atlas (inventario: buscar, estado, origen), movida aquí para que Helios (sitio, rango, días) la use igual.
   Los tokens son los de Atlas (`--color-*`) y, donde la app no los tiene (Helios), sus valores: así las dos se ven
   IGUAL, y Atlas conserva su modo oscuro. Marcado: UI-GUIDE.md «Barra de filtros». */
.ov-filters {
  --of-h: 36px;
  --of-bg: var(--color-surface-sunken, #f5f5f5);
  --of-bg-focus: var(--color-surface, #ffffff);
  --of-border: var(--color-border, #e0e0e0);
  --of-border-hover: var(--color-border-strong, #c4c4c4);
  --of-r: var(--radius-md, 6px);
  --of-ink: var(--color-text, #1f1f1f);
  --of-ink2: var(--color-text-secondary, #474747);
  --of-ink3: var(--color-text-tertiary, #8a8a8a);
  --of-primary: var(--color-primary, #4a8bd4);
  --of-ring: var(--focus-ring, 0 0 0 3px rgba(74, 139, 212, .25));
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px;
}
.ov-filters > * { flex: none; }
.ov-filters select,
.ov-filters input[type=search],
.ov-filters input[type=text],
.ov-filters input[type=number],
.ov-filters input[type=date],
.ov-filters input[type=datetime-local] {
  height: var(--of-h); box-sizing: border-box; padding: 0 10px; margin: 0; max-width: 100%;
  border: 1px solid var(--of-border); border-radius: var(--of-r); background-color: var(--of-bg);
  color: var(--of-ink); font: inherit; font-size: 14px; line-height: normal;
  transition: border-color .12s ease, box-shadow .12s ease, background-color .12s ease;
}
.ov-filters select { padding-right: 28px; cursor: pointer; }
/* la búsqueda se estira y lleva su lupa, como en Atlas */
.ov-filters input[type=search] {
  flex: 1 1 280px; min-width: 200px; padding-left: 36px;
  background-repeat: no-repeat; background-position: 12px 50%; background-size: 16px 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a96a3' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
}
.ov-filters :is(select, input):hover:not(:disabled):not(:focus) { border-color: var(--of-border-hover); }
.ov-filters :is(select, input):focus { outline: none; background-color: var(--of-bg-focus); border-color: var(--of-primary); box-shadow: var(--of-ring); }
.ov-filters :is(select, input):disabled { opacity: .55; cursor: not-allowed; }
/* un control con su etiqueta delante («Rango [24 horas]»), en la MISMA línea */
.ov-filters .ov-filters-field { display: inline-flex; align-items: center; gap: 6px; }
.ov-filters .ov-filters-label { font-size: 12.5px; font-weight: 600; color: var(--of-ink2); white-space: nowrap; }
/* lo que explica el control («un punto cada 10 min»): pequeño y a continuación, sin otra línea */
.ov-filters .ov-filters-hint { font-size: 12px; color: var(--of-ink3); white-space: nowrap; }
/* lo que va a la derecha del todo (el alta, el refresco) */
.ov-filters .ov-filters-end { margin-left: auto; }
/* botones de la barra, con la altura de los campos */
.ov-filters .ov-filters-btn {
  height: var(--of-h); padding: 0 14px; border: 1px solid var(--of-border); border-radius: var(--of-r);
  background: var(--of-bg-focus); color: var(--of-ink); font: inherit; font-size: 14px; cursor: pointer;
}
.ov-filters .ov-filters-btn:hover:not(:disabled) { border-color: var(--of-border-hover); }
.ov-filters .ov-filters-btn.primary { background: var(--of-primary); border-color: var(--of-primary); color: #fff; }
/* elección rápida entre pocas opciones (1 h · 24 h · 7 d): un grupo de botones en vez de un desplegable */
.ov-filters .ov-seg { display: inline-flex; height: var(--of-h); box-sizing: border-box; padding: 2px; gap: 2px;
  border: 1px solid var(--of-border); border-radius: var(--of-r); background: var(--of-bg); }
.ov-filters .ov-seg button { height: 100%; padding: 0 12px; border: 0; border-radius: calc(var(--of-r) - 2px);
  background: transparent; color: var(--of-ink2); font: inherit; font-size: 13px; cursor: pointer; }
.ov-filters .ov-seg button:hover { color: var(--of-ink); }
.ov-filters .ov-seg button[aria-pressed=true] { background: var(--of-bg-focus); color: var(--of-ink); font-weight: 600;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .08); }
@media (max-width: 600px) { .ov-filters > * { flex: 1 1 100%; } .ov-filters .ov-filters-end { margin-left: 0; } }