/* NOC FibraSLP · vista «Actividad» (historial de auditoría) — v1.13
 * Estilos de static/actividad.js (prefijo .ac-). Reutiliza las variables y los componentes globales
 * de index.html (.tiles.compact, .seg, .chip, .dense, .tbl-wrap, .trunc, .mono, .sub, .pill,
 * .pager, .empty, details.howto, button.icon, details.kebab) SIN redefinirlos: aquí solo van
 * variantes con prefijo .ac-.
 * Un renglón por registro (fila ≈ 30 px). La barra de filtros (.ac-head) queda fija bajo el
 * encabezado de la página; su alto real lo pone actividad.js en --ac-head-h para que el thead y
 * el panel lateral se peguen debajo. Las clases de ancho (.ac-wide, .ac-no-ent, .ac-no-ip,
 * .ac-xs, .ac-xsw, .ac-tiles4, .ac-chipmode) las pone actividad.js en el root según el ancho REAL
 * de la vista (barra lateral abierta o plegada), por eso no van en @media.
 * --ac-name / --ac-user: tope del nombre del objeto y del usuario en la fila, relativo a la
 * ventana (en px fijos sumaban más que la tabla en un portátil). */
#actividad-root{display:flex;flex-direction:column;gap:10px;min-width:0;
  --ac-name:min(260px,14vw);--ac-user:min(140px,8vw)}
.ac-grow{flex:1}

/* ── color por acción (píldora, punto de la tarjeta y de «Qué pasó») ────────────────────────
   Paleta de DogCore: verde = alta, azul (--s1) = cambio, rojo = baja, gris = acción común,
   azul grisáceo = sesión y ámbar = intento fallido o «con secretos» (algo que mirar). El
   amarillo de la marca no se usa. Los tonos se aclaran un poco para leerse sobre gris oscuro */
