/* ═══════════════════════════════════════════════════════════════════
   SGP — Sistema de Gestión de Personal
   main.css  v1.0
   ═══════════════════════════════════════════════════════════════════ */

:root {
  --sidebar-w:       220px;
  --navbar-h:        52px;
  --color-primary:   #0d6efd;
  --color-sidebar-bg:#1a1f2e;
  --color-sidebar-text: #a8b5cc;
  --color-sidebar-active-bg: rgba(13,110,253,.18);
  --color-sidebar-active-text: #fff;
  --color-navbar-bg: #0f1623;
  --color-body-bg:   #f0f2f7;
  --radius:          .5rem;
}

/* ── Reset & base ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  background: var(--color-body-bg);
  font-size: .9rem;
}

/* ── Navbar superior ──────────────────────────────────────────────── */
.navbar-top {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--navbar-h);
  background: var(--color-navbar-bg);
  z-index: 1050;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 1rem;
  box-shadow: 0 2px 8px rgba(0,0,0,.4);
}

/* ── Layout principal ─────────────────────────────────────────────── */
.wrapper {
  padding-top: var(--navbar-h);
  min-height: 100vh;
}

/* ── Sidebar ──────────────────────────────────────────────────────── */
.sidebar {
  width: var(--sidebar-w);
  min-width: var(--sidebar-w);
  background: var(--color-sidebar-bg);
  min-height: calc(100vh - var(--navbar-h));
  position: sticky;
  top: var(--navbar-h);
  height: calc(100vh - var(--navbar-h));
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  transition: width .25s ease;
  scrollbar-width: thin;
  scrollbar-color: #2d3548 transparent;
}

.sidebar.collapsed {
  width: 0;
  min-width: 0;
  overflow: hidden;
}

.sidebar-nav {
  padding: .75rem 0;
  flex: 1;
}

.sidebar-section {
  padding: .5rem 1rem .25rem;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #4a5568;
}

.sidebar-link {
  display: flex;
  align-items: center;
  gap: .55rem;
  padding: .5rem 1rem;
  color: var(--color-sidebar-text);
  text-decoration: none;
  font-size: .85rem;
  border-left: 3px solid transparent;
  transition: all .15s;
  white-space: nowrap;
  overflow: hidden;
}

.sidebar-link:hover {
  background: rgba(255,255,255,.06);
  color: #fff;
}

.sidebar-link.active {
  background: var(--color-sidebar-active-bg);
  color: var(--color-sidebar-active-text);
  border-left-color: var(--color-primary);
  font-weight: 600;
}

.sidebar-link-sm {
  padding: .3rem 1rem .3rem 1.5rem;
  font-size: .78rem;
}

.sidebar-footer {
  padding: .75rem 1rem;
  border-top: 1px solid #2a3044;
  text-align: center;
}

/* ── Main content ─────────────────────────────────────────────────── */
.main-content {
  padding: 1.5rem;
  min-width: 0;
}

/* ── Flash messages ───────────────────────────────────────────────── */
.flash-container {
  margin-bottom: 1rem;
}

/* ── Page header ──────────────────────────────────────────────────── */
.page-header {
  margin-bottom: 1.5rem;
  padding-bottom: .75rem;
  border-bottom: 2px solid #e2e8f0;
}

.page-header h2 {
  margin: 0;
  font-size: 1.4rem;
  font-weight: 700;
  color: #1a202c;
}

