/* Estilos personalizados adicionales para NominaGT */

/* Utilidades generales */
.hidden {
  display: none !important;
}

.flex {
  display: flex !important;
}

.transition-all {
  transition-property: all;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
}

.rounded-lg {
  border-radius: 0.5rem;
}

.rounded-xl {
  border-radius: 0.75rem;
}

.rounded-2xl {
  border-radius: 1rem;
}

/* Colores de fondo por rol */
.bg-role-empleado {
  --role-primary: #3b82f6; /* Blue */;
}

.bg-role-supervisor {
  --role-primary: #06b6d4; /* Cyan */;
}

.bg-role-admin {
  --role-primary: #14b8a6; /* Teal */;
}

.bg-role-gerencia {
  --role-primary: #6366f1; /* Indigo */;
}

/* Clases de utilidad para responsive */
.container-responsive {
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}

@media (min-width: 640px) {
  .container-responsive {
    max-width: 640px;
  }
}

@media (min-width: 768px) {
  .container-responsive {
    max-width: 768px;
  }
}

@media (min-width: 1024px) {
  .container-responsive {
    max-width: 1024px;
  }
}

@media (min-width: 1280px) {
  .container-responsive {
    max-width: 1280px;
  }
}

/* Animaciones */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.animate-spin {
  animation: spin 1s linear infinite;
}

/* Badges de estado */
.badge-success {
  background-color: rgba(34, 197, 94, 0.1);
  color: rgb(22, 163, 74);
}

.btn-back,
a.back-nav-pill,
a.back-link,
a.period-back-link,
a.back-link:visited,
a.period-back-link:visited {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.85rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  background: rgba(248, 250, 252, 0.95) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
  transition: background-color 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}

.btn-back:hover,
a.back-nav-pill:hover,
a.back-link:hover,
a.period-back-link:hover {
  background: #fff !important;
  border-color: rgba(20, 184, 166, 0.45) !important;
  color: #0f172a !important;
  transform: translateY(-1px);
}

.btn-back i,
.btn-back .bi,
a.back-nav-pill i,
a.back-nav-pill .bi,
a.back-link i,
a.back-link .bi,
a.period-back-link i,
a.period-back-link .bi {
  color: #0f766e !important;
}

.btn-back:active,
a.back-nav-pill:active,
a.back-link:active,
a.period-back-link:active {
  transform: translateY(0);
}

/* Botones prev (wizards) que funcionan como "regresar" */
button.btn-secondary-wiz,
button#prevBtn.action-btn,
button#wizard-prev,
button[data-wizard-nav="prev"] {
  display: inline-flex !important;
  align-items: center !important;
  gap: 0.5rem !important;
  padding: 0.45rem 0.85rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(148, 163, 184, 0.45) !important;
  background: rgba(248, 250, 252, 0.95) !important;
  color: #0f172a !important;
  font-weight: 700 !important;
  font-size: 0.92rem !important;
  text-decoration: none !important;
}

button.btn-secondary-wiz:hover,
button#prevBtn.action-btn:hover,
button#wizard-prev:hover,
button[data-wizard-nav="prev"]:hover {
  background: #fff !important;
  border-color: rgba(20, 184, 166, 0.45) !important;
  transform: translateY(-1px);
}

.badge-danger {
  background-color: rgba(239, 68, 68, 0.1);
  color: rgb(220, 38, 38);
}

.badge-warning {
  background-color: rgba(251, 146, 60, 0.1);
  color: rgb(194, 65, 12);
}

.badge-info {
  background-color: rgba(59, 130, 246, 0.1);
  color: rgb(37, 99, 235);
}

.badge-secondary {
  background-color: rgba(156, 163, 175, 0.1);
  color: rgb(75, 85, 99);
}