/* NOC FibraSLP · vista «Reportes» — v1.13
 * Estilos de static/reportes.js (prefijo .rp-). Reutiliza las variables y los componentes globales
 * de index.html (.seg, button.on, .tiles.compact, .chips/.chip, .dense, .tbl-wrap, .trunc, .mono,
 * .sub, .pill, .pager, .chart, .tip, .empty, .clickable, details.howto) SIN redefinirlos: aquí solo
 * van variantes con prefijo .rp-.
 * El ancho real del módulo lo mide reportes.js y lo deja en clases del root (.rp-lt1500, .rp-lt1300,
 * .rp-lt1050, .rp-lt820, .rp-lt640): deciden la rejilla y qué columnas se esconden. No se usa
 * @container porque su contención de layout movería los menús ⋯ (position:fixed). */
#reportes-root{display:flex;flex-direction:column;gap:12px;min-width:0}
.rp-grow{flex:1}
.rp-pane{display:flex;flex-direction:column;gap:12px;min-width:0;transition:opacity .15s}
.rp-pane.rp-loading{opacity:.6}
.rp-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── barra fija: pestañas, rango y hora del dato (1.er renglón), filtros y búsqueda (2.º) y avisos
   Fondo opaco para que el contenido pase por debajo. El margen negativo compensa su relleno de
   arriba, que solo hace falta cuando ya está pegada al encabezado. */
.rp-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 -4px}
.rp-bar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-width:0}
.rp-bar .seg button{height:28px;padding:0 10px;font-size:12px}
.rp-tabs button{display:inline-flex;align-items:center;gap:6px}
.rp-tabs button svg.i{width:14px;height:14px}
.rp-sep{width:1px;height:20px;background:var(--border);flex:none}
.rp-bar input,.rp-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;min-width:0}
.rp-bar select{max-width:230px;text-overflow:ellipsis}
/* 2.º renglón: los cinco selectores y la búsqueda parten de un ancho chico y crecen hasta su tope,
   así caben en UN renglón desde 1366 (con la barra lateral abierta) en lugar de partirse en tres */
.rp-bar2 select{flex:1 1 130px;max-width:210px}
.rp-bar2 .rp-q{flex:1 1 170px;max-width:340px;min-width:150px}
.rp-bar input:focus,.rp-bar select:focus{outline:none;border-color:var(--s1)}
/* filtro puesto: borde azul (se ve de un vistazo qué acota el reporte) */
.rp-bar .rp-set{border-color:var(--s1);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--s1) 45%,transparent)}
.rp-dates{display:inline-flex;align-items:center;gap:5px}
.rp-dates input{width:136px}
.rp-dash{color:var(--muted)}
.rp-days{margin-left:2px;white-space:nowrap}
.rp-clear{height:28px;padding:0 10px;font-size:12px}
.rp-stamp{white-space:nowrap}

/* aviso bajo los filtros: base lenta (503), errores de filtro y descargas */
.rp-note{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:6px 12px;
  border:1px solid var(--border);border-left:3px solid var(--s1);border-radius:8px;
  background:var(--surface);font-size:13px;color:var(--ink-2)}
.rp-note.ok{border-left-color:var(--good)}
.rp-note.warn{border-left-color:var(--warning)}
.rp-note.err{border-left-color:var(--critical)}
.rp-note > svg.i{color:var(--warning)}
.rp-note.err > svg.i{color:var(--critical)}
.rp-note button{height:26px;padding:0 10px;font-size:12px}

