/* Imperva Assessment Hub - estilo heredado de Imperva WAF Monitor (mismas variables, tarjetas, barra lateral y login) */
:root {
  --bg: #0f1420;
  --bg-panel: #161d2e;
  --bg-card: #1b2436;
  --border: #2a3348;
  --text: #e7ecf5;
  --text-dim: #93a0b8;
  --accent: #4f8cff;
  --accent-2: #34d1a8;
  --warn: #ffb454;
  --danger: #ff5c73;
  --pop-color: #4f8cff;
  --origin-color: #34d1a8;
  --error-color: #ff5c73;
  color-scheme: dark;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
}

/* ---------- Login ---------- */
.login-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100vh;
  padding: 24px 16px 0;
  box-sizing: border-box;
  background: radial-gradient(circle at top, #1a2338 0%, #0b0f18 70%);
}
/* Los margenes automaticos centran la tarjeta verticalmente en el espacio que deja el pie; si la pagina es
   mas alta que la ventana (p. ej. la configuracion inicial en una pantalla corta), el pie sigue en el flujo,
   debajo de la tarjeta, sin taparla. */
.login-body > .login-card { margin: auto 0; }
/* Logo fijo en la esquina superior izquierda de la pagina de login. */
.corner-logo { position: fixed; top: 20px; left: 24px; height: 30px; width: auto; opacity: 0.95; }
@media (max-width: 480px) { .corner-logo { top: 14px; left: 16px; height: 24px; } }

.login-card {
  width: 360px;
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 32px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.4);
}

.brand { display: flex; align-items: center; gap: 12px; margin-bottom: 24px; }
.brand-badge {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; color: #05101f;
}
.brand-badge img { width: 22px; height: 22px; object-fit: contain; }
.brand h1 { font-size: 16px; margin: 0; font-weight: 600; }
.brand-logo { height: 34px; width: auto; max-width: 160px; border-radius: 6px; object-fit: contain; }
.hidden { display: none !important; }

/* ---------- Botones ---------- */
.btn-primary {
  padding: 10px 16px; border: none; border-radius: 8px; background: var(--accent);
  color: white; font-weight: 600; cursor: pointer; font-size: 13.5px;
}
.btn-primary:hover { filter: brightness(1.08); }
.btn-primary:disabled { opacity: 0.6; cursor: default; }
.btn-danger {
  padding: 10px 16px; border: 1px solid var(--danger); border-radius: 8px; background: transparent;
  color: var(--danger); font-weight: 600; cursor: pointer; font-size: 13.5px;
}
.btn-danger:hover { background: rgba(255,92,115,0.12); }
.btn-danger:disabled { opacity: 0.6; cursor: default; }

/* ---------- Modal de configuracion ---------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(5,8,15,0.65);
  display: flex; align-items: center; justify-content: center; z-index: 1000; padding: 16px;
}
.modal {
  width: 480px; max-width: 100%; max-height: 88vh; overflow-y: auto;
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 14px;
  padding: 22px; box-shadow: 0 24px 70px rgba(0,0,0,0.5);
}
.modal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.modal-header h2 { margin: 0; font-size: 17px; }
.modal-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--border); margin-bottom: 18px; }
.tab-btn {
  background: transparent; border: none; color: var(--text-dim); padding: 8px 12px;
  cursor: pointer; font-size: 13px; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.tab-btn.active { color: var(--text); border-bottom-color: var(--accent); font-weight: 600; }

.tab-panel { display: flex; flex-direction: column; gap: 6px; }
.tab-panel label { font-size: 12px; color: var(--text-dim); margin-top: 10px; }
.tab-panel input[type="text"],
.tab-panel input[type="password"] {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px;
  padding: 10px 12px; color: var(--text); font-size: 14px;
}
.tab-panel input[type="color"] {
  width: 100%; height: 38px; padding: 2px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 8px; cursor: pointer;
}
.tab-panel input[type="file"] { font-size: 12.5px; color: var(--text-dim); }

.color-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.switch-row {
  display: flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.switch-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }

.logo-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 6px; }
.logo-preview-badge {
  width: 40px; height: 40px; border-radius: 10px;
  background: linear-gradient(135deg, var(--accent), var(--accent-2));
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 12px; color: #05101f; flex-shrink: 0;
}
.logo-preview-img { height: 40px; max-width: 140px; object-fit: contain; border-radius: 6px; flex-shrink: 0; }
.logo-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.form-msg { font-size: 12.5px; min-height: 16px; margin: 8px 0 0; }
.form-msg.ok { color: var(--accent-2); }
.form-msg.error { color: var(--danger); }

.storage-info { font-size: 12.5px; color: var(--text-dim); display: flex; flex-direction: column; gap: 3px; margin: 6px 0 10px; }
.storage-info strong { color: var(--text); }

.modal-divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }
.warn-hint { color: var(--warn); }


/* ---------- Aviso de cambio de contrasena obligatorio ---------- */
.banner-warn {
  background: rgba(255,180,84,0.12); border-bottom: 1px solid var(--warn);
  color: var(--warn); font-size: 13px; padding: 10px 20px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.banner-warn button { border-color: var(--warn); color: var(--warn); }
.banner-error { background: rgba(255,92,115,0.12); border-bottom-color: var(--danger); color: var(--danger); }

/* ---------- Gestion de usuarios ---------- */
.hint-flush { margin: 0; }
.users-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.new-user-form {
  display: flex; flex-direction: column; gap: 6px; background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 10px; padding: 14px; margin-top: 12px;
}
.new-user-form label { font-size: 12px; color: var(--text-dim); margin-top: 8px; }
.new-user-form input, .new-user-form select {
  background: var(--bg-panel); border: 1px solid var(--border); border-radius: 8px;
  padding: 9px 10px; color: var(--text); font-size: 13.5px;
}
.form-actions { display: flex; gap: 10px; margin-top: 12px; }

#usersTable { margin-top: 12px; }
.role-pill {
  font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border);
  text-transform: uppercase; letter-spacing: 0.03em;
}
.role-pill.admin { color: var(--accent); border-color: var(--accent); }
.status-pill {
  font-size: 11px; padding: 3px 8px; border-radius: 999px; border: 1px solid var(--border);
}
.status-pill.locked { color: var(--danger); border-color: var(--danger); }
.status-pill.pending { color: var(--warn); border-color: var(--warn); }
.status-pill.ok { color: var(--accent-2); border-color: var(--accent-2); }
.row-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.row-actions button {
  font-size: 11.5px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border);
  background: transparent; color: var(--text-dim); cursor: pointer;
}
.row-actions button:hover { color: var(--text); border-color: var(--accent); }
.row-actions button.danger:hover { color: var(--danger); border-color: var(--danger); }

