:root {
  --bg: #f4f6fb;
  --surface: #ffffff;
  --surface-2: #f1f4f9;
  --border: #e2e8f0;
  --primary: #6366f1;
  --primary-2: #4338ca;
  --primary-rgb: 99,102,241;
  --success: #16a34a;
  --danger: #dc2626;
  --warning: #d97706;
  --muted: #64748b;

  /* Escala de texto: de mayor a menor énfasis, siempre legible sobre fondo claro */
  --text-1: #0f172a;  /* equivalente a antiguo text-white (títulos) */
  --text-2: #1e293b;  /* equivalente a antiguo text-slate-200 */
  --text-3: #334155;  /* equivalente a antiguo text-slate-300 */
  --text-4: #64748b;  /* equivalente a antiguo text-slate-400 */
  --text-5: #94a3b8;  /* equivalente a antiguo text-slate-500 */
  --text-6: #a8b3c4;  /* equivalente a antiguo text-slate-600 (más sutil) */
}

* { box-sizing: border-box; }

body {
  background: radial-gradient(circle at 10% 0%, #ffffff 0%, var(--bg) 55%);
  color: var(--text-3);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  min-height: 100vh;
}

::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 8px; }

.glass-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 1px 3px rgba(15,23,42,.04), 0 1px 2px rgba(15,23,42,.03);
}

