/* ==========================================================================
   CONSOLA RRHH 2026 — Alcaldía Bolivariana JEL
   --------------------------------------------------------------------------
   Sistema de diseño para las pantallas internas de Recursos Humanos
   (login, panel, ficha de empleado). Es un archivo aparte de
   css/theme-2026.css (el del sitio público): estas pantallas las usa
   personal interno, no ciudadanos, así que buscan una lectura más densa,
   tipo "consola de trabajo", pero con la misma identidad de color de toda
   la Alcaldía para que se sienta parte del mismo sistema.
   Se carga junto a css/styles.min.css sin reemplazarlo, así que no afecta
   a ninguna otra pantalla que no lo incluya explícitamente.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');

:root {
  --rh-blue: #0c3350;
  --rh-blue-dark: #071f33;
  --rh-blue-light: #1f6f86;
  --rh-gold: #e2a530;
  --rh-gold-light: #f0c368;
  --rh-green: #2f6b4a;
  --rh-red: #b5222f;
  --rh-bg: #f2f4f6;
  --rh-ink: #16232e;
  --rh-radius: 14px;
  --rh-shadow: 0 8px 24px -10px rgba(10, 36, 56, 0.18);
  --rh-font-body: 'Inter', 'Segoe UI', sans-serif;
  --rh-font-display: 'Fraunces', Georgia, serif;
  --rh-font-mono: 'IBM Plex Mono', 'Courier New', monospace;
}

body.rrhh-console {
  background: var(--rh-bg);
  font-family: var(--rh-font-body);
  color: var(--rh-ink);
}

/* ---- Barra superior ------------------------------------------------- */
.rh-topbar {
  background: var(--rh-blue);
  color: #fff;
  padding: 0.85rem 0;
  box-shadow: var(--rh-shadow);
}
.rh-topbar .rh-brand {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  text-decoration: none;
  color: #fff;
}
.rh-topbar .rh-seal {
  width: 38px; height: 38px; border-radius: 50%;
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 2px var(--rh-gold);
  flex-shrink: 0;
}
.rh-topbar .rh-seal img { width: 28px; height: 28px; object-fit: contain; }
.rh-topbar .rh-brand-title { font-family: var(--rh-font-display); font-weight: 600; font-size: 1rem; line-height: 1.1; }
.rh-topbar .rh-brand-sub {
  font-family: var(--rh-font-mono);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--rh-gold-light);
  display: block;
}
.rh-topbar .btn-outline-light { border-color: rgba(255,255,255,0.35); }
.rh-topbar .btn-outline-light:hover { background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.5); }

/* ---- Login ------------------------------------------------------------ */
.rh-login-shell {
  min-height: calc(100vh - 0px);
  display: flex;
  align-items: center;
  background:
    radial-gradient(circle at 15% 20%, rgba(226,165,48,0.12), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(47,107,74,0.16), transparent 45%),
    linear-gradient(160deg, var(--rh-blue-dark) 0%, var(--rh-blue) 100%);
  padding: 3rem 0;
}
.rh-login-card {
  border: none;
  border-radius: var(--rh-radius);
  box-shadow: 0 25px 60px -20px rgba(0,0,0,0.55);
  overflow: hidden;
}
.rh-login-card .rh-login-head {
  background: #fff;
  padding: 2rem 2rem 1rem;
  text-align: center;
}
.rh-login-card .rh-login-head .rh-seal-lg {
  width: 64px; height: 64px; margin: 0 auto 0.75rem;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 3px var(--rh-gold);
}
.rh-login-card .rh-login-head .rh-seal-lg img { width: 48px; height: 48px; object-fit: contain; }
.rh-login-card .rh-login-head h1 {
  font-family: var(--rh-font-display);
  font-size: 1.35rem;
  color: var(--rh-blue-dark);
  margin: 0;
}
.rh-login-card .rh-login-head p {
  font-family: var(--rh-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7c8a93;
  margin: 0.35rem 0 0;
}
.rh-login-card .card-body { padding: 1.5rem 2rem 2rem; }
.rh-login-card .form-label { font-weight: 600; font-size: 0.85rem; color: var(--rh-blue-dark); }
.rh-login-card .form-control {
  border-radius: 10px;
  border-color: #dbe2e7;
  padding: 0.65rem 0.85rem;
}
.rh-login-card .form-control:focus {
  border-color: var(--rh-blue-light);
  box-shadow: 0 0 0 0.2rem rgba(31,111,134,0.15);
}
.rh-login-card .btn-primary {
  background: var(--rh-blue);
  border-color: var(--rh-blue);
  border-radius: 10px;
  padding: 0.7rem;
  font-weight: 600;
}
.rh-login-card .btn-primary:hover { background: var(--rh-blue-dark); border-color: var(--rh-blue-dark); }

/* ---- Encabezado del panel ----------------------------------------------- */
.rh-header {
  background: linear-gradient(120deg, var(--rh-blue-dark) 0%, var(--rh-blue) 100%);
  color: #fff;
  padding: 1.4rem 1.6rem;
  border-radius: var(--rh-radius);
  margin-bottom: 1.25rem;
  box-shadow: var(--rh-shadow);
}
.rh-header h2 { font-family: var(--rh-font-display); font-weight: 600; }
.rh-header .rh-eyebrow {
  font-family: var(--rh-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--rh-gold-light);
  display: block;
  margin-bottom: 0.2rem;
}
.rh-header .small-muted { color: rgba(255,255,255,0.78); }

/* ---- Buscador y tarjetas ------------------------------------------------- */
.rh-toolbar { border: none; border-radius: var(--rh-radius); box-shadow: var(--rh-shadow); }
.hr-search .btn-primary { background: var(--rh-blue); border-color: var(--rh-blue); }
.hr-search .btn-primary:hover { background: var(--rh-blue-dark); border-color: var(--rh-blue-dark); }

.employee-card {
  border: 1px solid rgba(10,36,56,0.06);
  border-left: 3px solid transparent;
  border-radius: var(--rh-radius);
  transition: transform .15s ease, box-shadow .15s ease, border-left-color .15s ease;
}
.employee-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--rh-shadow);
  border-left-color: var(--rh-gold);
}
.badge-role { background: rgba(12,51,80,0.08); color: var(--rh-blue-dark); font-weight: 600; }

