/* =====================================================================
   Sistema de diseño — Batería de Riesgo Psicosocial
   Basado en ui-ux-pro-max: estilo "Corporate Trust" (B2B salud ocupacional)
   Tokens: primitivo → semántico → componente
   ===================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@400;500;600;700&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
  /* --- primitivos */
  --slate-900:#0F172A; --slate-800:#1E293B; --slate-700:#334155;
  --slate-500:#64748B; --slate-300:#CBD5E1; --slate-200:#E2E8F0;
  --slate-100:#F1F5F9; --slate-50:#F8FAFC;
  --blue-700:#0369A1; --blue-600:#0284C7; --blue-100:#E0F2FE;
  --teal-700:#0F766E;
  /* --- semánticos */
  --bg:var(--slate-50); --surface:#FFFFFF; --border:var(--slate-200);
  --text:var(--slate-900); --text-muted:var(--slate-500);
  --primary:var(--blue-700); --primary-hover:#075985; --on-primary:#fff;
  --sidebar-bg:var(--slate-900); --sidebar-text:#CBD5E1; --sidebar-active:var(--blue-600);
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(15,23,42,.06);
  --shadow:0 1px 3px rgba(15,23,42,.08),0 4px 12px rgba(15,23,42,.05);
  /* --- niveles de riesgo (contraste AA con texto blanco/oscuro) */
  --riesgo-sin:#21B24B; --riesgo-bajo:#1A2D80; --riesgo-medio:#F2C500;
  --riesgo-alto:#E02424; --riesgo-muyalto:#7E1416;
}

html { font-size:16px; }
body {
  font-family:'Source Sans 3',system-ui,sans-serif; background:var(--bg);
  color:var(--text); line-height:1.5; -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4,h5,h6,.navbar-brand,.btn { font-family:'Lexend',sans-serif; }
h3 { font-weight:600; font-size:1.45rem; letter-spacing:-.01em; }
h4,h5 { font-weight:600; }

/* ---------- layout con sidebar ---------- */
.layout { display:flex; min-height:100vh; }
.sidebar {
  width:248px; flex-shrink:0; background:var(--sidebar-bg); color:var(--sidebar-text);
  display:flex; flex-direction:column; position:sticky; top:0; height:100vh;
}
.sidebar .brand {
  font-family:'Lexend',sans-serif; font-weight:700; color:#fff; font-size:1.02rem;
  padding:20px 20px 14px; display:flex; gap:10px; align-items:center; text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.08);
}
.sidebar .brand .logo-dot {
  width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,var(--blue-600),var(--teal-700));
  display:flex;align-items:center;justify-content:center;font-size:.85rem;color:#fff;flex-shrink:0;
}
.sidebar .seccion { font-size:.68rem; text-transform:uppercase; letter-spacing:.09em;
  color:var(--slate-500); padding:18px 20px 6px; }
