/* NOC FibraSLP · vista «Bitácora» — v1.11 · rediseño Fase 1 (densidad)
 * Estilos de static/bitacora.js (prefijo .bt-). Reutiliza las variables y los componentes globales
 * de index.html (.seg, button.on, .chips/.chip, .dense, .tbl-wrap, .trunc, .mono, .sub, .pager,
 * .empty, .clickable, details.howto) SIN redefinirlos: aquí solo van variantes con prefijo .bt-.
 * Un renglón por suceso (fila ≈ 30 px, antes 50–67): lo secundario va en gris en la misma línea o
 * en el title. La barra de filtros (.bt-head) queda fija bajo el encabezado de la página; su alto
 * real lo pone bitacora.js en --bt-head-h para que el thead y el panel lateral se peguen debajo. */
/* --bt-dev / --bt-if / --bt-who: tope del nombre del equipo, de la interfaz y del usuario en la
   fila, relativo a la ventana (en px fijos sumaban más que la columna en un portátil; en el
   celular, donde la tabla tiene ancho mínimo, vuelven a px); --bt-side: ancho del panel
   «Enlaces que más se caen», más angosto en un portátil (≤ 1500 px) y más a ≤ 1300 px, donde
   el Detalle se quedaba en unos 150 px */
#bitacora-root{display:flex;flex-direction:column;gap:10px;min-width:0;
  --bt-dev:min(250px,13vw);--bt-if:min(200px,10vw);--bt-who:min(140px,7vw);--bt-side:330px}