/* El formulario de la configuracion inicial (#setupForm) y el del segundo paso de 2FA (#twofaForm)
   comparten estilo con el del login. */
#loginForm, #setupForm, #twofaForm, #activateForm { display: flex; flex-direction: column; gap: 6px; }
#loginForm label, #setupForm label, #twofaForm label, #activateForm label { font-size: 12px; color: var(--text-dim); margin-top: 10px; }
#loginForm input, #setupForm input, #twofaForm input, #activateForm input {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 8px; padding: 10px 12px; color: var(--text); font-size: 14px;
}
#loginForm input:focus, #setupForm input:focus, #twofaForm input:focus, #activateForm input:focus { outline: 2px solid var(--accent); }
#loginForm button, #setupForm button, #twofaForm button, #activateForm button {
  margin-top: 20px; padding: 11px; border: none; border-radius: 8px;
  background: var(--accent); color: white; font-weight: 600; cursor: pointer;
}
#loginForm button:disabled, #setupForm button:disabled, #twofaForm button:disabled, #activateForm button:disabled { opacity: 0.6; cursor: default; }
/* El boton "usar codigo de recuperacion" es una accion secundaria tipo enlace, no el boton principal. */
#twofaForm .link-btn { margin-top: 6px; padding: 4px; background: none; color: var(--accent); font-weight: 500; text-align: center; }
.error-msg { color: var(--danger); font-size: 13px; min-height: 18px; margin: 8px 0 0; }

/* ---------- App shell ---------- */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 20px; background: var(--bg-panel); border-bottom: 1px solid var(--border);
}
.topbar-right { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; justify-content: flex-end; }
.poll-status { font-size: 12px; color: var(--text-dim); }

.live-indicator {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600;
  color: var(--accent-2);
}
.live-indicator.paused { color: var(--warn); }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2);
  box-shadow: 0 0 0 0 rgba(52,209,168,0.6);
  animation: pulse 1.6s infinite;
}
.live-indicator.paused .live-dot {
  background: var(--warn); animation: none; box-shadow: none;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(52,209,168,0.55); }
  70%  { box-shadow: 0 0 0 8px rgba(52,209,168,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,209,168,0); }
}
.user-label { font-size: 13px; color: var(--text-dim); }
.btn-ghost {
  background: transparent; border: 1px solid var(--border); color: var(--text);
  padding: 6px 12px; border-radius: 6px; cursor: pointer; font-size: 13px;
}
.btn-ghost:hover { border-color: var(--accent); }

.layout { display: grid; grid-template-columns: 260px 1fr; min-height: calc(100vh - 57px); }

.sidebar {
  background: var(--bg-panel); border-right: 1px solid var(--border);
  padding: 18px; overflow-y: auto;
}
.sidebar h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--text-dim); margin: 18px 0 8px; }
.sidebar h2:first-child { margin-top: 0; }
.sidebar input, .sidebar select {
  width: 100%; padding: 8px 10px; background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 6px; color: var(--text); font-size: 13px;
}
.hint { font-size: 11.5px; color: var(--text-dim); line-height: 1.5; }

.site-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 260px; overflow-y: auto; }
.site-list li {
  padding: 8px 10px; border-radius: 6px; cursor: pointer; font-size: 13px;
  display: flex; justify-content: space-between; align-items: center; gap: 6px;
}
.site-list li:hover { background: var(--bg-card); }
.site-list li.active { background: rgba(79,140,255,0.18); color: var(--accent); font-weight: 600; }
.site-list .anomaly-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--danger); flex-shrink: 0; }