/* ── indicadores: los 8 en un renglón mientras quepan (≈ 128 px cada uno a 1366) ────────────── */
.tiles.compact.rp-tiles{grid-template-columns:repeat(8,minmax(0,1fr))}
.rp-lt820 .tiles.compact.rp-tiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.rp-lt640 .tiles.compact.rp-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
/* la cifra en UN renglón; en las duraciones las unidades van chicas (13 px) junto al número */
.rp-tiles .tile .value{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rp-tiles .tile .value small{font-size:13px;font-weight:500;color:var(--ink-2);margin:0 4px 0 2px}
.rp-tiles .tile .value small:last-child{margin-right:0}

/* ── rejilla de bloques ───────────────────────────────────────────────────────────────────
   Ancho (≥ 1300 px de módulo): gráfica (2/3) + por tipo; debajo disponibilidad, por equipo y por
   sitio en tres columnas. Medio: la gráfica a todo el ancho y los demás de dos en dos. Angosto:
   una columna. */
.rp-grid{display:grid;gap:14px;grid-template-columns:repeat(6,minmax(0,1fr));align-items:start}
.rp-b-chart{grid-column:span 4}
.rp-b-type,.rp-b-av,.rp-b-dev,.rp-b-site{grid-column:span 2}
.rp-lt1300 .rp-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.rp-lt1300 .rp-b-chart{grid-column:1 / -1}
.rp-lt1300 .rp-b-type,.rp-lt1300 .rp-b-av,.rp-lt1300 .rp-b-dev,.rp-lt1300 .rp-b-site{grid-column:auto}
.rp-lt820 .rp-grid{grid-template-columns:minmax(0,1fr)}

.rp-blk{min-width:0;display:flex;flex-direction:column;gap:6px}
.rp-bh{display:flex;align-items:center;gap:6px 10px;min-height:24px;flex-wrap:wrap;min-width:0}
.rp-bh h3{margin:0;white-space:nowrap}
.rp-bn{white-space:nowrap}

/* cajas con desplazamiento propio (thead fijo dentro): unas 11 filas densas. «Por tipo» va junto a
   la gráfica y mide lo mismo que ella (258 px). En pantallas bajas o en el celular, menos */
.rp-scroll{--tbl-max:372px}
.rp-b-type .rp-scroll{--tbl-max:258px}
.rp-lt1300 .rp-b-type .rp-scroll{--tbl-max:372px}
@media(max-height:720px){.rp-scroll,.rp-lt1300 .rp-b-type .rp-scroll{--tbl-max:300px}}
.rp-lt640 .rp-scroll,.rp-lt640 .rp-b-type .rp-scroll{--tbl-max:300px}
.rp-blk details.howto{margin:2px 0 0}

/* ── gráfica por día ─────────────────────────────────────────────────────────────────────── */
.rp-leg{display:inline-flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:12px;color:var(--ink-2)}
.rp-leg > span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.rp-sw{display:inline-block;width:10px;height:10px;border-radius:2px;background:var(--muted)}
.rp-sw.crit{background:var(--critical)} .rp-sw.good{background:var(--good)}
.rp-sw.line{width:14px;height:3px;border-radius:2px;background:var(--s1)}
.rp-chartnote{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rp-chart{min-height:258px}
.rp-chart .tip .sub{margin-left:.45em}
.rp-chart-empty{color:var(--muted);padding:40px 8px;text-align:center}

/* ── tablas ──────────────────────────────────────────────────────────────────────────────── */
#reportes-root .rp-t td,#reportes-root .rp-list td,#reportes-root .rp-inv td{white-space:nowrap}
/* la columna del nombre toma el ancho que sobra y corta con «…»: la tabla nunca se sale */
#reportes-root td.rp-fill{max-width:0;width:100%;min-width:120px;overflow:hidden;text-overflow:ellipsis}
.rp-sort{display:inline-flex;align-items:center;gap:3px;padding:0;border:0;background:none;
  font:inherit;color:inherit;text-transform:inherit;letter-spacing:inherit;cursor:pointer}
.rp-sort:hover,.rp-sort.on{color:var(--ink)}
.rp-arrow{font-size:9px;min-width:8px}
/* enlace a la ficha del equipo */
.rp-link{color:var(--ink);cursor:pointer;border-radius:3px}
.rp-link:hover{color:var(--s1);text-decoration:underline}
.rp-link:focus-visible{outline:2px solid var(--s1);outline-offset:1px}
/* fila de resumen con el foco del teclado (Enter/Espacio filtra): contorno por dentro, la caja
   tiene overflow y uno por fuera se cortaría */
.rp-t tbody tr[tabindex]:focus-visible{outline:2px solid var(--s1);outline-offset:-2px}
.rp-good{color:var(--good)} .rp-warn{color:var(--warning)} .rp-crit{color:var(--critical)}
.rp-tag{display:inline-block;margin-left:6px;padding:0 6px;border:1px solid var(--border);
  border-radius:999px;font-size:11.5px;line-height:16px;color:var(--ink-2);vertical-align:1px}
.rp-tag.warn{color:var(--warning);border-color:color-mix(in srgb,var(--warning) 45%,transparent)}
/* disponibilidad: barra + % */
.rp-av{display:inline-flex;align-items:center;gap:8px;justify-content:flex-end}
.rp-track{width:64px;height:6px;border-radius:3px;background:var(--grid);overflow:hidden;flex:none}
.rp-track > i{display:block;height:100%;border-radius:3px;background:var(--muted)}
.rp-track > i.good{background:var(--good)} .rp-track > i.warn{background:var(--warning)}
.rp-track > i.crit{background:var(--critical)}
.rp-av b{font-weight:600;min-width:64px;text-align:right}
.rp-av b.rp-off{color:var(--muted)}
.rp-lt1500 .rp-track{width:44px}
.rp-lt1500 .rp-av b{min-width:58px}

/* ── lista de incidentes ─────────────────────────────────────────────────────────────────── */
.rp-listh .chips{gap:5px}
.rp-pager{margin:0}
.rp-pager button{padding:2px 8px;min-width:30px}
.rp-pp{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.rp-pp select{height:26px;background:var(--plane);color:var(--ink);border:1px solid var(--border);
  border-radius:6px;padding:0 6px;font:inherit;font-size:12px;color-scheme:dark}
/* el thead se pega debajo de la barra fija de filtros (su alto lo pone reportes.js) */
.tbl-wrap > table.rp-list > thead > tr > th,
.tbl-wrap > table.rp-inv > thead > tr > th{top:calc(var(--hd-h,50px) + var(--rp-head-h,0px))}
/* el mensaje toma el ancho que sobra; equipo y reconocida con tope */
#reportes-root .rp-list td.rp-c-msg{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
#reportes-root .rp-list td.rp-c-dev{max-width:300px;overflow:hidden;text-overflow:ellipsis}
.rp-list .rp-c-st .sub{margin-left:.45em}
.rp-sevdot{display:none;width:7px;height:7px;margin-right:6px;vertical-align:1px}
.rp-m2{display:none}
/* columnas que se van según el ancho del módulo: Tipo (el mensaje ya lo dice), Reconocida y
   Severidad (queda como punto de color junto a la hora). En el celular el mensaje pasa a un
   2.º renglón bajo el equipo */
.rp-lt1300 .rp-list .rp-c-type{display:none}
.rp-lt1050 .rp-list .rp-c-ack{display:none}
.rp-lt820 .rp-list .rp-c-sev{display:none}
.rp-lt820 .rp-sevdot{display:inline-block}
/* celular: una sola columna (equipo) con el mensaje y «● hora · duración · estado» debajo; la fila
   abre el detalle y el nombre la ficha, así que los iconos de acción sobran */
.rp-lt640 .rp-list .rp-c-time,.rp-lt640 .rp-list .rp-c-sev,.rp-lt640 .rp-list .rp-c-type,
.rp-lt640 .rp-list .rp-c-msg,.rp-lt640 .rp-list .rp-c-dur,.rp-lt640 .rp-list .rp-c-ack,
.rp-lt640 .rp-list .rp-c-st,.rp-lt640 .rp-list .acts{display:none}
#reportes-root.rp-lt640 .rp-list td.rp-c-dev{max-width:0;width:100%;white-space:normal}
.rp-lt640 .rp-m2{display:block;margin-top:1px;font-size:12.5px;line-height:1.35;color:var(--ink-2);
  overflow-wrap:anywhere}
.rp-m2 .sub{display:block;margin-top:1px}
.rp-m2 .sub .dot{display:inline-block;width:7px;height:7px;margin-right:5px;vertical-align:1px}
/* tablas de resumen en el celular: nombre, total y MTTR (o disponibilidad y caídas). A 390 px
   «Disponibilidad por equipo» medía 319 px en una caja de 308 (Caídas cortada): nombre y % ceden */
.rp-lt640 .rp-t .rp-h640{display:none}
.rp-lt640 .rp-track{display:none}
#reportes-root.rp-lt640 td.rp-fill{min-width:90px}
.rp-lt640 .rp-av b{min-width:52px}

/* ── inventario ──────────────────────────────────────────────────────────────────────────── */
.rp-inv tr.rp-grp td{background:color-mix(in srgb,var(--surface-2) 70%,var(--plane));padding:4px 10px;
  font-size:12px;color:var(--ink-2)}
.rp-inv tr.rp-grp td b{color:var(--ink);letter-spacing:.02em}
.rp-inv tr.rp-grp:hover{background:none}
.rp-bad{margin-left:8px;color:var(--warning)}
.rp-lt1500 .rp-inv .rp-ic-cred{display:none}
.rp-lt1300 .rp-inv .rp-ic-role{display:none}
.rp-lt1050 .rp-inv .rp-ic-ver,.rp-lt1050 .rp-inv .rp-ic-vendor{display:none}
.rp-lt820 .rp-inv .rp-ic-up,.rp-lt820 .rp-inv .rp-ic-model{display:none}
.rp-lt640 .rp-inv .rp-ic-poll,.rp-lt640 .rp-inv td.mono,.rp-lt640 .rp-inv th:nth-child(2){display:none}

/* ── celular y tabletas (≤ 900 px): la barra deja de ser fija (taparía media pantalla) y los
   thead de las tablas largas tampoco (.tbl-wrap se desplaza a lo ancho y quedarían flotando) ── */
@media(max-width:900px){
  .rp-head{position:static;margin:0;padding:0}
  .tbl-wrap > table.rp-list > thead > tr > th,
  .tbl-wrap > table.rp-inv > thead > tr > th{position:static}
  .rp-bar2 .rp-q{flex:1 1 100%;max-width:none}
  .rp-bar2 select{flex:1 1 calc(50% - 10px);max-width:none}
  .rp-dates input{width:128px}
}
@media(max-width:600px){
  .rp-tabs,.rp-quick{flex-wrap:wrap}
  .rp-sep{display:none}
  .rp-dates{flex-wrap:wrap}
  .rp-dates input{width:calc(50% - 12px);min-width:118px}
}