@media(max-width:1500px){#bitacora-root{--bt-side:288px}}
@media(max-width:1300px){#bitacora-root{--bt-side:260px}}
.bt-muted{color:var(--muted)}
.bt-grow{flex:1}

/* ── barra fija: filtros (1.er renglón), tipos y paginador de arriba (2.º) ───────────────────
   Fondo opaco para que las filas pasen por debajo. El margen negativo compensa su relleno de
   arriba, que solo hace falta cuando ya está pegada al encabezado. */
.bt-head{position:sticky;top:var(--hd-h,50px);z-index:6;background:var(--plane);
  display:flex;flex-direction:column;gap:8px;padding:6px 0 8px;margin:-6px 0 -2px}
.bt-bar,.bt-bar2{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-width:0}
.bt-bar .seg button{padding:0 10px;height:28px;font-size:12px}
.bt-f{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px}
.bt-bar input,.bt-bar select{height:28px;background:var(--plane);color:var(--ink);
  border:1px solid var(--border);border-radius:6px;padding:0 8px;font:inherit;font-size:13px;
  color-scheme:dark}
/* el buscador toma lo que sobra del renglón (así no baja solo a otro renglón a 1366 px) */
.bt-bar input[type=search]{flex:1 1 200px;min-width:160px;max-width:340px}
.bt-bar select{max-width:220px}
.bt-bar input:focus,.bt-bar select:focus{outline:none;border-color:var(--s1)}
/* Desde y Hasta van juntos: en escritorio la envoltura no existe para el flex (display:contents)
   y en el celular los pone en un solo renglón (ver @media ≤ 900 px) */
.bt-dates{display:contents}
/* filtro por interfaz (viene de la ficha o del panel lateral): chip azul con su ✕. El nombre
   va a la letra del chip (1em) y no a la de .mono (0.93em), que lo dejaba más chico y más
   alto que «Interfaz»; si es largo se corta con «…» y el title lo dice completo */
.bt-ifchip{padding-right:3px;max-width:360px;cursor:default}
.bt-ifchip b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:1em;line-height:1}
.bt-ifchip .bt-x{width:20px;height:20px;border-radius:50%}
.bt-ifchip .bt-x svg{width:13px;height:13px}
/* el contador del chip de tipo queda vacío hasta que llega la primera página */
.bt-kinds .chip .n:empty{display:none}
/* el paginador de arriba va a la derecha de los tipos, sin el margen del de abajo */
.bt-pager.bt-pager-top{margin:0}
.bt-pager.bt-pager-top button{padding:2px 8px;min-width:30px}

/* ── lista y panel lateral ──────────────────────────────────────────────────────────────── */
.bt-grid{display:grid;grid-template-columns:minmax(0,1fr) var(--bt-side);gap:14px;align-items:start}
@media(max-width:1100px){.bt-grid{grid-template-columns:minmax(0,1fr)}}
/* sin overflow: el thead fijo de .tbl-wrap necesita que ningún ancestro desplace */
.bt-main{min-width:0}
.bt-list{transition:opacity .15s}
.bt-list.bt-loading{opacity:.6}

/* Tabla de ancho FIJO: las columnas miden lo que dice el <colgroup> que pinta bitacora.js y no
   lo que trae el texto. Con anchos automáticos, una página con personas («concluida a mano ·
   usuario») y equipos con interfaces largas sumaba más que .bt-main: la tabla se salía bajo el
   panel lateral y el Detalle bajaba a 67 px. Todo va en un renglón y lo que no cabe se corta
   con «…» (el texto completo está en el title). Hora y Duración miden fijo, Equipo · interfaz
   un % de la tabla, el Detalle se queda con lo que sobra y «Qué pasó» depende de lo que trae la
   página (--bt-what-ch, en caracteres) con un tope relativo a la ventana. Ese tope va en vw y
   no en %: en una tabla fija un clamp() o max() con % cuenta como auto (medido en Edge). El
   factor .8 es porque el ch (ancho del «0») es más ancho que una letra promedio: medido, «✓
   concluida a mano · e2e-revision» (34 caracteres) ocupa 203 px y la columna queda en 236 */
.bt-table{table-layout:fixed}
.bt-table td{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt-table col.bt-c-time{width:56px}
.bt-table col.bt-c-what{width:clamp(120px,calc(var(--bt-what-ch,14) * .8ch + 30px),17vw)}
.bt-table col.bt-c-dev{width:28%}
.bt-table col.bt-c-dur{width:84px}
.tbl-wrap > .bt-table > thead > tr > th{top:calc(var(--hd-h,50px) + var(--bt-head-h,0px))}
.bt-table tr.bt-day td{background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:600;
  padding:4px 10px}
.bt-time{color:var(--ink-2)}
.bt-sym{display:inline-block;flex:none;width:16px;text-align:center;margin-right:4px;font-weight:700}
.bt-crit{color:var(--critical)} .bt-warn{color:var(--warning)} .bt-good{color:var(--good)}
.bt-off{color:var(--muted)} .bt-info{color:var(--s1)}
/* «Qué pasó» y «Equipo · interfaz» son cajas flex: sus partes encogen con «…» hasta caber en
   la columna fija, en vez de ensancharla.
   «Qué pasó» va por orden: (1) el tipo en gris se quita entero si no cabe: la caja se parte en
   renglones (flex-wrap) pero mide un solo renglón de alto y esconde el resto; (2) se corta el
   usuario (.bt-who, el único que encoge en .bt-whatmain); (3) al final la acción, que nunca
   pasa del ancho de la caja menos el símbolo. Encoger por proporciones cortaba un poco de todo
   («abr… · e2e-revisi… al…»). Su alto fijo (19 px) deja la fila en ≈ 30 px, como las demás
   tablas densas */
.bt-whatbox{display:flex;flex-wrap:wrap;align-items:baseline;min-width:0;height:19px;line-height:19px;
  overflow:hidden}
.bt-whatmain{display:flex;align-items:baseline;flex:0 1 auto;min-width:0}
.bt-act{flex:none;max-width:calc(100% - 20px);overflow:hidden;text-overflow:ellipsis}
.bt-who{display:inline-flex;flex:0 1 auto;min-width:0;overflow:hidden;gap:.3em;color:var(--ink-2);
  margin-left:.4em}
.bt-who .trunc{--trunc:var(--bt-who);flex:0 1 auto}
.bt-whatbox .sub{flex:none}
/* equipo · interfaz: los dos se cortan, el nombre del equipo más rápido (flex-shrink 2)
   porque la interfaz es lo que distingue una fila de otra del mismo equipo */
.bt-devbox{display:flex;align-items:baseline;gap:.7em;min-width:0}
.bt-devn{--trunc:var(--bt-dev);flex:0 2 auto;color:var(--ink)}
.bt-if{--trunc:var(--bt-if);flex:0 1 auto;min-width:7ch;color:var(--ink-2)}
.bt-table td.bt-text{color:var(--ink-2)}

.bt-side{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:10px;
  display:flex;flex-direction:column;gap:8px;min-width:0;
  position:sticky;top:calc(var(--hd-h,50px) + var(--bt-head-h,0px));
  max-height:calc(100vh - var(--hd-h,50px) - var(--bt-head-h,0px) - 30px)}
/* título y selector 24 h / 7 d / 30 d en UN renglón también en un portátil (partido en dos le
   quitaba una tarjeta a la lista): el título se corta con «…» antes que bajar el selector */
.bt-side-head{display:flex;align-items:center;justify-content:space-between;gap:8px;
  flex-wrap:nowrap;min-width:0;font-size:13px}
.bt-side-head .seg{flex:none}
.bt-side-head .seg button{padding:2px 5px;font-size:12px}
/* solo la lista se desplaza: el título con el selector y la ayuda quedan a la vista */
.bt-top{display:flex;flex-direction:column;gap:4px;min-height:0;overflow-y:auto;
  margin-right:-6px;padding-right:6px}
/* quedan tarjetas abajo: el borde inferior de la lista se desvanece (bitacora.js pone .bt-more
   mientras haya algo por desplazar; las barras superpuestas no lo dicen) */
.bt-top.bt-more{-webkit-mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent);
  mask-image:linear-gradient(to bottom,#000 calc(100% - 28px),transparent)}
.bt-side details.howto{margin:0;flex:none}
@media(max-width:1100px){.bt-side{position:static;max-height:none}}

/* tarjeta de un enlace (2 renglones); sirve igual fuera del panel */
.bt-link{display:flex;flex-direction:column;align-items:stretch;gap:1px;flex:none;width:100%;
  min-width:0;text-align:left;padding:4px 8px;line-height:1.25;background:var(--surface-2);border-radius:7px}
.bt-link.down{box-shadow:inset 3px 0 0 var(--critical)}
.bt-link-name{display:flex;gap:7px;align-items:baseline;min-width:0;white-space:nowrap}
.bt-link-name b{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.bt-link-dev{flex:1 1 0;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--muted);font-size:12px}
.bt-now{flex:none;align-self:center;color:var(--critical);font-size:12px;line-height:1.25;
  border:1px solid var(--critical);border-radius:999px;padding:0 6px}
.bt-bar-row{display:flex;align-items:center;gap:6px;min-width:0;overflow:hidden;white-space:nowrap;
  font-size:12px;color:var(--ink-2)}
.bt-bar-row b{color:var(--warning);font-variant-numeric:tabular-nums}
.bt-meter{flex:0 0 48px;height:5px;background:var(--grid);border-radius:3px;overflow:hidden}
.bt-meter span{display:block;height:100%;background:var(--warning);border-radius:3px}

/* «Exportar CSV» es un enlace (<a download>) en el encabezado global: mismo aspecto que los
   botones de ahí (header button de index.html) y, como ellos, solo el icono a ≤ 1100 px */
#page-actions a.bt-csv{height:30px;padding:0 12px;display:inline-flex;align-items:center;gap:6px;
  flex:none;white-space:nowrap;background:var(--surface-2);color:var(--ink-2);text-decoration:none;
  border:1px solid var(--border);border-radius:6px;font-size:13px}
#page-actions a.bt-csv:hover{color:var(--ink);border-color:var(--muted)}
#page-actions a.bt-csv:focus-visible{outline:2px solid var(--s1);outline-offset:1px}
@media(max-width:1100px){
  #page-actions a.bt-csv{width:30px;padding:0;justify-content:center}
  #page-actions a.bt-csv .lbl{display:none}
}

/* celular y tableta angosta: la barra deja de ser fija (le quitaría media pantalla) y el
   Detalle puede partirse, porque la tabla conserva un ancho mínimo y .tbl-wrap la desplaza a lo
   ancho. Ahí un th fijo con top > 0 se quedaría flotando dentro de la tabla, separado de ella:
   el thead vuelve a su sitio. Como la barra ya no acompaña al bajar, el paginador de arriba
   sobra (queda el del pie) y Desde/Hasta comparten renglón para que la lista empiece antes */
@media(max-width:900px){
  #bitacora-root{--bt-dev:150px;--bt-if:120px;--bt-who:110px}
  .bt-head{position:static;padding:0;margin:0}
  .tbl-wrap > .bt-table > thead > tr > th{position:static}
  .bt-table{min-width:780px}
  .bt-table col.bt-c-what{width:clamp(120px,calc(var(--bt-what-ch,14) * .8ch + 30px),230px)}
  .bt-table td.bt-text{white-space:normal}
  .bt-pager.bt-pager-top{display:none}
  .bt-dates{display:flex;flex:1 1 100%;gap:10px;min-width:0}
  .bt-dates .bt-f{flex:1 1 0;min-width:0}
  .bt-dates input{flex:1 1 auto;min-width:0;width:100%}
}