.baseline-info { font-size: 12px; color: var(--text-dim); display: flex; flex-direction: column; gap: 4px; }
.baseline-row { display: flex; justify-content: space-between; }

.btn-block { width: 100%; margin-top: 10px; text-align: center; }


.content { padding: 20px; overflow-y: auto; }

.site-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.site-header h2 { margin: 0; font-size: 18px; }
.latest-badges { display: flex; gap: 10px; flex-wrap: wrap; }
.badge {
  padding: 6px 12px; border-radius: 8px; font-size: 12.5px; background: var(--bg-card);
  border: 1px solid var(--border); display: flex; align-items: center; gap: 6px;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; }
.dot-pop { background: var(--pop-color); }
.dot-origin { background: var(--origin-color); }
.dot-error { background: var(--error-color); }
.dot-probe { background: #ff8a65; }
.dot-probe-down { background: var(--danger); }
.dot-probe-warn { background: var(--warn); }
.badge.anomaly { border-color: var(--danger); color: var(--danger); }
.muted-cell { color: var(--text-dim); }

.chart-card {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px;
  padding: 16px; margin-bottom: 18px;
}
.chart-card-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 10px; flex-wrap: wrap; gap: 6px; }
.chart-card-title span:first-child { font-weight: 600; font-size: 14px; }
.legend-hint { font-size: 11.5px; color: var(--text-dim); }
.divider { border: none; border-top: 1px solid var(--border); margin: 18px 0; }

.chart-wrap { position: relative; height: 320px; }
.chart-wrap.small { height: 220px; }

.trend-svg { width: 100%; height: 110px; display: block; margin: 4px 0 14px; }

.chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; }

.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
th { color: var(--text-dim); font-weight: 500; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; }
td.flag-anomaly { color: var(--danger); font-weight: 600; }

@media (max-width: 900px) {
  /* La barra superior no cabe en una pantalla angosta: sus botones pasan a otra linea en lugar de
     ensanchar toda la pagina (antes desbordaba ~280 px en un telefono de 390 px). */
  .topbar { flex-wrap: wrap; gap: 10px; }
  .topbar-right { flex-wrap: wrap; gap: 8px 12px; }
  .layout { grid-template-columns: 1fr; }
  .sidebar { border-right: none; border-bottom: 1px solid var(--border); }
}

/* Aviso cuando las graficas se dibujan en modo simplificado o no se pudieron dibujar */
.chart-notice {
  margin: 0 0 12px; padding: 8px 12px; font-size: 12.5px; color: var(--warn);
  background: rgba(255,180,84,0.10); border: 1px solid var(--warn); border-radius: 8px;
}

/* Rotacion automatica (barra lateral): el checkbox no debe heredar el estilo de "input de
   texto" de .sidebar input (ancho 100%, relleno, borde). */
.sidebar .switch-row input[type="checkbox"] { padding: 0; border: none; background: none; width: 16px; }
.side-label { display: block; font-size: 12px; color: var(--text-dim); margin: 8px 0 4px; }

/* ---------- Configuracion inicial (primer arranque) ---------- */
.login-card.setup-card { width: 460px; max-width: calc(100vw - 32px); }
.setup-title { margin: 0 0 8px; font-size: 18px; font-weight: 600; }
.setup-hint { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--text-dim); }
.setup-hint.small { font-size: 12px; margin: 6px 0 14px; }
.setup-hint code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11.5px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; color: var(--text);
}
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: 1.5px; text-transform: uppercase; }

/* ---------- Creditos: logotipo de 403 Cybersecurity + copyright ---------- */
/* Login y configuracion inicial: logo centrado y leyendas, al fondo de la pantalla. */
.credit {
  display: flex; flex-direction: column; align-items: center; gap: 7px; width: 100%;
  padding: 22px 0 18px; text-align: center; color: var(--text-dim); font-size: 12px; line-height: 1.5;
}
.credit-logo { height: 28px; width: auto; opacity: 0.95; }
.credit-copy { font-size: 11.5px; opacity: 0.8; }
/* Marca en las cabeceras: logo de 403 a la izquierda, una linea divisoria y luego el nombre. */
.brand-403, .tv-logo { height: 26px; width: auto; flex-shrink: 0; }
.brand-divider { width: 1px; height: 26px; background: var(--border); flex-shrink: 0; }
.tv-header-left .brand-divider { height: 22px; }

/* Franja fija al pie del dashboard: siempre visible (por debajo de los modales, z-index 1000, y del
   modo pantalla, 900). El .layout deja un hueco igual a su alto para no tapar el final del contenido. */
.app-footer {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap;
  padding: 6px 16px; background: var(--bg-panel); border-top: 1px solid var(--border);
  font-size: 11.5px; color: var(--text-dim);
}
.layout { padding-bottom: var(--footer-h, 36px); }
@media (max-width: 900px) {
  /* En pantallas angostas la franja de 2-3 lineas taparia demasiado: pasa a ser un pie normal, al final. */
  .app-footer { position: static; }
  .layout { padding-bottom: 0; }
}

/* ---------- Barra lateral: contraible (solo iconos) y con secciones desplegables ---------- */
.layout { transition: grid-template-columns 0.18s ease; }
html[data-sidebar="collapsed"] .layout { grid-template-columns: 56px 1fr; }

