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

   Token adicional --color-risk-high: la matriz de riesgo necesita 4
   niveles (crítico/alto/medio/bajo) pero la guía de marca solo define
   3 colores funcionales (danger/warning/success). "Alto" usa un tono
   naranja quemado entre danger y warning — misma familia de severidad,
   nunca decorativo, solo para esta escala de 4 niveles.
   ============================================================ */

:root {
  --color-risk-high: #C2540A;
  --color-risk-high-bg: #FBE9DD;
  --color-risk-high-text: #8A3B08;
}

/* ─── Tarjetas de métrica (clicables, con hover por severidad) ──── */
.risk-metrics-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 1rem; margin-bottom: 1.5rem; }
.risk-metric-link { text-decoration: none; }
.risk-metric-card { cursor: pointer; transition: box-shadow 0.15s, transform 0.1s; }
.risk-metric-card:hover { transform: translateY(-1px); }
.risk-metric-card-total:hover    { box-shadow: 0 4px 16px rgba(18,35,63,0.10); }
.risk-metric-card-critical:hover { box-shadow: 0 4px 16px rgba(178,58,58,0.15); }
.risk-metric-card-high:hover     { box-shadow: 0 4px 16px rgba(194,84,10,0.15); }
.risk-metric-card-medium:hover   { box-shadow: 0 4px 16px rgba(184,134,11,0.15); }
.risk-metric-card-low:hover      { box-shadow: 0 4px 16px rgba(47,125,91,0.15); }
.risk-metric-body { text-align: center; padding: 1rem; }
.risk-metric-value { font-family: var(--font-serif); font-size: 2rem; font-weight: 700; }
.risk-metric-value-total    { color: var(--color-text); }
.risk-metric-value-critical { color: var(--color-danger); }
.risk-metric-value-high     { color: var(--color-risk-high); }
.risk-metric-value-medium   { color: var(--color-warning); }
.risk-metric-value-low      { color: var(--color-success); }
.risk-metric-label { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 2px; }

/* ─── Layout de dos columnas del dashboard ───────────────────────── */
.risk-dashboard-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; }

