/* Estilos propios de las pantallas (config, usuarios, auditoría, cuenta, inventario, servidores, avisos). Sin estilos en línea. */
.toolbar { display: flex; gap: var(--sp-2); align-items: flex-end; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.toolbar .input { width: auto; min-width: 160px; }
.toolbar .field { margin: 0; }
.toolbar-wrap { background: var(--panel); border: 1px solid var(--bd); border-radius: var(--radius-l); padding: var(--sp-3); }
.toolbar-wrap .field { min-width: 150px; flex: 1 1 150px; }
.break { overflow-wrap: anywhere; word-break: break-all; }
.row-actions { display: flex; gap: 2px; flex-wrap: wrap; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--sp-2); }
.session-row { display: flex; gap: var(--sp-3); justify-content: space-between; align-items: flex-start; padding: var(--sp-3); border: 1px solid var(--bd); border-radius: var(--radius-m); background: var(--panel); }
.session-row > div { min-width: 0; overflow-wrap: anywhere; }

/* Configuración */
.cfg-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.cfg-nav { position: sticky; top: calc(var(--header-h) + var(--sp-3)); }
.cfg-nav ul { list-style: none; margin: 0; padding: 0; }
.cfg-body { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-4); }
.cfg-body .card + .card { margin-top: 0; }
.cfg-body fieldset { border: 1px solid var(--bd); border-radius: var(--radius-m); padding: var(--sp-3); margin: var(--sp-3) 0; }
.cfg-body legend { font-weight: 700; padding: 0 var(--sp-2); }
.tg-preview { white-space: pre-wrap; background: var(--soft); border: 1px solid var(--bd); border-left: 4px solid var(--acc); border-radius: var(--radius-m); padding: var(--sp-3); font-family: var(--mono); font-size: var(--fs-s); }
@media (max-width: 860px) {
  .cfg-layout { grid-template-columns: minmax(0, 1fr); gap: var(--sp-3); }
  .cfg-nav { position: static; overflow-x: auto; }
  .cfg-nav ul { display: flex; gap: 4px; }
  .cfg-nav .nav-link { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; }
  .cfg-nav .nav-link[aria-current="page"] { border-bottom-color: var(--accent2); }
}

/* Avisos */
.adv-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.adv-affect { margin: 6px 0 0; }

/* Ficha de CVE */
.affect-title { font-size: var(--fs-l); margin: var(--sp-4) 0 var(--sp-2); }

/* Inventario */
.kpis-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
@media (max-width: 1399.98px) { .kpis-5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 767.98px) { .kpis-5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tbl tr.is-stale-row td { background: color-mix(in srgb, var(--st-nodata) 7%, transparent); }
.tbl tr.is-bad td { background: color-mix(in srgb, var(--st-error) 7%, transparent); }
.tbl tr.is-muted-row td { color: var(--mut); }

/* Servidores: barra mínima de abiertos por severidad */
.mini-bar { display: flex; align-items: center; gap: var(--sp-2); min-width: 120px; }
.mini-bar .bar-track { display: flex; flex: 1; height: 10px; border-radius: 999px; overflow: hidden; background: var(--soft); border: 1px solid var(--bd); }
.mini-bar .bar-seg { cursor: default; flex: 0 0 auto; }
.mini-bar .bar-val { font-variant-numeric: tabular-nums; font-weight: 700; min-width: 2ch; text-align: right; }

/* Resumen: tabla de EOL */
.tbl-eol { width: 100%; }

/* Demo */
.demo-tag { margin: 0 0 var(--sp-3); text-align: center; }

/* El foco programático en el título o en <main> al cambiar de pantalla no es un control: sin recuadro. */
[tabindex="-1"]:focus, [tabindex="-1"]:focus-visible { outline: none; }

/* Tablas anchas: en pantallas medianas se ocultan columnas secundarias (siguen en el detalle) y se compactan las celdas. */
@media (min-width: 768px) and (max-width: 1599.98px) {
  .tbl .cell-hide-md { display: none; }
  .tbl th, .tbl td { padding: 8px 8px; }
}
.toolbar input[type="search"] { min-width: 240px; }
.icon-actions { display: flex; gap: 2px; flex-wrap: nowrap; }

/* Móvil: la cabecera solo lleva menú, marca, tema, escanear (icono) y cuenta; el estado de los datos ya está en el Resumen y en los avisos. */
@media (max-width: 767.98px) {
  .topbar .status { display: none; }
  #scan-btn > span { display: none; }
  #scan-btn, #user-btn { padding-inline: 10px; }
}

@media (max-width: 767.98px) {
  .toolbar > .field, .toolbar > .input, .toolbar > select, .toolbar > .search { flex: 1 1 100%; width: 100%; }
  .toolbar .input, .toolbar input[type="search"] { width: 100%; min-width: 0; }
  .icon-actions { flex-wrap: wrap; justify-content: flex-end; }
}

/* Ficha de CVE: descripción y referencias (integración 2026-10-23) */
.cve-desc { display: inline; overflow-wrap: anywhere; }
.refs { margin: var(--sp-2) 0; }
.refs summary { cursor: pointer; font-weight: 600; }
.refs-list { margin: var(--sp-2) 0 0; padding-left: var(--sp-4); display: grid; gap: var(--sp-1); overflow-wrap: anywhere; }
.res-card .kv { margin-bottom: var(--sp-3); }