.side-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%; margin: 0 0 6px; padding: 7px 10px;
  background: transparent; color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px;
  cursor: pointer; font-size: 12.5px;
}
.side-toggle:hover { color: var(--text); border-color: var(--accent); }
.side-toggle-label { flex: 1; text-align: left; }
.side-icon, .side-arrow, .side-toggle-icon {
  width: 18px; height: 18px; flex-shrink: 0; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
html[data-sidebar="collapsed"] .side-toggle-icon { transform: scaleX(-1); }

.side-section { border-bottom: 1px solid var(--border); }
.side-section:last-child { border-bottom: none; }
.side-head {
  position: relative; display: flex; align-items: center; gap: 10px; width: 100%; padding: 12px 4px;
  background: transparent; border: none; color: var(--text); cursor: pointer; text-align: left;
  font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em;
}
.side-head:hover, .side-head:focus-visible { color: var(--accent); }
.side-head .side-icon { color: var(--text-dim); }
.side-head:hover .side-icon, .side-section.open .side-head .side-icon { color: var(--accent); }
.side-head-label { flex: 1; }
.side-count {
  font-size: 11px; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--text-dim);
  background: var(--bg-card); border-radius: 999px; padding: 1px 8px;
}
.side-arrow { color: var(--text-dim); transition: transform 0.15s ease; }
.side-section.open .side-arrow { transform: rotate(90deg); }
.side-body { display: none; padding: 2px 4px 16px; }
.side-section.open .side-body { display: block; }
.side-subtitle { margin: 0 0 8px; font-size: 12px; font-weight: 600; color: var(--text); }
.side-dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--bg-panel);
}

/* Contraida: 56 px, solo iconos (un clic en un icono expande la barra y abre esa seccion). */
html[data-sidebar="collapsed"] .sidebar { padding: 12px 6px; overflow: hidden; }
/* .side-section .side-body: mas especifico que ".side-section.open .side-body" (si no, una seccion abierta seguiria
   mostrando su contenido apretado en los 56 px de la barra contraida). */
html[data-sidebar="collapsed"] .side-section .side-body,
html[data-sidebar="collapsed"] .side-head-label,
html[data-sidebar="collapsed"] .side-arrow,
html[data-sidebar="collapsed"] .side-count,
html[data-sidebar="collapsed"] .side-toggle-label { display: none; }
html[data-sidebar="collapsed"] .side-head,
html[data-sidebar="collapsed"] .side-toggle { justify-content: center; padding-left: 0; padding-right: 0; }
html[data-sidebar="collapsed"] .side-dot { position: absolute; top: 8px; right: 8px; }

@media (max-width: 900px) {
  html[data-sidebar="collapsed"] .layout, .layout { grid-template-columns: 1fr; }
  /* Telefono: la barra va arriba; contraida queda como una fila de iconos. */
  html[data-sidebar="collapsed"] .sidebar { display: flex; flex-direction: row; align-items: center; gap: 6px; padding: 8px 12px; }
  html[data-sidebar="collapsed"] .side-section { border: none; flex: 0 0 auto; }
  html[data-sidebar="collapsed"] .side-toggle { width: auto; margin: 0; padding: 7px 10px; }
  html[data-sidebar="collapsed"] .side-head { width: auto; padding: 8px 10px; }
  .range-controls .custom-range-form { position: static; width: 100%; max-width: none; margin-top: 8px; }
  .range-controls { width: 100%; }
}

/* ---------- Aviso legal (marca) ---------- */
.credit-legal { max-width: 460px; margin: 6px auto 0; font-size: 10.5px; line-height: 1.45; opacity: 0.7; }
.app-footer-legal { opacity: 0.85; }

/* ---------- Barra superior: los controles se agrupan y se envuelven COMO UNIDAD ---------- */
/* Sin esto, al faltar ancho los botones se repartian en dos filas dejando huerfanos (p. ej. "Salir" solo).
   Ahora: [En vivo, Pausar, rango] [estado] [acciones]; si no cabe todo, las acciones bajan juntas. */
.topbar .brand { margin-bottom: 0; flex-shrink: 0; }       /* el margen de 24 px es de la tarjeta de login, no de la barra */
.topbar .brand h1 { white-space: nowrap; }
.topbar-right { gap: 10px 20px; }
.topbar-group { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; }
.poll-status { min-width: 0; }
@media (max-width: 1700px) { .poll-status { max-width: 260px; line-height: 1.3; } }

/* Telefono: logo + nombre no caben en una linea de 350 px con el logo a tamano normal; se reduce el logo y la
   marca puede pasar a otra linea, en lugar de ensanchar toda la pagina. */
@media (max-width: 600px) {
  .topbar .brand { flex-wrap: wrap; gap: 6px 10px; }
  .brand-403 { height: 20px; }
  .topbar .brand .brand-divider { display: none; }
}


/* =====================================================================================
   Imperva Assessment Hub: componentes propios (mismas variables y lenguaje visual del Monitor)
   ===================================================================================== */
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-sub { font-size: 11.5px; color: var(--text-dim); letter-spacing: 0.02em; }
.login-card .brand h1 { font-size: 17px; }

