/* ============================================================
   QAD Calidad — Módulo system-settings
   Estilos exclusivos de este módulo. Reutiliza tokens.css y
   components/* antes de declarar algo nuevo aquí.
   ============================================================ */

/* ─── Cabecera de página y navegación por pestañas (panel.html /
   ai_panel.html) ─────────────────────────────────────────────── */
.settings-tabnav {
  display: flex;
  gap: 0.25rem;
  border-bottom: 2px solid var(--color-border-subtle);
  margin-bottom: 1.5rem;
}
.settings-tab-icon { width: 1rem; height: 1rem; }

.tab-btn {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
}
.tab-btn:hover { color: var(--color-text); background: var(--color-surface-alt); }
.tab-btn-active { color: var(--color-accent) !important; border-bottom-color: var(--color-accent) !important; background: transparent !important; }

/* ─── Tarjeta de sección genérica de configuración ─────────────── */
.settings-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: 1.5rem;
  margin-bottom: 1rem;
}
.settings-card-muted { background: var(--color-surface-alt); border-color: var(--color-border-subtle); }
.settings-card-warning { background: var(--color-warning-bg); border-color: #EFD9A0; }

.settings-section-title { font-size: 0.95rem; font-weight: 600; color: var(--color-text); margin-bottom: 1rem; }
.settings-section-title-tight { margin-bottom: 0.25rem; }
.settings-section-title-sm { font-size: 0.85rem; }
.settings-hint { font-size: 0.78rem; color: var(--color-text-faint); margin-top: 0.3rem; }
.settings-card-desc { font-size: 0.82rem; color: var(--color-text-muted); }
.settings-card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.settings-spinner-text { font-size: 0.78rem; color: var(--color-text-faint); }
.settings-empty-cell { padding: 1rem; color: var(--color-text-muted); text-align: center; }

/* ─── Módulos: fila con toggle ──────────────────────────────────── */
.module-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1rem 0;
  border-bottom: 1px solid var(--color-border-row);
}
.module-row:last-child { border-bottom: none; }
.module-info h4 { font-size: 0.88rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.2rem; }
.module-info p { font-size: 0.78rem; color: var(--color-text-muted); margin: 0; }

.toggle-switch { position: relative; width: 42px; height: 24px; flex-shrink: 0; margin-left: 1.5rem; margin-top: 0.15rem; }
.toggle-switch input { opacity: 0; width: 0; height: 0; }
.toggle-slider {
  position: absolute; inset: 0; background: var(--color-border);
  border-radius: var(--radius-pill);
  cursor: pointer; transition: background 0.2s;
}
.toggle-slider:before {
  content: ""; position: absolute; height: 18px; width: 18px; left: 3px; bottom: 3px;
  background: var(--color-surface); border-radius: 50%; transition: transform 0.2s;
  box-shadow: var(--shadow-soft);
}
.toggle-switch input:checked + .toggle-slider { background: var(--color-accent); }
.toggle-switch input:checked + .toggle-slider:before { transform: translateX(18px); }

