/**
 * SENTINEL — Compliance States CSS
 * sentinel-compliance-states.css
 *
 * Sistema visual de 3 estados para documentación y score.
 * Verde institucional #16a34a (no gamificación, regulatorio).
 * Importado por todas las páginas del proyecto.
 */

/* ── VARIABLES COMPLIANCE ─────────────────────────────────── */
:root {
  /* Verde institucional EU — reemplaza cyan para estados compliance */
  --compliance-green:       #16a34a;
  --compliance-green-dim:   rgba(22, 163, 74, 0.10);
  --compliance-green-border:rgba(22, 163, 74, 0.30);

  /* Ámbar — en revisión / parcial */
  --compliance-amber:       #d97706;
  --compliance-amber-dim:   rgba(217, 119, 6, 0.10);
  --compliance-amber-border:rgba(217, 119, 6, 0.30);

  /* Gris — autogenerado / sin certificar */
  --compliance-grey:        #6b7280;
  --compliance-grey-dim:    rgba(107, 114, 128, 0.08);
  --compliance-grey-border: rgba(107, 114, 128, 0.20);

  /* Rojo — crítico / alto riesgo */
  --compliance-red:         #ef4444;
  --compliance-red-dim:     rgba(239, 68, 68, 0.08);
  --compliance-red-border:  rgba(239, 68, 68, 0.25);
}

/* ── SEMÁFORO REGULATORIO DE SCORE ───────────────────────────
   Uso: <div class="score-traffic score-green|amber|red">
   Reemplaza gamificación por indicador regulatorio claro.
   ────────────────────────────────────────────────────────── */

.score-traffic {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 5px 12px;
  border-radius: 20px;
  text-transform: uppercase;
}

.score-traffic::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Score ≥ 75 — Compliance sólido */
.score-green {
  background: var(--compliance-green-dim);
  color: var(--compliance-green);
  border: 1px solid var(--compliance-green-border);
}
.score-green::before { background: var(--compliance-green); }

/* Score 50-74 — En progreso */
.score-amber {
  background: var(--compliance-amber-dim);
  color: var(--compliance-amber);
  border: 1px solid var(--compliance-amber-border);
  animation: traffic-pulse 2.5s infinite;
}
.score-amber::before { background: var(--compliance-amber); animation: dot-pulse 2.5s infinite; }

/* Score < 50 — Atención regulatoria */
.score-red {
  background: var(--compliance-red-dim);
  color: var(--compliance-red);
  border: 1px solid var(--compliance-red-border);
}
.score-red::before { background: var(--compliance-red); animation: dot-pulse 1.5s infinite; }

@keyframes traffic-pulse {
  0%, 100% { border-color: var(--compliance-amber-border); }
  50%       { border-color: var(--compliance-amber); }
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* ── ESTADOS DE DOCUMENTACIÓN ─────────────────────────────── */

/* Nivel 1: Autogenerado — Modo A */
.doc-state-self {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 600;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--compliance-grey-dim);
  color: var(--compliance-grey);
  border: 1px solid var(--compliance-grey-border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.doc-state-self::before { content: '○'; font-size: 9px; }

/* Nivel 2: En revisión por Álvaro — Modo B en proceso */
.doc-state-review {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--compliance-amber-dim);
  color: var(--compliance-amber);
  border: 1px solid var(--compliance-amber-border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  animation: traffic-pulse 2s infinite;
}
.doc-state-review::before { content: '●'; font-size: 7px; animation: dot-pulse 1.5s infinite; }

/* Nivel 3: Certificado SENTINEL */
.doc-state-certified {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--compliance-green-dim);
  color: var(--compliance-green);
  border: 1px solid var(--compliance-green-border);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.doc-state-certified::before { content: '✓'; font-size: 10px; font-weight: 900; }

/* ── FOOTER EU DATA BADGE ─────────────────────────────────── */

.eu-data-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-family: 'JetBrains Mono', monospace;
  color: var(--compliance-green);
  background: var(--compliance-green-dim);
  border: 1px solid var(--compliance-green-border);
  padding: 4px 10px;
  border-radius: 6px;
  font-weight: 600;
}
.eu-data-badge::before { content: '🇪🇺'; font-size: 13px; }

/* ── DISCLAIMER MODO A ────────────────────────────────────── */

.disclaimer-mode-a {
  background: rgba(239, 68, 68, 0.05);
  border: 1px solid rgba(239, 68, 68, 0.20);
  border-left: 3px solid #ef4444;
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 12px;
  line-height: 1.65;
  color: #d1d5db;
}

.disclaimer-mode-a strong {
  color: #ef4444;
}

.disclaimer-mode-b {
  background: var(--compliance-green-dim);
  border: 1px solid var(--compliance-green-border);
  border-left: 3px solid var(--compliance-green);
  border-radius: 8px;
  padding: 14px 18px;
  font-size: 12px;
  line-height: 1.65;
  color: #d1d5db;
}

.disclaimer-mode-b strong {
  color: var(--compliance-green);
}

/* ── RISK LEVEL BADGES ────────────────────────────────────── */

.risk-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 4px 12px;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.risk-badge-alto {
  background: rgba(234, 88, 12, 0.12);
  color: #ea580c;
  border: 1px solid rgba(234, 88, 12, 0.30);
}

.risk-badge-limitado {
  background: rgba(217, 119, 6, 0.12);
  color: #d97706;
  border: 1px solid rgba(217, 119, 6, 0.30);
}

.risk-badge-minimo {
  background: var(--compliance-green-dim);
  color: var(--compliance-green);
  border: 1px solid var(--compliance-green-border);
}

.risk-badge-inaceptable {
  background: var(--compliance-red-dim);
  color: var(--compliance-red);
  border: 1px solid var(--compliance-red-border);
}

/* ── AUTHORITY PILL ───────────────────────────────────────── */

.authority-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 700;
  font-family: 'JetBrains Mono', monospace;
  padding: 3px 10px;
  border-radius: 20px;
  background: rgba(201, 168, 76, 0.10);
  color: #c9a84c;
  border: 1px solid rgba(201, 168, 76, 0.25);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* ── HELPER UTILITY ───────────────────────────────────────── */

/* Reemplaza usos de --cyan por --compliance-green donde sea compliance */
.compliance-positive {
  color: var(--compliance-green) !important;
}

.compliance-warning {
  color: var(--compliance-amber) !important;
}

.compliance-danger {
  color: var(--compliance-red) !important;
}