/* Shell BOSCA Quality Platform. Todo con prefijo .bqp- (los módulos usan .m-<id>).
   Referencia: preview aprobado — sidebar angosto oscuro, header integrado, densidad alta. */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; color: var(--bqp-text);
  font: 13px/1.4 var(--bqp-font); -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
  background:
    radial-gradient(1100px 600px at 75% 0%, rgba(47, 143, 255, .08), transparent 60%),
    linear-gradient(180deg, #071427 0%, var(--bqp-bg) 60%);
  background-color: var(--bqp-bg);
  background-attachment: fixed;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
.bqp-ico { width: 18px; height: 18px; flex: none; }

/* Layout */
.bqp-app { display: grid; grid-template-columns: var(--bqp-sidebar-w) minmax(0, 1fr); min-height: 100vh; }
.bqp-app.sidebar-oculto { grid-template-columns: 0 minmax(0, 1fr); }
.bqp-app.sidebar-oculto .bqp-sidebar { visibility: hidden; }
.bqp-main { min-width: 0; display: flex; flex-direction: column; position: relative; }
.bqp-content { flex: 1; padding: 10px 14px 16px; outline: none; min-width: 0; }
.bqp-content:focus, .bqp-content:focus-visible { outline: none; }

/* Sidebar */
.bqp-sidebar {
  position: sticky; top: 0; height: 100vh; overflow-y: auto; overflow-x: hidden; display: flex; flex-direction: column;
  background: linear-gradient(180deg, #0a1a30 0%, var(--bqp-sidebar) 40%, #050f1e 100%);
  border-right: 1px solid var(--bqp-border-soft);
  scrollbar-width: thin; scrollbar-color: var(--bqp-surface-3) transparent;
}
.bqp-brand { position: relative; padding: 12px 16px 8px; }
.bqp-brand__logo { display: inline-flex; flex-direction: column; line-height: 1; }
.bqp-brand__logo strong {
  font: 900 30px/0.95 var(--bqp-font-logo); letter-spacing: .01em; color: var(--bqp-accent);
  text-shadow: 0 0 18px rgba(255, 122, 26, .25);
}
.bqp-brand__logo span { margin-top: 4px; font: 700 8.6px/1 var(--bqp-font); letter-spacing: .32em; text-transform: uppercase; color: var(--bqp-text); }
.bqp-brand__lema { margin: 7px 0 0; font-size: 11.5px; line-height: 1.3; color: var(--bqp-text-2); }
.bqp-brand__cerrar { position: absolute; right: 8px; top: 10px; }
.bqp-nav { padding: 4px 8px 12px; flex: 1; }
.bqp-nav__group { margin-top: 6px; }
.bqp-nav__title {
  display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 3px 8px; margin: 0 0 1px;
  border: 0; border-radius: 5px; background: none; cursor: pointer; text-align: left;
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--bqp-text-2);
}
.bqp-nav__title:hover { color: var(--bqp-text); background: rgba(255, 255, 255, .03); }
.bqp-nav__chev { width: 13px; height: 13px; color: var(--bqp-text-3); transition: transform .15s ease; }
.bqp-nav__group.is-cerrada .bqp-nav__chev { transform: rotate(-90deg); }
.bqp-nav__group.is-cerrada .bqp-nav__items { display: none; }
.bqp-nav__group.is-cerrada .bqp-nav__title { color: var(--bqp-text-3); }
.bqp-nav__item {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 3px 8px; border-radius: var(--bqp-radius-sm);
  color: var(--bqp-text); font-size: 12px; line-height: 1.25; border: 1px solid transparent;
  transition: background .12s, color .12s;
}
.bqp-nav__item .bqp-ico { width: 16px; height: 16px; color: var(--bqp-text-2); }
.bqp-nav__item:hover { background: var(--bqp-surface-2); }
.bqp-nav__item.is-active {
  margin-bottom: 2px; padding-block: 7px; color: var(--bqp-accent); font-weight: 600; font-size: 12.5px;
  background: linear-gradient(90deg, rgba(255, 122, 26, .22), rgba(255, 122, 26, .04));
  border-color: rgba(255, 122, 26, .35); box-shadow: 0 0 18px rgba(255, 122, 26, .12);
}
.bqp-nav__item.is-active::before { content: ""; position: absolute; left: -8px; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--bqp-accent); box-shadow: 0 0 10px var(--bqp-accent); }
.bqp-nav__item.is-active .bqp-ico { color: var(--bqp-accent); width: 18px; height: 18px; }
.bqp-nav__item.is-futuro { opacity: .72; }
.bqp-sidebar__foot { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--bqp-border-soft); font-size: 10.5px; color: var(--bqp-text-3); }

