/* Atalaya sobre BCA: solo el tema y lo propio de la aplicación. */

:root {
  /* Colores de estado de Atalaya; el resto es el tema por defecto de BCA. */
  --atl-ok: #1f9d55;
  --atl-aviso: #c98a00;
  --atl-critico: #d64545;
  --atl-desconocido: #8a94a6;
  --atl-apagado: #b4bccb;
  --atl-atenuado: #5d6779;
}

main { max-width: 1440px; margin: 0 auto; padding: 8px 20px 24px; }
main:has(#view-mapa:not(.bca_oculto)) { max-width: none; }
h1 { font-size: 1.4rem; margin: 0; }
code { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .9em; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.bca_apm_logo img { vertical-align: -5px; }

body.lector .solo-admin { display: none !important; }

/* Inicio de sesión */
.login { margin: 40px auto; }
/* Con la letra del navegador ampliada (Firefox móvil al 135%) los 285 px de BCA no caben: que la tarjeta se adapte al ancho. */
.bca_panel.bca_p_s.login { width: min(285px, 100%); max-width: 100%; box-sizing: border-box; }
.login h1 { margin-bottom: 12px; }
.login form { display: flex; flex-direction: column; gap: 10px; }
.login .bca_in:not(label) { width: 100%; }
.ayuda-campo { color: var(--atl-atenuado); font-size: .85em; margin-top: 3px; }

/* Barra de la lista */
.barra { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0 14px; }
.barra .filtro { flex: 1; min-width: 160px; max-width: 320px; margin-left: auto; }
.resumen { display: flex; gap: 6px; flex-wrap: wrap; }
.pill { padding: 1px 9px; border-radius: 999px; font-size: .85rem; border: 1px solid var(--bca-borde, #ccc); }
.pill::before, .punto {
  content: ""; display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 6px; background: var(--atl-desconocido); vertical-align: 0;
}
.pill.ok::before, .punto.ok { background: var(--atl-ok); }
.pill.warning::before, .punto.warning { background: var(--atl-aviso); }
.pill.critical::before, .punto.critical, .pill.down::before, .punto.down { background: var(--atl-critico); }
.pill.off::before, .punto.off { background: var(--atl-apagado); }

.vacio { margin: 16px 0; }
.pie-info { color: var(--atl-atenuado); margin-top: 14px; }

/* Navegación y fichas */
.contador { display: inline-block; min-width: 1.4em; padding: 0 5px; margin-left: 4px; border-radius: 999px;
  background: var(--atl-aviso); color: #fff; font-size: .8em; text-align: center; line-height: 1.4em; }
.contador.critico { background: var(--atl-critico); }
.vista-activa > a, .bca_apm_subelem.vista-activa { color: var(--bca-acento); }
.bca_apm_subelem.vista-activa { font-weight: 600; }
.bca_apm_menu_btn { cursor: pointer; }
.bca_apm_subm .bca_apm_subelem { text-decoration: none; color: inherit; white-space: nowrap; }
.bca_apm_subm .bca_apm_subelem.vista-activa { color: var(--bca-acento); }
tr.enlace { cursor: pointer; }
.nombre a { color: inherit; text-decoration: none; }
.nombre a:hover { text-decoration: underline; }
.nombre small, td small { display: block; color: var(--atl-atenuado); font-weight: 400; }
.alerta-ico { color: var(--atl-critico); margin-left: 6px; }
.agente-ico { color: var(--atl-atenuado); margin-left: 6px; }
.fallo { color: var(--atl-critico); font-weight: 600; }
.migas { margin: 8px 0 0; }
.migas a { text-decoration: none; }
h2 { font-size: 1.15rem; margin: 22px 0 8px; }
.ficha { display: flex; flex-wrap: wrap; gap: 6px 24px; margin-bottom: 6px; }
.tabla-datos td.mensaje { white-space: normal; min-width: 220px; max-width: 480px; }
.tabla-datos th, .tabla-datos td { padding: 7px 10px; text-align: left; white-space: nowrap; }
.tabla-datos .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-datos .acciones { text-align: right; }
.tabla-datos .acciones .bca_btn + .bca_btn { margin-left: 6px; }
.tabla-datos .borrar { background: var(--atl-critico); border-color: var(--atl-critico); color: #fff; }
.tabla-datos tr.desactivado td { opacity: .55; }
.tabla-datos { width: 100%; }
.lista-alertas { list-style: none; padding: 0; margin: 0; }
.lista-alertas li { padding: 4px 0; }
.segmento { margin-left: auto; display: flex; }
.segmento .bca_btn { background: var(--bca-fondo, #fff); color: var(--bca-texto, #000); border-radius: 0; }
.segmento .bca_btn:first-child { border-radius: 4px 0 0 4px; }
.segmento .bca_btn:last-child { border-radius: 0 4px 4px 0; }
.segmento .bca_btn.activo { background: var(--bca-acento); color: var(--bca-acento-texto); }

/* Ajustes */
.ajustes { max-width: 720px; }
.ajustes .grupo { margin: 0 0 14px; padding: 12px 16px; }
.ajustes legend { font-weight: 700; padding: 0 6px; }
.ajustes .bca_grpctrl { margin-bottom: 10px; }

/* Formularios */
.formulario { display: flex; flex-direction: column; gap: 12px; }
.formulario .bca_in:not(label) { width: 100%; }
.formulario .bca_grpctrl > label.bca_in { display: block; margin-bottom: 3px; }
.formulario .bca_in.corto:not(label) { width: 10em; }
.formulario .interruptor { display: flex; align-items: center; gap: 10px; }
.formulario .interruptor label:last-child { font-weight: 600; }
.campos-tipo { display: flex; flex-direction: column; gap: 12px; }
.franja { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; }
.franja .bca_in:not(label) { width: 7.5em; }
.dias input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dias label { display: inline-block; width: 1.9em; text-align: center; border: 1px solid var(--bca-borde, #ccc);
  border-radius: 4px; cursor: pointer; margin-right: 2px; user-select: none; }
.dias input:checked + label { background: var(--bca-acento); color: var(--bca-acento-texto); border-color: var(--bca-acento); }
.dias input:focus-visible + label { outline: 2px solid var(--bca-acento); }

/* Páginas de ayuda */
.doc-body { max-width: 820px; line-height: 1.6; }
.doc-body h1 { font-size: 1.8rem; margin: 8px 0 16px; }
.doc-body h2 { font-size: 1.3rem; margin: 32px 0 8px; padding-top: 8px; border-top: 1px solid var(--bca-borde-suave, #ddd); }
.doc-body h3 { font-size: 1.1rem; margin: 24px 0 6px; }
.doc-body pre { background: var(--bca-fondo-suave, #eee); border: 1px solid var(--bca-borde-suave, #ddd);
  border-radius: 6px; padding: 12px; overflow-x: auto; line-height: 1.4; }
.doc-body table { margin: 12px 0; }
.doc-body td, .doc-body th { padding: 6px 10px; vertical-align: top; text-align: left; }
.doc-body .bca_blq_info { margin: 14px 0; }

/* Métricas de los agentes */
.graficas { display: flex; flex-wrap: wrap; gap: 16px; }
.grafica h3 { font-size: 1rem; margin: 6px 0 2px; }
.grafica .u-legend { font-size: .8rem; text-align: left; }
.grafica .u-legend .u-series th { font-weight: 400; }
pre.orden { white-space: pre-wrap; word-break: break-all; background: #f4f6f9; border: 1px solid var(--bca-borde, #ccc);
  border-radius: 4px; padding: 10px; font-size: .85rem; user-select: all; }
.en-linea { display: flex; gap: 8px; align-items: center; }

/* Tablas: si no caben, se desplazan dentro de su caja en lugar de salirse de la página. */
.tabla-cnt { overflow-x: auto; max-width: 100%; position: relative; }
.tabla-paquetes { max-height: 55vh; overflow: auto; }
.tabla-datos td.ajustable { white-space: normal; min-width: 120px; max-width: 280px; }

/* Diálogos: más anchos que los de BCA por defecto y con aire en los bordes. */
.bca_dialogo.bca_dia_s { width: min(440px, 95vw); }
/* Valores SNMP de una comprobación y búsqueda en las MIB */
.snmp-modo { display: flex; flex-direction: column; gap: 12px; }
.snmp-valores { display: flex; flex-direction: column; gap: 10px; }
.snmp-valor {
  display: flex; flex-direction: column; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--bca-borde-suave, #ddd); border-radius: 6px;
}
.snmp-linea { display: flex; flex-wrap: wrap; gap: 12px; }
.formulario .snmp-linea > .bca_grpctrl { width: auto; flex: 0 0 auto; }
.snmp-linea .corto-grp .bca_in:not(label) { width: 10em; }
.mib-resultados {
  max-height: 14em; overflow-y: auto; margin-top: 4px;
  border: 1px solid var(--bca-borde-suave, #ddd); border-radius: 6px;
}
.mib-res {
  display: grid; grid-template-columns: minmax(8em, auto) 1fr; gap: 0 12px; width: 100%; padding: 6px 10px;
  text-align: left; border: 0; border-bottom: 1px solid var(--bca-borde-suave, #eee); background: transparent; cursor: pointer; font: inherit;
}
.mib-res:hover, .mib-res:focus-visible { background: rgba(47, 111, 223, .1); }
.mib-res code { color: var(--atl-atenuado); overflow-wrap: anywhere; }
.mib-res small { grid-column: 1 / -1; color: var(--atl-atenuado); }
.mib-nada { padding: 8px 10px; color: var(--atl-atenuado); }

@media (min-width: 601px) { .bca_dialogo.bca_dia_m { width: min(680px, 95vw); } }
.bca_dialogo > .bca_dia_cabecera { padding: 10px 16px; font-size: 11pt; }
.bca_dialogo > .bca_dia_cuerpo { padding: 16px 18px; }
.bca_dialogo > .bca_dia_pie { padding: 10px 16px; }
.bca_dialogo > .bca_dia_pie .bca_btn + .bca_btn { margin-left: 8px; }
.formulario { gap: 14px; }
.formulario .bca_grpctrl { margin: 0; }
.formulario input.bca_in:not([type=checkbox]), .formulario select.bca_in, .formulario textarea.bca_in { padding: 5px 8px; font-size: .95rem; }
.formulario .bca_grpctrl > label.bca_in { margin-left: 2px; }

/* Clave pública SSH en la tabla de credenciales */
.clave-publica { word-break: break-all; font-size: .85em; margin-right: .4em; }

/* Mapa de red */
.mapa-caja { position: relative; overflow: hidden; height: 60vh; border: 1px solid #d5dae3; border-radius: 6px; background: #fbfcfd; touch-action: none; cursor: grab; }
.mapa-caja:active { cursor: grabbing; }
.mapa-svg { display: block; }
.mapa-botones { position: absolute; top: 8px; right: 8px; z-index: 2; display: flex; gap: 4px; }
.mapa-caja:fullscreen { border-radius: 0; border: 0; }
.mapa-nodo { cursor: pointer; }
.mapa-nodo:hover rect, .mapa-nodo:focus rect { fill: #eef3fb; }
.mapa-nombre { font-weight: 600; font-size: 13px; fill: #1d2433; }
.mapa-dir { font-size: 11px; fill: var(--atl-atenuado); }
.mapa-alerta { fill: var(--atl-critico); font-size: 14px; }
.mapa-titulo { font-size: 13px; font-weight: 600; fill: var(--atl-atenuado); }
.leyenda { margin: 8px 0; display: flex; gap: 8px; flex-wrap: wrap; }

/* Inventario */
.tabla-datos tr.clicable { cursor: pointer; }
.aviso-seg { color: var(--atl-critico); }
#view-inventario .filtro { max-width: 420px; }

/* Móvil y pantallas estrechas */
@media (max-width: 600px) {
  main { padding: 4px 12px 20px; }
  h1 { font-size: 1.25rem; }
  .barra { gap: 8px; }
  .barra .filtro, #view-inventario .filtro { flex: 1 1 100%; max-width: none; margin-left: 0; }
  .segmento { margin-left: 0; }
  .ficha { gap: 4px 16px; }
  .ajustes { max-width: none; }
  .ajustes .grupo { padding: 10px 12px; }
  .formulario .bca_in.corto:not(label) { width: 100%; }
  .franja .bca_in:not(label) { width: 6.5em; }
  .grafica, .graficas > * { max-width: 100%; }
  .doc-body table { display: block; overflow-x: auto; }
  pre.orden { font-size: .8rem; }

  /* Las tablas de datos pasan a fichas: una por fila, con el título de cada dato a la izquierda. */
  .tabla-cnt { overflow-x: visible; }
  .tabla-datos, .tabla-datos tbody { display: block; width: 100%; }
  .tabla-datos thead { display: none; }
  .tabla-datos tr {
    display: flex; flex-direction: column; margin: 0 0 10px; padding: 4px 12px;
    border: 1px solid var(--bca-borde-suave, #ddd); border-radius: 6px; background: var(--bca-fondo, #fff);
  }
  .tabla-datos.bca_tbl_cebra tr { background: var(--bca-fondo, #fff); background-image: none; }
  .tabla-datos th, .tabla-datos td {
    display: block; overflow: hidden; padding: 6px 0; text-align: right; white-space: normal;
    min-width: 0; max-width: none; border: 0; word-break: break-word;
  }
  .tabla-datos td + td { border-top: 1px solid var(--bca-borde-suave, #eee); }
  .tabla-datos td[data-label]::before {
    content: attr(data-label); float: left; max-width: 42%; margin-right: 12px; text-align: left;
    color: var(--atl-atenuado); font-size: .85em;
  }
  .tabla-datos td.nombre, .tabla-datos td.mensaje, .tabla-datos td.ajustable { text-align: left; }
  .tabla-datos td.mensaje::before { float: none; display: block; max-width: none; margin: 0 0 2px; }
  .tabla-datos td.nombre { order: -1; font-weight: 600; font-size: 1.05em; border-top: 0; }
  .tabla-datos td.nombre::before { display: none; }
  .tabla-datos td.nombre + td { border-top: 1px solid var(--bca-borde-suave, #eee); }
  .tabla-datos td.acciones { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: 6px; padding-top: 8px; }
  .tabla-datos td.acciones::before { display: none; }
  .tabla-datos .acciones .bca_btn + .bca_btn { margin-left: 0; }
  .tabla-datos td[colspan] { text-align: left; }
  .tabla-datos td small { text-align: inherit; }
}

.aviso-satelite { color: #b45f06; white-space: normal; max-width: 28em; }

/* Verificación en dos pasos */
#tfa-qr { width: 200px; max-width: 100%; background: #fff; padding: 4px; margin: 6px 0; }
#tfa-codes-list { font-size: 1.1em; line-height: 1.6; }
.aviso-version { color: var(--bca-aviso, #b36b00); margin-left: .25em; }

/* Barra superior: elementos más separados y el menú del usuario a la derecha */
@media (min-width: 600px) {
  .bca_apm_adaptable .bca_apm_bar > .bca_apm_elem { margin-right: 10px; padding-left: 10px; padding-right: 10px; }
  .bca_apm_adaptable .bca_apm_bar > #user-menu { margin-left: auto; margin-right: 0; position: relative; }
  #user-menu > .bca_apm_subm { right: 0; }
}