/* ============================================================================
   Logo de marca Xcitione RMM (reemplaza el escudo SVG en línea).
   Se usa como fondo (background-image) para poder intercambiar la variante
   por tema sin duplicar <img>: letras NEGRAS sobre fondos claros, letras
   BLANCAS sobre fondos oscuros. background-size:contain -> nítido y sin
   deformarse a cualquier zoom. Relación real del arte: 4627x1118 (~4.14:1).
   ============================================================================ */
.xci-logo {
  display: inline-block;
  flex: 0 0 auto;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("img/logo-negro.png");   /* por defecto: fondo claro */
}
[data-theme="dark"] .xci-logo {
  background-image: url("img/logo-blanco.png");   /* tema oscuro: fondo oscuro */
}

/* --- Parte superior derecha (topbar) --- */
.xci-logo--topbar {
  height: 34px;
  width: 150px;
  background-position: right center;
  margin-left: 10px;
  padding-left: 14px;
  border-left: 1px solid var(--line, rgba(148,163,184,.35));
  align-self: center;
}

/* --- Sidebar: SIEMPRE fondo oscuro -> variante blanca --- */
.sidebar .xci-logo--side {
  width: 100%;
  max-width: 190px;
  height: 46px;
  background-position: left center;
  background-image: url("img/logo-blanco.png") !important;
}

/* --- Tarjeta de login: sigue el tema (clara -> negro, oscura -> blanco) --- */
.auth-brand .xci-logo--auth {
  width: 100%;
  max-width: 230px;
  height: 54px;
  background-position: left center;
}

/* En pantallas angostas el logo de la topbar estorba entre los controles:
   la marca del sidebar/login ya representa a Xcitione, así que se oculta. */
@media (max-width: 720px) {
  .xci-logo--topbar { display: none; }
}

@media print {
  .xci-logo--topbar { display: none; }
}

/* ============================================================================
   Ajustes > Agente: filas de ajuste con el toggle bien alineado.
   El .record-card (grid) estiraba el .rc-switch a lo alto de la fila y el knob
   (posicion absoluta anclada al label) se despegaba del carril. Con un flex propio
   (align-items:flex-start + switch flex:0 0 auto) el rc-switch conserva su alto
   natural, el knob queda sobre el carril y el toggle se alinea con el titulo.
   ============================================================================ */
#agentSettingsPanel .agent-setting {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 24px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel);
  box-shadow: var(--shadow);
}
#agentSettingsPanel .agent-setting-main { flex: 1 1 auto; min-width: 0; }
#agentSettingsPanel .agent-setting-main h3 { margin: 0 0 4px; font-size: 14px; }
#agentSettingsPanel .agent-setting-desc {
  margin: 0;
  font-size: 12.5px;
  color: var(--muted);
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}
#agentSettingsPanel .agent-pw-field { margin-top: 12px; max-width: 340px; }
#agentSettingsPanel [data-agent-pw-clear] { margin-top: 10px; }
#agentSettingsPanel .agent-setting-switch {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  padding-top: 2px;
}