/* ─── Mapa de calor 5×5 ──────────────────────────────────────────── */
.risk-heatmap-scroll { overflow-x: auto; }
.risk-heatmap-inner { min-width: 340px; }
.risk-heatmap-col-headers { display: flex; gap: 4px; margin-bottom: 4px; padding-left: 90px; }
.risk-heatmap-col-label { flex: 1; text-align: center; font-size: 0.6rem; color: var(--color-text-faint); }
.risk-heatmap-row { display: flex; gap: 4px; margin-bottom: 4px; align-items: center; }
.risk-heatmap-row-label { width: 86px; text-align: right; font-size: 0.65rem; color: var(--color-text-muted); padding-right: 6px; white-space: nowrap; }
.risk-heatmap-cell {
  flex: 1;
  border-radius: var(--radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: filter 0.15s, transform 0.1s;
  outline: 2px solid transparent;
}
.risk-heatmap-cell:hover { filter: brightness(0.88); transform: scale(1.06); outline-color: currentColor; }
.risk-heatmap-cell-empty { flex: 1; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center; min-height: 44px; font-size: 0.85rem; font-weight: 700; }
.risk-heatmap-cell-empty span { opacity: 0.25; }
.risk-heatmap-x-label { text-align: center; font-size: 0.62rem; color: var(--color-text-faint); margin-top: 6px; padding-left: 90px; font-weight: 600; }
.risk-heatmap-legend { display: flex; gap: 0.75rem; margin-top: 1rem; flex-wrap: wrap; }
.risk-heatmap-legend-item { display: flex; align-items: center; gap: 4px; font-size: 0.7rem; color: var(--color-text-muted); }
.risk-heatmap-legend-swatch { width: 12px; height: 12px; border-radius: 2px; display: inline-block; }
.risk-heatmap-legend-swatch-low      { background: var(--color-success-bg); }
.risk-heatmap-legend-swatch-medium   { background: var(--color-warning-bg); }
.risk-heatmap-legend-swatch-high     { background: var(--color-risk-high-bg); }
.risk-heatmap-legend-swatch-critical { background: var(--color-danger-bg); }

/* ─── Desglose por estado ────────────────────────────────────────── */
.risk-status-card { margin-bottom: 1rem; }
.risk-status-row { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.5rem; text-decoration: none; padding: 2px 0; border-radius: 4px; }
.risk-status-label { flex: 1; font-size: 0.83rem; color: var(--color-text-body); }
.risk-status-label-muted { color: var(--color-text-faint); }
.risk-status-track { width: 100px; background: var(--color-border-subtle); border-radius: 4px; height: 6px; overflow: hidden; }
.risk-status-fill { height: 100%; background: var(--color-accent); }
.risk-status-fill-muted { background: var(--color-border); }
.risk-status-count { width: 24px; text-align: right; font-size: 0.8rem; font-weight: 600; color: var(--color-text-body); }
.risk-status-count-muted { color: var(--color-text-faint); }

/* ─── Riesgos críticos ───────────────────────────────────────────── */
.risk-card-header-row { display: flex; justify-content: space-between; align-items: center; }
.risk-view-all-link { font-size: 0.75rem; color: var(--color-accent); text-decoration: none; }
.risk-row { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; border-bottom: 1px solid var(--color-border-row); text-decoration: none; gap: 0.5rem; }
.risk-row-main { min-width: 0; }
.risk-row-code { font-size: 0.7rem; color: var(--color-text-faint); }
.risk-row-title { font-size: 0.83rem; color: var(--color-text); margin-left: 0.5rem; }
.risk-level-chip { background: var(--color-danger-bg); color: var(--color-danger-text); font-size: 0.7rem; font-weight: 700; padding: 2px 8px; border-radius: 4px; white-space: nowrap; flex-shrink: 0; }
.risk-empty-body { text-align: center; color: var(--color-text-faint); font-size: 0.85rem; padding: 2rem; }

/* ─── Filtros de la lista de riesgos ──────────────────────────────── */
.risk-filters-card { margin-bottom: 1rem; }
.risk-filters-body { padding: 0.6rem 1rem; }
.risk-filter-stack { display: flex; flex-direction: column; gap: 0.4rem; }
.risk-filter-row { display: flex; align-items: center; gap: 0.4rem; flex-wrap: wrap; }
.risk-filter-row-wide { gap: 0.5rem; }
.risk-filter-label { font-size: 0.7rem; color: var(--color-text-faint); min-width: 72px; font-weight: 500; }
.risk-filter-active-chip { font-size: 0.72rem; padding: 2px 10px; border-radius: var(--radius-pill); border: 1px solid var(--color-accent); background: var(--color-info-bg); color: var(--color-info-text); font-weight: 600; }
.risk-filter-clear { font-size: 0.7rem; color: var(--color-text-faint); text-decoration: none; }

.risk-filter-pill { font-size: 0.72rem; padding: 2px 10px; border-radius: var(--radius-pill); text-decoration: none; border: 1px solid var(--color-border); color: var(--color-text-body); background: var(--color-surface-alt); }
.risk-filter-pill-active-all      { background: var(--color-text); color: var(--color-surface); border-color: var(--color-text); }
.risk-filter-pill-active-critical { background: var(--color-danger); color: var(--color-surface); border-color: var(--color-danger); }
.risk-filter-pill-active-high     { background: var(--color-risk-high); color: var(--color-surface); border-color: var(--color-risk-high); }
.risk-filter-pill-active-medium   { background: var(--color-warning); color: var(--color-surface); border-color: var(--color-warning); }
.risk-filter-pill-active-low      { background: var(--color-success); color: var(--color-surface); border-color: var(--color-success); }
.risk-filter-form { display: flex; gap: 0.5rem; align-items: center; }

/* ─── Tabla de riesgos ────────────────────────────────────────────── */
.risk-table-title-link { color: var(--color-text); }
.risk-table-cell-muted { color: var(--color-text-muted); }
.risk-level-badge { font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; white-space: nowrap; display: inline-block; }
.risk-level-sub { color: var(--color-text-faint); display: block; margin-top: 2px; }
.risk-unrated { color: var(--color-border); font-size: 0.75rem; }
.risk-table-empty { text-align: center; padding: 3rem; color: var(--color-text-faint); }

/* ─── Detalle de riesgo ──────────────────────────────────────────── */
.risk-detail-badges { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; }
.risk-detail-code { color: var(--color-text-faint); }
.risk-level-pill { font-size: 0.72rem; font-weight: 700; padding: 3px 10px; border-radius: 20px; }
.risk-detail-title { margin-top: 0.25rem; }

.risk-two-col { display: grid; grid-template-columns: 1fr 360px; gap: 1.5rem; align-items: start; }
.risk-info-card { margin-bottom: 1rem; }
.risk-description { font-size: 0.875rem; color: var(--color-text-body); margin-bottom: 1rem; }
.risk-info-list { display: grid; grid-template-columns: 140px 1fr; gap: 0.5rem 1rem; font-size: 0.83rem; }
.risk-info-list dt { color: var(--color-text-faint); font-weight: 500; }

.risk-timeline { position: relative; padding-left: 1.5rem; }
.risk-timeline-line { position: absolute; left: 6px; top: 0; bottom: 0; width: 2px; background: var(--color-border-subtle); }
.risk-timeline-entry { position: relative; margin-bottom: 1rem; }
.risk-timeline-dot { position: absolute; left: -1.5rem; top: 2px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--color-surface); }
.risk-timeline-dot-assessment { background: var(--color-accent); }
.risk-timeline-dot-treatment { background: var(--color-copper); }
.risk-timeline-date { font-size: 0.75rem; color: var(--color-text-faint); margin-bottom: 2px; }
.risk-timeline-text { font-size: 0.83rem; color: var(--color-text-body); }