.tenant-label { font-size: 12px; color: var(--text-dim); }
.tenant-badge {
  font-size: 12.5px; font-weight: 600; padding: 5px 12px; border-radius: 999px;
  color: var(--accent); border: 1px solid var(--accent); background: rgba(79,140,255,0.10);
}
#tenantSelect { min-width: 210px; }

/* ---------- Menu izquierdo ---------- */
.side-section { border-bottom: none; }
a.side-head, button.side-head { text-decoration: none; padding: 11px 10px; border-radius: 8px; margin-bottom: 2px; }
a.side-head:hover, button.side-head:hover { background: var(--bg-card); }
.side-section.active a.side-head { background: rgba(79,140,255,0.14); color: var(--accent); }
.side-section.active a.side-head .side-icon { color: var(--accent); }
.side-head-label { text-transform: none; letter-spacing: 0.01em; font-size: 13.5px; font-weight: 600; }
/* Secciones desplegables (p. ej. "Application Security" / "Data Security"): el boton no navega, solo abre/cierra
   -- la flecha (.side-arrow) ya gira 90 grados con .side-section.open (ver regla mas arriba). Si
   alguno de sus hijos es la pagina activa, el encabezado se resalta igual que un link activo aunque
   la seccion este cerrada, para que no se pierda de donde viene la pagina actual. */
.side-section.active > button.side-head, .side-section.active > button.side-head .side-icon { color: var(--accent); }
.side-body { border-left: 1px solid var(--border); margin-left: 15px; padding: 2px 0 6px 0; }
.side-sublink {
  display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text);
  padding: 9px 10px 9px 16px; border-radius: 8px; font-size: 13px;
}
.side-sublink:hover { background: var(--bg-card); }
.side-sublink.active { background: rgba(79,140,255,0.14); color: var(--accent); }
.side-sublink.active .side-icon { color: var(--accent); }
.side-sublink .side-icon { width: 16px; height: 16px; color: var(--text-dim); }
.side-group {
  margin: 18px 6px 6px; padding-top: 14px; border-top: 1px solid var(--border);
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-dim);
}
html[data-sidebar="collapsed"] .side-group span { display: none; }
html[data-sidebar="collapsed"] .side-group { margin: 10px 0; padding: 0; }
.sidebar nav { display: flex; flex-direction: column; }

/* ---------- Cabecera de pagina ---------- */
.page-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px 20px; margin-bottom: 16px; flex-wrap: wrap; }
.page-header h2 { margin: 0; font-size: 20px; }
.page-hint { margin: 4px 0 0; max-width: 760px; font-size: 12.5px; }
.page-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.content { min-width: 0; }
.content-viewer { padding: 12px; display: flex; flex-direction: column; }

a.btn-ghost, a.btn-link { text-decoration: none; display: inline-flex; align-items: center; }
.btn-small { padding: 4px 10px; font-size: 12px; }