/* ─── Alertas inline (éxito / advertencia) para respuestas HTMX ──── */
.alert-success-inline {
  background: var(--color-success-bg); border: 1px solid #BEE0CD; color: var(--color-success-text);
  padding: 0.65rem 1rem; border-radius: var(--radius-md); font-size: 0.82rem; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.alert-warning-inline {
  background: var(--color-warning-bg); border: 1px solid #EFD9A0; color: var(--color-warning-text);
  padding: 0.65rem 1rem; border-radius: var(--radius-md); font-size: 0.82rem; margin-bottom: 1rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.alert-warning-inline-danger { background: var(--color-danger-bg); border-color: #E9C3C3; color: var(--color-danger-text); }

/* ─── Botones: anchos mínimos usados para evitar saltos de layout
   cuando el texto cambia (p. ej. "Guardando..."/"Guardar") ───────── */
.settings-btn-w-120 { min-width: 120px; }
.settings-btn-w-130 { min-width: 130px; }
.settings-btn-w-140 { min-width: 140px; }
.settings-btn-w-150 { min-width: 150px; }
.settings-btn-inline { display: inline-flex; align-items: center; gap: 0.4rem; }
.settings-btn-flex { display: flex; align-items: center; gap: 0.5rem; }
.settings-btn-tight { margin-top: 0.65rem; font-size: 0.78rem; }
.settings-link-btn {
  font-size: 0.75rem; font-weight: 500; color: var(--color-accent);
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 0.3rem;
}
.settings-spin { animation: spin 1s linear infinite; }

/* ─── Bloque de resultado (prueba de conexión, health check, etc.) ─ */
.settings-result-box { margin-top: 1rem; }
.settings-result-ok {
  background: var(--color-success-bg); border: 1px solid #BEE0CD; border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
}
.settings-result-error {
  background: var(--color-danger-bg); border: 1px solid #E9C3C3; border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
}
.settings-result-degraded {
  background: var(--color-warning-bg); border: 1px solid #EFD9A0; border-radius: var(--radius-md);
  padding: 0.75rem 1rem; font-size: 0.82rem;
}
.settings-result-header {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 0.5rem;
}
.settings-result-header-title { font-size: 0.82rem; font-weight: 600; }
.settings-result-header-title-success { color: var(--color-success-text); }
.settings-result-header-title-danger { color: var(--color-danger-text); }
.settings-result-header-title-warning { color: var(--color-warning-text); }
.settings-result-ms { font-size: 0.75rem; color: var(--color-success); margin-left: auto; }
.settings-result-response {
  font-size: 0.82rem; color: var(--color-success-text); background: #DCF3E5;
  border-radius: var(--radius-sm); padding: 0.4rem 0.65rem; font-style: italic;
}
.settings-result-error-detail {
  font-size: 0.8rem; color: var(--color-danger-text); font-family: ui-monospace, monospace; word-break: break-all;
}
.settings-error-text { font-size: 0.78rem; color: var(--color-danger-text); margin-top: 0.4rem; }
.settings-status-success-text { font-size: 0.8rem; color: var(--color-success-text); font-weight: 600; }
.settings-checkbox-label {
  display: flex; align-items: center; gap: 0.5rem; cursor: pointer;
  font-size: 0.85rem; font-weight: 500; color: var(--color-text-body);
}
.settings-checkbox { width: 1rem; height: 1rem; accent-color: var(--color-accent); cursor: pointer; }
.settings-security-warning {
  display: flex; align-items: flex-start; gap: 0.6rem;
  background: var(--color-warning-bg); border: 1px solid #EFD9A0; border-radius: var(--radius-md);
  padding: 0.75rem 0.9rem; font-size: 0.8rem; color: var(--color-warning-text); margin-top: 0.25rem;
}
.settings-security-warning svg { flex-shrink: 0; margin-top: 0.1rem; }

/* ============================================================
   Formulario de proveedor IA (_ai_provider_form.html)
   ============================================================ */
.settings-form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.settings-provider-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.4rem; margin-bottom: 0.75rem; }
.settings-provider-chip {
  border: 1.5px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-body);
  border-radius: var(--radius-md);
  padding: 0.45rem 0.5rem;
  font-size: 0.8rem;
  cursor: pointer;
  text-align: center;
  transition: all 0.15s;
}
.settings-provider-chip-active {
  border: 2px solid var(--color-accent);
  background: var(--color-info-bg);
  color: var(--color-accent);
  font-weight: 600;
}
.settings-label-row { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-inline-actions { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.65rem; }
.settings-device-code-box {
  border: 1px solid var(--color-border);
  background: var(--color-info-bg);
  border-radius: var(--radius-md);
  padding: 0.85rem 1rem;
  margin-bottom: 0.65rem;
}
.settings-device-code-box-label { font-size: 0.75rem; color: var(--color-accent); font-weight: 600; margin-bottom: 0.35rem; }
.settings-device-code { font-family: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; font-size: 1.25rem; letter-spacing: 0.08em; font-weight: 700; color: var(--color-text); }
.settings-warning-box { border: 1px solid #EFD9A0; background: var(--color-warning-bg); border-radius: var(--radius-md); padding: 0.85rem 1rem; }
.settings-warning-box-title { font-size: 0.8rem; font-weight: 600; color: var(--color-warning-text); margin-bottom: 0.5rem; }
.settings-warning-box-text { font-size: 0.78rem; color: var(--color-warning-text); margin-bottom: 0.75rem; }
.settings-label-lg { font-size: 0.8rem; }

/* ============================================================
   Fila de proveedor (_ai_provider_row.html)
   ============================================================ */
.settings-provider-row-editing td { padding: 1rem; background: var(--color-surface-alt); }
.settings-provider-row { border-top: 1px solid var(--color-border); }
.settings-provider-row td { padding: 0.75rem 0.85rem; }
.settings-provider-row-name { color: var(--color-text); font-weight: 600; }
.settings-provider-row-value { color: var(--color-text-body); }
.settings-provider-row-actions { display: flex; justify-content: flex-end; gap: 0.4rem; flex-wrap: wrap; }
.settings-provider-row-actions-cell { text-align: right; }
.settings-default-badge {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--color-success-bg); color: var(--color-success-text);
  border: 1px solid #BEE0CD; border-radius: var(--radius-pill);
  padding: 0.2rem 0.55rem; font-size: 0.75rem; font-weight: 600;
}
.settings-default-no { color: var(--color-text-faint); }
.settings-btn-xs-inline { display: inline; }
.settings-btn-xs { padding: 0.35rem 0.55rem; font-size: 0.75rem; }
.settings-btn-xs-danger { color: var(--color-danger-text); }

/* ============================================================
   Pestaña General (_tab_general.html)
   ============================================================ */
.settings-logo-row { display: flex; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.settings-logo-preview {
  flex-shrink: 0; width: 72px; height: 72px; border-radius: var(--radius-md);
  background: var(--color-surface-alt); border: 1px solid var(--color-border);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.settings-logo-preview img { width: 64px; height: 64px; object-fit: contain; }
.settings-logo-upload { flex: 1; min-width: 200px; }
.settings-logo-hint { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 0.35rem; }
.settings-form-actions { display: flex; align-items: center; gap: 0.75rem; margin-top: 1.25rem; }
.settings-form-actions-tight { display: flex; align-items: center; gap: 0.6rem; margin-top: 1rem; }

/* ============================================================
   Pestaña Grafo (_tab_graph.html) — incluye clases usadas por el
   HTML generado desde JS (renderGraphStats) además del markup
   Django. El escaneo anti-inline-style detecta también literales
   `style="..."` dentro de cadenas JS, así que ambos usan clases.
   ============================================================ */
.settings-graph-header { display: flex; align-items: center; justify-content: space-between; }
.settings-graph-actions { display: flex; gap: 8px; }
.settings-graph-loading { font-size: 0.8rem; color: var(--color-text-faint); }
.settings-graph-prune-result { margin-top: 0.5rem; font-size: 0.83rem; }
.settings-graph-prune-result-ok { color: var(--color-success-text); }
.settings-graph-prune-result-warn { color: var(--color-warning-text); }
.settings-graph-prune-result-error { color: var(--color-danger-text); }
.settings-graph-stats { margin-top: 1rem; }
.settings-graph-stats-loading { text-align: center; padding: 2rem; color: var(--color-text-faint); font-size: 0.85rem; }
.settings-graph-disabled-note {
  color: var(--color-warning-text); background: var(--color-warning-bg);
  border: 1px solid #EFD9A0; border-radius: var(--radius-sm); padding: 1rem; font-size: 0.85rem;
}
.settings-graph-kpi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1rem; }
.settings-graph-kpi { background: var(--color-bg); border-radius: var(--radius-md); padding: 1rem; text-align: center; }
.settings-graph-kpi-value { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700; color: var(--color-accent); }
.settings-graph-kpi-value-ok { color: var(--color-success-text); }
.settings-graph-kpi-value-alert { color: var(--color-danger); }
.settings-graph-kpi-label { font-size: 0.78rem; color: var(--color-text-muted); margin-top: 2px; }
.settings-graph-table { width: 100%; border-collapse: collapse; background: var(--color-bg); border-radius: var(--radius-md); overflow: hidden; }
.settings-graph-table th {
  padding: 8px 12px; text-align: left; font-size: 0.72rem; text-transform: uppercase;
  color: var(--color-text-muted); font-weight: 600; background: var(--color-border-subtle);
}
.settings-graph-table th.text-right { text-align: right; }
.settings-graph-table td { padding: 8px 12px; font-size: 0.85rem; color: var(--color-text-body); }
.settings-graph-table td.text-right { text-align: right; font-weight: 600; color: var(--color-text); }
.settings-graph-table-empty { padding: 1rem; text-align: center; color: var(--color-text-faint); font-size: 0.83rem; }
.settings-graph-badge {
  margin-top: 0.75rem; border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-size: 0.83rem;
}
.settings-graph-badge-orphan { background: var(--color-danger-bg); border: 1px solid #E9C3C3; color: var(--color-danger-text); }
.settings-graph-badge-unsynced { background: var(--color-warning-bg); border: 1px solid #EFD9A0; color: var(--color-warning-text); margin-top: 1rem; }
.settings-graph-badge-synced { background: var(--color-success-bg); border: 1px solid #BEE0CD; color: var(--color-success-text); margin-top: 1rem; }

/* ============================================================
   Pestaña Prompts y Skills (_tab_prompts.html)
   ============================================================ */
.ps-chevron { color: var(--color-text-faint); flex-shrink: 0; transition: transform 0.18s ease; }
.ps-chevron-open { transform: rotate(180deg); }
.ps-row { border: 1px solid var(--color-border); border-radius: var(--radius-md); margin-bottom: 0.5rem; overflow: hidden; transition: border-color 0.15s, box-shadow 0.15s; }
.ps-row:hover { border-color: var(--color-border); }
.ps-head {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.65rem 0.9rem; background: var(--color-surface); border: none; cursor: pointer; text-align: left;
}
.ps-head:hover { background: var(--color-surface-alt) !important; }
.ps-head-info { display: flex; align-items: center; gap: 0.6rem; min-width: 0; }
.ps-head-meta { display: flex; align-items: center; gap: 0.6rem; flex-shrink: 0; }
.ps-code { background: var(--color-info-bg); color: var(--color-info-text); padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); font-size: 0.78rem; font-weight: 600; white-space: nowrap; }
.ps-code-skill { background: var(--color-success-bg); color: var(--color-success-text); }
.ps-title { font-size: 0.84rem; color: var(--color-text); font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ps-overridden-badge { font-size: 0.68rem; background: var(--color-warning-bg); color: var(--color-warning-text); padding: 0.1rem 0.4rem; border-radius: var(--radius-pill); font-weight: 600; white-space: nowrap; }
.ps-meta-text { font-size: 0.72rem; color: var(--color-text-faint); }
.ps-body { padding: 0.9rem; border-top: 1px solid var(--color-border-row); background: var(--color-surface-alt); }
.ps-desc { font-size: 0.78rem; color: var(--color-text-muted); margin: 0 0 0.6rem; }
.ps-params { margin-bottom: 0.6rem; }
.ps-params-title { font-size: 0.74rem; font-weight: 600; color: var(--color-text-body); margin-bottom: 0.25rem; }
.ps-params-list { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.ps-param-chip { font-size: 0.72rem; font-family: ui-monospace, monospace; background: var(--color-border-subtle); color: var(--color-text-body); padding: 0.15rem 0.45rem; border-radius: var(--radius-sm); }
.ps-param-required { color: var(--color-danger); }
.ps-textarea { width: 100%; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.8rem; line-height: 1.5; resize: vertical; }
.ps-form-actions { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.6rem; }
.ps-btn-danger { color: var(--color-danger-text); border-color: #E9C3C3; }
.ps-preview { margin-top: 0.7rem; }
.ps-preview-title { font-size: 0.74rem; font-weight: 600; color: var(--color-text-body); margin-bottom: 0.25rem; }
.ps-preview-pre { white-space: pre-wrap; background: var(--color-navy); color: var(--color-border-subtle); padding: 0.75rem; border-radius: var(--radius-sm); font-size: 0.76rem; line-height: 1.5; max-height: 280px; overflow: auto; }
.ps-category-label { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: var(--color-text-faint); margin: 0.75rem 0 0.35rem; }
.ps-category-block { margin-bottom: 1rem; }
.ps-inline-code { background: var(--color-border-subtle); padding: 0.1rem 0.3rem; border-radius: 3px; }

/* ─── Skills: grid de herramientas y opciones RAG ─────────────── */
.settings-tools-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 0.35rem; margin-bottom: 0.9rem; }
.settings-tool-item {
  display: flex; align-items: flex-start; gap: 0.4rem; font-size: 0.78rem; color: var(--color-text-body);
  padding: 0.3rem 0.4rem; border: 1px solid var(--color-border); border-radius: var(--radius-sm);
  background: var(--color-surface); cursor: pointer;
}
.settings-tool-item input { margin-top: 0.15rem; }
.settings-tool-name { font-size: 0.74rem; color: var(--color-text); }
.settings-tool-desc { display: block; font-size: 0.7rem; color: var(--color-text-faint); line-height: 1.3; }
.settings-skill-options { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 0.9rem; }
.settings-skill-option { display: flex; align-items: center; gap: 0.45rem; font-size: 0.8rem; color: var(--color-text-body); }
.settings-skill-topk { width: 80px; }
.settings-skill-topk-hint { font-size: 0.72rem; color: var(--color-text-faint); }

/* ============================================================
   Pestaña RAG (_tab_rag.html)
   ============================================================ */
.settings-rag-status-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; }
.settings-rag-status-active { color: var(--color-success-text); font-weight: 600; }
.settings-rag-status-inactive { color: var(--color-text-faint); }
.settings-rag-link {
  font-size: 0.78rem; color: var(--color-accent); text-decoration: none;
  padding: 0.35rem 0.75rem; border: 1px solid #C7DCEC; border-radius: var(--radius-sm);
  background: var(--color-info-bg); white-space: nowrap;
}
.settings-form-group-mb-lg { margin-bottom: 1.1rem; }
.settings-form-group-mb-xl { margin-bottom: 1.25rem; }
.settings-form-label-block { font-size: 0.83rem; font-weight: 500; color: var(--color-text-body); display: block; margin-bottom: 0.35rem; }
.settings-mono-input { font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.85rem; }
.settings-input-w-120 { width: 120px; }
.settings-icon-sm { width: 0.9rem; height: 0.9rem; }
.settings-result-grid { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem 0.75rem; }
.settings-result-grid-label { font-weight: 500; }
.settings-health-header { display: flex; align-items: center; gap: 0.5rem; font-weight: 600; margin-bottom: 0.4rem; }
.settings-health-header-ok { color: var(--color-success-text); }
.settings-health-header-warn { color: var(--color-warning-text); }
.settings-health-header-error { color: var(--color-danger-text); }
.settings-health-body-warn { color: var(--color-warning-text); }
.settings-health-body-error { color: var(--color-danger-text); }
.settings-info-list { display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.75rem; font-size: 0.83rem; }
.settings-info-list dt { color: var(--color-text-muted); font-weight: 500; }
.settings-info-list dd { color: var(--color-text); font-family: ui-monospace, monospace; }
.settings-info-list dd.settings-info-list-plain { font-family: inherit; }
.settings-howto-list { font-size: 0.8rem; color: var(--color-text-muted); margin: 0; padding-left: 1.2rem; line-height: 1.8; }

/* ============================================================
   Nomenclatura (_nomenclature.html)
   ============================================================ */
.settings-breadcrumb { font-size: 0.75rem; color: var(--color-text-faint); margin-bottom: 2px; }
.settings-breadcrumb a { color: var(--color-text-faint); text-decoration: none; }
.settings-breadcrumb-sep { margin: 0 4px; }
.settings-breadcrumb-current { color: var(--color-text-body); font-weight: 500; }
.settings-header-actions { display: flex; gap: 0.5rem; align-items: center; }
.settings-form-row-3 { grid-template-columns: 1fr 1fr 1fr; gap: 0.75rem; align-items: end; }
.settings-form-row-2 { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.settings-form-row-preview { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.5rem; }
.settings-form-group-flush { margin-bottom: 0; }
.settings-form-group-span { grid-column: 1 / -1; }
.settings-form-group-inline { display: flex; align-items: center; gap: 0.5rem; }
.settings-input-w-80 { max-width: 80px; }
.settings-code-input { font-family: ui-monospace, monospace; max-width: 90px; }
.settings-preview-title { color: var(--color-text-muted); }
.settings-preview-card { background: var(--color-surface-alt); }
.settings-preview-item { display: flex; flex-direction: column; gap: 2px; }
.settings-preview-label { font-size: 0.7rem; color: var(--color-text-faint); }
.settings-preview-code { font-family: ui-monospace, monospace; font-size: 0.88rem; color: var(--color-text); font-weight: 500; }
.settings-preview-code-alt { font-family: ui-monospace, monospace; font-size: 0.75rem; color: var(--color-text-faint); }
.settings-form-actions-final { display: flex; gap: 0.5rem; }
.settings-doctype-label { min-width: 110px; margin: 0; }