.risk-assessment-sidebar-card { margin-top: 1rem; }
.risk-delete-card-body { text-align: center; }
.risk-delete-btn { color: var(--color-danger); border-color: #E9C3C3; }

/* ─── Panel de valoración ────────────────────────────────────────── */
.risk-assessment-box { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; padding: 1rem; border-radius: var(--radius-md); }
.risk-assessment-score { text-align: center; }
.risk-assessment-score-value { font-family: var(--font-serif); font-size: 2.5rem; font-weight: 700; line-height: 1; }
.risk-assessment-score-label { font-size: 0.7rem; color: var(--color-text-muted); margin-top: 2px; }
.risk-assessment-level-label { font-size: 1.1rem; font-weight: 600; }
.risk-assessment-meta { font-size: 0.8rem; color: var(--color-text-muted); }
.risk-assessment-by { font-size: 0.75rem; color: var(--color-text-faint); margin-top: 4px; }
.risk-assessment-notes { font-size: 0.82rem; color: var(--color-text-muted); margin-bottom: 1rem; }
.risk-assessment-empty { text-align: center; padding: 1.5rem; color: var(--color-border); }
.risk-assessment-empty-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.risk-assessment-empty-text { font-size: 0.85rem; }

.risk-details-toggle { margin-top: 0.75rem; }
.risk-details-summary { cursor: pointer; font-size: 0.82rem; color: var(--color-accent); font-weight: 500; }
.risk-assessment-form { margin-top: 0.75rem; }
.risk-form-notes { margin-bottom: 0.75rem; }
.risk-form-textarea-sm { font-size: 0.78rem; }
.risk-form-grid-tight { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.75rem; }
.risk-form-field-tight { margin-bottom: 0.75rem; }

/* ─── Planes de tratamiento ──────────────────────────────────────── */
.risk-treatment-card { border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 0.875rem; margin-bottom: 0.75rem; }
.risk-treatment-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.5rem; }
.risk-treatment-main { flex: 1; }
.risk-treatment-badges { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 4px; flex-wrap: wrap; }
.risk-treatment-type-chip { font-size: 0.72rem; font-weight: 600; padding: 2px 8px; border-radius: 4px; }
.risk-treatment-type-mitigate { background: var(--color-info-bg); color: var(--color-info-text); }
.risk-treatment-type-accept   { background: var(--color-warning-bg); color: var(--color-warning-text); }
.risk-treatment-type-transfer { background: var(--color-success-bg); color: var(--color-success-text); }
.risk-treatment-type-eliminate { background: var(--color-copper-soft-bg); color: var(--color-copper); }
.risk-treatment-status-badge { font-size: 0.7rem; }
.risk-treatment-desc { font-size: 0.83rem; color: var(--color-text-body); margin: 0 0 4px; }
.risk-treatment-meta { font-size: 0.75rem; color: var(--color-text-faint); display: flex; gap: 1rem; flex-wrap: wrap; }
.risk-treatment-status-form { display: flex; align-items: center; gap: 4px; }
.risk-empty-list { text-align: center; color: var(--color-border); font-size: 0.85rem; padding: 1rem 0; }
.risk-add-toggle { margin-top: 0.75rem; }
.risk-add-form { margin-top: 0.75rem; }