.sidebar-link {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-radius: 10px; color: var(--muted);
  font-size: 14px; font-weight: 500; cursor: pointer; transition: all .15s ease;
}
.sidebar-link:hover { background: var(--surface-2); color: var(--text-1); }
.sidebar-link.active { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color: #fff; box-shadow: 0 4px 14px rgba(var(--primary-rgb),.35); }

.avatar-initials { color: #fff; }

.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.badge-passed, .badge-continue { background: #dcfce7; color: #166534; }
.badge-failed, .badge-reject { background: #fee2e2; color: #991b1b; }
.badge-blocked, .badge-rework { background: #fef3c7; color: #92400e; }
.badge-pending { background: #e2e8f0; color: #475569; }
.badge-not_applicable { background: rgba(var(--primary-rgb),.14); color: var(--primary-2); }
.badge-conditional { background: #e0f2fe; color: #0369a1; }
.badge-in_progress { background: #e0f2fe; color: #0369a1; }
.badge-completed { background: #dcfce7; color: #166534; }
.badge-overdue { background: #fee2e2; color: #991b1b; }
.badge-critical { background: #fee2e2; color: #b91c1c; }
.badge-high { background: #fef3c7; color: #b45309; }
.badge-medium { background: #e0f2fe; color: #0369a1; }
.badge-low { background: #e2e8f0; color: #475569; }

.progress-track { background: #e2e8f0; border-radius: 999px; height: 8px; overflow: hidden; }
.progress-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primary), var(--primary-2)); transition: width .4s ease; }

.btn-primary { background: linear-gradient(135deg, var(--primary), var(--primary-2)); color:#fff; font-weight:600; border-radius:10px; padding: 9px 16px; transition: transform .15s ease, box-shadow .15s ease; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(var(--primary-rgb),.35); }
.btn-ghost { background: var(--surface-2); border:1px solid var(--border); color: var(--text-2); border-radius:10px; padding:9px 16px; }
.btn-ghost:hover { background:#e6eaf2; }
.btn-danger { background: #fee2e2; color:#b91c1c; border:1px solid #fecaca; border-radius:10px; padding:9px 16px; }

.input-field, select.input-field, textarea.input-field {
  width:100%; background: var(--surface-2); border:1px solid var(--border); border-radius:10px;
  padding: 9px 12px; color: var(--text-1); font-size:14px; outline:none;
}
.input-field::placeholder { color: var(--text-5); }
.input-field:focus { border-color: var(--primary); box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.15); }

.modal-backdrop { position:fixed; inset:0; background: rgba(15,23,42,.55); backdrop-filter: blur(3px); display:flex; align-items:center; justify-content:center; z-index:50; padding: 20px; }
.modal-box { background: var(--surface); border:1px solid var(--border); border-radius:18px; max-width: 640px; width:100%; max-height:90vh; overflow-y:auto; box-shadow: 0 20px 50px rgba(15,23,42,.2); }

.criterion-row { border:1px solid var(--border); border-radius: 12px; padding: 12px; background: var(--surface-2); }

.theme-card-active { border-width: 2px !important; box-shadow: 0 0 0 3px rgba(var(--primary-rgb),.15); }

.tab-btn { padding: 8px 14px; border-radius: 10px; font-size:13px; font-weight:600; color: var(--muted); cursor:pointer; }
.tab-btn.active { background: var(--surface-2); color: var(--text-1); }

.guidance-box { border-left: 3px solid var(--primary); background: rgba(var(--primary-rgb),.06); border-radius: 10px; padding: 12px 14px; }

.evidence-thumb { width: 90px; height: 90px; object-fit: cover; border-radius: 10px; border:1px solid var(--border); cursor: pointer; }

.toast { position:fixed; bottom:20px; right:20px; z-index:100; background: var(--surface); border:1px solid var(--border); padding:12px 18px; border-radius:12px; box-shadow: 0 10px 30px rgba(15,23,42,.15); color: var(--text-2); }

/* ---------------- Informe formal (cabecera, scorecard, firmas) ---------------- */
.report-letterhead {
  border: 1px solid var(--border); border-radius: 14px; overflow: hidden; background: var(--surface);
}
.report-letterhead .bar { height: 6px; background: linear-gradient(90deg, var(--primary), var(--primary-2)); }
.report-meta-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 32px; }
.report-meta-row { display: flex; justify-content: space-between; padding: 7px 0; border-bottom: 1px dashed var(--border); font-size: 13px; }
.report-meta-row .label { color: var(--text-4); }
.report-meta-row .value { color: var(--text-1); font-weight: 600; text-align: right; }

.scorecard { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.scorecard .cell { text-align: center; border: 1px solid var(--border); border-radius: 12px; padding: 16px 8px; background: var(--surface-2); }
.scorecard .cell .num { font-size: 26px; font-weight: 800; color: var(--text-1); line-height: 1.1; }
.scorecard .cell .lbl { font-size: 11px; color: var(--text-4); margin-top: 4px; text-transform: uppercase; letter-spacing: .03em; }

.findings-box { border: 1px solid #fecaca; background: #fef2f2; border-radius: 12px; padding: 14px 16px; }
.findings-box .finding-item { display: flex; gap: 10px; padding: 6px 0; border-bottom: 1px solid #fee2e2; font-size: 13px; }
.findings-box .finding-item:last-child { border-bottom: none; }

.signature-block { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-top: 40px; }
.signature-line { border-top: 1px solid var(--text-1); padding-top: 8px; margin-top: 50px; font-size: 12px; color: var(--text-4); }

.report-footer-strip { display:flex; justify-content:space-between; font-size: 10.5px; color: var(--text-5); border-top: 1px solid var(--border); padding-top: 10px; margin-top: 24px; }

@media (max-width: 640px) {
  .report-meta-grid { grid-template-columns: 1fr; }
  .scorecard { grid-template-columns: repeat(2, 1fr); }
  .signature-block { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------
   Reasignación de las utilidades de texto de Tailwind (pensadas
   originalmente para fondo oscuro) a la nueva escala de texto clara.
   Esto asegura que TODO el contenido generado dinámicamente por JS
   (que usa estas clases) se vea correctamente sobre el fondo claro,
   sin tener que reescribir cada plantilla.
--------------------------------------------------------------------- */
.text-white { color: var(--text-1) !important; }
.text-slate-200 { color: var(--text-2) !important; }
.text-slate-300 { color: var(--text-3) !important; }
.text-slate-400 { color: var(--text-4) !important; }
.text-slate-500 { color: var(--text-5) !important; }
.text-slate-600 { color: var(--text-6) !important; }
.text-red-400 { color: #dc2626 !important; }
.text-green-400 { color: #16a34a !important; }
.text-amber-400 { color: #d97706 !important; }
.text-indigo-400 { color: var(--primary) !important; }
.bg-slate-700 { background: #e2e8f0 !important; color: var(--text-2) !important; }
.hover\:bg-white\/5:hover { background: rgba(15,23,42,.04) !important; }
.hover\:text-white:hover { color: var(--text-1) !important; }

@media print {
  .no-print { display:none !important; }
  body { background:#fff; }
  main { padding: 0 !important; max-width: 100% !important; }
  .glass-card { box-shadow:none; }
  .toast { display:none !important; }
  .page-break-before { page-break-before: always; }
  .avoid-break { page-break-inside: avoid; }
}