/* ===================================================================
   HumanFirewall — Sistema de diseño (panel de empresa)
   Capa sobre Bootstrap 5.3. Solo overrides y utilidades propias.
   =================================================================== */

:root {
  /* Paleta */
  --hf-primary:      #2563eb;
  --hf-primary-dark: #1d4ed8;
  --hf-primary-soft: #eff4ff;
  --hf-ink:          #0f172a;   /* texto principal */
  --hf-ink-soft:     #475569;   /* texto secundario */
  --hf-muted:        #94a3b8;
  --hf-bg:           #f1f5f9;   /* fondo app */
  --hf-surface:      #ffffff;
  --hf-border:       #e7ebf0;

  /* Semánticos */
  --hf-danger:  #dc2626;
  --hf-warning: #d97706;
  --hf-success: #16a34a;
  --hf-info:    #0891b2;

  /* Navbar */
  --hf-nav-1: #131a2b;
  --hf-nav-2: #1e293b;

  /* Sombras */
  --hf-shadow-sm: 0 1px 2px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.04);
  --hf-shadow:    0 2px 8px rgba(15,23,42,.06), 0 1px 3px rgba(15,23,42,.05);
  --hf-shadow-md: 0 8px 24px rgba(15,23,42,.10);

  /* Radios */
  --hf-radius:    .75rem;
  --hf-radius-sm: .5rem;
}

/* ── Base ───────────────────────────────────────────────────────── */
body {
  background: var(--hf-bg);
  color: var(--hf-ink);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 { color: var(--hf-ink); font-weight: 700; letter-spacing: -.01em; }
h2 { font-size: 1.6rem; }
a { color: var(--hf-primary); }
a:hover { color: var(--hf-primary-dark); }
.text-muted { color: var(--hf-ink-soft) !important; }
hr { border-color: var(--hf-border); opacity: 1; }

/* ── Navbar ─────────────────────────────────────────────────────── */
.navbar.bg-dark {
  background: linear-gradient(100deg, var(--hf-nav-1) 0%, var(--hf-nav-2) 100%) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.04), 0 4px 16px rgba(15,23,42,.12);
  padding-top: .6rem;
  padding-bottom: .6rem;
}
.navbar-brand {
  font-weight: 800;
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: .15rem;
}
.navbar .nav-link {
  color: rgba(255,255,255,.72) !important;
  font-weight: 500;
  font-size: .94rem;
  border-radius: .5rem;
  padding: .4rem .75rem !important;
  margin: 0 .1rem;
  transition: background .15s ease, color .15s ease;
}
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: #fff !important; background: rgba(255,255,255,.08); }
.navbar .nav-link.active {
  color: #fff !important;
  background: rgba(37,99,235,.32);
  box-shadow: inset 0 0 0 1px rgba(96,165,250,.35);
}
.navbar .nav-link i { opacity: .9; }
.navbar .dropdown-menu {
  border: 1px solid var(--hf-border);
  box-shadow: var(--hf-shadow-md);
  border-radius: var(--hf-radius-sm);
  padding: .35rem;
  margin-top: .4rem;
}
.navbar .dropdown-item {
  border-radius: .4rem;
  padding: .5rem .7rem;
  font-size: .92rem;
  font-weight: 500;
}
.navbar .dropdown-item:hover { background: var(--hf-primary-soft); color: var(--hf-primary-dark); }
.navbar .dropdown-item i { width: 1.1rem; }

/* ── Cards ──────────────────────────────────────────────────────── */
.card {
  border: 1px solid var(--hf-border);
  border-radius: var(--hf-radius);
  box-shadow: var(--hf-shadow-sm);
  background: var(--hf-surface);
}
.card-header {
  background: transparent;
  border-bottom: 1px solid var(--hf-border);
  padding: .9rem 1.1rem;
  font-weight: 600;
  color: var(--hf-ink);
}
.card-body { padding: 1.1rem; }

/* ── KPI cards ──────────────────────────────────────────────────── */
.kpi-card {
  border-left: none !important;
  position: relative;
  overflow: hidden;
  border-radius: var(--hf-radius);
  transition: transform .16s ease, box-shadow .16s ease;
  padding: 1.15rem 1.2rem !important;
}
.kpi-card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--hf-primary);
}
.kpi-card:hover { transform: translateY(-2px); box-shadow: var(--hf-shadow-md); }
.kpi-card .text-muted.small {
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  font-size: .72rem;
  color: var(--hf-muted) !important;
  display: flex;
  align-items: center;
  gap: .35rem;
}
.kpi-card .kpi-value {
  font-size: 2.1rem;
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  margin-top: .35rem;
  color: var(--hf-ink);
}
/* Acentos por color del valor */
.kpi-card:has(.kpi-value.text-danger)::before  { background: var(--hf-danger); }
.kpi-card:has(.kpi-value.text-warning)::before { background: var(--hf-warning); }
.kpi-card:has(.kpi-value.text-success)::before { background: var(--hf-success); }