.sidebar a.nav-item {
  display:flex; align-items:center; gap:10px; color:var(--sidebar-text);
  padding:10px 14px; margin:1px 10px; border-radius:var(--radius-sm);
  text-decoration:none; font-size:.92rem; min-height:42px;
}
.sidebar a.nav-item:hover { background:rgba(255,255,255,.07); color:#fff; }
.sidebar a.nav-item.activa { background:var(--sidebar-active); color:#fff; font-weight:500; }
.sidebar a.nav-item svg { flex-shrink:0; opacity:.85; }
.sidebar .pie { margin-top:auto; padding:14px 20px; border-top:1px solid rgba(255,255,255,.08); font-size:.8rem; }
.sidebar .pie a { color:var(--slate-300); text-decoration:none; }
.sidebar .pie a:hover { color:#fff; }

.contenido { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar {
  background:var(--surface); border-bottom:1px solid var(--border);
  padding:12px 28px; display:flex; justify-content:flex-end; align-items:center; gap:14px;
}
.topbar .usuario { font-size:.9rem; color:var(--text); text-decoration:none; }
.topbar .usuario .rol { color:var(--text-muted); font-size:.78rem; display:block; line-height:1.1; }
.main { padding:28px; max-width:1280px; width:100%; }

@media (max-width: 900px) {
  .layout { flex-direction:column; }
  .sidebar { width:100%; height:auto; position:static; }
  .sidebar .nav-grupo { display:flex; flex-wrap:wrap; }
  .main { padding:16px; }
}

/* ---------- componentes (reskin Bootstrap) ---------- */
.card { border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); }
.card.shadow-sm { box-shadow:var(--shadow) !important; }
.card-header { background:var(--surface); border-bottom:1px solid var(--border);
  border-radius:var(--radius) var(--radius) 0 0 !important; font-family:'Lexend'; font-size:.95rem; }

.btn { border-radius:var(--radius-sm); font-weight:500; min-height:42px; padding:.45rem 1.05rem; }
.btn-sm { min-height:34px; padding:.25rem .7rem; }
.btn-lg { min-height:48px; }
.btn-primary { background:var(--primary); border-color:var(--primary); }
.btn-primary:hover,.btn-primary:focus { background:var(--primary-hover); border-color:var(--primary-hover); }
.btn:focus-visible { outline:3px solid var(--blue-100); outline-offset:1px; }

.table { --bs-table-hover-bg:var(--slate-100); font-size:.92rem; }
.table thead th { font-family:'Lexend'; font-size:.72rem; text-transform:uppercase;
  letter-spacing:.06em; color:var(--text-muted); background:var(--slate-100);
  border-bottom:1px solid var(--border); padding:.65rem .75rem; }
.table td { padding:.6rem .75rem; vertical-align:middle; border-color:var(--slate-100); }
table.bg-white,.table.bg-white { border-radius:var(--radius); overflow:hidden; }

.form-control,.form-select { border-radius:var(--radius-sm); border-color:var(--slate-300);
  min-height:42px; font-size:.95rem; }
.form-control:focus,.form-select:focus { border-color:var(--primary);
  box-shadow:0 0 0 .2rem rgba(3,105,161,.12); }
.form-label { font-weight:600; font-size:.83rem; color:var(--slate-700); margin-bottom:.3rem; }
.form-check-input { width:1.35rem; height:1.35rem; margin-top:0; cursor:pointer;
  border-color:var(--slate-300); }
.form-check-input:checked { background-color:var(--primary); border-color:var(--primary); }
.form-check-input:focus { box-shadow:0 0 0 .2rem rgba(3,105,161,.15); }

.badge { font-weight:600; font-size:.72rem; padding:.4em .7em; border-radius:999px; letter-spacing:.02em; }
/* niveles de riesgo accesibles */
.badge.bg-success { background:var(--riesgo-sin) !important; }
.badge.bg-info    { background:var(--riesgo-bajo) !important; color:#fff !important; }
.badge.bg-warning { background:var(--riesgo-medio) !important; color:#3B3000 !important; }
.badge.bg-danger  { background:var(--riesgo-alto) !important; }
.badge.bg-dark    { background:var(--riesgo-muyalto) !important; }

.alert { border-radius:var(--radius); border:none; box-shadow:var(--shadow-sm); }
.progress { background:var(--slate-200); border-radius:999px; }
.progress-bar { background:var(--primary); }

/* tarjetas KPI */
.kpi .card-body { padding:1.1rem; }
.kpi .fs-2,.kpi .fs-3 { font-family:'Lexend'; font-weight:700; }

/* wizard de preguntas */
.pregunta-row td { padding-top:.55rem; padding-bottom:.55rem; }
.pregunta-row:hover { background:var(--blue-100) !important; }
tr.pregunta-row td:first-child { color:var(--text-muted); font-size:.85rem; }

/* login */
.login-wrap { min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(160deg,var(--slate-900) 0%,#123A5C 60%,var(--blue-700) 100%); }
.login-card { width:100%; max-width:410px; border-radius:16px; box-shadow:0 24px 60px rgba(2,6,23,.45); border:none; }
.login-brand { text-align:center; margin-bottom:.75rem; }
.login-brand .logo-dot { width:52px;height:52px;border-radius:14px;margin:0 auto 12px;
  background:linear-gradient(135deg,var(--blue-600),var(--teal-700));
  display:flex;align-items:center;justify-content:center;color:#fff;font-family:'Lexend';font-weight:700; }

a { color:var(--primary); }
code { color:var(--teal-700); }