/* Header */
.bqp-header {
  position: sticky; top: env(safe-area-inset-top, 0px); z-index: 20; display: flex; align-items: center; gap: 12px;
  min-height: var(--bqp-header-h); padding: 8px 18px 8px 10px;
  background: rgba(6, 18, 35, .88); backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bqp-border-soft);
}
.bqp-app.en-inicio .bqp-header { background: linear-gradient(180deg, rgba(5, 14, 28, .55), rgba(5, 14, 28, .15)); border-bottom-color: rgba(47, 143, 255, .14); backdrop-filter: none; }
.bqp-search {
  position: relative; display: flex; align-items: center; gap: 9px; flex: 0 1 380px; min-width: 0; height: 34px; padding: 0 12px;
  background: rgba(10, 26, 48, .72); border: 1px solid var(--bqp-border); border-radius: 999px; color: var(--bqp-text-2);
}
.bqp-search .bqp-ico { width: 16px; height: 16px; }
.bqp-search:focus-within { border-color: var(--bqp-tech-line); box-shadow: 0 0 0 3px var(--bqp-tech-soft); }
.bqp-search input { flex: 1; min-width: 0; height: 100%; background: none; border: 0; outline: 0; color: var(--bqp-text); font: inherit; font-size: 12.5px; }
.bqp-search input::placeholder { color: var(--bqp-text-2); }
.bqp-search kbd { font: 11px var(--bqp-font); color: var(--bqp-text-3); }
.bqp-search__res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; padding: 6px; background: var(--bqp-surface-2); border: 1px solid var(--bqp-border); border-radius: 10px; box-shadow: var(--bqp-shadow); z-index: 30; }
.bqp-search__res a { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 6px; color: var(--bqp-text); }
.bqp-search__res a:hover, .bqp-search__res a.is-first { background: var(--bqp-surface-3); }
.bqp-search__res small { margin-left: auto; color: var(--bqp-text-3); font-size: 11px; }
.bqp-search__res p { margin: 6px 8px; color: var(--bqp-text-2); font-size: 12px; }
.bqp-header__sp { flex: 1; }
.bqp-iconbtn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; flex: none; border-radius: 8px; border: 1px solid transparent; background: none; color: var(--bqp-text); cursor: pointer; }
.bqp-iconbtn:hover { background: rgba(255, 255, 255, .06); }
.bqp-iconbtn .bqp-ico { width: 20px; height: 20px; }
.bqp-badge { position: absolute; top: 4px; right: 5px; min-width: 15px; height: 15px; padding: 0 4px; border-radius: 8px; background: var(--bqp-crit); color: #fff; font: 700 9.5px/15px var(--bqp-font); }
.bqp-pop-wrap { position: relative; margin-left: auto; }
.bqp-pop { position: absolute; right: 0; top: calc(100% + 8px); width: 300px; padding: 8px; background: var(--bqp-surface-2); border: 1px solid var(--bqp-border); border-radius: 10px; box-shadow: var(--bqp-shadow); z-index: 30; }
.bqp-pop__head { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 8px; font-weight: 600; }
.bqp-pop ul { list-style: none; margin: 0; padding: 0; }
.bqp-pop li { display: flex; gap: 10px; align-items: baseline; padding: 8px; border-top: 1px solid var(--bqp-border-soft); color: var(--bqp-text-2); font-size: 12.5px; }
.bqp-user { display: flex; align-items: center; gap: 10px; padding-left: 8px; }
.bqp-user__avatar {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; flex: none;
  background: linear-gradient(135deg, #1d4a7d, #0f2a4a); border: 2px solid var(--bqp-accent); font-weight: 700; font-size: 12px;
}
.bqp-user__txt { display: flex; flex-direction: column; line-height: 1.2; }
.bqp-user__txt strong { font-size: 12.5px; }
.bqp-user__txt small { color: var(--bqp-text-2); font-size: 11px; }
.bqp-user__chev { width: 16px; height: 16px; margin-left: 6px; color: var(--bqp-text-2); }

/* Componentes compartidos */
.bqp-card { background: var(--bqp-surface); border: 1px solid var(--bqp-border-soft); border-radius: var(--bqp-radius); box-shadow: var(--bqp-shadow); min-width: 0; }
.bqp-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 14px 0; }
.bqp-card__head h2 { margin: 0; font: 600 14px var(--bqp-font-display); }
.bqp-card__body { padding: 12px 14px 14px; }
.bqp-chip { display: inline-flex; align-items: center; gap: 6px; padding: 2px 9px; border-radius: 6px; font-size: 11px; font-weight: 600; white-space: nowrap; }
.bqp-chip i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.bqp-chip--ok { color: var(--bqp-ok); background: var(--bqp-ok-soft); }
.bqp-chip--warn { color: var(--bqp-warn); background: var(--bqp-warn-soft); }
.bqp-chip--crit { color: var(--bqp-crit); background: var(--bqp-crit-soft); }
.bqp-chip--info { color: var(--bqp-tech-2); background: var(--bqp-info-soft); }
.bqp-chip--neutro { color: var(--bqp-text-2); background: var(--bqp-neutral-soft); }
.bqp-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; }
.bqp-dot--ok { background: var(--bqp-ok); } .bqp-dot--warn { background: var(--bqp-warn); }
.bqp-dot--crit { background: var(--bqp-crit); } .bqp-dot--info { background: var(--bqp-info); }
.bqp-demo { display: inline-block; padding: 1px 6px; border: 1px dashed var(--bqp-accent-line); border-radius: 4px; color: var(--bqp-accent); font: 600 9.5px/1.4 var(--bqp-mono); letter-spacing: .08em; vertical-align: middle; }
.bqp-btn { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--bqp-border); background: var(--bqp-surface-2); color: var(--bqp-text); font-weight: 600; font-size: 12.5px; cursor: pointer; }
.bqp-btn:hover { border-color: var(--bqp-accent-line); }
.bqp-muted { color: var(--bqp-text-3); }
.bqp-vacio { max-width: 520px; margin: 8vh auto 0; text-align: center; padding: 30px 24px; background: var(--bqp-surface); border: 1px dashed var(--bqp-border); border-radius: 12px; }
.bqp-vacio__ico { width: 50px; height: 50px; margin: 0 auto 12px; display: grid; place-items: center; border-radius: 12px; background: var(--bqp-accent-soft); color: var(--bqp-accent); }
.bqp-vacio__ico .bqp-ico { width: 24px; height: 24px; }
.bqp-vacio h2 { margin: 0 0 6px; font: 600 18px var(--bqp-font-display); }
.bqp-vacio p { margin: 4px 0; color: var(--bqp-text-2); }
.bqp-vacio .bqp-btn { margin-top: 16px; }
.bqp-vacio--error .bqp-vacio__ico { background: var(--bqp-crit-soft); color: var(--bqp-crit); }
.bqp-only-mobile { display: none; }
.bqp-scrim { position: fixed; inset: 0; background: rgba(3, 8, 16, .6); z-index: 39; }
:focus-visible { outline: 2px solid var(--bqp-accent); outline-offset: 2px; }