/* ---------- Formularios ---------- */
.field { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.field > label, .group-label { font-size: 12px; color: var(--text-dim); font-weight: 500; }
.group-label { display: block; margin: 2px 0 2px; text-transform: uppercase; letter-spacing: 0.05em; font-size: 11.5px; }
.field input[type="text"], .field input[type="password"], .field input[type="number"], .field input[type="time"],
.field input[type="datetime-local"], .field select, .field textarea, .inline-test input {
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 9px 11px;
  color: var(--text); font-size: 13.5px; font-family: inherit; width: 100%; min-width: 0;
}
.field textarea { resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus, .inline-test input:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
.field .hint { margin: 0; }
.form-stack { display: flex; flex-direction: column; gap: 14px; }
.modal-form { display: flex; flex-direction: column; gap: 14px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.inline-checks { display: flex; gap: 20px; flex-wrap: wrap; }
.check-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 2px 18px; margin: 2px 0 4px; }
.check-all { margin-bottom: 4px; font-weight: 600; }
.radio-row { display: flex; gap: 24px; flex-wrap: wrap; }
.switch-row { margin-top: 4px; }
.switch-row input[type="radio"] { accent-color: var(--accent); width: 16px; height: 16px; }
.form-actions { align-items: center; flex-wrap: wrap; }
.modal-actions { justify-content: flex-end; margin-top: 18px; }
.modal-wide { width: 720px; }
.modal-text { font-size: 13.5px; line-height: 1.55; margin: 0 0 6px; color: var(--text); }
.modal-divider { margin: 4px 0; }
.form-msg { min-height: 0; }
.form-msg:empty { margin: 0; }
.inline-test { display: flex; gap: 8px; flex: 1; min-width: 260px; align-items: center; }
.email-box { background: var(--bg-panel); border: 1px dashed var(--border); border-radius: 10px; padding: 12px 14px; }
.hidden { display: none !important; }

/* ---------- Marca del reporte (logo / fondo de portada) por cliente ---------- */
.field-divider { border: none; border-top: 1px solid var(--border); margin: 2px 0; }
.brand-field { display: flex; flex-direction: column; gap: 6px; }
.brand-field-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.brand-field-actions { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 220px; }
.brand-field-actions input[type="file"] { font-size: 12.5px; color: var(--text-dim); }
.brand-preview {
  width: 96px; height: 96px; object-fit: contain; border-radius: 10px; background: var(--bg-panel);
  border: 1px solid var(--border); padding: 6px;
}

/* ---------- Tarjetas y tablas ---------- */
.settings-card .form-stack { max-width: 920px; }
.data-table td, .data-table th { vertical-align: middle; }
.data-table tbody tr:hover { background: rgba(255,255,255,0.02); }
.cell-main { font-weight: 600; font-size: 13.5px; }
.cell-sub { font-size: 11.5px; color: var(--text-dim); font-weight: 400; }
.cell-scope { max-width: 260px; font-size: 12.5px; color: var(--text-dim); }
.empty-cell { text-align: center; padding: 26px 10px !important; }
.row-muted { opacity: 0.55; }
.row-active { background: rgba(255,180,84,0.05); }
.err-text { color: var(--danger); font-size: 12px; }
.res-text { font-size: 12.5px; }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; }
.plain-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13px; }
.plain-list li { padding: 2px 0; border-bottom: 1px solid var(--border); }
.plain-list li:last-child { border-bottom: none; }
.status-pill { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.status-pill.score { font-weight: 700; font-size: 12.5px; padding: 3px 10px; }
.status-pill.score small { font-weight: 500; opacity: 0.85; margin-left: 2px; }
.role-pill.admin { color: var(--accent); border-color: var(--accent); }
.row-actions { flex-wrap: wrap; }
.row-actions .primary-act { color: var(--accent); border-color: var(--accent); font-weight: 600; }
.row-actions a.btn-link, .row-actions button {
  font-size: 11.5px; padding: 4px 8px; border-radius: 6px; border: 1px solid var(--border); background: transparent;
  color: var(--text-dim); cursor: pointer; text-decoration: none;
}
.row-actions a.btn-link:hover, .row-actions button:hover { color: var(--text); border-color: var(--accent); }
.row-actions button.danger:hover { color: var(--danger); border-color: var(--danger); }
.link-btn { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 12.5px; padding: 0; text-decoration: underline; }
.empty-state { text-align: center; padding: 60px 20px; color: var(--text-dim); background: var(--bg-card); border: 1px dashed var(--border); border-radius: 12px; }
.empty-state h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; }
.empty-state p { margin: 0; font-size: 13px; }

.spinner {
  display: inline-block; width: 11px; height: 11px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation-duration: 2.4s; } }

.banner-slot:empty { display: none; }
.inline-banner { border: 1px solid var(--warn); border-radius: 10px; margin-bottom: 16px; }
.demo-banner { color: var(--accent); border-color: var(--accent); background: rgba(79,140,255,0.10); }
.banner-link { color: inherit; font-weight: 700; }

/* ---------- Visor de reportes ---------- */
.viewer { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 57px - var(--footer-h, 36px) - 24px); min-height: 480px; }
.viewer-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.viewer-title { font-weight: 600; font-size: 14px; flex: 1; min-width: 160px; }
.report-frame { flex: 1; width: 100%; border: 1px solid var(--border); border-radius: 12px; background: #fff; min-height: 0; }

/* ---------- Detalle, pruebas, avisos ---------- */
.kv-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px 16px; }
.kv { display: flex; flex-direction: column; font-size: 12px; color: var(--text-dim); padding: 8px 10px; background: var(--bg-card); border-radius: 8px; }
.kv strong { color: var(--text); font-size: 13px; font-weight: 600; margin-top: 2px; word-break: break-word; }
.log-box {
  background: #0b0f18; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; margin: 0;
  max-height: 260px; overflow: auto; font-size: 11.5px; line-height: 1.5; white-space: pre-wrap; word-break: break-word;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; color: #b9c4d8;
}
.mail-list { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; color: var(--text-dim); display: flex; flex-direction: column; gap: 3px; }
.test-result { padding: 10px 14px; border-radius: 8px; font-size: 13px; border: 1px solid var(--border); background: var(--bg-card); }
.test-result.ok { border-color: var(--accent-2); }
.test-result.error { border-color: var(--danger); }
.test-line { margin-top: 5px; font-size: 12.5px; color: var(--text-dim); }
.cred-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; line-height: 1.8; user-select: all; }
.qr-canvas { display: block; max-width: 100%; height: auto; border: 1px solid var(--border); border-radius: 8px; background: #fff; }

.toast-box { position: fixed; right: 18px; bottom: 54px; z-index: 2000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 36px)); }
.toast { padding: 11px 14px; border-radius: 10px; font-size: 13px; background: var(--bg-panel); border: 1px solid var(--accent-2); box-shadow: 0 10px 30px rgba(0,0,0,0.4); word-break: break-word; }
.toast.error { border-color: var(--danger); color: var(--danger); }

.modal-overlay { z-index: 1000; }
.modal { color: var(--text); }
.modal-header h2 { font-size: 16px; }

@media (max-width: 900px) {
  .grid-2 { grid-template-columns: 1fr; }
  .modal-wide { width: 100%; }
  .viewer { height: 80vh; }
  #tenantSelect { min-width: 0; width: 100%; }
}