/* ── Stat cards ───────────────────────────────────────────────────── */
.stat-card {
  border-radius: var(--radius);
  padding: 1.1rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: .25rem;
  color: #fff;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}

.stat-card::after {
  content: '';
  position: absolute;
  right: -15px; top: -15px;
  width: 80px; height: 80px;
  border-radius: 50%;
  background: rgba(255,255,255,.1);
}

.stat-blue   { background: linear-gradient(135deg,#0d6efd,#0a58ca); }
.stat-green  { background: linear-gradient(135deg,#198754,#146c43); }
.stat-orange { background: linear-gradient(135deg,#fd7e14,#dc6000); }
.stat-red    { background: linear-gradient(135deg,#dc3545,#b02a37); }
.stat-gray   { background: linear-gradient(135deg,#6c757d,#495057); }
.stat-purple { background: linear-gradient(135deg,#6f42c1,#59359a); }

.stat-icon { font-size: 1.5rem; opacity: .85; }
.stat-value { font-size: 2rem; font-weight: 800; line-height: 1; }
.stat-label { font-size: .75rem; opacity: .85; font-weight: 500; }

/* ── Cards ────────────────────────────────────────────────────────── */
.card {
  border: none;
  border-radius: var(--radius);
  box-shadow: 0 1px 6px rgba(0,0,0,.07);
}

.card-header {
  background: #fff;
  border-bottom: 1px solid #e9ecef;
  padding: .75rem 1rem;
  font-size: .88rem;
  border-radius: calc(var(--radius) - 1px) calc(var(--radius) - 1px) 0 0 !important;
}

.card-footer {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
  font-size: .8rem;
  padding: .5rem 1rem;
}

/* ── Tables ───────────────────────────────────────────────────────── */
.table { font-size: .84rem; }
.table th { font-weight: 600; font-size: .78rem; letter-spacing: .03em; }
.table-hover tbody tr:hover { background: #f0f4ff; cursor: default; }

/* ── Badges custom ────────────────────────────────────────────────── */
.badge-evento {
  background: #e8f4fd;
  color: #0a58ca;
  font-weight: 600;
  font-size: .72rem;
  border: 1px solid #b8d9f8;
}

.badge-calidad-planta       { background:#d1fae5; color:#065f46; border:1px solid #a7f3d0; }
.badge-calidad-contrata     { background:#dbeafe; color:#1e40af; border:1px solid #bfdbfe; }
.badge-calidad-honorarios   { background:#fef3c7; color:#92400e; border:1px solid #fde68a; }
.badge-calidad-código_del_trabajo { background:#ede9fe; color:#4c1d95; border:1px solid #ddd6fe; }

/* ── Buttons extra-small ──────────────────────────────────────────── */
.btn-xs {
  padding: .2rem .45rem;
  font-size: .75rem;
  border-radius: .3rem;
  line-height: 1.4;
}

/* ── Counter card (ficha) ─────────────────────────────────────────── */
.counter-card {
  transition: transform .15s;
}
.counter-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,.1);
}

/* ── Avatar circle ────────────────────────────────────────────────── */
.avatar-circle {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg,#0d6efd,#6f42c1);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Login page ───────────────────────────────────────────────────── */
.login-body {
  background: linear-gradient(135deg,#0f1623 0%,#1a2a4a 100%);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.login-wrapper { width: 100%; max-width: 440px; }

.login-card {
  background: #fff;
  border-radius: 1rem;
  box-shadow: 0 20px 60px rgba(0,0,0,.4);
  overflow: hidden;
}

.login-header {
  background: linear-gradient(135deg,#0f1623,#1a2a4a);
  color: #fff;
  text-align: center;
  padding: 2rem 1.5rem 1.5rem;
}

.login-icon {
  width: 72px; height: 72px;
  background: rgba(255,255,255,.1);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto;
  border: 2px solid rgba(255,255,255,.2);
}

.login-footer {
  background: #f8f9fa;
  border-top: 1px solid #e9ecef;
}

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: var(--navbar-h);
    left: 0;
    height: calc(100vh - var(--navbar-h));
    z-index: 1040;
    width: 0;
    overflow: hidden;
  }
  .sidebar.open {
    width: var(--sidebar-w);
    box-shadow: 4px 0 20px rgba(0,0,0,.4);
  }
  .main-content { padding: 1rem; }
  .stat-value { font-size: 1.6rem; }
}

/* ── Nav tabs ─────────────────────────────────────────────────────── */
.nav-tabs .nav-link {
  color: #6c757d;
  font-size: .85rem;
  padding: .5rem .9rem;
}
.nav-tabs .nav-link.active {
  color: var(--color-primary);
  font-weight: 600;
}

/* ── Scrollbar webkit ─────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cbd5e0; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #a0aec0; }