/* Pantalla base de módulo (nucleo/componentes/modulo-base.js) */
.bqp-mb { display: flex; flex-direction: column; gap: 12px; max-width: 1240px; }
.bqp-mb__head {
  position: relative; overflow: hidden; display: flex; align-items: center; gap: 16px; padding: 18px 20px; border-radius: 12px;
  background: radial-gradient(420px 160px at 92% 0%, rgba(255, 122, 26, .12), transparent 70%), linear-gradient(120deg, #0e2442, #0a1b33 60%, #0b1d36);
  border: 1px solid var(--bqp-border);
}
.bqp-mb__ico { flex: none; width: 54px; height: 54px; border-radius: 12px; display: grid; place-items: center; color: var(--bqp-accent); background: var(--bqp-accent-soft); border: 1px solid var(--bqp-accent-line); box-shadow: 0 0 18px rgba(255, 122, 26, .18); }
.bqp-mb__ico .bqp-ico { width: 28px; height: 28px; }
.bqp-mb__tit { flex: 1; min-width: 0; }
.bqp-mb__ruta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0; font-size: 11.5px; color: var(--bqp-text-2); }
.bqp-mb__ruta a { color: var(--bqp-tech-2); }
.bqp-mb__ruta span { color: var(--bqp-text-3); }
.bqp-mb__tit h1 { margin: 2px 0 0; font: 700 24px/1.15 var(--bqp-font-display); }
.bqp-mb__prop { margin: 4px 0 0; font-size: 13.5px; color: var(--bqp-text); max-width: 70ch; }
.bqp-mb__chips { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bqp-mb__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.bqp-mb__card { min-width: 0; padding: 14px 16px; border-radius: var(--bqp-radius); background: linear-gradient(180deg, rgba(14, 36, 64, .78), rgba(10, 28, 50, .78)); border: 1px solid var(--bqp-border-soft); }
.bqp-mb__card--ancha { grid-column: 1 / -1; }
.bqp-mb__card h2 { display: flex; align-items: center; gap: 9px; margin: 0 0 10px; font: 600 14px var(--bqp-font-display); }
.bqp-mb__card h2 .bqp-ico { color: var(--bqp-tech-2); }
.bqp-mb__metodo { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.bqp-mb__metodo li { display: flex; align-items: center; gap: 9px; padding: 4px 6px; border-radius: 6px; font-size: 12.5px; color: var(--bqp-text-3); }
.bqp-mb__metodo b { width: 20px; height: 20px; flex: none; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--bqp-border); font-size: 10.5px; }
.bqp-mb__metodo .is-hecho { color: var(--bqp-ok); }
.bqp-mb__metodo .is-hecho .bqp-ico { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--bqp-ok-soft); }
.bqp-mb__metodo .is-siguiente { color: var(--bqp-text); background: var(--bqp-accent-soft); }
.bqp-mb__metodo .is-siguiente b { border-color: var(--bqp-accent); color: var(--bqp-accent); }
.bqp-mb__metodo em { margin-left: auto; font-style: normal; font-size: 10.5px; font-weight: 600; color: var(--bqp-accent); }
.bqp-mb__conf { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.bqp-mb__conf li { padding: 8px 10px; border-radius: 8px; background: rgba(6, 18, 35, .45); border: 1px solid var(--bqp-border-soft); }
.bqp-mb__conf p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.4; }
.bqp-mb__origen { font: 600 9.5px/1 var(--bqp-mono); letter-spacing: .08em; color: var(--bqp-tech-2); }
.bqp-mb__vacio { margin: 0; padding: 14px; text-align: center; border: 1px dashed var(--bqp-border); border-radius: 8px; color: var(--bqp-text-2); font-size: 12.5px; }
.bqp-mb__nota { margin: 10px 0 0; font-size: 11.5px; color: var(--bqp-text-3); }
.bqp-mb__chat { margin: 0; padding: 9px 12px; border-radius: 8px; background: var(--bqp-tech-soft); border: 1px solid var(--bqp-tech-line); font-weight: 600; font-size: 13px; }
.bqp-mb__txt { margin: 9px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--bqp-text-2); }
.bqp-mb__flujo { list-style: none; margin: 0; padding: 0 0 4px; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin; }
.bqp-mb__flujo li { position: relative; flex: 1 0 auto; min-width: 92px; padding: 9px 10px; border-radius: 8px; text-align: center; font-size: 12px; color: var(--bqp-text-2); background: rgba(6, 18, 35, .45); border: 1px solid var(--bqp-border-soft); }
.bqp-mb__flujo li.is-aqui { color: var(--bqp-text); font-weight: 600; background: var(--bqp-accent-soft); border-color: var(--bqp-accent-line); box-shadow: 0 0 14px rgba(255, 122, 26, .15); }
.bqp-mb__nav { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
.bqp-mb__nav .bqp-btn .bqp-ico { width: 16px; height: 16px; }
.bqp-mb__izq { transform: rotate(180deg); }
@media (max-width: 1099px) { .bqp-mb__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 719px) {
  .bqp-mb__head { flex-wrap: wrap; padding: 16px; }
  .bqp-mb__chips { flex-direction: row; align-items: flex-start; flex-wrap: wrap; width: 100%; }
  .bqp-mb__tit h1 { font-size: 21px; }
  .bqp-mb__grid { grid-template-columns: minmax(0, 1fr); }
  .bqp-mb__nav { justify-content: center; }
}

/* Tablet / móvil: sidebar como cajón */
@media (max-width: 1023px) {
  .bqp-app, .bqp-app.sidebar-oculto { grid-template-columns: minmax(0, 1fr); }
  .bqp-app.sidebar-oculto .bqp-sidebar { visibility: visible; }
  .bqp-sidebar { position: fixed; z-index: 40; left: 0; top: 0; width: min(260px, 84vw); transform: translateX(-100%); transition: transform .2s ease; }
  .bqp-app.menu-abierto .bqp-sidebar { transform: none; box-shadow: 0 0 40px rgba(0, 0, 0, .6); }
  .bqp-only-mobile { display: inline-grid; }
  .bqp-header { padding: 8px 12px 8px 6px; gap: 6px; }
  .bqp-content { padding: 12px 12px 24px; }
  .bqp-user__txt, .bqp-user__chev { display: none; }
  .bqp-search kbd { display: none; }
}
@media (min-width: 720px) and (max-width: 1023px) {
  .bqp-header [data-accion="buscar-movil"] { display: none; }
}
@media (max-width: 719px) {
  .bqp-search { display: none; }
  .bqp-header.buscando .bqp-search { display: flex; position: absolute; left: 10px; right: 10px; top: 10px; z-index: 31; }
  .bqp-header [data-accion="buscar-movil"] { margin-left: auto; }
  .bqp-pop-wrap { margin-left: 0; }
  .bqp-user { padding-left: 0; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ===================================================================================
   Pantallas OPERATIVAS (módulos implementados). Componentes compartidos con contrato:
   nucleo/componentes/ui.js. Todo bajo .bqp-op (no afecta a pantallas base ni al dashboard).
   =================================================================================== */
.bqp-op { display: flex; flex-direction: column; gap: 10px; max-width: 1440px; }
.bqp-op h1, .bqp-op h2, .bqp-op h3, .bqp-op p { margin: 0; }
.bqp-op ul { list-style: none; margin: 0; padding: 0; }
.bqp-op small { display: block; font-size: 11px; color: var(--bqp-text-3); font-weight: 400; }
.bqp-op .op-head { display: flex; align-items: center; gap: 16px; padding: 14px 18px; border-radius: 12px; background: radial-gradient(420px 160px at 92% 0%, rgba(255, 122, 26, .12), transparent 70%), linear-gradient(120deg, #0e2442, #0a1b33 60%, #0b1d36); border: 1px solid var(--bqp-border); }
.bqp-op .op-head__ico { flex: none; width: 50px; height: 50px; display: grid; place-items: center; border-radius: 12px; color: var(--bqp-accent); background: var(--bqp-accent-soft); border: 1px solid var(--bqp-accent-line); }
.bqp-op .op-head__ico .bqp-ico { width: 26px; height: 26px; }
.bqp-op .op-head__tit { flex: 1 1 260px; min-width: 0; }
.bqp-op .op-ruta { display: flex; flex-wrap: wrap; gap: 6px; font-size: 11.5px; color: var(--bqp-text-2); }
.bqp-op .op-ruta a { color: var(--bqp-tech-2); }
.bqp-op .op-ruta span { color: var(--bqp-text-3); }
.bqp-op .op-head h1 { margin-top: 2px; font: 700 23px/1.15 var(--bqp-font-display); }
.bqp-op .op-prop { margin-top: 3px; font-size: 13px; color: var(--bqp-text-2); }
.bqp-op .op-head__chips { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.bqp-op .op-modo { display: flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 9px; font-size: 12px; background: var(--bqp-warn-soft); border: 1px solid rgba(245, 165, 36, .4); color: var(--bqp-text); }
.bqp-op .op-modo .bqp-ico { width: 16px; height: 16px; color: var(--bqp-warn); flex: none; }
.bqp-op .op-modo--firebase { background: var(--bqp-ok-soft); border-color: rgba(34, 201, 122, .35); }
.bqp-op .op-modo--firebase .bqp-ico { color: var(--bqp-ok); }
.bqp-op .op-tabs { display: flex; gap: 4px; padding: 4px; overflow-x: auto; scrollbar-width: thin; border-radius: 10px; background: rgba(6, 18, 35, .55); border: 1px solid var(--bqp-border-soft); }
.bqp-op .op-tab { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 12px; border-radius: 7px; border: 1px solid transparent; background: transparent; color: var(--bqp-text-2); font: 600 12.5px var(--bqp-font); cursor: pointer; text-decoration: none; }
.bqp-op .op-tab .bqp-ico { width: 16px; height: 16px; }
.bqp-op .op-tab:hover { color: var(--bqp-text); background: var(--bqp-surface-2); }
.bqp-op .op-tab.is-on { color: var(--bqp-text); background: var(--bqp-accent-soft); border-color: var(--bqp-accent-line); }
.bqp-op .op-tab.is-on .bqp-ico { color: var(--bqp-accent); }
.bqp-op .op-cuerpo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bqp-op .op-sec { min-width: 0; padding: 10px 12px 12px; border-radius: var(--bqp-radius); background: linear-gradient(180deg, rgba(14, 36, 64, .78), rgba(10, 28, 50, .78)); border: 1px solid var(--bqp-border-soft); box-shadow: var(--bqp-shadow); }
.bqp-op .op-sec--acc { border-color: rgba(255, 122, 26, .28); }
.bqp-op .op-sec__head { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 9px; }
.bqp-op .op-sec__head > div { flex: 1; min-width: 0; }
.bqp-op .op-sec__head h2 { font: 600 14.5px/1.25 var(--bqp-font-display); }
.bqp-op .op-sec__head p { margin-top: 1px; font-size: 11.5px; color: var(--bqp-text-2); }
.bqp-op .op-sec__ico { color: var(--bqp-tech-2); padding-top: 1px; }
.bqp-op .op-sec__ico .bqp-ico { width: 20px; height: 20px; }
.bqp-op .op-sec--acc .op-sec__ico { color: var(--bqp-accent); }
.bqp-op .op-link { display: inline-flex; align-items: center; gap: 5px; flex: none; color: var(--bqp-tech-2); font-size: 11.5px; font-weight: 600; white-space: nowrap; cursor: pointer; background: none; border: 0; padding: 0; font-family: inherit; text-decoration: none; }
.bqp-op .op-link .bqp-ico { width: 14px; height: 14px; }
.bqp-op .op-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.bqp-op .op-grid--form { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
.bqp-op .op-grid--lat { grid-template-columns: minmax(0, 1fr) 320px; }
.bqp-op .op-grid--lat2 { grid-template-columns: 300px minmax(0, 1fr); }
.bqp-op .op-col { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.bqp-op .op-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.bqp-op .op-kpi { --kc: var(--bqp-tech); display: flex; align-items: center; gap: 10px; min-width: 0; padding: 9px 10px; border-radius: var(--bqp-radius); background: linear-gradient(180deg, rgba(14, 36, 64, .85), rgba(10, 28, 50, .85)); border: 1px solid color-mix(in srgb, var(--kc) 30%, var(--bqp-border-soft)); }
.bqp-op .op-kpi--crit { --kc: var(--bqp-crit); } .bqp-op .op-kpi--warn { --kc: var(--bqp-warn); } .bqp-op .op-kpi--ok { --kc: var(--bqp-ok); }
.bqp-op .op-kpi--acc { --kc: var(--bqp-accent); } .bqp-op .op-kpi--neutro { --kc: #6f86a3; }
.bqp-op .op-kpi--tech { --kc: var(--bqp-tech-2); } .bqp-op .op-kpi--info { --kc: var(--bqp-tech-2); }
.bqp-op .op-kpi__ico { flex: none; width: 40px; height: 40px; border-radius: 9px; display: grid; place-items: center; color: var(--kc); background: color-mix(in srgb, var(--kc) 16%, #061223); border: 1px solid color-mix(in srgb, var(--kc) 45%, transparent); }
.bqp-op .op-kpi--acc .op-kpi__ico { color: #fff; background: linear-gradient(160deg, #ff8a2a, #c2520a); }
.bqp-op .op-kpi__ico .bqp-ico { width: 22px; height: 22px; stroke-width: 2; }
.bqp-op .op-kpi > div { min-width: 0; }
.bqp-op .op-kpi__tit { font-size: 11px; color: var(--bqp-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bqp-op .op-kpi__val { font: 700 23px/1.15 var(--bqp-font-display); }
.bqp-op .op-kpi__nota { font-size: 11px; color: var(--bqp-text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bqp-op .op-tabla-wrap { overflow-x: auto; border: 1px solid var(--bqp-border-soft); border-radius: 8px; scrollbar-width: thin; }
.bqp-op .op-tabla { width: 100%; border-collapse: collapse; font-size: 12px; }
.bqp-op .op-tabla th { height: 28px; padding: 0 9px; text-align: left; font-weight: 600; font-size: 11px; color: var(--bqp-text-2); background: rgba(6, 18, 35, .55); white-space: nowrap; }
.bqp-op .op-tabla td { padding: 6px 9px; border-top: 1px solid var(--bqp-border-soft); vertical-align: middle; white-space: nowrap; }
.bqp-op .op-tabla tbody tr:hover { background: rgba(47, 143, 255, .06); }
.bqp-op .op-tabla tr.is-sel { background: rgba(255, 122, 26, .07); box-shadow: inset 3px 0 0 var(--bqp-accent); }
.bqp-op .op-tabla th.num, .bqp-op .op-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.bqp-op .op-tabla td.num small { text-align: right; }
.bqp-op .op-tabla .op-acc { text-align: right; width: 1%; }
.bqp-op .op-tabla td.op-wrap { white-space: normal; min-width: 160px; }
.bqp-op .op-vacio { padding: 14px; text-align: center; border: 1px dashed var(--bqp-border); border-radius: 8px; color: var(--bqp-text-2); font-size: 12.5px; }
.bqp-op .op-dim { color: var(--bqp-text-3); }
.bqp-op .op-mono { font-family: var(--bqp-mono); font-size: 11.5px; }
.bqp-op .op-t-crit { color: var(--bqp-crit); } .bqp-op .op-t-warn { color: var(--bqp-warn); } .bqp-op .op-t-ok { color: var(--bqp-ok); } .bqp-op .op-t-info { color: var(--bqp-tech-2); }
.bqp-op .op-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px; border-radius: 7px; border: 1px solid var(--bqp-border); background: var(--bqp-surface-2); color: var(--bqp-text); font: 600 11.5px var(--bqp-font); cursor: pointer; white-space: nowrap; text-decoration: none; }
.bqp-op .op-btn .bqp-ico { width: 14px; height: 14px; }
.bqp-op .op-btn:hover { border-color: var(--bqp-accent-line); }
.bqp-op .op-btn:disabled { opacity: .45; cursor: not-allowed; }
.bqp-op .op-btn--prim { height: 34px; padding: 0 16px; font-size: 12.5px; border-color: var(--bqp-accent); background: linear-gradient(180deg, #ff8a2a, #e8650c); color: #fff; }
.bqp-op .op-btn--peligro { border-color: rgba(255, 77, 79, .5); color: #ff8a8b; }
.bqp-op .op-acciones { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.bqp-op .op-lista li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-top: 1px solid var(--bqp-border-soft); font-size: 12px; }
.bqp-op .op-lista li:first-child { border-top: 0; }
.bqp-op .op-lista li > div { flex: 1; min-width: 0; }
.bqp-op .op-lista .num { font-weight: 700; font-variant-numeric: tabular-nums; }
.bqp-op .op-lista--sel li { border: 1px solid var(--bqp-border-soft); border-radius: 8px; margin-bottom: 6px; padding: 7px 9px; background: rgba(6, 18, 35, .35); cursor: pointer; }
.bqp-op .op-lista--sel li.is-sel { border-color: var(--bqp-accent-line); background: var(--bqp-accent-soft); }
.bqp-op .op-fecha { flex: none; min-width: 46px; padding: 4px 4px; border-radius: 6px; text-align: center; font: 700 11px var(--bqp-mono); color: var(--bqp-text); background: var(--bqp-surface-3); }
.bqp-op .op-nota { position: relative; padding-left: 22px; margin-top: 9px; font-size: 11.5px; line-height: 1.4; color: var(--bqp-text-2); }
.bqp-op .op-nota > .bqp-ico { position: absolute; left: 0; top: 0; width: 15px; height: 15px; color: var(--bqp-tech-2); }
.bqp-op .op-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 12px; margin: 10px 0; }
.bqp-op .op-form--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.bqp-op .op-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.bqp-op .op-campo--full { grid-column: 1 / -1; }
.bqp-op .op-campo > span { font-size: 11px; font-weight: 600; color: var(--bqp-text-2); }
.bqp-op .op-in { width: 100%; box-sizing: border-box; min-height: 34px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--bqp-border); background: rgba(6, 18, 35, .65); color: var(--bqp-text); font: 12.5px var(--bqp-font); }
.bqp-op textarea.op-in { font-family: var(--bqp-mono); font-size: 12px; resize: vertical; }
.bqp-op select.op-in { appearance: auto; }
.bqp-op .op-in:focus { outline: none; border-color: var(--bqp-accent-line); }
.bqp-op .op-in[readonly] { color: var(--bqp-text-2); }
.bqp-op .op-msg { padding: 8px 11px; border-radius: 8px; font-size: 12px; line-height: 1.4; }
.bqp-op .op-msg--ok { background: var(--bqp-ok-soft); color: var(--bqp-ok); border: 1px solid rgba(34, 201, 122, .35); }
.bqp-op .op-msg--error { background: var(--bqp-crit-soft); color: #ff8a8b; border: 1px solid rgba(255, 77, 79, .4); }
.bqp-op .op-msg--info { background: var(--bqp-info-soft); color: var(--bqp-text); border: 1px solid var(--bqp-tech-line); }
.bqp-op .op-msg--aviso { background: var(--bqp-warn-soft); color: var(--bqp-warn); border: 1px solid rgba(245, 165, 36, .4); }
.bqp-op .op-filtros { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.bqp-op .op-filtros > .op-in { width: auto; min-width: 160px; }
.bqp-op .op-filtros .op-buscar { flex: 1; min-width: 200px; }
.bqp-op .op-big { padding: 12px 14px; border-radius: 9px; background: rgba(6, 18, 35, .5); border: 1px solid var(--bqp-border-soft); }
.bqp-op .op-big span { font-size: 11px; color: var(--bqp-text-2); }
.bqp-op .op-big b { display: block; font: 700 28px/1.1 var(--bqp-font-display); }
.bqp-op .op-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.bqp-op .op-datos > div { padding: 8px 10px; border-radius: 8px; background: rgba(6, 18, 35, .45); border: 1px solid var(--bqp-border-soft); min-width: 0; }
.bqp-op .op-datos b { display: block; margin-top: 2px; font-size: 13px; }
.bqp-op .op-tags { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-bottom: 8px; font-size: 12px; }
.bqp-op .op-tags > b { width: 80px; font-size: 11px; color: var(--bqp-text-2); }
.bqp-op .op-tags > span { padding: 3px 9px; border-radius: 6px; background: rgba(6, 18, 35, .5); border: 1px solid var(--bqp-border-soft); }
.bqp-op .op-alerta { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: var(--bqp-radius); background: var(--bqp-crit-soft); border: 1px solid rgba(255, 77, 79, .45); }
.bqp-op .op-alerta > .bqp-ico { flex: none; width: 22px; height: 22px; color: var(--bqp-crit); }
.bqp-op .op-alerta > div { flex: 1; min-width: 0; }
.bqp-op .op-alerta b { color: #ff8a8b; font-size: 13px; }
.bqp-op .op-alerta p { margin-top: 2px; font-size: 12px; color: var(--bqp-text); line-height: 1.4; }
@media (max-width: 1279px) { .bqp-op .op-grid--lat, .bqp-op .op-grid--lat2 { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 899px) {
  .bqp-op .op-grid, .bqp-op .op-grid--form { grid-template-columns: minmax(0, 1fr); }
  .bqp-op .op-head { flex-wrap: wrap; }
  .bqp-op .op-head__chips { width: 100%; flex-direction: row; flex-wrap: wrap; align-items: center; }
  .bqp-op .op-form--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bqp-op .op-alerta { flex-wrap: wrap; }
}
@media (max-width: 559px) {
  .bqp-op .op-head__ico { display: none; }
  .bqp-op .op-head h1 { font-size: 20px; }
  .bqp-op .op-form, .bqp-op .op-form--3 { grid-template-columns: minmax(0, 1fr); }
  .bqp-op .op-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Acceso (login) y bloqueo de backend */
.bqp-acceso { max-width: 440px; margin: 6vh auto 0; padding: 22px 22px 20px; border-radius: 12px; background: linear-gradient(180deg, rgba(14, 36, 64, .9), rgba(10, 28, 50, .9)); border: 1px solid var(--bqp-border); }
.bqp-acceso h2 { margin: 0 0 4px; font: 700 19px var(--bqp-font-display); }
.bqp-acceso p { margin: 4px 0 12px; font-size: 12.5px; color: var(--bqp-text-2); line-height: 1.45; }
.bqp-acceso label { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; font-size: 11px; font-weight: 600; color: var(--bqp-text-2); }
.bqp-acceso input { min-height: 36px; padding: 7px 10px; border-radius: 7px; border: 1px solid var(--bqp-border); background: rgba(6, 18, 35, .65); color: var(--bqp-text); font: 13px var(--bqp-font); }
.bqp-acceso .bqp-acceso__acc { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.bqp-acceso .bqp-acceso__msg { margin-top: 10px; font-size: 12px; color: #ff8a8b; }
.bqp-acceso .bqp-acceso__alt { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--bqp-border-soft); font-size: 12px; }
.bqp-acceso button.bqp-btn--prim { border-color: var(--bqp-accent); background: linear-gradient(180deg, #ff8a2a, #e8650c); color: #fff; }
.bqp-user__salir { margin-left: 6px; display: inline-flex; align-items: center; gap: 6px; }
.bqp-user__salir svg { width: 14px; height: 14px; }
@media (max-width: 719px) { .bqp-user__salir span { display: none; } }

/* Autenticación global: sin sesión solo se ve la marca y la pantalla de acceso (sin menú ni módulos). */
.bqp-app.sin-sesion .bqp-nav, .bqp-app.sin-sesion .bqp-header > :not(.bqp-user) { visibility: hidden; }
.bqp-verificando { margin: 12vh auto 0; text-align: center; color: var(--bqp-text-2); font-size: 13px; }
.bqp-acceso__olvido { margin: 4px 0 6px; font-size: 12px; color: var(--bqp-text-2); }
.bqp-acceso__olvido summary { cursor: pointer; color: var(--bqp-tech-2); }
.bqp-acceso__olvido form { margin-top: 10px; }
.bqp-acceso__marca { display: flex; align-items: baseline; gap: 8px; margin-bottom: 14px; }
.bqp-acceso__marca strong { font: 900 20px var(--bqp-font-logo); color: var(--bqp-accent); letter-spacing: .02em; }
.bqp-acceso__marca span { font-size: 12px; color: var(--bqp-text-2); }

/* Modo Administración (solo ADMIN_CALIDAD): interruptor en el área de usuario + indicador discreto. */
.bqp-modoadm { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; margin-right: 4px; border-radius: 7px;
  border: 1px solid var(--bqp-border); background: transparent; color: var(--bqp-text-2); font: 600 11px var(--bqp-font); cursor: pointer; white-space: nowrap; }
.bqp-modoadm svg { width: 14px; height: 14px; }
.bqp-modoadm:hover { border-color: var(--bqp-accent-line); color: var(--bqp-text); }
.bqp-modoadm.is-on { border-color: var(--bqp-accent); background: var(--bqp-accent-soft); color: var(--bqp-accent-strong); letter-spacing: .02em; }
.bqp-app.modo-admin .bqp-header { box-shadow: inset 0 -2px 0 var(--bqp-accent); }
.bqp-op .op-btn--admin { border-style: dashed; }
.bqp-op .op-sec--admin { border-color: var(--bqp-accent-line); }
.bqp-op .op-confirma span { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.bqp-modoadm__c { display: none; }
@media (max-width: 719px) {
  .bqp-modoadm__l { display: none; }
  .bqp-modoadm.is-on .bqp-modoadm__c { display: inline; font-size: 10px; }
  .bqp-modoadm { padding: 0 8px; }
}