/* ============================================================
   QAD Calidad — Módulo Cumplimiento (frameworks, SoA, evidencia)
   Estilos exclusivos de este módulo; los genéricos (badge, table,
   form-select) se reutilizan desde components/.
   ============================================================ */

/* ─── Tarjetas de framework ──────────────────────────────────── */
.cfw-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(22rem, 1fr)); gap: 1rem; }
.cfw-card {
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-border-subtle);
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: border-color 0.2s;
  color: inherit;
}
.cfw-card:hover { border-color: var(--color-border); }
.cfw-card-top { display: flex; align-items: flex-start; gap: 0.875rem; }
.cfw-avatar { width: 2.75rem; height: 2.75rem; border-radius: var(--radius-md); display: flex; align-items: center; justify-content: center; font-size: 1.25rem; flex-shrink: 0; }
.cfw-iso27001 { background: var(--color-info-bg); }
.cfw-iso9001  { background: var(--color-success-bg); }
.cfw-default  { background: var(--color-copper-soft-bg); }
.cfw-card-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.cfw-card-name { font-family: var(--font-serif); font-size: 0.9375rem; font-weight: 700; color: var(--color-text); }
.cfw-card-desc { font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; margin-top: 0.75rem; }
.cfw-card-footer { display: flex; align-items: center; justify-content: space-between; margin-top: 0.875rem; padding-top: 0.75rem; border-top: 1px solid var(--color-border-row); }
.cfw-control-count { display: flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; color: var(--color-text-muted); font-weight: 500; }
.cfw-view-link { font-size: 0.75rem; color: var(--color-accent); font-weight: 600; }

/* ─── Árbol de controles ─────────────────────────────────────── */
.ctrl-domain { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); overflow: hidden; background: var(--color-surface); }
.ctrl-domain-header { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; background: var(--color-bg); cursor: pointer; user-select: none; transition: background 0.15s; }
.ctrl-domain-header:hover { background: var(--color-border-subtle); }
.ctrl-domain-code { font-weight: 700; font-size: 0.75rem; color: var(--color-navy); font-family: monospace; background: var(--color-info-bg); padding: 0.15rem 0.5rem; border-radius: var(--radius-sm); white-space: nowrap; }
.ctrl-domain-title { font-weight: 600; font-size: 0.9rem; color: var(--color-text); flex: 1; }
.ctrl-domain-count { font-size: 0.7rem; color: var(--color-text-faint); white-space: nowrap; }
.ctrl-chevron { width: 1rem; height: 1rem; color: var(--color-text-faint); transition: transform 0.2s; flex-shrink: 0; }
.ctrl-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.5rem 1rem 0.5rem 2.5rem; border-top: 1px solid var(--color-border-row); transition: background 0.1s; }
.ctrl-item:hover { background: var(--color-surface-alt); }
.ctrl-sub-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.4rem 1rem 0.4rem 4rem; border-top: 1px solid var(--color-border-row); background: var(--color-surface-alt); transition: background 0.1s; }
.ctrl-sub-item:hover { background: var(--color-bg); }
.ctrl-code { font-family: monospace; font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; padding-top: 0.1rem; min-width: 4.5rem; }
.ctrl-title { font-size: 0.875rem; color: var(--color-text-body); line-height: 1.4; }

/* ─── KPIs de adopción ───────────────────────────────────────── */
.compliance-metrics-strip { display: flex; gap: 0.375rem; flex-wrap: wrap; margin-top: 0.75rem; }
.compliance-kpi-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.875rem; }
@media (max-width: 900px) { .compliance-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .compliance-kpi-grid { grid-template-columns: 1fr 1fr; } .cfw-grid { grid-template-columns: 1fr; } }
.compliance-kpi-card { background: var(--color-surface); border-radius: var(--radius-lg); border: 1px solid var(--color-border-subtle); padding: 1rem 1.125rem; display: flex; align-items: center; gap: 0.875rem; }
.compliance-kpi-icon { width: 2.5rem; height: 2.5rem; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.compliance-kpi-body { min-width: 0; }
.compliance-kpi-value { font-family: var(--font-serif); font-size: 1.625rem; font-weight: 700; line-height: 1; color: var(--color-text); letter-spacing: -0.01em; }
.compliance-kpi-label { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 0.25rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; }

/* ─── Panel de progreso SoA ──────────────────────────────────── */
.soa-header-progress { flex-shrink: 0; min-width: 16rem; }
.soa-header-stats { display: flex; gap: 1.25rem; }
.soa-header-stat { display: flex; flex-direction: column; align-items: center; text-align: center; }
.soa-header-stat-value { font-family: var(--font-serif); font-size: 1.25rem; font-weight: 700; line-height: 1; color: var(--color-text); letter-spacing: -0.01em; }
.soa-header-stat-label { font-size: 0.65rem; color: var(--color-text-muted); font-weight: 500; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.2rem; }

/* ─── Barra de filtros SoA ───────────────────────────────────── */
.soa-filterbar { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: 0.875rem 1.125rem; margin-bottom: 1rem; display: flex; flex-direction: column; gap: 0.625rem; }
.soa-filter-row { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.soa-filter-label { display: flex; align-items: center; gap: 0.3rem; font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; white-space: nowrap; min-width: 7rem; }
.soa-pills { display: flex; gap: 0.375rem; flex-wrap: wrap; align-items: center; }
.soa-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.75rem;
  border-radius: var(--radius-pill);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--color-text-muted);
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  line-height: 1;
}
.soa-pill:hover { background: var(--color-border-subtle); color: var(--color-text); border-color: var(--color-border); }
.soa-pill-active { background: var(--color-navy); color: var(--color-surface); border-color: var(--color-navy); font-weight: 600; }
.soa-pill-active:hover { background: #0C1B30; color: var(--color-surface); }
.soa-pill-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; flex-shrink: 0; }
.soa-pill-count { display: inline-flex; align-items: center; justify-content: center; background: var(--color-border-subtle); color: var(--color-text-muted); border-radius: var(--radius-pill); font-size: 0.68rem; font-weight: 700; padding: 0.05rem 0.4rem; min-width: 1.25rem; line-height: 1.4; }
.soa-pill-active .soa-pill-count { background: rgba(255,255,255,0.2); color: var(--color-surface); }

.soa-filter-active-bar { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: var(--color-info-bg); border: 1px solid #C7DCEC; border-radius: var(--radius-sm); margin-top: 0.25rem; }
.soa-clear-link { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.75rem; font-weight: 600; color: var(--color-accent); white-space: nowrap; }
.soa-clear-link:hover { text-decoration: underline; }

.soa-ctrl-code { font-family: monospace; font-size: 0.78rem; font-weight: 700; padding: 0.15rem 0.4rem; border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text-faint); white-space: nowrap; }
.soa-ctrl-code-active { background: var(--color-info-bg); color: var(--color-info-text); }

