/* ══════════════════════════════════════════════════════════════════════════════════════════════
   FILTROS — capa del componente único FB (norma: docs/arquitectura/SISTEMA_FILTROS.md)
   ══════════════════════════════════════════════════════════════════════════════════════════════
   AMPLÍA la capa canónica de components.css (.fb-wrap/.fb-bar/.fb-ctrl/.fb-seg/.fb-panel); no la
   redefine. Aquí viven solo las piezas NUEVAS del componente:
     · .fb-tiempo   agrupa segmento + fechas para que no se separen al envolver
     · .fb-ventana  la etiqueta de ventana activa CON su columna de fecha (obligatoria)
     · .fb-chips    fila de lo activo, cada chip con su ⊗
     · .fb-sheet    hoja inferior de móvil (patrón promovido desde control_tiempos, 05/08/2026)
   Se carga DESPUÉS de components.css y ANTES de las hojas de módulo.

   CONTRATO DE DESBORDAMIENTO: wrap, no scroll horizontal. La barra tiene tres zonas y en un
   teléfono no caben en una línea; un carril con la barra de desplazamiento oculta no tiene
   affordance —el usuario no sabe que hay más a la derecha— y en escritorio estrecho recortaba en
   silencio. Envolver es visible; desplazar sin pista, no.
   ══════════════════════════════════════════════════════════════════════════════════════════════ */

/* El HOST que el módulo crea para la barra desaparece de la maquetación: si no, se convierte en el
   bloque contenedor de .fb-wrap y mide exactamente lo que mide la barra, con lo que cualquier
   `position:sticky` que la hoja del módulo aplique a .fb-wrap deja de funcionar (sticky no puede
   salir de su bloque contenedor). Con display:contents, .fb-wrap vuelve a ser hijo de la página a
   efectos de layout, que es lo que asumen las reglas que ya existían. */
.fb-host { display:contents; }

/* La barra del componente envuelve (la .fb-bar canónica es nowrap para los módulos que aún no han
   migrado; scopeado a .fb-wrap[data-fb] para no tocarlos).
   CUIDADO: el `overflow-x:visible` NO es cosmético, sostiene el desplegable de empresa. La .fb-bar
   canónica trae `overflow-x:auto` (components.css) y el `pop` del selector vive DENTRO de la barra
   —es hermano del disparador, dentro del `.emp-sel` relativo—: con overflow auto quedaría recortado
   por la propia barra y aparecería una barra de desplazamiento en vez del desplegable. No revertir
   a `auto` sin sacar antes el pop de ahí (y sacarlo es justamente lo que rompió el anclaje). */
.fb-wrap[data-fb] .fb-bar { flex-wrap:wrap; overflow-x:visible; row-gap:var(--s-2); }

/* Zona 2: el segmento y sus fechas viajan juntos */
.fb-tiempo { display:inline-flex; align-items:center; gap:var(--s-2); flex-wrap:nowrap; }
.fb-sep { color:var(--text-3); font-size:12px; flex-shrink:0; }

/* Zona 1: el selector compartido tiene 38px propios y la barra 34: se alinea aquí, no en la hoja
   de ningún módulo (antes `.fb-bar .fb-ctrl-emp` vivía suelto en taller.css, sin scope de página). */
.fb-wrap[data-fb] .emp-sel__btn { min-height:var(--ctrl-h); height:var(--ctrl-h); }
.fb-wrap[data-fb] .fb-ctrl-emp { display:inline-flex; align-items:center; flex-shrink:0; }

/* ── Etiqueta de ventana activa ──────────────────────────────────────────────────────────────
   No es decorativa: es la que declara SOBRE QUÉ COLUMNA DE FECHA filtra el módulo, y es lo que
   hace legítimo que el periodo viaje entre módulos hermanos. */
.fb-ventana {
  margin-top:var(--s-2); padding-left:var(--s-1);
  font-family:var(--font-sans); font-size:var(--fs-label); color:var(--text-3);
  letter-spacing:.02em;
}

/* ── Chips de lo activo ──────────────────────────────────────────────────────────────────────
   Un filtro que no se pinta tampoco se puede quitar. */