@media (max-width: 900px) {
  html[data-sidebar="collapsed"] .sidebar nav { flex-direction: row; flex-wrap: wrap; gap: 4px; }
  html[data-sidebar="collapsed"] .side-group { display: none; }
  .tenant-badge { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* ---------- Alcance del CWAF Configuration Assessment ---------- */
.scope-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.scope-card {
  display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; cursor: pointer;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px;
}
.scope-card:has(input:checked) { border-color: var(--accent); background: rgba(79,140,255,0.10); }
.scope-card input { margin-top: 3px; accent-color: var(--accent); width: 16px; height: 16px; }
.scope-card span { display: flex; flex-direction: column; gap: 3px; }
.scope-card small, .mod-desc { font-size: 11.5px; color: var(--text-dim); font-weight: 400; }
.module-picker { display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border: 1px dashed var(--border); border-radius: 10px; background: var(--bg-panel); }
.module-tools { display: flex; gap: 16px; justify-content: flex-end; }
.module-grid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 8px 18px; }
.module-grid .switch-row { align-items: flex-start; }
.module-grid .switch-row span { display: flex; flex-direction: column; gap: 1px; }

/* Utilidades (en vez de atributos style="": el CSP de la app no permite estilos en linea) */
.mb-14 { margin-bottom: 14px; }
.mt-18 { margin-top: 18px; }
.ok-text { color: #2e7d32; }
.form-stack.gap-4 { gap: 4px; }
.uppercase { text-transform: uppercase; }
/* Licencia on-premise: payload que sale de la red del cliente */
.code-block { white-space: pre-wrap; word-break: break-all; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; max-height: 360px; overflow: auto; margin: 0; }
.lic-line { margin: 2px 0; line-height: 1.5; }

/* Credenciales SSH adicionales (Account Settings > Imperva DAM, on-premise) */
.ssh-creds { display: flex; flex-direction: column; gap: 12px; }
.ssh-cred { border: 1px solid var(--border); border-radius: 10px; padding: 14px; display: flex; flex-direction: column; gap: 12px; }

/* Portal de descarga on-premise (descargas.html) */
.login-card.portal-card { width: 820px; max-width: calc(100vw - 32px); box-sizing: border-box; }
.portal-release { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 18px; }
.portal-release-head { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; }
.portal-release-head h3 { margin: 0; font-size: 16px; display: flex; align-items: center; gap: 8px; }
.portal-pill { font-size: 11px; }
.portal-notes { white-space: pre-wrap; }
.portal-sha { word-break: break-all; opacity: 0.75; font-size: 11px; }
.portal-dl { display: inline-block; text-decoration: none; white-space: nowrap; }
.portal-curl { margin-top: 10px; }
.portal-curl summary { cursor: pointer; color: var(--accent); font-size: 13px; margin-bottom: 8px; }
.portal-curl .code-block { margin-bottom: 8px; font-size: 11.5px; }
.portal-steps { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 14px; }
.portal-steps h3 { margin: 0 0 8px; font-size: 15px; }
.portal-steps li { margin-bottom: 6px; line-height: 1.5; }
.portal-steps code { font-size: 12px; background: var(--bg-card); padding: 1px 6px; border-radius: 4px; }
.portal-empty { margin-top: 16px; }
.release-files { margin: 6px 0 0; padding: 0; list-style: none; font-size: 12.5px; }
.release-files li { display: flex; gap: 8px; align-items: center; padding: 2px 0; }
.upload-row { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.upload-bar { height: 6px; background: var(--bg-card); border-radius: 4px; overflow: hidden; }
.upload-bar > span { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }

/* Licencia por modulo (WAF / DAM) en el formulario de licencias on-premise */
.module-field { display: flex; gap: 8px; min-width: 0; }
.module-field > * { min-width: 0; }
.module-field select { flex: 0 0 150px; width: 150px; }
.module-field input { flex: 1 1 auto; width: auto; }
/* Modulo no incluido en la licencia (on-premise): la opcion se ve pero no se usa */
.module-locked { border: 1px solid var(--warn, #f5a524); background: rgba(245,165,36,0.08); color: var(--text); border-radius: 10px; padding: 12px 14px; margin-bottom: 14px; }

/* Selector de idioma (barra superior y login) */
.lang-select { width: auto; min-width: 0; padding: 4px 8px; font-size: 12.5px; background: transparent; border: 1px solid var(--border); border-radius: 8px; color: var(--text); }
.lang-select option { color: #111; }

/* Recolector descargable (seccion DSF Assessment) */
a.btn-primary { text-decoration: none; }
a.is-disabled { opacity: .5; cursor: not-allowed; pointer-events: auto; }
.collector-dist-info { margin: -6px 0 14px; }
.collector-dist-info:empty { display: none; }

/* Aviso de privacidad: pagina publica (/privacidad.html), notas en login/activacion y aceptacion */
.privacy-body { align-items: stretch; }
.privacy-page { width: 100%; max-width: 860px; margin: 64px auto 0; padding: 32px 36px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 14px; color: var(--text); line-height: 1.6; box-sizing: border-box; }
.privacy-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.privacy-head h1 { margin: 0; font-size: 24px; }
.privacy-text h2 { font-size: 19px; margin: 26px 0 8px; }
.privacy-text h3 { font-size: 16px; margin: 22px 0 6px; }
.privacy-text h4 { font-size: 14px; margin: 18px 0 6px; }
.privacy-text p, .privacy-text li { font-size: 14px; color: var(--text); }
.privacy-text blockquote { margin: 10px 0; padding: 8px 14px; border-left: 3px solid var(--accent); color: var(--text-dim); }
.privacy-text .table-wrap { margin: 10px 0; }
.privacy-note { margin-top: 14px; font-size: 11.5px; line-height: 1.5; color: var(--text-dim); }
.privacy-note a, .credit [data-privacy-link] a, .app-footer [data-privacy-link] a { color: var(--accent); }
.privacy-accept { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0 14px; font-size: 12.5px; line-height: 1.45; color: var(--text-dim); }
.privacy-accept input { margin-top: 2px; width: auto; }
@media (max-width: 640px) { .privacy-page { margin: 56px 12px 0; padding: 20px 16px; } }
#activateForm label.privacy-accept { display: flex; margin-top: 14px; }
#activateForm label.privacy-accept.hidden { display: none; }
#activateForm .privacy-accept input { width: auto; padding: 0; margin-top: 2px; }
#activateForm a { color: var(--accent); }
.privacy-page h1 { margin: 18px 0 4px; font-size: 24px; }
.privacy-accept-box { margin-top: 26px; padding: 16px 18px; border: 1px solid var(--accent); border-radius: 10px; background: rgba(77, 140, 255, 0.06); }
.privacy-accept-box .privacy-accept { color: var(--text); font-size: 13.5px; }
.privacy-foot { margin-top: 26px; padding-top: 16px; border-top: 1px solid var(--border); }

/* Logo de 403 Insights (opcion B): tarjetas de login/activacion/configuracion y barra superior */
.brand-lens-h1 { margin: 0; line-height: 0; }
.brand-lens { height: 34px; width: auto; display: block; }
.topbar .brand-403 { height: 30px; }
@media (max-width: 480px) { .brand-lens { height: 28px; } }
.brand-section { font-size: 15px; font-weight: 600; color: var(--text-dim); padding-left: 12px; border-left: 1px solid var(--border); }
.brand-lens-icon { width: 44px; height: 44px; display: block; }

/* Oportunidades (resellers / maestro) */
.opp-list { display: flex; flex-direction: column; gap: 4px; font-size: 13px; }

/* Slack (Ajustes globales / Account Settings) */
.steps-list { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.7; color: var(--text-dim); }
.steps-list li { margin-bottom: 4px; }
.input-narrow { width: 72px; }
.data-table select, .data-table input[type="number"] {
  padding: 4px 8px; font-size: 12.5px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 8px; color: var(--text); font-family: inherit;
}

/* Oportunidades: matriz clientes x funcionalidades (solo colores) */
.mx-table td { border-bottom: none; }
.mx-table th.mx-h { text-align: center; white-space: normal; line-height: 1.25; font-size: 10.5px; min-width: 64px; vertical-align: bottom; }
.mx-table td.mx-c { text-align: center; padding: 4px 3px; }
.mx-sq { width: 40px; height: 40px; border-radius: 8px; margin: 0 auto; cursor: default; outline-offset: 2px; }
.mx-sq.mini { display: inline-block; width: 14px; height: 14px; border-radius: 4px; vertical-align: -2px; margin: 0 6px 0 0; }
.mx-sq.g { background: #4FAE80; } .mx-sq.y { background: #F5C242; } .mx-sq.o { background: #EE7A4E; } .mx-sq.r { background: #EF5B5B; }
.mx-sq.na { background: transparent; border: 1.5px dashed #3a4560; }
.mx-sq:focus-visible { outline: 2px solid var(--accent); }
.mx-table tr.mx-stale td { opacity: .45; }
.mx-table tr.mx-foot td { border-top: 1px solid var(--border); padding-top: 10px; }
.mx-tot { font-size: 14px; font-weight: 700; color: var(--text-dim); }
.mx-tot.hot { color: #EF5B5B; }
.cell-sub.warn { color: var(--warn); }
.mx-legend { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 12px; color: var(--text-dim); margin: 0 0 12px; }
.mx-legend-note { margin-left: auto; }
.mx-tip { position: absolute; z-index: 50; display: none; max-width: 330px; background: #0b0f18; border: 1px solid var(--border); border-radius: 8px;
  padding: 8px 10px; font-size: 12px; line-height: 1.45; color: var(--text); box-shadow: 0 8px 24px rgba(0,0,0,.45); pointer-events: none; }
.mx-tip.on { display: block; }
.mx-tip-state.g { color: #4FAE80; } .mx-tip-state.y { color: #F5C242; } .mx-tip-state.o { color: #EE7A4E; } .mx-tip-state.r { color: #EF5B5B; } .mx-tip-state.na { color: var(--text-dim); }
.mx-table .link-btn { text-align: left; font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.mx-table .link-btn:hover { text-decoration: underline; }