/* ─── Controles vinculados ───────────────────────────────────────── */
.risk-control-link-row { display: flex; justify-content: space-between; align-items: center; padding: 0.5rem 0; border-bottom: 1px solid var(--color-border-row); gap: 0.5rem; }
.risk-control-code { color: var(--color-accent); }
.risk-control-code-compliance { color: var(--color-copper); }
.risk-control-title { color: var(--color-text-body); margin-left: 0.5rem; }
.risk-control-framework { color: var(--color-text-faint); display: block; }
.risk-control-note { color: var(--color-text-faint); margin-top: 2px; }
.risk-control-remove-btn { color: var(--color-danger); font-size: 0.75rem; background: none; border: none; cursor: pointer; }
.risk-empty-links { text-align: center; color: var(--color-border); font-size: 0.85rem; padding: 0.75rem 0; }

.risk-link-form-wrap { margin-top: 0.75rem; position: relative; }
.risk-search-field { position: relative; }
.risk-search-input { position: relative; }
.risk-search-input input { padding-right: 2rem; }
.risk-search-loading { position: absolute; right: 0.6rem; top: 50%; transform: translateY(-50%); color: var(--color-text-faint); font-size: 0.75rem; }
.risk-search-clear { position: absolute; right: 0.5rem; top: 50%; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--color-text-faint); font-size: 0.9rem; line-height: 1; }
.risk-search-dropdown { position: absolute; z-index: var(--z-dropdown); left: 0; right: 0; top: 100%; margin-top: 2px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: var(--shadow-overlay); max-height: 220px; overflow-y: auto; }
.risk-search-result { padding: 0.5rem 0.75rem; cursor: pointer; border-bottom: 1px solid var(--color-border-row); }
.risk-search-result:hover { background: var(--color-surface-alt); }
.risk-search-result-head { display: flex; align-items: center; gap: 0.5rem; }
.risk-search-result-code { font-size: 0.72rem; color: var(--color-accent); }
.risk-search-result-title { font-size: 0.82rem; color: var(--color-text); }
.risk-search-result-fw { font-size: 0.68rem; color: var(--color-text-faint); }
.risk-search-empty { padding: 0.75rem; font-size: 0.8rem; color: var(--color-text-faint); text-align: center; }
.risk-selected-chip { margin-bottom: 0.5rem; padding: 0.4rem 0.75rem; background: var(--color-info-bg); border-radius: var(--radius-sm); border: 1px solid #C7DCEC; }
.risk-selected-chip span { font-size: 0.75rem; color: var(--color-info-text); }