.fb-chips { display:flex; flex-wrap:wrap; gap:var(--s-2); margin-top:var(--s-2); align-items:center; }
.fb-chips:empty { display:none; }
.fb-chip {
  display:inline-flex; align-items:center; gap:6px; padding:4px var(--s-2); min-height:28px;
  background:var(--accent-weak); border:1px solid var(--accent); border-radius:999px;
  font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi);
  color:var(--accent-strong); cursor:pointer; white-space:nowrap;
}
.fb-chip:hover { filter:brightness(.97); }
.fb-chip__x { font-size:10px; opacity:.7; }
.fb-chip--clear { background:transparent; border-color:var(--border); color:var(--text-2); font-weight:var(--fw-reg); }
.fb-aviso { font-size:var(--fs-label); color:var(--danger, #c0392b); font-weight:var(--fw-semi); }

/* ── Hoja inferior (móvil) ───────────────────────────────────────────────────────────────────
   Trabaja sobre un borrador y confirma en «Aplicar»: cerrar con el velo es cancelar. */
.fb-movil-abrir { display:none; }
.fb-hoja { display:none; }
/* z-index POR ENCIMA del dock de navegación móvil (.mobile-nav-dock, z-index:96 en shell.css).
   Con 90/91 el pie de la hoja —los botones «Limpiar» y «Aplicar filtros», que viven a ~68px del
   borde inferior— quedaba TAPADO por el dock y no se podía pulsar: la hoja se abría y no se podía
   confirmar. La versión que esto sustituye ya usaba 160/170 en control_tiempos.css; se conserva. */
.fb-scrim { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:160; }
.fb-sheet {
  position:fixed; left:0; right:0; bottom:0; z-index:170;
  max-height:88vh; display:flex; flex-direction:column;
  background:var(--surface); border-top-left-radius:16px; border-top-right-radius:16px;
  box-shadow:0 -8px 32px rgba(0,0,0,.28);
}
.fb-sheet__g { width:38px; height:4px; border-radius:2px; background:var(--border-strong); margin:8px auto 0; flex-shrink:0; }
.fb-sheet__h { display:flex; align-items:center; justify-content:space-between; padding:var(--s-3) var(--s-4) 0; flex-shrink:0; }
.fb-sheet__h h2 { margin:0; font-family:var(--font-sans); font-size:16px; font-weight:var(--fw-semi); }
.fb-sheet__b { overflow-y:auto; padding:var(--s-3) var(--s-4) var(--s-4); flex:1 1 auto; }
.fb-sheet__f { display:flex; gap:var(--s-2); padding:var(--s-3) var(--s-4); border-top:1px solid var(--border); flex-shrink:0; }
.fb-iconbtn { border:0; background:transparent; font-size:18px; color:var(--text-2); cursor:pointer; min-width:44px; min-height:44px; }
.fb-fg { margin-bottom:var(--s-4); }
.fb-fg__l { font-family:var(--font-sans); font-size:var(--fs-label); font-weight:var(--fw-semi); text-transform:uppercase; letter-spacing:.05em; color:var(--text-3); margin-bottom:var(--s-2); }
.fb-opts { display:flex; flex-wrap:wrap; gap:var(--s-2); }
.fb-opt {
  padding:8px var(--s-3); min-height:40px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font-sans); font-size:var(--fs-body); color:var(--text); cursor:pointer;
}
.fb-opt.is-on { background:var(--accent-weak); border-color:var(--accent); color:var(--accent-strong); font-weight:var(--fw-semi); }
.fb-dates { display:flex; align-items:center; gap:var(--s-2); margin-top:var(--s-2); }
.fb-inp {
  flex:1 1 0; min-width:0; height:44px; box-sizing:border-box; padding:0 var(--s-2);
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-sm);
  font-family:var(--font-num); font-size:var(--fs-body); color:var(--text);
}
.fb-btn {
  flex:1 1 0; min-height:44px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); font-family:var(--font-sans); font-size:var(--fs-body);
  font-weight:var(--fw-semi); color:var(--text); cursor:pointer;
}
.fb-btn--primary { background:var(--accent); border-color:var(--accent); color:#fff; }

/* La hoja solo se monta si la página la ha abierto */
.page.fb-sheet-on .fb-hoja { display:block; }

/* ── Móvil ───────────────────────────────────────────────────────────────────────────────────
   La barra en línea desaparece y todo el filtrado pasa por la hoja: en un teléfono, tres zonas y
   un panel plegable no caben sin convertir la cabecera en un laberinto. Sobreviven visibles los
   CHIPS (dicen qué filtra sin abrir nada) y la ETIQUETA DE VENTANA (dice sobre qué fecha). */
@media (max-width:768px) {
  .fb-wrap[data-fb] .fb-bar > *:not(.fb-movil-abrir):not(.fb-spacer) { display:none; }
  .fb-wrap[data-fb] .fb-movil-abrir { display:inline-flex; min-height:44px; }
  .fb-wrap[data-fb] .fb-panel { display:none !important; }
  .fb-wrap[data-fb] .emp-sel__pop { display:none; }
  .fb-chip { min-height:32px; }
}