/* ── Tablas ─────────────────────────────────────────────────────── */
.table { color: var(--hf-ink); margin-bottom: 0; }
.table > thead th,
.table th {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--hf-muted);
  border-bottom: 1px solid var(--hf-border);
  padding: .7rem .9rem;
  white-space: nowrap;
}
.table.table-light thead th,
.table thead.table-light th { background: #f8fafc; }
.table > tbody > tr > td { padding: .8rem .9rem; vertical-align: middle; border-color: var(--hf-border); }
.table-hover > tbody > tr { transition: background .12s ease; }
.table-hover > tbody > tr:hover > * { background: var(--hf-primary-soft); }

/* Filas semánticas más suaves */
.table-danger,  .table-danger  > td { background: #fef2f2 !important; }
.table-warning, .table-warning > td { background: #fffbeb !important; }
.table-success, .table-success > td { background: #f0fdf4 !important; }

/* ── Badges ─────────────────────────────────────────────────────── */
.badge {
  font-weight: 600;
  letter-spacing: .01em;
  padding: .38em .6em;
  border-radius: .45rem;
}
.badge.bg-secondary { background: #eef2f7 !important; color: #475569 !important; }

/* Gamificación (compat) */
.badge-escudo_de_oro    { background: #f59e0b; color: #1f2937; }
.badge-defensor_digital { background: var(--hf-success); }
.badge-primera_linea    { background: var(--hf-info); color: #fff; }
.badge-alerta_maxima    { background: var(--hf-danger); }

/* Pills de nivel de riesgo (soft) */
.riesgo-alto  { background: #fee2e2; color: #991b1b; }
.riesgo-medio { background: #fef3c7; color: #92400e; }
.riesgo-bajo  { background: #dcfce7; color: #166534; }

/* ── Botones ────────────────────────────────────────────────────── */
.btn { font-weight: 600; border-radius: var(--hf-radius-sm); transition: all .15s ease; }
.btn-primary {
  --bs-btn-bg: var(--hf-primary);
  --bs-btn-border-color: var(--hf-primary);
  --bs-btn-hover-bg: var(--hf-primary-dark);
  --bs-btn-hover-border-color: var(--hf-primary-dark);
  --bs-btn-active-bg: var(--hf-primary-dark);
  box-shadow: 0 1px 2px rgba(37,99,235,.25);
}
.btn-primary:hover { box-shadow: 0 4px 12px rgba(37,99,235,.32); transform: translateY(-1px); }
.btn-outline-primary { --bs-btn-color: var(--hf-primary); --bs-btn-border-color: #cdddfb; --bs-btn-hover-bg: var(--hf-primary); --bs-btn-hover-border-color: var(--hf-primary); }
.btn-sm { border-radius: .45rem; }

/* ── Formularios ────────────────────────────────────────────────── */
.form-control, .form-select {
  border-color: #d8dfe8;
  border-radius: var(--hf-radius-sm);
  color: var(--hf-ink);
}
.form-control:focus, .form-select:focus {
  border-color: var(--hf-primary);
  box-shadow: 0 0 0 .2rem rgba(37,99,235,.14);
}
.form-label { font-weight: 600; font-size: .88rem; color: var(--hf-ink-soft); }

/* ── Progreso ───────────────────────────────────────────────────── */
.progress { background: #eef2f7; border-radius: 999px; }
.progress-bar { font-weight: 700; font-size: .72rem; }

/* ── Estado vacío ───────────────────────────────────────────────── */
.empty-state { text-align: center; padding: 3.5rem 1rem; color: var(--hf-muted); }
.empty-state i { font-size: 2.75rem; display: block; margin-bottom: .85rem; opacity: .55; }

/* ── Alertas ────────────────────────────────────────────────────── */
.alert { border: none; border-radius: var(--hf-radius-sm); border-left: 4px solid transparent; }
.alert-danger  { background: #fef2f2; color: #991b1b; border-left-color: var(--hf-danger); }
.alert-warning { background: #fffbeb; color: #92400e; border-left-color: var(--hf-warning); }
.alert-success { background: #f0fdf4; color: #166534; border-left-color: var(--hf-success); }
.alert-info    { background: #ecfeff; color: #155e75; border-left-color: var(--hf-info); }

/* ── Footer ─────────────────────────────────────────────────────── */
footer { color: var(--hf-muted) !important; border-color: var(--hf-border) !important; }

/* ── Login ──────────────────────────────────────────────────────── */
.hf-auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background:
    radial-gradient(1100px 500px at 15% -10%, rgba(37,99,235,.28), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(14,165,233,.22), transparent 55%),
    linear-gradient(135deg, #0b1220 0%, #131a2b 55%, #1e293b 100%);
}
.hf-auth-card {
  width: 100%;
  max-width: 410px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 1rem;
  box-shadow: 0 24px 60px rgba(0,0,0,.45);
  background: var(--hf-surface);
  overflow: hidden;
}
.hf-auth-head {
  text-align: center;
  padding: 2rem 2rem 1rem;
}
.hf-auth-logo {
  width: 56px; height: 56px;
  margin: 0 auto .9rem;
  border-radius: 16px;
  display: grid; place-items: center;
  font-size: 1.7rem;
  background: linear-gradient(135deg, var(--hf-primary) 0%, #0ea5e9 100%);
  box-shadow: 0 8px 20px rgba(37,99,235,.4);
}
.hf-auth-body { padding: .5rem 2rem 2rem; }

/* ── Login — inputs propios (sin input-group de Bootstrap) ─────── */
.hf-label {
  display: block;
  font-size: .82rem;
  font-weight: 600;
  color: #475569;
  margin-bottom: .35rem;
}
.hf-input {
  display: block;
  width: 100%;
  padding: .65rem .9rem;
  font-size: .95rem;
  font-family: inherit;
  color: #0f172a;
  background: #f8fafc;
  border: 1.5px solid #e2e8f0;
  border-radius: .6rem;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
}
.hf-input::placeholder { color: #94a3b8; }
.hf-input:focus {
  border-color: #2563eb;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

/* ── Pequeñas utilidades ────────────────────────────────────────── */
.text-danger  { color: var(--hf-danger)  !important; }
.text-warning { color: var(--hf-warning) !important; }
.text-success { color: var(--hf-success) !important; }
.soft-divider { height: 1px; background: var(--hf-border); border: 0; margin: 1rem 0; }
.page-subtitle { color: var(--hf-ink-soft); font-size: .9rem; }