/* ---- Ficha de empleado ---------------------------------------------------- */
.rh-profile-head {
  background: linear-gradient(120deg, var(--rh-blue-dark) 0%, var(--rh-blue) 100%);
  color: #fff;
  border-radius: var(--rh-radius) var(--rh-radius) 0 0;
  padding: 1.5rem 1.75rem;
}
.rh-profile-head h2 { font-family: var(--rh-font-display); margin: 0; }
.rh-data-grid .rh-field {
  padding: 0.55rem 0;
  border-bottom: 1px dashed rgba(10,36,56,0.1);
}
.rh-data-grid .rh-label {
  font-family: var(--rh-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #7c8a93;
  display: block;
}
.rh-data-grid .rh-value { font-weight: 600; color: var(--rh-ink); }

.rh-danger-zone {
  border: 1px dashed rgba(181, 34, 47, 0.35);
  border-radius: var(--rh-radius);
  background: rgba(181, 34, 47, 0.04);
  padding: 1rem 1.25rem;
}

.profile-photo { border: 3px solid #fff; box-shadow: var(--rh-shadow); }
.qr-box { border: 1px solid rgba(10,36,56,0.08); }

@media (max-width: 575.98px) {
  .rh-header { padding: 1.1rem 1.1rem; }
  .rh-profile-head { padding: 1.1rem 1.25rem; }
}

/* ---- Botones y encabezados de tarjeta genéricos (admin_panel.php) -------- */
body.rrhh-console .btn-primary {
  background: var(--rh-blue); border-color: var(--rh-blue);
}
body.rrhh-console .btn-primary:hover { background: var(--rh-blue-dark); border-color: var(--rh-blue-dark); }
body.rrhh-console .btn-secondary { background: var(--rh-green); border-color: var(--rh-green); }
body.rrhh-console .btn-secondary:hover { background: #1f4a34; border-color: #1f4a34; }
body.rrhh-console .btn-outline-primary { color: var(--rh-blue); border-color: var(--rh-blue); }
body.rrhh-console .btn-outline-primary:hover { background: var(--rh-blue); border-color: var(--rh-blue); }
body.rrhh-console .btn-link { color: var(--rh-blue); }
body.rrhh-console .card .card-header.bg-primary { background: var(--rh-blue) !important; border: none; }
body.rrhh-console .card .card-header.bg-secondary { background: var(--rh-green) !important; border: none; }
body.rrhh-console .card .card-header.bg-danger { background: var(--rh-red) !important; border: none; }
body.rrhh-console .nav-tabs .nav-link.active { color: var(--rh-blue); border-bottom: 2px solid var(--rh-gold); }
body.rrhh-console a { color: var(--rh-blue-light); }
body.rrhh-console .pagination .page-link { color: var(--rh-blue); }
body.rrhh-console .pagination .page-item.active .page-link { background: var(--rh-blue); border-color: var(--rh-blue); }

/* ---- Barra lateral del panel Admin --------------------------------------- */
.rh-sidebar.list-group { border-radius: var(--rh-radius); overflow: hidden; box-shadow: var(--rh-shadow); }
.rh-sidebar .list-group-item {
  border: none;
  border-left: 3px solid transparent;
  padding: 0.75rem 1rem;
  font-weight: 500;
  color: var(--rh-ink);
}
.rh-sidebar .list-group-item:hover { background: rgba(12,51,80,0.05); }
.rh-sidebar .list-group-item.active {
  background: rgba(226,165,48,0.14);
  color: var(--rh-blue-dark);
  border-left-color: var(--rh-gold);
  font-weight: 600;
}
.rh-sidebar .list-group-item:last-child { border-top: 1px solid rgba(10,36,56,0.08); color: var(--rh-red); }