.soa-row-not_applicable td { color: var(--color-text-faint); }
.soa-row-not_applicable:hover { background: var(--color-bg) !important; }
.soa-row-selected { background: var(--color-info-bg) !important; }
.soa-row-selected:hover { background: #DCEAF5 !important; }

/* Select inline coloreado por estado — el chevron es un data-URI SVG,
   no puede usar var(); se repite el hex de --color-text-faint (#9FB3CC). */
.soa-inline-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239FB3CC' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.4rem center;
  background-size: 0.7rem;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  padding: 0.2rem 1.5rem 0.2rem 0.6rem;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  transition: box-shadow 0.15s;
  outline: none;
  min-width: 7rem;
}
.soa-inline-select:focus { box-shadow: 0 0 0 2px rgba(46,92,138,0.2); }
.soa-select-applicable  { background-color: var(--color-success-bg); color: var(--color-success-text); border-color: #BEE0CD; }
.soa-select-na          { background-color: var(--color-bg); color: var(--color-text-faint); border-color: var(--color-border-subtle); }
.soa-select-undefined   { background-color: var(--color-warning-bg); color: var(--color-warning-text); border-color: #EFD9A0; }
.soa-select-verified    { background-color: var(--color-success-bg); color: var(--color-success-text); border-color: #BEE0CD; }
.soa-select-implemented { background-color: var(--color-info-bg); color: var(--color-info-text); border-color: #C7DCEC; }
.soa-select-in_progress { background-color: var(--color-warning-bg); color: var(--color-warning-text); border-color: #EFD9A0; }
.soa-select-not_started { background-color: var(--color-bg); color: var(--color-text-muted); border-color: var(--color-border-subtle); }

/* ─── Salida de asistencia IA ────────────────────────────────── */
.ai-assist-output {
  background: linear-gradient(135deg, var(--color-copper-soft-bg) 0%, var(--color-info-bg) 100%);
  border: 1px solid var(--color-copper-soft-border);
  border-radius: var(--radius-sm);
  padding: 0.875rem;
  font-size: 0.875rem;
  line-height: 1.65;
  color: var(--color-text-body);
  white-space: pre-wrap;
  min-height: 2.5rem;
}

.compliance-history-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-row); font-size: 0.8125rem; }
.compliance-history-item:last-child { border-bottom: none; }

/* ─── Galería de evidencia ───────────────────────────────────── */
.evidence-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 1rem; }
.evidence-gallery-card { transition: border-color 0.15s ease; }
.evidence-gallery-card:hover { border-color: var(--color-border); }

/* ─── Filas compactas (alertas de dashboard, vínculos) ───────── */
.compliance-row { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.4rem 0; border-bottom: 1px solid var(--color-border-row); }
.compliance-row:last-child { border-bottom: none; }
.compliance-row-danger  { border-bottom-color: #E9C3C3; }
.compliance-row-warning { border-bottom-color: #EFD9A0; }

/* ─── KPI de dashboard de adopción: variantes de color ───────── */
.compliance-kpi-icon-neutral { background: var(--color-bg); color: var(--color-text-muted); }
.compliance-kpi-icon-success { background: var(--color-success-bg); color: var(--color-success-text); }
.compliance-kpi-icon-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.compliance-kpi-icon-info    { background: var(--color-info-bg); color: var(--color-info-text); }
.compliance-kpi-value-muted   { color: var(--color-text-muted); }
.compliance-kpi-value-success { color: var(--color-success-text); }
.compliance-kpi-value-warning { color: var(--color-warning-text); }
.compliance-kpi-value-info    { color: var(--color-info-text); }

/* ─── Desglose por dominio (dashboard de adopción) ───────────── */
.compliance-domain-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--color-border-row); }
.compliance-domain-row:last-child { border-bottom: none; }
.compliance-domain-code { font-family: monospace; font-size: 0.7rem; color: var(--color-text-faint); width: 50px; flex-shrink: 0; }
.compliance-domain-title { flex: 1; min-width: 0; font-size: 0.8rem; color: var(--color-text-body); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.compliance-domain-bar { background: var(--color-border-row); border-radius: 4px; height: 5px; margin-top: 4px; }
.compliance-domain-bar-fill { height: 100%; border-radius: 4px; }
.compliance-domain-bar-fill-success { background: var(--color-success); }
.compliance-domain-bar-fill-info    { background: var(--color-accent); }
.compliance-domain-bar-fill-warning { background: var(--color-warning); }
.compliance-domain-pct { font-size: 0.75rem; font-weight: 600; color: var(--color-text-muted); width: 40px; text-align: right; flex-shrink: 0; }
.compliance-domain-ratio { font-size: 0.7rem; color: var(--color-text-faint); width: 60px; text-align: right; flex-shrink: 0; }

/* ─── Leyenda de desglose de estado (dots) ───────────────────── */
.compliance-legend-dot { width: 0.6rem; height: 0.6rem; border-radius: 50%; display: inline-block; }
.compliance-legend-dot-not_started { background: var(--color-border-subtle); border: 1px solid var(--color-border); }

/* ─── CTA banner "Listo para comenzar" (dashboard de adopción) ── */
.compliance-cta-banner { background: var(--color-info-bg); border: 1px solid #C7DCEC; border-radius: var(--radius-md); padding: 1rem 1.25rem; margin-top: 1rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.compliance-cta-title { font-weight: 600; color: var(--color-info-text); margin-bottom: 0.25rem; }
.compliance-cta-text { font-size: 0.85rem; color: var(--color-accent); margin: 0; }

/* ─── Dashboard de adopción: helpers varios ──────────────────── */
.compliance-link-underline { text-decoration: underline; }
.compliance-card-title-warning { color: var(--color-warning-text); }
.compliance-text-warning { color: var(--color-warning-text); }
.compliance-card-body-sm { padding: 0.75rem 1.25rem; }
.compliance-card-body-xs { padding: 0.5rem 1.25rem; }
.compliance-pct-badge { background: var(--color-info-bg); color: var(--color-info-text); font-size: 0.875rem; padding: 0.3rem 0.75rem; }
.compliance-progress-bar-lg { height: 0.75rem; margin-bottom: 0.75rem; }
.compliance-progress-stack-lg { height: 0.75rem; }
.compliance-flex-wrap { flex-wrap: wrap; }
.compliance-trend-chart { height: 180px; max-height: 180px; }
.compliance-row-compact { padding: 0.6rem 0; }
.compliance-btn-danger-outline { border-color: #E9C3C3; }
.compliance-empty-note { padding: 1rem 0; }
.compliance-alert-p-tight { margin: 0 0 0.4rem; }
.compliance-modal-close { background: none; border: none; cursor: pointer; }

/* ─── Lista de adopciones: tarjetas de framework ─────────────── */
.cfw-progress-block { margin-top: 0.875rem; }
.cfw-card-footer-tight { margin-top: 0.75rem; }
.compliance-progress-bar-md { height: 0.5rem; }
.compliance-metric-chip-success { background: var(--color-success-bg); color: var(--color-success-text); }
.compliance-metric-chip-info    { background: var(--color-info-bg); color: var(--color-info-text); }
.compliance-empty-card-body { text-align: center; padding: 3.5rem 1.5rem; }
.compliance-empty-icon-lg { font-size: 2.5rem; margin-bottom: 0.75rem; }
.compliance-form-error-block { color: var(--color-danger); font-size: 0.85rem; margin-bottom: 0.75rem; }
.form-errors { margin-bottom: 0.75rem; }

/* ─── Checklist de auditoría ──────────────────────────────────── */
.audit-checklist-actions { display: flex; gap: 0.5rem; }
.audit-checklist-confirm-box { display: flex; align-items: center; gap: 0.5rem; background: var(--color-warning-bg); border: 1px solid var(--color-warning); border-radius: var(--radius-sm); padding: 0.35rem 0.75rem; }
.audit-checklist-confirm-text { font-size: 0.78rem; color: var(--color-warning-text); font-weight: 500; }
.audit-checklist-confirm-btn { background: var(--color-warning); color: var(--color-surface); padding: 0.25rem 0.6rem; font-size: 0.75rem; }
.audit-checklist-cancel-btn { font-size: 0.75rem; }
.audit-checklist-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.audit-checklist-kpi-card { text-align: center; padding: 1rem; }
.audit-checklist-kpi-value { font-size: 1.5rem; font-weight: 700; }
.audit-checklist-kpi-value-success { color: var(--color-success); }
.audit-checklist-kpi-value-danger  { color: var(--color-danger); }
.audit-checklist-kpi-value-warning { color: var(--color-warning); }
.audit-checklist-kpi-value-muted   { color: var(--color-text-faint); }
.audit-checklist-kpi-label { font-size: 0.78rem; color: var(--color-text-faint); }
.audit-checklist-section-header { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1rem; background: var(--color-bg); border-bottom: 2px solid var(--color-border); border-top: none; }
.audit-checklist-section-header-bordered { border-top: 2px solid var(--color-border); }
.audit-checklist-section-prefix { font-size: 0.7rem; font-weight: 700; color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.08em; }
.audit-checklist-section-title { font-size: 0.88rem; font-weight: 600; color: var(--color-text); margin-left: 0.5rem; }
.audit-checklist-section-badge { font-size: 0.65rem; margin-left: 0.5rem; }
.audit-checklist-section-auditor-form { display: flex; align-items: center; gap: 0.4rem; }
.audit-checklist-section-auditor-label { font-size: 0.72rem; color: var(--color-text-muted); white-space: nowrap; }
.audit-checklist-auditor-select { max-width: 160px; font-size: 0.78rem; }
.audit-checklist-empty { text-align: center; padding: 3rem; color: var(--color-text-faint); }

/* ─── Detalle de control de adopción ──────────────────────────── */
.compliance-page-title-sm { font-size: 1.25rem; }
.compliance-title-sep { color: var(--color-text-faint); font-size: 1.1rem; }
.compliance-control-title { font-size: 1rem; font-weight: 600; color: var(--color-text-body); }
.compliance-badge-lg { font-size: 0.8rem; padding: 0.3rem 0.75rem; }
.compliance-description-card { border-left: 3px solid var(--color-accent); }
.compliance-card-body-md { padding: 1rem 1.25rem; }
.compliance-description-text { color: var(--color-text-body); line-height: 1.6; }
.compliance-detail-grid { grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: start; }
.compliance-label-flush { margin-bottom: 0; }
.compliance-overdue-text { color: var(--color-danger); font-size: 0.78rem; margin-top: 0.25rem; }
.compliance-right-col { display: flex; flex-direction: column; gap: 1.25rem; }
.compliance-tag-group-label { color: var(--color-text-faint); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 0.5rem; }
.compliance-tags-empty { color: var(--color-text-faint); text-align: center; padding: 1rem 0; }
.compliance-finding-row { padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-row); display: flex; flex-direction: column; gap: 0.25rem; }
.compliance-finding-link { color: var(--color-accent); margin-left: auto; white-space: nowrap; }
.compliance-finding-desc { color: var(--color-text-body); line-height: 1.5; }
.compliance-history-item-block { flex-direction: column; align-items: flex-start; gap: 0.25rem; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-row); }
.compliance-history-badge { font-size: 0.65rem; padding: 0.15rem 0.4rem; flex-shrink: 0; }
.compliance-history-user { color: var(--color-text-body); flex: 1; }
.compliance-history-created { color: var(--color-text-faint); padding-left: 0.25rem; }
.compliance-history-diff { padding-left: 0.25rem; }
.compliance-history-change { color: var(--color-text-muted); line-height: 1.6; }
.compliance-history-change-label { font-weight: 500; color: var(--color-text-body); }
.compliance-history-change-new { color: var(--color-text); font-weight: 500; }
.compliance-ai-output-text { white-space: pre-wrap; font-size: 0.82rem; color: var(--color-text-body); margin-bottom: 0.5rem; }
.ai-btn-spinner { display: inline-block; animation: spin 1s linear infinite; }
.ai-use-btn { margin-top: 0.5rem; }

/* ─── Reportes generados de una adopción (adoption_reports) ────── */
.adoption-reports-form { display: flex; align-items: center; gap: 0.5rem; }
.adoption-reports-select { min-width: 6rem; }
.adoption-report-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--color-border-subtle);
}
.adoption-report-row:last-child { border-bottom: none; }
.adoption-report-main { min-width: 0; flex: 1; }
.adoption-report-title { font-size: 0.8125rem; font-weight: 600; color: var(--color-text); display: flex; align-items: center; gap: 0.5rem; }
.adoption-report-date { font-weight: 400; color: var(--color-text-faint); font-size: 0.75rem; }
.adoption-report-meta { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 0.125rem; }
.adoption-reports-empty { font-size: 0.8125rem; color: var(--color-text-faint); padding: 0.5rem 0; }

/* ─── Detalle de control (catálogo) ───────────────────────────── */
.ctrl-detail-title-sub { font-weight: 400; color: var(--color-text-muted); }
.ctrl-detail-card-mb { margin-bottom: 1.5rem; }
.ctrl-detail-description { color: var(--color-text-body); line-height: 1.6; }
.ctrl-detail-parent { margin-bottom: 1rem; }
.ctrl-detail-parent-link { color: var(--color-accent); }
.ctrl-detail-child-row { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--color-border-row); }
.ctrl-detail-child-code { font-size: 0.75rem; }
.ctrl-detail-child-link { color: var(--color-text); flex: 1; }