.ac-a-crear{--ac-col:color-mix(in srgb,var(--good) 78%,#fff)}
.ac-a-editar{--ac-col:color-mix(in srgb,var(--s1) 78%,#fff)}
.ac-a-borrar{--ac-col:color-mix(in srgb,var(--critical) 72%,#fff)}
.ac-a-accion{--ac-col:var(--ink-2)}
.ac-a-login,.ac-a-logout{--ac-col:color-mix(in srgb,var(--s1) 38%,var(--ink-2))}
.ac-a-login_fallido,.ac-a-secret{--ac-col:var(--warning)}
.pill.ac-pill{max-width:170px;gap:4px;color:var(--ac-col);
  border-color:color-mix(in srgb,var(--ac-col) 42%,transparent);
  background:color-mix(in srgb,var(--ac-col) 11%,var(--surface))}
.ac-pill .ac-pt{min-width:0;overflow:hidden;text-overflow:ellipsis}
.ac-pill svg.i{width:12px;height:12px;vertical-align:0}
.ac-tdot{display:inline-block;flex:none;width:8px;height:8px;border-radius:2px;margin-right:6px;
  background:var(--ac-col,var(--muted));vertical-align:0}

/* ── tarjetas: 8 en una fila (a 1 366 px caben con ≈ 127 px cada una) y 4 por fila en tableta
   y celular. Son botones: cada una filtra la tabla ─────────────────────────────────────── */
#actividad-root .ac-tiles.tiles.compact{grid-template-columns:repeat(8,minmax(0,1fr))}
#actividad-root.ac-tiles4 .ac-tiles.tiles.compact{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
#actividad-root.ac-tiles4 .ac-tiles .tile{padding:7px 10px}
/* celular: chips en lugar de tarjetas (los pinta actividad.js con el mismo data-tile). Con el id
   delante: el <style> de index.html va DESPUÉS de este archivo y su .chips{display:flex} ganaría
   a un .ac-tchips de la misma especificidad. El estado del root es .ac-chipmode (no .ac-tchips:
   con el mismo nombre que el contenedor, la regla del punto alcanzaba los de «Qué pasó» y el
   cuadrito quedaba pegado al texto) */
#actividad-root .ac-tchips{display:none}
#actividad-root.ac-chipmode .ac-tiles{display:none}
#actividad-root.ac-chipmode .ac-tchips{display:flex}
.chips.ac-tchips .ac-tdot{margin-right:0}

/* ── barra fija: filtros y, al final, contador + paginador de arriba ─────────────────────────
   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 */
.ac-head{position:sticky;top:var(--hd-h,50px);z-index:6;background:var(--plane);
  display:flex;flex-direction:column;gap:6px;padding:6px 0 6px;margin:-6px 0 -4px}
.ac-bar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;min-width:0}
/* contador + paginador: un solo elemento pegado a la derecha (baja entero si no cabe) */
.ac-bar2{display:flex;align-items:center;gap:10px;margin-left:auto;min-width:0;max-width:100%}
.ac-bar .seg button{padding:0 10px;height:28px;font-size:12px}
.ac-f{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:12px;white-space:nowrap}
.ac-bar input,.ac-bar select,.ac-pp 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}
.ac-bar select{max-width:190px}
/* el buscador toma lo que sobra del renglón */
.ac-bar input[type=search]{flex:1 1 220px;min-width:170px;max-width:360px}
.ac-bar input:focus,.ac-bar select:focus,.ac-pp 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 comparten renglón (ver @media ≤ 900 px) */
.ac-dates{display:contents}
/* filtro por objeto (entidad + id): chip azul con su ✕; si el nombre es largo se corta con «…» */
.ac-idchip{padding-right:3px;max-width:380px;cursor:default}
.ac-idchip > span{color:var(--muted)}
.ac-idchip b{min-width:0;overflow:hidden;text-overflow:ellipsis;font-size:1em;line-height:1}
.ac-idchip .ac-x{width:20px;height:20px;border-radius:50%}
.ac-idchip .ac-x svg{width:13px;height:13px}
button.ac-clear{height:28px;padding:0 10px;font-size:12px;background:none;border-color:transparent;color:var(--muted)}
button.ac-clear:hover{background:var(--surface-2);border-color:var(--border);color:var(--ink)}
.ac-count{font-size:13px;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ac-count b{color:var(--ink);font-variant-numeric:tabular-nums}
.ac-pager.ac-pager-top{margin:0}
.ac-pager.ac-pager-top button{padding:2px 8px;min-width:30px}
#actividad-root details.howto{margin:0}

/* ── tabla y panel lateral ─────────────────────────────────────────────────────────────────
   A ≥ 1 500 px de vista (.ac-wide) el panel va a la derecha, fijo al bajar y con su propio
   desplazamiento; más angosto, debajo de la tabla en tarjetas lado a lado. Sin overflow en la
   columna de la tabla: el thead fijo de .tbl-wrap necesita que ningún ancestro desplace */
.ac-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start}
#actividad-root.ac-wide .ac-grid{grid-template-columns:minmax(0,1fr) 280px}
.ac-main{min-width:0}
.ac-list{transition:opacity .15s}
.ac-list.ac-loading{opacity:.6}
/* con el id: .empty de index.html va después y su borde taparía la raya */
#actividad-root .ac-errbox{border-left:3px solid var(--warning);color:var(--ink-2)}
.ac-foot{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.ac-foot .ac-pp{margin-top:10px}
.ac-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Tabla automática con UN renglón por fila: cada dato tiene su tope (.trunc) y el Detalle se
   queda con el ancho que sobra y corta con «…» (max-width:0 + width:100%, como el mensaje de
   Alertas). Lo cortado sigue completo en el title y en la fila abierta */
.ac-table td{white-space:nowrap}
.tbl-wrap > .ac-table > thead > tr > th{top:calc(var(--hd-h,50px) + var(--ac-head-h,0px))}
.ac-table td.ac-c-time{color:var(--ink-2);width:1%}
.ac-table .ac-c-ent .trunc{--trunc:120px;color:var(--ink-2)}
.ac-namebox{display:inline-flex;align-items:baseline;gap:.5em;max-width:var(--ac-name);min-width:0;
  vertical-align:bottom}
.ac-nm{flex:0 1 auto;min-width:0;color:var(--ink)}
.ac-nm.muted{color:var(--muted)}
/* la entidad dentro del Nombre (cuando su columna no cabe) no encoge: corta solo si pasa de
   90 px; el que se corta es el nombre */
.ac-ent-inl{display:none;flex:none;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--muted);font-size:12px}
.ac-userbox{display:inline-flex;align-items:baseline;min-width:0;vertical-align:bottom}
.ac-un{--trunc:var(--ac-user);color:var(--ink)}
.ac-unknown{color:var(--muted);font-style:italic}
.ac-table td.ac-c-det{max-width:0;width:100%;overflow:hidden;text-overflow:ellipsis;color:var(--ink-2)}
.ac-k{color:var(--muted)}
.ac-sep{color:var(--muted)}
.ac-err{color:color-mix(in srgb,var(--critical) 70%,#fff)}
.ac-errw{color:var(--warning)}
.ac-note{color:var(--muted);font-style:italic}
.ac-hid{color:var(--muted);font-style:italic}
.ac-verb{color:var(--ink)}
.ac-table .ac-c-ip .trunc{--trunc:125px;color:var(--ink-2)}
.pill.ac-st b{font-weight:600;color:var(--ink)}
/* raya a la izquierda: rojo si falló, ámbar si fue un intento fallido o reveló secretos */
.ac-row.ac-bad > td:first-child{box-shadow:inset 3px 0 0 var(--critical)}
.ac-row.ac-bad:has(.ac-a-login_fallido) > td:first-child,.ac-row.ac-secret > td:first-child{
  box-shadow:inset 3px 0 0 var(--warning)}
.ac-table tr.ac-day td{background:var(--surface-2);color:var(--ink-2);font-size:12px;font-weight:600;
  padding:4px 10px}
.ac-table tbody tr.ac-day:hover{background:none}
.ac-row.ac-open > td{background:var(--surface-2)}
.ac-table button.ac-tog[aria-expanded="true"]{color:var(--ink);background:var(--surface-2);border-color:var(--border)}

/* columnas según el ancho real de la tabla (las pone actividad.js) */
.ac-table .ac-c-text{display:none}
#actividad-root.ac-no-ent .ac-table .ac-c-ent{display:none}
#actividad-root.ac-no-ent{--ac-name:min(260px,19vw)}
#actividad-root.ac-no-ent .ac-table .ac-stw{display:none}
#actividad-root.ac-no-ent .ac-ent-inl{display:inline-block}
#actividad-root.ac-no-ent .ac-table .ac-role{display:none}
#actividad-root.ac-no-ip .ac-table .ac-c-ip{display:none}
/* tableta y celular: «Hora · Qué pasó · Estado». El resumen en español en el 1.er renglón y
   quién y desde dónde en el 2.º (en una pantalla táctil el title no se ve). La píldora de
   estado queda como su punto de color */
#actividad-root.ac-xs .ac-table .ac-c-act,#actividad-root.ac-xs .ac-table .ac-c-ent,
#actividad-root.ac-xs .ac-table .ac-c-name,#actividad-root.ac-xs .ac-table .ac-c-user,
#actividad-root.ac-xs .ac-table .ac-c-det,#actividad-root.ac-xs .ac-table .ac-c-ip{display:none}
#actividad-root.ac-xs .ac-table .ac-c-text{display:table-cell;max-width:0;width:100%}
#actividad-root.ac-xs .ac-table td.ac-c-time{vertical-align:top}
#actividad-root.ac-xs .ac-table td.ac-c-st .pill{font-size:0;gap:0;padding:4px}
#actividad-root.ac-xs .ac-table td.ac-c-st .ac-stt{display:none}
/* en el celular cada píxel va a «Qué pasó»: hora sin segundos (completa en el title y en la fila
   abierta), Estado sin rótulo (solo el punto), sin ⋯ (sus opciones están en la fila abierta, que
   se abre tocando la fila) y relleno de celda más chico */
#actividad-root.ac-xs .ac-table .ac-ss,#actividad-root.ac-xs .ac-table .ac-sth,
#actividad-root.ac-xs .ac-table td.acts details.kebab{display:none}
#actividad-root.ac-xs .ac-table td,#actividad-root.ac-xs .ac-table th{padding-left:6px;padding-right:6px}
#actividad-root.ac-xs .ac-table tr.ac-exp > td{padding:0}
.ac-t1,.ac-t2{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ac-t1{color:var(--ink)}
.ac-t2{font-size:12px;color:var(--muted);line-height:1.35}
/* tableta (600–820 px de tabla): tras «usuario · IP» va el resumen del Detalle (destino del ping,
   campos cambiados, motivo en rojo); en el celular no cabe y queda en la fila abierta */
.ac-t2d{display:none;color:var(--ink-2)}
#actividad-root.ac-xsw .ac-t2d{display:inline}

/* ── fila abierta: petición completa a la izquierda, JSON a la derecha ───────────────────── */
.ac-table tr.ac-exp > td{white-space:normal;padding:0;background:color-mix(in srgb,var(--surface) 55%,var(--plane))}
.ac-table tbody tr.ac-exp:hover{background:none}
.ac-expbox{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:12px 22px;
  padding:10px 14px 12px 16px;border-left:3px solid var(--s1)}
#actividad-root.ac-xs .ac-expbox{grid-template-columns:minmax(0,1fr);padding:8px 10px 10px 12px}
.ac-exp-text{font-size:14px;color:var(--ink);margin:0 0 8px;overflow-wrap:anywhere;line-height:1.4}
.ac-exp-text svg.ac-lock{color:var(--warning);margin-right:6px;vertical-align:-2px}
/* con ancho de sobra los datos van en 2 columnas (la fila abierta mide la mitad). Contenedor
   propio: no hay ningún ⋯ (position:fixed) dentro de .ac-exp-l, así la contención no estorba */
.ac-exp-l{container-type:inline-size;min-width:0}
.ac-kv{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:3px 14px;margin:0;font-size:13px}
@container (min-width:560px){.ac-kv{grid-template-columns:max-content minmax(0,1fr) max-content minmax(0,1fr)}}
.ac-kv dt{color:var(--muted)}
.ac-kv dd{margin:0;color:var(--ink-2);overflow-wrap:anywhere}
.ac-kv dd.mono{font-size:12.5px}
.ac-exp-acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ac-exp-acts button.mini{margin:0;display:inline-flex;align-items:center;gap:5px;padding:3px 9px}
.ac-exp-acts svg.i{width:13px;height:13px}
.ac-exp-jh{display:flex;align-items:center;gap:8px;margin-bottom:6px;font-size:12px;color:var(--ink-2)}
.ac-exp-jh button.mini{margin:0 0 0 auto}
.ac-exp-note{margin:0 0 6px;font-size:12.5px;color:var(--muted)}
pre.ac-json{margin:0;max-height:340px;overflow:auto;background:var(--plane);border:1px solid var(--border);
  border-radius:6px;padding:8px 10px;font:12.5px/1.5 ui-monospace,"Cascadia Mono",Consolas,monospace;
  color:var(--ink-2);white-space:pre-wrap;overflow-wrap:anywhere}
.ac-j-key{color:color-mix(in srgb,var(--s1) 55%,var(--ink-2))}
.ac-j-str{color:var(--ink)}
.ac-j-num{color:color-mix(in srgb,var(--good) 70%,#fff)}
.ac-j-lit{color:var(--muted)}
.ac-j-hid{color:var(--warning);font-style:italic}
table.ac-ipt{width:auto;min-width:240px}
.ac-ipt td,.ac-ipt th{white-space:nowrap}

/* ── panel lateral ─────────────────────────────────────────────────────────────────────── */
.ac-side{display:grid;gap:10px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));min-width:0}
#actividad-root.ac-wide .ac-side{display:flex;flex-direction:column;position:sticky;
  top:calc(var(--hd-h,50px) + var(--ac-head-h,0px));
  max-height:calc(100vh - var(--hd-h,50px) - var(--ac-head-h,0px) - 20px);overflow-y:auto;
  margin-right:-6px;padding-right:6px}
.ac-card{background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 10px 9px;
  min-width:0;flex:none}
.ac-card-h{display:flex;align-items:baseline;gap:8px;margin-bottom:6px;font-size:13px;min-width:0}
.ac-card-h b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.ac-card-h .sub{margin-left:auto;white-space:nowrap}
.ac-none{font-size:12.5px;color:var(--muted);padding:2px 0}
.ac-none.ac-ok::before{content:"✓ ";color:var(--good)}
/* barras por día (SVG): azul = registros, ámbar = intentos fallidos; clic = ver ese día */
svg.ac-days{display:block;width:100%;height:74px}
.ac-dbar{cursor:pointer}
.ac-dbar .ac-hit{fill:transparent}
.ac-dbar:hover .ac-hit{fill:var(--surface-2)}
.ac-bn{fill:color-mix(in srgb,var(--s1) 80%,var(--surface))}
.ac-dbar:hover .ac-bn,.ac-dbar.on .ac-bn{fill:var(--s1)}
.ac-dbar.on .ac-hit{fill:color-mix(in srgb,var(--s1) 16%,transparent)}
/* con teclado (flechas entre barras): el foco se ve como el realce del clic más un borde azul */
.ac-dbar:focus{outline:none}
.ac-dbar:focus-visible .ac-hit{fill:color-mix(in srgb,var(--s1) 22%,transparent);stroke:var(--s1);
  stroke-width:1.5;vector-effect:non-scaling-stroke}
.ac-dbar:focus-visible .ac-bn{fill:var(--s1)}
.ac-bf{fill:var(--warning)}
.ac-days-x{display:flex;justify-content:space-between;gap:8px;font-size:12px;color:var(--muted);
  margin-top:2px;white-space:nowrap}
.ac-legend{display:flex;gap:12px;font-size:12px;color:var(--muted);margin-top:4px}
.ac-sw{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.ac-sw-n{background:var(--s1)} .ac-sw-f{background:var(--warning)}
/* listas «Quién» e «Intentos fallidos por IP»: un renglón de 28 px por elemento, todo es filtro */
.ac-lis{display:flex;flex-direction:column;gap:2px}
button.ac-li{display:flex;align-items:center;gap:8px;width:100%;min-width:0;height:28px;padding:0 8px;
  background:none;border:1px solid transparent;border-radius:6px;text-align:left;color:var(--ink-2);font-size:13px}
button.ac-li:hover{background:var(--surface-2);border-color:var(--border);color:var(--ink)}
button.ac-li.on{border-color:var(--s1);background:color-mix(in srgb,var(--s1) 14%,var(--surface))}
.ac-li-n{flex:1 1 auto;min-width:0;display:flex;align-items:baseline;gap:6px;overflow:hidden;white-space:nowrap}
.ac-li-n > .trunc{flex:0 1 auto;color:var(--ink)}
.ac-li-n > .sub{margin:0;flex:0 10 auto;min-width:0}
.ac-li-c{flex:none;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums}
.ac-li-c.ac-warn{color:var(--warning)}
.ac-li-e{flex:none;min-width:18px;height:17px;padding:0 5px;border-radius:9px;background:var(--critical);
  color:#fff;font-size:12px;font-weight:600;line-height:17px;text-align:center;font-variant-numeric:tabular-nums}
.ac-li-t{flex:none;width:44px;text-align:right;color:var(--muted);font-size:12px;white-space:nowrap}
.ac-ents{gap:5px}
.ac-ents .chip{height:24px;padding:0 9px;font-size:12px}

/* «Exportar CSV» es un enlace (<a download>) en el encabezado global: mismo aspecto que los
   botones de ahí y, como ellos, solo el icono a ≤ 1100 px */
#page-actions a.ac-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.ac-csv:hover{color:var(--ink);border-color:var(--muted)}
#page-actions a.ac-csv:focus-visible{outline:2px solid var(--s1);outline-offset:1px}
@media(max-width:1100px){
  #page-actions a.ac-csv{width:30px;padding:0;justify-content:center}
  #page-actions a.ac-csv .lbl{display:none}
}

/* celular y tableta angosta: la barra deja de ser fija (le quitaría media pantalla) y el thead
   vuelve a su sitio (en ≤ 900 px .tbl-wrap desplaza a lo ancho y un th fijo quedaría flotando
   dentro de la tabla). 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){
  .ac-head{position:static;padding:0;margin:0}
  .tbl-wrap > .ac-table > thead > tr > th{position:static}
  .ac-pager.ac-pager-top{display:none}
  .ac-bar2{margin-left:0}
  .ac-dates{display:flex;flex:1 1 100%;gap:10px;min-width:0}
  .ac-dates .ac-f{flex:1 1 0;min-width:0}
  .ac-dates input{flex:1 1 auto;min-width:0;width:100%}
  .ac-bar select{flex:1 1 140px;max-width:none}
  .ac-bar input[type=search]{flex:1 1 100%;max-width:none}
  .ac-bar .seg{display:flex;width:100%}
  .ac-bar .seg button{flex:1 1 0;padding:0 4px}
}