/* ============================================================
   CIVILMEC · Gestión de EPP — estilos complementarios
   (el resto usa Tailwind CSS + Flowbite vía CDN)
   ============================================================ */

:root {
  --navy: #0b1522;
  --gold: #f4ad18;
  --gold-600: #f59e0b;
}

html { font-family: 'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif; }

/* Marca */
.bg-navy { background-color: var(--navy); }
.login-bg { background: radial-gradient(ellipse at top, rgba(244, 173, 24, 0.12), transparent 55%), var(--navy); }

/* Navegación activa */
.nav-item.active { background-color: var(--gold); color: var(--navy); font-weight: 600; }
.nav-item.active svg { color: var(--navy); }
.bottom-item.active { color: var(--gold-600); }

/* Etiqueta de sección en sidebar */
.nav-section { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #64748b; padding: 0.75rem 0.75rem 0.25rem; }

/* Toast */
.toast {
  position: fixed; top: 4.5rem; right: 1rem; z-index: 60;
  max-width: 22rem; padding: 0.75rem 1rem; border-radius: 0.75rem;
  background: #0f172a; color: #fff; font-size: 0.8125rem; font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
  border-left: 4px solid #22c55e;
  transform: translateX(120%); transition: transform 0.25s ease;
}
.toast.show { transform: translateX(0); }
.toast.warn { border-left-color: var(--gold-600); }
.toast.error { border-left-color: #ef4444; }

/* Firma digital */
.signature-pad { touch-action: none; background: repeating-linear-gradient(0deg, transparent 0 38px, #eef2f6 39px); border-radius: 0.5rem; }

/* Barras de gráfico */
.bar { transition: height 0.4s ease; }

/* Spinner */
.spinner { width: 2rem; height: 2rem; border: 3px solid #e5e7eb; border-top-color: var(--gold); border-radius: 9999px; animation: spin 0.7s linear infinite; margin: 2.5rem auto; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Modal */
.modal-box { max-height: 92vh; }
.modal-scroll { max-height: 75vh; overflow-y: auto; }

/* Bottom nav en móvil con safe area */
.bottom-safe { padding-bottom: env(safe-area-inset-bottom); }

/* Utilidades */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

/* Timeline (perfil de empleado) */
.timeline { position: relative; padding-left: 1.25rem; }
.timeline::before { content: ""; position: absolute; left: 5px; top: 6px; bottom: 6px; width: 2px; background: #e5e7eb; }
.timeline-item { position: relative; padding-bottom: 1rem; }
.timeline-item::before { content: ""; position: absolute; left: -1.25rem; top: 4px; width: 12px; height: 12px; border-radius: 9999px; background: var(--gold); border: 3px solid #fff; box-shadow: 0 0 0 1px #e5e7eb; }

/* Impresión */
@media print {
  #sidebar, header, #bottomNav, #moreSheet, #drawerBackdrop, #modalBackdrop, .toast, .no-print { display: none !important; }
  #mainContent { margin: 0 !important; padding: 0 !important; }
  .shadow-sm, .shadow-2xl, .shadow-lg { box-shadow: none !important; }
}