/* ─── Galería de evidencias ───────────────────────────────────── */
.evidence-metrics-grid { grid-template-columns: repeat(5, 1fr); gap: 0.75rem; }
.evidence-metric-card { text-align: center; padding: 1rem 0.5rem; }
.evidence-metric-card-success { border-top: 3px solid var(--color-success); }
.evidence-metric-card-warning { border-top: 3px solid var(--color-warning); }
.evidence-metric-card-danger  { border-top: 3px solid var(--color-danger); }
.evidence-metric-card-muted   { border-top: 3px solid var(--color-text-faint); }
.evidence-metric-value { font-size: 1.5rem; font-weight: 700; color: var(--color-text); }
.evidence-metric-value-success { color: var(--color-success); }
.evidence-metric-value-warning { color: var(--color-warning); }
.evidence-metric-value-danger  { color: var(--color-danger); }
.evidence-metric-value-muted   { color: var(--color-text-muted); }
.evidence-metric-label { color: var(--color-text-muted); margin-top: 0.25rem; }
.evidence-attach-chip { font-size: 0.7rem; padding: 1px 6px; border-radius: 4px; }
.evidence-attach-chip-img  { background: var(--color-info-bg); color: var(--color-info-text); }
.evidence-attach-chip-pdf  { background: var(--color-danger-bg); color: var(--color-danger-text); }
.evidence-attach-chip-file { background: var(--color-bg); color: var(--color-text-body); }
.evidence-attach-chip-url  { background: var(--color-success-bg); color: var(--color-success-text); }
.evidence-gallery-thumb { width: 100%; max-height: 140px; object-fit: cover; border-radius: 4px; cursor: zoom-in; }
.evidence-lightbox-overlay { position: fixed; inset: 0; z-index: 9000; background: rgba(0,0,0,0.88); display: flex; align-items: center; justify-content: center; }
.evidence-lightbox-close { position: absolute; top: 1.25rem; right: 1.25rem; color: var(--color-surface); background: none; border: none; font-size: 1.75rem; cursor: pointer; }
.evidence-lightbox-img { max-width: 90vw; max-height: 90vh; border-radius: 6px; object-fit: contain; }
.evidence-link-accent { color: var(--color-accent); }
.evidence-icon-inline { display: inline; vertical-align: -1px; margin-right: 0.2rem; }
.evidence-btn-xs-tight { font-size: 0.72rem; }
.evidence-pdf-modal { background: var(--color-surface); border-radius: var(--radius-md); width: 90vw; max-width: 820px; max-height: 90vh; display: flex; flex-direction: column; overflow: hidden; }
.evidence-pdf-modal-header { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border); flex-shrink: 0; }
.evidence-pdf-modal-title { flex: 1; color: var(--color-text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.evidence-pdf-viewer { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; }
.evidence-pdf-toolbar { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; border-bottom: 1px solid var(--color-border-row); flex-shrink: 0; }
.evidence-pdf-canvas-wrap { overflow: auto; flex: 1; padding: 0.75rem; display: flex; justify-content: center; }
.evidence-pdf-status { color: var(--color-text-muted); margin-top: 2rem; }
.evidence-pdf-status-error { color: var(--color-danger); margin-top: 2rem; }
.evidence-pdf-canvas { max-width: 100%; display: block; }
.evidence-card-footer-border { border-top: 1px solid var(--color-border-row); }
.evidence-pagination-label { color: var(--color-text-muted); align-self: center; }
.evidence-empty-card { text-align: center; padding: 3rem 1rem; }
.evidence-empty-icon { margin: 0 auto 1rem; }

/* ─── Detalle de framework ─────────────────────────────────────── */
.compliance-version-label { font-weight: 400; color: var(--color-text-faint); }
.fw-admin-zone-card { border-color: #E9C3C3; }
.fw-admin-zone-body { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.fw-admin-zone-title { color: var(--color-danger-text); margin-bottom: 0.35rem; }
.fw-admin-zone-text { color: var(--color-text-muted); max-width: 52rem; line-height: 1.5; }
.fw-admin-zone-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.fw-admin-zone-input { min-width: 260px; }
.fw-description { color: var(--color-text-muted); margin-bottom: 1.5rem; max-width: 56rem; line-height: 1.6; }
.fw-controls-tree { display: flex; flex-direction: column; gap: 0.5rem; }
.ctrl-chevron-open { transform: rotate(180deg); }
.fw-ctrl-title-medium { font-weight: 500; }
.fw-ctrl-desc { color: var(--color-text-faint); margin-top: 0.2rem; line-height: 1.4; }
.fw-ctrl-subcode { font-size: 0.7rem; }
.fw-ctrl-desc-sub { color: var(--color-text-faint); margin-top: 0.15rem; }
.fw-ctrl-empty-sub { padding: 0.5rem 1rem 0.5rem 1.5rem; font-size: 0.8125rem; color: var(--color-text-faint); }
.fw-empty-card-body { text-align: center; padding: 2rem; }

/* ─── Lista de frameworks ─────────────────────────────────────── */
.fw-import-body { display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start; flex-wrap: wrap; }
.fw-import-title { margin-bottom: 0.35rem; }
.fw-import-text { color: var(--color-text-muted); max-width: 58rem; line-height: 1.5; }
.fw-import-form { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.fw-import-checkbox-label { display: flex; gap: 0.35rem; align-items: center; color: var(--color-text-body); }
.fw-versions-card { cursor: default; pointer-events: none; }
.fw-versions-list { display: flex; flex-direction: column; gap: 0.35rem; margin-top: 0.5rem; pointer-events: all; }
.fw-version-row { display: flex; align-items: center; justify-content: space-between; padding: 0.4rem 0.6rem; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border); text-decoration: none; }
.fw-version-count { font-size: 0.75rem; color: var(--color-text-faint); }
.fw-list-empty-card-body { text-align: center; padding: 3rem 1.5rem; }

/* ─── Análisis de brecha ───────────────────────────────────────── */
.gap-warning-text { color: var(--color-warning); }
.gap-link-cta { color: var(--color-accent); font-weight: 600; margin-left: 0.4rem; text-decoration: underline; }
.gap-header-actions { align-self: flex-start; margin-top: 0.25rem; }
.gap-assignee-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.gap-inline-form { display: inline-flex; align-items: center; gap: 0.4rem; }
.gap-assignee-select { min-width: 160px; }
.gap-nogap-label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; cursor: pointer; color: var(--color-text-body); }
.gap-pill-warning { background: var(--color-warning-bg); color: var(--color-warning-text); border-color: #EFD9A0; }
.gap-icon-tiny { display: inline; vertical-align: -1px; }
.gap-remove-link { font-size: 0.75rem; color: var(--color-text-muted); text-decoration: underline; }
.gap-col-88  { width: 88px; }
.gap-col-148 { width: 148px; }
.gap-col-120 { width: 120px; }
.gap-col-70  { width: 70px; }
.gap-td-truncate { max-width: 0; }
.gap-pre-wrap { white-space: pre-wrap; }
.gap-toggle-btn { font-size: 0.72rem; color: var(--color-accent); background: none; border: none; cursor: pointer; padding: 0; margin-top: 2px; }
.gap-undocumented-chip { font-size: 0.78rem; background: var(--color-warning-bg); color: var(--color-warning-text); border: 1px solid #EFD9A0; border-radius: 4px; padding: 1px 6px; }
.gap-badge-status { font-size: 0.72rem; }
.gap-td-assignee { font-size: 0.78rem; color: var(--color-text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px; }
.gap-text-dash { color: var(--color-border); }
.gap-td-nowrap-sm { white-space: nowrap; font-size: 0.78rem; }
.gap-overdue-text { color: var(--color-danger); font-weight: 600; }
.gap-td-priority { font-size: 0.78rem; text-align: center; }
.gap-priority-high { color: var(--color-danger); font-weight: 600; }
.gap-priority-medium { color: var(--color-warning); font-weight: 600; }
.gap-empty-icon { font-size: 1.75rem; margin-bottom: 0.5rem; }
.gap-empty-title { font-weight: 600; color: var(--color-text-body); margin-bottom: 0.25rem; }
.gap-empty-btn { margin-top: 0.875rem; display: inline-flex; }
.gap-pagination-sep { color: var(--color-border); margin: 0 0.375rem; }

/* ─── Roadmap de implementación ────────────────────────────────── */
.roadmap-spinner-text { color: var(--color-text-muted); align-self: center; }
.roadmap-domain-filter { margin-bottom: 1rem; display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.roadmap-filter-label { font-size: 0.78rem; color: var(--color-text-muted); font-weight: 500; }
.roadmap-domain-select { min-width: 200px; }
.roadmap-filter-count { font-size: 0.75rem; color: var(--color-text-faint); display: none; }
.roadmap-add-phase-card { margin-bottom: 1.25rem; }
.roadmap-add-phase-body { padding: 0.75rem 1rem; }
.roadmap-add-phase-form { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; }
.roadmap-phase-name-input { flex: 1; min-width: 200px; }
.roadmap-phase-date-input { width: 150px; }
.roadmap-bulk-overlay { position: fixed; inset: 0; z-index: var(--z-modal); display: flex; align-items: center; justify-content: center; background: rgba(15,23,42,0.45); }
.roadmap-bulk-modal { background: var(--color-surface); border-radius: 12px; padding: 1.5rem; width: 100%; max-width: 420px; box-shadow: var(--shadow-overlay-lg); }
.roadmap-bulk-title { font-size: 1rem; font-weight: 700; color: var(--color-text); margin: 0 0 1rem; }
.roadmap-bulk-form { display: flex; flex-direction: column; gap: 0.875rem; }
.roadmap-bulk-label { font-size: 0.8rem; font-weight: 600; color: var(--color-text-body); display: block; margin-bottom: 0.3rem; }
.roadmap-bulk-warning { font-size: 0.75rem; color: var(--color-warning); margin: 0; }
.roadmap-bulk-actions { display: flex; gap: 0.5rem; justify-content: flex-end; }
.kanban-drag-ghost { opacity: 0.45; background: var(--color-info-bg) !important; border: 2px dashed var(--color-accent) !important; }

/* ─── SoA (Statement of Applicability) ────────────────────────── */
/* Token adicional --color-stat-purple: el resumen de cabecera del SoA
   necesita un 4to acento ("% completado") distinto de success/warning/
   danger/info — puramente informativo, nunca usado para severidad. */
:root {
  --color-stat-purple: #7C3AED;
}
.soa-header-stat-value-success { color: var(--color-success); }
.soa-header-stat-value-info    { color: var(--color-accent); }
.soa-header-stat-value-purple  { color: var(--color-stat-purple); }
.soa-header-progress-bar { margin-top: 0.5rem; min-width: 14rem; }
.soa-export-actions { align-self: flex-start; margin-top: 0.5rem; }
.soa-inline-form { display: inline; }
.soa-search-input { max-width: 360px; }
.soa-pill-count-success { background: var(--color-success-bg); color: var(--color-success-text); }
.soa-pill-count-warning { background: var(--color-warning-bg); color: var(--color-warning-text); }
.soa-pill-count-info    { background: var(--color-info-bg); color: var(--color-info-text); }
.soa-domain-row { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.soa-domain-select { min-width: 220px; padding: 0.28rem 0.5rem; }
.soa-domain-selected-count { font-size: 0.78rem; color: var(--color-accent); font-weight: 500; }
.soa-th-checkbox { width: 36px; padding-right: 0; }
.soa-checkbox { cursor: pointer; width: 15px; height: 15px; }
.soa-col-96  { width: 96px; }
.soa-col-158 { width: 158px; }
.soa-col-evid { width: 70px; text-align: center; }
.soa-td-checkbox { padding-right: 0; }
.soa-reusable-evidence-chip { font-size: 0.65rem; background: var(--color-info-bg); color: var(--color-info-text); border: 1px solid #C7DCEC; border-radius: 4px; padding: 0 0.35rem; line-height: 1.6; display: inline-block; margin-top: 2px; }
.soa-dash-muted { color: var(--color-border); font-size: 0.75rem; padding-left: 0.25rem; }
.soa-td-center { text-align: center; }
.soa-evid-zero { color: var(--color-warning); font-weight: 700; font-size: 0.8rem; }
.soa-evid-count { color: var(--color-success); font-weight: 600; font-size: 0.8rem; }
.soa-evid-na { color: var(--color-border); font-size: 0.78rem; }
/* Barra de acción masiva flotante: fondo oscuro deliberado (contraste alto,
   independiente del tema claro de la página); tonos de gris-pizarra sin
   token de marca equivalente, uso exclusivo de este componente. */
.soa-bulk-bar { position: fixed; bottom: 0; left: 0; right: 0; z-index: var(--z-dropdown); background: var(--color-navy); color: var(--color-surface); padding: 0.75rem 1.5rem; display: flex; align-items: center; gap: 1rem; box-shadow: 0 -4px 16px rgba(18,35,63,0.18); }
.soa-bulk-count { font-weight: 600; min-width: 7rem; }
.soa-bulk-form { display: flex; align-items: center; gap: 0.75rem; flex: 1; }
.soa-bulk-select { width: auto; padding: 0.35rem 0.65rem; background: #334155; border-color: #475569; color: #F1F5F9; font-size: 0.83rem; }
.soa-bulk-apply-btn { padding: 0.4rem 1rem; }
.soa-bulk-cancel-btn { background: transparent; border: none; color: var(--color-text-faint); cursor: pointer; font-size: 0.8rem; padding: 0.25rem 0.5rem; }

/* ─── Widget de ciclo de certificación (certification_cycle_widget) ── */
.cert-cycle-box { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.cert-cycle-box-certified { background: var(--color-success-bg); border: 1px solid #BEE0CD; border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; }
.cert-cycle-box-empty { background: var(--color-bg); border: 1.5px dashed var(--color-border); border-radius: var(--radius-lg); padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; text-align: center; }
.cert-cycle-header { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 1rem; }
.cert-cycle-label { font-size: 0.7rem; font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.2rem; }
.cert-cycle-name { font-size: 1rem; font-weight: 600; color: var(--color-text); }
.cert-cycle-body-text { font-size: 0.8rem; color: var(--color-text-muted); margin-top: 0.1rem; }
.cert-cycle-target-block { text-align: right; }
.cert-cycle-target-label { font-size: 0.72rem; color: var(--color-text-faint); }
.cert-cycle-target-date { font-size: 0.9rem; font-weight: 600; color: var(--color-text-body); }
.cert-cycle-days-left { font-size: 0.75rem; color: var(--color-text-muted); }
.cert-cycle-days-left-overdue { color: var(--color-danger); }
.cert-cycle-milestones { display: flex; align-items: center; gap: 0; margin-bottom: 1rem; overflow-x: auto; }
.cert-cycle-milestone { display: flex; flex-direction: column; align-items: center; flex: 1; min-width: 64px; }
.cert-cycle-milestone-track { width: 100%; height: 3px; background: var(--color-border-subtle); margin-bottom: 6px; }
.cert-cycle-milestone-track-done { background: var(--color-accent); }
.cert-cycle-milestone-track-first { border-radius: 3px 0 0 3px; }
.cert-cycle-milestone-track-last { border-radius: 0 3px 3px 0; }
.cert-cycle-milestone-dot { width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; }
.cert-cycle-milestone-dot-done { background: var(--color-accent); color: var(--color-surface); }
.cert-cycle-milestone-dot-current { background: var(--color-surface); border: 3px solid var(--color-accent); color: var(--color-accent); }
.cert-cycle-milestone-dot-pending { background: var(--color-border-subtle); color: var(--color-text-faint); border: 1.5px solid var(--color-border); }
.cert-cycle-milestone-label { font-size: 0.6rem; color: var(--color-text-faint); text-align: center; margin-top: 4px; line-height: 1.2; max-width: 64px; word-break: break-word; }
.cert-cycle-milestone-label-active { color: var(--color-text-body); }
.cert-cycle-manage-trigger { margin-top: 0.5rem; }
.cert-cycle-manage-btn { font-size: 0.78rem; }
.cert-cycle-manage-panel { margin-top: 0.75rem; padding: 1rem; background: var(--color-bg); border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); }
.cert-cycle-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.cert-cycle-form-label { font-size: 0.78rem; }
.cert-cycle-form-input { font-size: 0.83rem; }
.cert-cycle-form-actions { display: flex; gap: 0.5rem; }
.cert-cycle-form-btn { font-size: 0.78rem; }
.cert-cycle-certified-label { font-size: 0.7rem; font-weight: 700; color: var(--color-success-text); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.15rem; }
.cert-cycle-certified-name { font-size: 0.95rem; font-weight: 600; color: var(--color-success-text); }
.cert-cycle-certified-detail { font-size: 0.8rem; color: var(--color-success); }
.cert-cycle-certified-row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem; }
.cert-cycle-renew-panel { margin-top: 0.75rem; padding: 1rem; background: var(--color-surface); border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); }
.cert-cycle-renew-panel-left { text-align: left; }
.cert-cycle-new-fields { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 0.5rem; }
.cert-cycle-empty-text { font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 0.75rem; }

/* ─── Ítem de evidencia (evidence_item) ─────────────────────────── */
.evidence-item-expired { background: var(--color-danger-bg); border-radius: var(--radius-sm); padding: 0.5rem; margin: -0.5rem; margin-bottom: 0.25rem; }
.evidence-item-preview-img { max-height: 180px; border-radius: 4px; cursor: zoom-in; display: block; }
.evidence-item-note-italic { font-style: italic; }

/* ─── Tarjeta de evidencias (evidence_card) ─────────────────────── */
.evidence-card-title-icon { display: inline; vertical-align: -2px; margin-right: 0.375rem; }
.evidence-card-alert { font-size: 0.72rem; color: var(--color-warning); font-weight: 500; }
.evidence-form-optional-hint { color: var(--color-text-faint); font-weight: 400; }
.evidence-card-list-empty { color: var(--color-text-faint); text-align: center; padding: 1rem 0; }
.evidence-card-footer-dashed { border-top: 1px dashed var(--color-border-subtle); text-align: right; }

/* ─── Previsualización de roadmap generado por IA ───────────────── */
.roadmap-ai-box { border: 1px solid var(--color-copper-soft-border); background: var(--color-copper-soft-bg); border-radius: var(--radius-md); padding: 1.25rem; margin-bottom: 1.5rem; }
.roadmap-ai-empty-text { color: var(--color-text-muted); }
.roadmap-ai-empty-close { margin-left: 0.5rem; }
.roadmap-ai-title { color: var(--color-copper); }
.roadmap-ai-rationale { color: var(--color-text-muted); border-left: 3px solid var(--color-copper-soft-border); padding-left: 0.75rem; margin-bottom: 1rem; }
.roadmap-ai-phase-list { display: flex; flex-direction: column; gap: 0.75rem; }
.roadmap-ai-phase-card { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: 0.85rem 1rem; }
.roadmap-ai-phase-title { font-size: 0.92rem; }
.roadmap-ai-phase-weeks { color: var(--color-copper); font-weight: 600; white-space: nowrap; }
.roadmap-ai-phase-desc { color: var(--color-text-muted); margin-bottom: 0.5rem; }
.roadmap-ai-control-chip { background: var(--color-bg); color: var(--color-text-body); padding: 0.1rem 0.4rem; border-radius: 0.3rem; font-size: 0.7rem; }
.roadmap-ai-phase-count { color: var(--color-text-faint); margin-top: 0.4rem; }
.roadmap-ai-mode-block { margin-top: 1rem; }
.roadmap-ai-mode-label { font-weight: 600; }
.roadmap-ai-mode-options { margin-top: 0.35rem; }
.roadmap-ai-actions { margin-top: 1.25rem; }

/* ─── Mapeos cruzados (control_mappings) ────────────────────────── */
.ctrl-mappings-body { padding: 1rem; }
.ctrl-mappings-section-label { color: var(--color-text-muted); margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 0.05em; }
.ctrl-mappings-list { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1rem; }
.ctrl-mappings-row { display: flex; align-items: center; justify-content: space-between; padding: 0.5rem 0.75rem; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); }
.ctrl-mappings-row-in { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.75rem; background: var(--color-bg); border-radius: var(--radius-sm); border: 1px solid var(--color-border-subtle); }
.ctrl-mappings-row-main { display: flex; align-items: center; gap: 0.75rem; min-width: 0; }
.ctrl-mappings-badge-shrink { flex-shrink: 0; }
.ctrl-mappings-fw-label { color: var(--color-text-muted); }
.ctrl-mappings-title { display: block; }
.ctrl-mappings-delete-btn { color: var(--color-danger); }
.ctrl-mappings-empty { color: var(--color-text-faint); margin-bottom: 1rem; }
.ctrl-mappings-summary { cursor: pointer; color: var(--color-accent); user-select: none; }
.ctrl-mappings-add-panel { margin-top: 0.75rem; padding: 0.75rem; background: var(--color-border-subtle); border-radius: var(--radius-sm); }
.ctrl-mappings-add-grid { display: grid; gap: 0.5rem; }
.ctrl-mappings-add-actions { margin-top: 0.75rem; display: flex; gap: 0.5rem; }

/* ─── Kanban de roadmap (kanban_card, phase_columns) ────────────── */
.kanban-card { background: var(--color-surface); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); padding: 0.625rem; margin-bottom: 0.5rem; }
.kanban-card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.25rem; }
.kanban-card-main { flex: 1; min-width: 0; }
.kanban-card-code { font-size: 0.65rem; color: var(--color-text-faint); }
.kanban-card-overdue-badge { font-size: 0.62rem; background: var(--color-danger-bg); color: var(--color-danger-text); padding: 1px 5px; border-radius: 3px; margin-left: 4px; }
.kanban-card-title { font-size: 0.78rem; color: var(--color-text-body); margin: 2px 0; line-height: 1.3; }
.kanban-card-move-btn { background: none; border: none; color: var(--color-border); cursor: pointer; font-size: 0.7rem; flex-shrink: 0; padding: 2px 4px; }
.kanban-card-meta { display: flex; align-items: center; gap: 0.5rem; margin-top: 4px; flex-wrap: wrap; }
.kanban-status-chip { font-size: 0.65rem; padding: 1px 7px; border-radius: 10px; }
/* Morado: 4ta categoría puramente informativa ("verificado"), no severidad — mismo token que --color-stat-purple (SoA). */
.kanban-status-verified { background: #F3E8FF; color: var(--color-stat-purple); }
.kanban-status-implemented { background: var(--color-success-bg); color: var(--color-success-text); }
.kanban-status-in_progress { background: var(--color-info-bg); color: var(--color-info-text); }
.kanban-status-not_started { background: var(--color-bg); color: var(--color-text-muted); }
.kanban-card-assignee { font-size: 0.62rem; color: var(--color-text-faint); }
.kanban-card-due { font-size: 0.62rem; color: var(--color-text-faint); }
.kanban-card-due-overdue { color: var(--color-danger); }
.kanban-card-move-panel { margin-top: 6px; }
.kanban-card-move-select { margin-bottom: 4px; }
.kanban-card-move-submit { width: 100%; }

.kanban-board { display: flex; gap: 1rem; overflow-x: auto; align-items: flex-start; padding-bottom: 1rem; }
.kanban-column { min-width: 260px; max-width: 300px; flex-shrink: 0; }
.kanban-column-inner { background: var(--color-bg); border: 1px solid var(--color-border-subtle); border-radius: var(--radius-lg); overflow: hidden; }
.kanban-column-header { padding: 0.75rem 1rem; background: var(--color-border-subtle); border-bottom: 1px solid var(--color-border-subtle); }
.kanban-column-header-completed { background: var(--color-success-bg); }
.kanban-column-header-in_progress { background: var(--color-info-bg); }
.kanban-column-title-unphased { font-size: 0.8rem; font-weight: 600; color: var(--color-text-muted); }
.kanban-column-count { float: right; font-size: 0.7rem; background: var(--color-border-subtle); color: var(--color-text-muted); padding: 1px 6px; border-radius: 10px; }
.kanban-column-body { padding: 0.5rem; max-height: 600px; overflow-y: auto; }
.kanban-column-header-row { display: flex; justify-content: space-between; align-items: center; gap: 0.5rem; }
.kanban-column-title { font-size: 0.8rem; font-weight: 600; color: var(--color-text-body); flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kanban-column-stat { font-size: 0.7rem; background: var(--color-border-subtle); color: var(--color-text-muted); padding: 1px 6px; border-radius: 10px; flex-shrink: 0; }
.kanban-column-edit-btn { background: none; border: none; color: var(--color-text-faint); cursor: pointer; font-size: 0.75rem; flex-shrink: 0; }
.kanban-column-target-row { display: flex; align-items: center; gap: 0.4rem; margin-top: 3px; }
.kanban-column-target-date { font-size: 0.65rem; color: var(--color-text-faint); }
.kanban-column-target-chip { font-size: 0.62rem; border-radius: 4px; padding: 0 5px; font-weight: 600; }
.kanban-column-target-chip-complete { background: var(--color-success-bg); color: var(--color-success-text); }
.kanban-column-target-chip-overdue { background: var(--color-danger-bg); color: var(--color-danger-text); }
.kanban-column-target-chip-pending { background: var(--color-warning-bg); color: var(--color-warning-text); font-weight: 400; }
.kanban-column-progress-track { margin-top: 6px; background: var(--color-border-subtle); border-radius: 4px; height: 4px; }
.kanban-column-progress-fill { height: 100%; border-radius: 4px; }
.kanban-column-progress-fill-complete { background: var(--color-success); }
.kanban-column-progress-fill-mid { background: var(--color-accent); }
.kanban-column-progress-fill-low { background: var(--color-warning); }
.kanban-column-progress-label { font-size: 0.62rem; color: var(--color-text-faint); margin-top: 2px; }
.kanban-column-edit-panel { margin-top: 0.5rem; }
.kanban-column-edit-input { font-size: 0.78rem; margin-bottom: 4px; }
.kanban-column-edit-select { margin-bottom: 4px; }
.kanban-column-edit-actions { display: flex; gap: 4px; }
.kanban-column-edit-save { flex: 1; }
.kanban-column-delete-btn { width: 100%; margin-top: 4px; color: var(--color-danger); border-color: #E9C3C3; }

/* ─── Panel de vínculos (audit_links_panel, finding_links_panel) ── */
.link-panel-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-row); }
.link-panel-row-title { font-size: 0.85rem; font-weight: 500; color: var(--color-text); }
.link-panel-row-link { margin-left: 0.75rem; font-size: 0.75rem; color: var(--color-accent); }
.link-panel-inline-form { display: inline; }
.link-panel-generate-btn { font-size: 0.72rem; margin-left: 0.5rem; }
.link-panel-remove-btn { color: var(--color-danger); border-color: #E9C3C3; font-size: 0.72rem; }
.link-panel-empty { color: var(--color-text-faint); font-size: 0.83rem; text-align: center; padding: 1rem 0; }
.link-panel-details { margin-top: 0.75rem; }
.link-panel-summary { cursor: pointer; font-size: 0.82rem; color: var(--color-accent); font-weight: 500; }
.link-panel-add-form { margin-top: 0.75rem; }
.link-panel-add-row { display: flex; gap: 0.5rem; align-items: flex-end; }
.link-panel-add-field { flex: 1; }
.link-panel-add-label { font-size: 0.78rem; }
.link-panel-add-submit { font-size: 0.78rem; }
.link-panel-finding-type-badge { font-size: 0.68rem; margin-right: 0.4rem; }
.link-panel-finding-desc { font-size: 0.82rem; color: var(--color-text-body); }

/* ─── Fila de ítem de checklist (checklist_item_row) ────────────── */
.checklist-row { padding: 0.75rem 0; border-bottom: 1px solid var(--color-border-row); }
.checklist-row-main { display: flex; gap: 0.75rem; align-items: flex-start; }
.checklist-row-body { flex: 1; }
.checklist-row-title { font-size: 0.82rem; font-weight: 500; color: var(--color-text); }
.checklist-row-question { font-size: 0.75rem; color: var(--color-text-muted); margin-top: 2px; display: flex; align-items: flex-start; gap: 0.3rem; }
.checklist-row-question-text { flex: 1; }
.checklist-row-edit-btn { flex-shrink: 0; background: none; border: none; cursor: pointer; color: var(--color-text-faint); font-size: 0.75rem; padding: 0; line-height: 1; }
.checklist-row-edit-form { margin-top: 0.4rem; }
.checklist-row-edit-form-inner { display: flex; flex-direction: column; gap: 0.35rem; }
.checklist-row-edit-textarea { font-size: 0.75rem; }
.checklist-row-edit-btn-sm { font-size: 0.72rem; padding: 0.2rem 0.6rem; }
.checklist-row-audited { font-size: 0.7rem; color: var(--color-text-faint); margin-top: 2px; }
.checklist-row-finding { margin-top: 4px; }
.checklist-row-finding-badge { font-size: 0.68rem; }
.checklist-row-finding-desc { font-size: 0.72rem; color: var(--color-text-faint); margin-left: 0.4rem; }
.checklist-row-actions { display: flex; flex-direction: column; gap: 0.4rem; align-items: flex-end; min-width: 160px; }
.checklist-row-notes-toggle { font-size: 0.7rem; color: var(--color-text-muted); background: none; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; gap: 0.25rem; }
.checklist-row-finding-toggle { font-size: 0.72rem; color: var(--color-danger); background: none; border: none; cursor: pointer; padding: 0; }
.checklist-row-finding-form { display: none; margin-top: 4px; }
.checklist-row-finding-textarea { font-size: 0.78rem; }
.checklist-row-finding-submit { margin-top: 4px; background: var(--color-danger); color: var(--color-surface); font-size: 0.72rem; }
.checklist-row-notes-panel { margin-top: 0.5rem; padding-top: 0.5rem; border-top: 1px dashed var(--color-border-subtle); }
.checklist-row-notes-form { display: flex; flex-direction: column; gap: 0.5rem; }
.checklist-row-notes-textarea { font-size: 0.78rem; }
.checklist-row-auditor-select { max-width: 200px; }
.checklist-row-notes-submit { align-self: flex-end; font-size: 0.75rem; }

/* ─── Panel de checklist (checklist_panel) ──────────────────────── */
.checklist-generated-banner { background: var(--color-success-bg); border: 1px solid #BEE0CD; padding: 0.6rem 1rem; border-radius: var(--radius-sm); margin-bottom: 0.75rem; font-size: 0.82rem; color: var(--color-success-text); }
.checklist-panel-empty { color: var(--color-text-faint); font-size: 0.83rem; padding: 1rem; }

/* ─── Fila de adopción de control (control_adoption_row) ───────── */
.ctrl-adopt-code { font-family: monospace; font-size: 0.78rem; font-weight: 600; color: var(--color-accent); }
.ctrl-adopt-code-na { color: var(--color-text-faint); }

/* ─── Widget de etiquetas de cumplimiento (compliance_tags_widget) ── */
.compliance-tags-widget {
  border: 1px solid var(--color-border-subtle);
  border-radius: var(--radius-md);
  padding: 0.875rem;
  background: var(--color-surface);
  margin-top: 0.75rem;
}
.widget-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.625rem; }
.tags-list { display: flex; flex-direction: column; gap: 0.5rem; }
.tag-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.375rem 0.5rem;
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  border: 1px solid var(--color-border-subtle);
}
.tag-code { font-weight: 700; font-size: 0.75rem; color: var(--color-text-muted); flex-shrink: 0; }
.tag-label { font-size: 0.8125rem; color: var(--color-text); flex: 1; min-width: 0; }
.tag-form { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.compliance-tags-widget-search { width: 100%; margin-bottom: 0.375rem; }

/* ─── Sugerencia de estado por IA (control_adoption_row) ──────── */
.status-suggest-error { color: var(--color-danger); margin-top: 0.35rem; }
.status-suggest-chip { border: 1px solid var(--color-border-subtle); border-radius: var(--radius-md); padding: 0.6rem 0.75rem; background: var(--color-bg); }
.status-suggest-chip-header { margin-bottom: 0.35rem; }
.status-suggest-confidence { color: var(--color-text-faint); }
.status-suggest-rationale { color: var(--color-text-muted); margin-bottom: 0.5rem; }

/* ─── Revisión de sugerencias de estado (SoA) ─────────────────── */
.suggestions-empty-state { padding: 2rem; text-align: center; color: var(--color-text-muted); }
.suggestions-intro-text { color: var(--color-text-muted); margin-bottom: 1rem; }
.suggestions-checkbox-col { width: 2.5rem; }
.suggestion-badge { padding: 0.15rem 0.5rem; border-radius: 0.35rem; font-size: 0.72rem; font-weight: 600; }
.suggestion-badge-implemented    { background: var(--color-success-bg); color: var(--color-success-text); }
.suggestion-badge-in_progress    { background: var(--color-info-bg); color: var(--color-info-text); }
.suggestion-badge-not_applicable { background: var(--color-danger-bg); color: var(--color-danger-text); }
.suggestion-badge-pending        { background: var(--color-bg); color: var(--color-text-muted); }
.suggestions-rationale-cell { max-width: 24rem; color: var(--color-text-body); }
.suggestions-empty-row { text-align: center; color: var(--color-text-faint); padding: 1.5rem; }