/* ============================================================
   Sistema de Gestión — Estilos principales
   ============================================================ */

/* ---- Variables ---- */
:root {
  --sidebar-bg:   #0b1929;
  --sidebar-w:    240px;
  --topbar-h:     58px;
  --accent:       #3b82f6;
  --accent-dark:  #1d4ed8;
  --bg:           #f1f5f9;
  --border:       #e2e8f0;
  --text:         #1e293b;
  --text-muted:   #64748b;
  --shadow-sm:    0 1px 6px rgba(0,0,0,.07);
  --radius:       10px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
body { margin:0; font-family:"Segoe UI",system-ui,-apple-system,sans-serif; background:var(--bg); color:var(--text); font-size:.9rem; }
a { text-decoration:none; }

/* ============================================================ SIDEBAR ============================================================ */
.sidebar { position:fixed; top:0; left:0; bottom:0; width:var(--sidebar-w); background:var(--sidebar-bg); z-index:1040; overflow-y:auto; overflow-x:hidden; display:flex; flex-direction:column; }
.sidebar::-webkit-scrollbar { width:4px; }
.sidebar::-webkit-scrollbar-thumb { background:rgba(255,255,255,.1); border-radius:2px; }
.sidebar-logo { padding:18px 16px 14px; border-bottom:1px solid rgba(255,255,255,.06); display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.sidebar-logo-icon { width:38px; height:38px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); border-radius:9px; display:flex; align-items:center; justify-content:center; color:#fff; font-size:1.05rem; flex-shrink:0; }
.sidebar-logo-title { font-size:.82rem; font-weight:700; color:#fff; line-height:1.2; }
.sidebar-logo-sub   { font-size:.67rem; color:rgba(255,255,255,.38); text-transform:uppercase; letter-spacing:.5px; }
.sidebar-section { padding:18px 18px 5px; font-size:.65rem; text-transform:uppercase; letter-spacing:.7px; color:rgba(255,255,255,.3); font-weight:600; }
.sidebar-nav { list-style:none; margin:0; padding:0 8px; }
.sidebar-nav li { margin-bottom:1px; }
.sidebar-nav li a { display:flex; align-items:center; gap:9px; padding:8px 12px; border-radius:8px; color:rgba(255,255,255,.58); font-size:.855rem; font-weight:500; transition:background .15s,color .15s; }
.sidebar-nav li a i { font-size:.95rem; width:18px; text-align:center; }
.sidebar-nav li a:hover { background:rgba(255,255,255,.07); color:rgba(255,255,255,.9); }
.sidebar-nav li a.active { background:rgba(59,130,246,.18); color:#93c5fd; }
.sidebar-module { padding:10px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.sidebar-module summary { display:flex; align-items:center; gap:9px; list-style:none; cursor:pointer; border-radius:8px; }
.sidebar-module summary::-webkit-details-marker { display:none; }
.sidebar-module > summary { margin:0 8px; padding:10px 12px; color:#e2e8f0; background:rgba(255,255,255,.05); font-size:.85rem; font-weight:600; }
.sidebar-module summary:hover { background:rgba(255,255,255,.09); }
.sidebar-module summary:focus-visible { outline:2px solid #93c5fd; outline-offset:-2px; }
.sidebar-module summary > i:first-child { flex-shrink:0; }
.sidebar-chevron { margin-left:auto; font-size:.65rem; flex-shrink:0; transition:transform .15s; }
.sidebar-module details[open] > summary .sidebar-chevron, .sidebar-module[open] > summary .sidebar-chevron { transform:rotate(180deg); }
.sidebar-submodule { margin-top:8px; }
.sidebar-submodule > summary { margin:0 8px; padding:9px 12px; color:#cbd5e1; font-size:.8rem; }
.sidebar-pending-note { margin:4px 20px 8px; color:#94a3b8; font-size:.72rem; }
.sidebar-pending { display:flex; flex-direction:column; align-items:flex-start; gap:4px; width:100%; padding:8px 12px; border:0; border-radius:8px; background:transparent; color:#94a3b8; font:inherit; font-size:.8rem; text-align:left; cursor:not-allowed; }
.sidebar-pending-badge { padding:2px 6px; border:1px solid rgba(148,163,184,.25); border-radius:4px; font-size:.6rem; }

/* ============================================================ TOPBAR ============================================================ */
.topbar { position:fixed; top:0; left:var(--sidebar-w); right:0; height:var(--topbar-h); background:#fff; border-bottom:1px solid var(--border); display:flex; align-items:center; justify-content:space-between; padding:0 24px; z-index:1030; }
.topbar-page { font-size:1rem; font-weight:600; color:var(--text); }
.topbar-sub  { font-size:.75rem; color:var(--text-muted); margin-top:1px; }
.topbar-right { display:flex; align-items:center; gap:16px; }
.topbar > div:first-child { min-width:0; }
.topbar-page, .topbar-sub { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.topbar-right { flex-shrink:0; }
.server-clock { display:flex; flex-direction:column; flex-shrink:0; text-align:right; white-space:nowrap; line-height:1.4; font-variant-numeric:tabular-nums; }
.server-clock-date { font-size:.75rem; color:var(--text-muted); }
.server-clock-time { font-size:.875rem; font-weight:600; color:var(--text); }
.topbar-user { display:flex; align-items:center; gap:9px; cursor:pointer; padding:6px 10px; border-radius:8px; transition:background .15s; }
.topbar-user:hover { background:#f1f5f9; }
.topbar-avatar { width:34px; height:34px; background:linear-gradient(135deg,var(--accent),var(--accent-dark)); border-radius:50%; display:flex; align-items:center; justify-content:center; color:#fff; font-weight:700; font-size:.82rem; flex-shrink:0; }
.topbar-uname { font-size:.85rem; font-weight:600; color:var(--text); line-height:1.2; }
.topbar-urol  { font-size:.72rem; color:var(--text-muted); }

/* ============================================================ MAIN LAYOUT ============================================================ */
.main-wrap { margin-left:var(--sidebar-w); padding-top:var(--topbar-h); min-height:100vh; display:flex; flex-direction:column; }
.main-content { padding:26px; flex:1; }
.app-footer { padding:.7rem 26px; font-size:.75rem; color:#94a3b8; border-top:1px solid var(--border); background:#fff; }

/* ============================================================ PAGE HEADER ============================================================ */
.page-hdr { margin-bottom:22px; }
.page-hdr h2 { margin:0; font-size:1.15rem; font-weight:700; color:#0f172a; }
.page-hdr-sub { font-size:.8rem; color:var(--text-muted); margin-top:2px; }

/* ============================================================ STAT CARDS ============================================================ */
.stat-card { background:#fff; border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-sm); border:1px solid var(--border); display:flex; align-items:center; gap:16px; height:100%; }
.stat-card__icon { width:50px; height:50px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1.35rem; flex-shrink:0; }
.stat-card--blue   .stat-card__icon { background:#eff6ff; color:#2563eb; }
.stat-card--green  .stat-card__icon { background:#f0fdf4; color:#16a34a; }
.stat-card--orange .stat-card__icon { background:#fff7ed; color:#ea580c; }
.stat-card--purple .stat-card__icon { background:#faf5ff; color:#9333ea; }
.stat-card__num   { font-size:1.8rem; font-weight:700; color:#0f172a; line-height:1; }
.stat-card__label { font-size:.78rem; color:var(--text-muted); margin-top:3px; font-weight:500; }
.stat-card__body  { min-width:0; }

/* ============================================================ CARDS ============================================================ */
.card { border:1px solid var(--border); border-radius:var(--radius); box-shadow:var(--shadow-sm); background:#fff; }
.card-header { background:#fff; border-bottom:1px solid var(--border); font-weight:600; color:#334155; font-size:.875rem; padding:14px 18px; border-radius:var(--radius) var(--radius) 0 0 !important; display:flex; align-items:center; justify-content:space-between; }
.card-body { padding:18px; }

/* ============================================================ TABLES ============================================================ */
.table > thead th { font-size:.75rem; text-transform:uppercase; letter-spacing:.05em; color:var(--text-muted); font-weight:600; padding:10px 14px; border-bottom:2px solid var(--border); background:#f8fafc; }
.table > tbody td { padding:10px 14px; vertical-align:middle; border-color:#f1f5f9; }
.table-hover > tbody > tr:hover { background:#f8fafc; }
.table-dark thead th { background:#1e293b !important; color:#fff !important; border-color:#334155 !important; }

/* ============================================================ FORMS ============================================================ */
.form-control,.form-select { border-radius:8px; border-color:#cbd5e1; font-size:.875rem; padding:9px 13px; background:#fff; transition:border-color .15s,box-shadow .15s; }
.form-control:focus,.form-select:focus { border-color:var(--accent); box-shadow:0 0 0 3px rgba(59,130,246,.13); }
.form-label { font-weight:500; font-size:.855rem; color:#374151; margin-bottom:5px; }
.form-text  { font-size:.78rem; color:var(--text-muted); }

/* ============================================================ BUTTONS ============================================================ */
.btn { border-radius:8px; font-weight:500; font-size:.875rem; padding:8px 16px; transition:all .15s; }
.btn-primary { background:var(--accent); border-color:var(--accent); color:#fff; }
.btn-primary:hover { background:var(--accent-dark); border-color:var(--accent-dark); color:#fff; }
.btn-sm { padding:5px 12px; font-size:.8rem; }
.btn-lg { padding:11px 22px; font-size:.95rem; }

/* ============================================================ BADGES ============================================================ */
.badge { border-radius:6px; font-weight:500; font-size:.72rem; padding:3px 8px; }

/* ============================================================ ALERTS ============================================================ */
.alert { border-radius:var(--radius); font-size:.875rem; border:none; }
.alert-danger  { background:#fef2f2; color:#dc2626; }
.alert-success { background:#f0fdf4; color:#16a34a; }
.alert-info    { background:#eff6ff; color:#2563eb; }
.alert-warning { background:#fffbeb; color:#d97706; }

/* ============================================================ TABS ============================================================ */
.nav-tabs { border-bottom:2px solid var(--border); }
.nav-tabs .nav-link { border:none; color:var(--text-muted); font-weight:500; font-size:.875rem; padding:10px 18px; border-radius:0; }
.nav-tabs .nav-link.active { color:var(--accent); border-bottom:2px solid var(--accent); background:transparent; margin-bottom:-2px; }
.nav-tabs .nav-link:hover { color:var(--text); background:transparent; }

/* ============================================================ MODALS ============================================================ */
.modal-content { border-radius:12px; border:none; box-shadow:0 20px 60px rgba(0,0,0,.15); }
.modal-header { border-bottom:1px solid var(--border); padding:16px 20px; }
.modal-footer { border-top:1px solid var(--border); }

/* ============================================================ LOGIN — PANEL SPLIT ============================================================ */
.login-page { min-height:100vh; display:flex; }
.login-left { width:400px; flex-shrink:0; background:linear-gradient(160deg,#060f1a 0%,#0b2240 55%,#0f3460 100%); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:48px 36px; position:relative; overflow:hidden; }
.login-deco { position:absolute; border-radius:50%; border:1px solid rgba(59,130,246,.12); pointer-events:none; }
.login-left-icon { width:82px; height:82px; background:rgba(59,130,246,.14); border:2px solid rgba(96,165,250,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:2.2rem; color:#60a5fa; margin-bottom:22px; position:relative; z-index:1; }
.login-left-title { color:#fff; font-size:1.2rem; font-weight:700; text-align:center; position:relative; z-index:1; letter-spacing:.3px; }
.login-left-sub { color:rgba(255,255,255,.45); font-size:.8rem; text-align:center; margin-top:8px; line-height:1.65; position:relative; z-index:1; }
.login-left-badge { display:inline-flex; align-items:center; gap:5px; background:rgba(59,130,246,.18); border:1px solid rgba(59,130,246,.35); color:#93c5fd; font-size:.68rem; font-weight:600; text-transform:uppercase; letter-spacing:.5px; padding:4px 12px; border-radius:20px; margin-top:16px; position:relative; z-index:1; }
.login-left-ver { position:absolute; bottom:18px; font-size:.67rem; color:rgba(255,255,255,.22); z-index:1; }
.login-right { flex:1; display:flex; align-items:center; justify-content:center; background:#fff; padding:80px 48px 40px; position:relative; }
.login-header { position:absolute; top:20px; right:48px; }
.login-right-inner { width:100%; max-width:360px; }
.login-title    { font-size:1.55rem; font-weight:700; color:#0f172a; margin-bottom:4px; }
.login-subtitle { font-size:.875rem; color:var(--text-muted); margin-bottom:28px; }
.login-field-label { font-size:.84rem; font-weight:500; color:#374151; margin-bottom:6px; display:block; }
.login-input-group { position:relative; margin-bottom:16px; }
.login-input-group .iicon { position:absolute; left:13px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:.95rem; pointer-events:none; }
.login-input-group input { width:100%; padding:10px 40px 10px 38px; border:1.5px solid #e2e8f0; border-radius:9px; font-size:.9rem; color:var(--text); background:#f8fafc; outline:none; transition:border-color .15s,box-shadow .15s,background .15s; }
.login-input-group input:focus { border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px rgba(59,130,246,.12); }
.login-input-group .toggle-pass { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:#94a3b8; padding:0; font-size:1rem; }
.login-btn { width:100%; margin-top:8px; padding:12px; font-size:.95rem; font-weight:600; background:linear-gradient(135deg,#3b82f6 0%,#1d4ed8 100%); color:#fff; border:none; border-radius:9px; cursor:pointer; transition:opacity .15s; display:flex; align-items:center; justify-content:center; gap:7px; }
.login-btn:hover { opacity:.9; }

/* ============================================================ FILTER BAR (barra de filtros compacta, reutilizable) ============================================================ */
.filter-bar { padding:16px 18px; }
.filter-bar .form-label { font-size:.72rem; text-transform:uppercase; letter-spacing:.04em; color:var(--text-muted); font-weight:600; margin-bottom:4px; }
.filter-bar .form-control,.filter-bar .form-select { font-size:.82rem; }
.filter-bar .select2-container--bootstrap-5 .select2-selection { min-height:calc(1.5em + .6rem + 2px); font-size:.82rem; }

/* ============================================================ BADGES — BANDA HORARIA / TIPO DE REPORTE (clases globales) ============================================================ */
.badge-banda { font-size:.68rem; font-weight:600; padding:4px 10px; border-radius:6px; letter-spacing:.02em; }
.badge-banda--normal   { background:#dbeafe; color:#1d4ed8; }
.badge-banda--reducida { background:#dcfce7; color:#15803d; }
.badge-banda--nocturna { background:#f3e8ff; color:#7e22ce; }

.badge-tipo { font-size:.68rem; font-weight:600; padding:4px 10px; border-radius:6px; }
.badge-tipo--entrada     { background:#dbeafe; color:#1d4ed8; }
.badge-tipo--entrada800  { background:#ffedd5; color:#c2410c; }
.badge-tipo--salida      { background:#dcfce7; color:#15803d; }

/* ============================================================ TABLA AGRUPADA (repositorio de reportes y similares) ============================================================ */
.table-grouped { font-size:.8rem; }
.table-grouped > thead th { font-size:.68rem; padding:9px 12px; }
.table-grouped > tbody td { padding:7px 12px; }
.table-grouped .grupo-alt { background:#f8fafc; }
.table-grouped .fila-nueva-grupo td { border-top:2px solid var(--border); }
.table-grouped > tbody tr:first-child td { border-top:none; }
.table-grouped .operador-nombre { font-weight:600; color:var(--text); }
.table-grouped .operador-ido { font-size:.71rem; color:var(--text-muted); }

/* ============================================================ PAGINACIÓN ============================================================ */
.pagination .page-link { border-radius:7px; margin:0 2px; border:1px solid var(--border); color:var(--text); font-size:.82rem; }
.pagination .page-item.active .page-link { background:var(--accent); border-color:var(--accent); }
.pagination .page-link:hover { background:#eff6ff; }

/* ============================================================ GRÁFICOS (contenedor responsive reutilizable) ============================================================ */
.chart-wrap { position:relative; height:260px; width:100%; }
@media (max-width:767px) { .chart-wrap { height:220px; } }

/* ============================================================ RESPONSIVE ============================================================ */
@media (max-width:767px) {
  :root { --sidebar-w:0px; }
  .sidebar { transform:translateX(-240px); transition:transform .25s; }
  .topbar { left:0; }
  .login-left { display:none; }
}
@media (max-width:576px) {
  .main-content { padding:16px; }
  .topbar { padding:0 12px; gap:8px; }
  .topbar-right { gap:8px; }
  .topbar-user > div:not(.topbar-avatar) { display:none; }
  .login-header { right:24px; }
}