/* VigiApp Modern Theme CSS */

/* Variables CSS para colores y gradientes */
:root {
  --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --secondary-gradient: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --success-gradient: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
  --warning-gradient: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
  --danger-gradient: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
  --info-gradient: linear-gradient(135deg, #a8edea 0%, #fed6e3 100%);
  --dark-gradient: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  --light-gradient: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  --shadow-soft: 0 4px 15px 0 rgba(31, 38, 135, 0.37);
  --shadow-hover: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
  --border-glass: 1px solid rgba(255, 255, 255, 0.18);
  --backdrop-blur: blur(20px);
}

/* Efectos de glassmorphism para contenedores principales */
.form-signin {
  background: rgba(255, 255, 255, 0.25);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-radius: 20px;
  border: var(--border-glass);
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease-in-out;
}

.form-signin:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

/* Botones modernos con gradientes */
.btn-primary {
  background: var(--primary-gradient);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

.btn-primary:hover::before {
  left: 100%;
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(102, 126, 234, 0.6);
}

.btn-danger {
  background: var(--danger-gradient);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(250, 112, 154, 0.4);
}

.btn-danger:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(250, 112, 154, 0.6);
}

.btn-warning {
  background: var(--warning-gradient);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 600;
  color: #2c3e50 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(67, 233, 123, 0.4);
}

.btn-warning:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(67, 233, 123, 0.6);
  color: #1a252f !important;
}

.btn-info {
  background: var(--info-gradient);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 600;
  color: #2c3e50 !important;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(168, 237, 234, 0.4);
}

.btn-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(168, 237, 234, 0.6);
  color: #1a252f !important;
}

.btn-secondary {
  background: var(--dark-gradient);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 600;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(44, 62, 80, 0.4);
}

.btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(44, 62, 80, 0.6);
}

/* Inputs modernos */
.form-control {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--backdrop-blur);
  border: 2px solid rgba(255, 255, 255, 0.2);
  border-radius: 15px;
  padding: 15px 20px;
  font-size: 16px;
  transition: all 0.3s ease;
  color: #2c3e50;
}

.form-control:focus {
  background: rgba(255, 255, 255, 0.2);
  border-color: #667eea;
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
}

.form-control::placeholder {
  color: rgba(44, 62, 80, 0.6);
}

.form-floating > label {
  color: #667eea;
  font-weight: 500;
}

/* Cards con efecto glassmorphism */
.card {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: var(--border-glass);
  border-radius: 20px;
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  overflow: hidden;
  position: relative;
  color: #ffffff !important;
}

/* Asegurar que todos los elementos dentro de las cards sean blancos */
.card, 
.card .card-title,
.card .card-text,
.card h1, .card h2, .card h3, .card h4, .card h5, .card h6,
.card p, .card span, .card div, .card i, .card small {
  color: #ffffff !important;
}

.card .text-muted {
  color: rgba(255, 255, 255, 0.8) !important;
}

.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--primary-gradient);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.card:hover::before {
  transform: scaleX(1);
}

.card:hover {
  transform: translateY(-10px) scale(1.02);
  box-shadow: var(--shadow-hover);
  background: rgba(255, 255, 255, 0.25);
}

/* Navbar moderna */
.navbar {
  background: rgba(255, 255, 255, 0.95) !important;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border-bottom: var(--border-glass);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.navbar-brand {
  font-weight: 700;
  font-size: 1.5rem;
  background: var(--primary-gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  transition: all 0.3s ease;
}

.navbar-brand:hover {
  transform: scale(1.05);
}

/* Modales modernos */
.modal-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: var(--border-glass);
  border-radius: 20px;
  box-shadow: var(--shadow-hover);
}

.modal-header {
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
  background: var(--primary-gradient);
  color: white;
  border-radius: 20px 20px 0 0;
}

.modal-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  background: rgba(248, 249, 250, 0.8);
  border-radius: 0 0 20px 20px;
}

/* Alertas modernas */
.alert {
  border: none;
  border-radius: 15px;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  font-weight: 500;
  border-left: 4px solid;
  animation: slideInDown 0.5s ease-out;
}

.alert-success {
  background: rgba(75, 172, 254, 0.1);
  color: #0066cc;
  border-left-color: #4facfe;
  box-shadow: 0 4px 15px rgba(75, 172, 254, 0.2);
}

/* Animaciones */
@keyframes slideInDown {
  from {
    transform: translateY(-100%);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes fadeInUp {
  from {
    transform: translateY(30px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

@keyframes pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0.7);
  }
  70% {
    box-shadow: 0 0 0 10px rgba(102, 126, 234, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(102, 126, 234, 0);
  }
}

/* Spinner moderno */
.spinner {
  border: 8px solid rgba(255, 255, 255, 0.3);
  border-top: 8px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite, pulse 2s infinite;
}

/* LED moderno - Indicador de guardia activa */
#led {
  width: 24px;
  height: 24px;
  background: radial-gradient(circle at 30% 30%, #00ff88, #00cc66, #008844);
  border: 3px solid rgba(255, 255, 255, 0.9);
  border-radius: 50%;
  position: relative;
  box-shadow: 
    0 0 20px rgba(0, 255, 136, 0.8),
    0 0 40px rgba(0, 255, 136, 0.4),
    inset 0 2px 8px rgba(255, 255, 255, 0.6);
  animation: modernLedPulse 2.5s ease-in-out infinite;
  transition: all 0.3s ease;
}

/* Efecto de brillo adicional */
#led::before {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 8px;
  height: 8px;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.3));
  border-radius: 50%;
  animation: modernLedShine 2.5s ease-in-out infinite;
}

/* Indicador de estado inactivo */
#led.inactive {
  background: radial-gradient(circle at 30% 30%, #888888, #666666, #444444);
  box-shadow: 
    0 0 10px rgba(136, 136, 136, 0.3),
    inset 0 2px 8px rgba(255, 255, 255, 0.2);
  animation: none;
}

/* Badge para el estado de guardia mejorado */
.badge-guardia-activa {
  background: linear-gradient(135deg, #00ff88 0%, #00cc66 100%);
  color: #000000 !important;
  font-weight: 700;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 25px;
  box-shadow: 
    0 4px 15px rgba(0, 255, 136, 0.4),
    inset 0 1px 3px rgba(255, 255, 255, 0.4);
  animation: modernBadgePulse 3s ease-in-out infinite;
  position: relative;
  overflow: hidden;
  border: 2px solid rgba(255, 255, 255, 0.3);
}

.badge-guardia-activa::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
  animation: modernBadgeShine 3s ease-in-out infinite;
}

.badge-guardia-inactiva {
  background: linear-gradient(135deg, #6c757d 0%, #495057 100%);
  color: #ffffff !important;
  font-weight: 600;
  font-size: 0.9rem;
  padding: 10px 20px;
  border-radius: 25px;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
  opacity: 0.8;
  border: 2px solid rgba(255, 255, 255, 0.2);
}

/* Animaciones para el LED moderno */
@keyframes modernLedPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 0 20px rgba(0, 255, 136, 0.8),
      0 0 40px rgba(0, 255, 136, 0.4),
      inset 0 2px 8px rgba(255, 255, 255, 0.6);
  }
  50% {
    transform: scale(1.08);
    box-shadow: 
      0 0 25px rgba(0, 255, 136, 1),
      0 0 50px rgba(0, 255, 136, 0.6),
      0 0 70px rgba(0, 255, 136, 0.3),
      inset 0 2px 8px rgba(255, 255, 255, 0.8);
  }
}

@keyframes modernLedShine {
  0%, 100% {
    opacity: 0.7;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

/* Mantener animaciones anteriores para compatibilidad */
@keyframes ledPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 0 15px rgba(0, 255, 65, 0.9),
      0 0 30px rgba(0, 255, 65, 0.6),
      0 0 45px rgba(0, 255, 65, 0.3),
      inset 0 2px 8px rgba(255, 255, 255, 0.3);
  }
  50% {
    transform: scale(1.1);
    box-shadow: 
      0 0 20px rgba(0, 255, 65, 1),
      0 0 40px rgba(0, 255, 65, 0.8),
      0 0 60px rgba(0, 255, 65, 0.5),
      inset 0 2px 8px rgba(255, 255, 255, 0.5);
  }
}

@keyframes ledGlow {
  0% {
    filter: brightness(1) saturate(1);
  }
  100% {
    filter: brightness(1.3) saturate(1.2);
  }
}

@keyframes ledShine {
  0%, 100% {
    opacity: 0.6;
    transform: scale(1);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

@keyframes modernBadgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(0, 255, 136, 0.4);
  }
  50% {
    transform: scale(1.03);
    box-shadow: 0 6px 20px rgba(0, 255, 136, 0.6);
  }
}

@keyframes modernBadgeShine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

/* Mantener animaciones anteriores para compatibilidad */
@keyframes badgePulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 15px rgba(0, 255, 65, 0.4);
  }
  50% {
    transform: scale(1.02);
    box-shadow: 0 6px 20px rgba(0, 255, 65, 0.6);
  }
}

@keyframes badgeShine {
  0% {
    left: -100%;
  }
  50%, 100% {
    left: 100%;
  }
}

/* Estilos específicos para el modal de novedades */
#novedadesModal .modal-dialog {
  max-width: 90%;
}

#novedadesModal .video-container {
  position: relative;
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--backdrop-blur);
  border-radius: 15px;
  padding: 15px;
  border: var(--border-glass);
  box-shadow: var(--shadow-soft);
}

#novedadesModal .video-container video {
  border-radius: 10px;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  transition: all 0.3s ease;
}

#novedadesModal .video-container video:hover {
  transform: scale(1.02);
  box-shadow: 0 12px 35px rgba(0, 0, 0, 0.3);
}

/* Botón de captura de foto mejorado */
#capturarFoto {
  background: var(--success-gradient);
  border: none;
  border-radius: 25px;
  padding: 12px 30px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(75, 172, 254, 0.4);
  position: relative;
  overflow: hidden;
}

#capturarFoto::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.5s;
}

#capturarFoto:hover::before {
  left: 100%;
}

#capturarFoto:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(75, 172, 254, 0.6);
}

/* Card del formulario mejorada */
#novedadesModal .card {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur);
  border: none;
  border-radius: 20px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  transition: all 0.3s ease;
}

#novedadesModal .card:hover {
  transform: translateY(-5px);
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.15);
}

#novedadesModal .card-header {
  background: var(--primary-gradient) !important;
  border: none;
  padding: 20px;
  position: relative;
}

#novedadesModal .card-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

/* Floating labels mejorados */
#novedadesModal .form-floating {
  position: relative;
  margin-bottom: 1rem;
}

#novedadesModal .form-floating > .form-control {
  background: rgba(255, 255, 255, 0.9);
  border: 2px solid rgba(102, 126, 234, 0.2);
  border-radius: 15px;
  padding: 20px 15px 10px 50px;
  font-size: 16px;
  transition: all 0.3s ease;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

#novedadesModal .form-floating > .form-control:focus {
  background: rgba(255, 255, 255, 1);
  border-color: #667eea;
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.3);
  transform: translateY(-2px);
}

#novedadesModal .form-floating > label {
  color: #667eea;
  font-weight: 600;
  padding-left: 50px;
  transition: all 0.3s ease;
}

#novedadesModal .form-floating > label i {
  position: absolute;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  color: #667eea;
  font-size: 18px;
  transition: all 0.3s ease;
}

#novedadesModal .form-control:focus + label i {
  color: #4e73df;
  transform: translateY(-50%) scale(1.1);
}

/* Textarea específico */
#novedadesModal textarea.form-control {
  resize: vertical;
  min-height: 120px;
}

/* Botones del footer mejorados */
#novedadesModal .modal-footer {
  background: rgba(248, 249, 250, 0.95);
  backdrop-filter: var(--backdrop-blur);
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  padding: 20px 30px;
}

#novedadesModal .modal-footer .btn {
  border-radius: 25px;
  padding: 12px 25px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

#novedadesModal .modal-footer .btn-success {
  background: var(--success-gradient);
  border: none;
  box-shadow: 0 4px 15px rgba(75, 172, 254, 0.4);
}

#novedadesModal .modal-footer .btn-success:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(75, 172, 254, 0.6);
}

#novedadesModal .modal-footer .btn-secondary {
  background: var(--dark-gradient);
  border: none;
  box-shadow: 0 4px 15px rgba(108, 117, 125, 0.4);
}

#novedadesModal .modal-footer .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(108, 117, 125, 0.6);
}

/* Animación de entrada para el formulario */
#novedadesModal.show .card {
  animation: slideInUp 0.6s ease-out;
}

@keyframes slideInUp {
  from {
    transform: translateY(50px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

/* Efectos de focus para mejor UX */
#novedadesModal .form-control:focus {
  outline: none;
  border-color: #667eea !important;
  box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25) !important;
}

/* Responsividad para el modal de novedades */
@media (max-width: 768px) {
  #novedadesModal .modal-dialog {
    max-width: 95%;
    margin: 10px auto;
  }
  
  #novedadesModal .video-container video {
    height: 200px;
  }
  
  #novedadesModal .form-floating > .form-control {
    padding-left: 45px;
    font-size: 14px;
  }
  
  #novedadesModal .form-floating > label {
    padding-left: 45px;
    font-size: 14px;
  }
  
  #novedadesModal .form-floating > label i {
    left: 15px;
    font-size: 16px;
  }
}

/* ============================================
   ESTILOS PARA MODAL DE BOTÓN DE PÁNICO
   ============================================ */

/* Modal de Botón de Pánico - Diseño moderno */
#botonPanicoModal .modal-dialog {
  max-width: 90%;
}

#botonPanicoModal .modal-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: var(--border-glass);
  border-radius: 20px;
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}

#botonPanicoModal .modal-header {
  background: var(--danger-gradient) !important;
  border: none;
  padding: 20px;
  position: relative;
}

#botonPanicoModal .modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

#botonPanicoModal .modal-title {
  color: white;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

#botonPanicoModal .modal-title::before {
  content: '🚨';
  font-size: 1.2em;
  animation: pulse 1s infinite;
}

/* Container para la tabla de alertas */
#botonPanicoModal #alertasContainer {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--backdrop-blur);
  border-radius: 15px;
  padding: 20px;
  border: var(--border-glass);
  box-shadow: var(--shadow-soft);
  margin: 20px 0;
}

/* Tabla de alertas moderna */
#botonPanicoModal #alertasDataTable {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
}

#botonPanicoModal #alertasDataTable thead {
  background: var(--danger-gradient);
}

#botonPanicoModal #alertasDataTable thead th {
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 15px;
  border: none;
  font-size: 14px;
}

#botonPanicoModal #alertasDataTable tbody tr {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#botonPanicoModal #alertasDataTable tbody tr:hover {
  background: rgba(250, 112, 154, 0.1);
  transform: scale(1.01);
}

#botonPanicoModal #alertasDataTable tbody td {
  padding: 15px;
  color: #2c3e50;
  font-weight: 500;
  border: none;
  vertical-align: middle;
}

/* Mensaje cuando no hay alertas */
#botonPanicoModal .alert-info {
  background: rgba(168, 237, 234, 0.1);
  border: 2px solid rgba(168, 237, 234, 0.3);
  border-radius: 15px;
  color: #2c3e50;
  padding: 20px;
  text-align: center;
  font-weight: 500;
  backdrop-filter: var(--backdrop-blur);
}

/* ============================================
   ESTILOS PARA MODAL DE RONDAS DE SEGURIDAD
   ============================================ */

/* Modal de Rondas de Seguridad - Diseño moderno */
#puntosDeControlModal .modal-dialog {
  max-width: 90%;
}

#puntosDeControlModal .modal-content {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  border: var(--border-glass);
  border-radius: 20px;
  box-shadow: var(--shadow-hover);
  overflow: hidden;
}

#puntosDeControlModal .modal-header {
  background: var(--success-gradient) !important;
  border: none;
  padding: 20px;
  position: relative;
}

#puntosDeControlModal .modal-header::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
}

#puntosDeControlModal .modal-title {
  color: white;
  font-weight: 600;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
  display: flex;
  align-items: center;
  gap: 10px;
}

#puntosDeControlModal .modal-title::before {
  content: '🛡️';
  font-size: 1.2em;
  animation: fadeInUp 0.5s ease-out;
}

/* Container para video QR en rondas */
#puntosDeControlModal .modal-body {
  padding: 30px;
}

#puntosDeControlModal #qr-video {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--backdrop-blur);
  border-radius: 15px;
  border: var(--border-glass);
  box-shadow: var(--shadow-soft);
  transition: all 0.3s ease;
  width: 100%;
  max-width: 500px;
  height: auto;
}

#puntosDeControlModal #qr-video:hover {
  transform: scale(1.02);
  box-shadow: var(--shadow-hover);
}

/* Tabla de rondas moderna */
#puntosDeControlModal #rondasDataTable {
  background: rgba(255, 255, 255, 0.95);
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}

#puntosDeControlModal #rondasDataTable thead {
  background: var(--success-gradient);
}

#puntosDeControlModal #rondasDataTable thead th {
  color: white;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 15px;
  border: none;
  font-size: 14px;
}

#puntosDeControlModal #rondasDataTable tbody tr {
  transition: all 0.3s ease;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

#puntosDeControlModal #rondasDataTable tbody tr:hover {
  background: rgba(75, 172, 254, 0.1);
  transform: scale(1.01);
}

#puntosDeControlModal #rondasDataTable tbody td {
  padding: 15px;
  color: #2c3e50;
  font-weight: 500;
  border: none;
  vertical-align: middle;
}

/* Badge para verificación */
.badge-verificacion {
  background: var(--success-gradient);
  color: white;
  padding: 8px 15px;
  border-radius: 20px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 12px;
  box-shadow: 0 4px 15px rgba(75, 172, 254, 0.3);
  transition: all 0.3s ease;
}

.badge-verificacion:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(75, 172, 254, 0.5);
}

/* Container para el centro del video QR */
.qr-container {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: var(--backdrop-blur);
  border-radius: 20px;
  padding: 30px;
  border: var(--border-glass);
  box-shadow: var(--shadow-soft);
  text-align: center;
  transition: all 0.3s ease;
}

.qr-container:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-hover);
}

.qr-container::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--success-gradient);
  border-radius: 20px 20px 0 0;
}

/* Instrucciones para escanear QR */
.qr-instructions {
  background: rgba(75, 172, 254, 0.1);
  border: 2px solid rgba(75, 172, 254, 0.3);
  border-radius: 15px;
  padding: 20px;
  margin: 20px 0;
  color: #2c3e50;
  font-weight: 500;
  text-align: center;
  backdrop-filter: var(--backdrop-blur);
  position: relative;
  overflow: hidden;
}

.qr-instructions::before {
  content: '📱';
  font-size: 2em;
  display: block;
  margin-bottom: 10px;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-10px);
  }
  60% {
    transform: translateY(-5px);
  }
}

/* Footer de modales mejorado */
#botonPanicoModal .modal-footer,
#puntosDeControlModal .modal-footer {
  background: rgba(248, 249, 250, 0.9);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  padding: 20px 30px;
  border-radius: 0 0 20px 20px;
  backdrop-filter: var(--backdrop-blur);
}

/* Botón cerrar mejorado */
.btn-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: white;
  opacity: 0.8;
  transition: all 0.3s ease;
}

.btn-close:hover {
  opacity: 1;
  transform: scale(1.1);
  color: white;
}

/* Responsive para modales */
@media (max-width: 768px) {
  #botonPanicoModal .modal-dialog,
  #puntosDeControlModal .modal-dialog {
    max-width: 95%;
    margin: 10px;
  }
  
  #botonPanicoModal .modal-body,
  #puntosDeControlModal .modal-body {
    padding: 20px;
  }
  
  .qr-container {
    padding: 20px;
  }
  
  #puntosDeControlModal #qr-video {
    max-width: 100%;
  }
}

/* Animaciones específicas para los modales */
@keyframes alertPulse {
  0%, 100% {
    box-shadow: 0 0 10px rgba(250, 112, 154, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(250, 112, 154, 0.8);
  }
}

@keyframes securityGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(75, 172, 254, 0.5);
  }
  50% {
    box-shadow: 0 0 20px rgba(75, 172, 254, 0.8);
  }
}

/* Efecto especial para contenedores de alerta */
#alertasContainer {
  animation: alertPulse 3s infinite;
}

/* Efecto especial para contenedor de rondas */
.qr-container {
  animation: securityGlow 4s infinite;
}

/* Efecto de carga suave para la página */
body {
  animation: fadeInUp 0.8s ease-out;
}

/* Mejoras para el fondo de la página */
body {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  min-height: 100vh;
  position: relative;
  overflow-x: hidden; /* Solo ocultar overflow horizontal */
  overflow-y: auto;   /* Permitir scroll vertical */
}

body::before {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: 
    radial-gradient(circle at 20% 50%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 80% 20%, rgba(255, 119, 198, 0.3) 0%, transparent 50%),
    radial-gradient(circle at 40% 80%, rgba(120, 219, 226, 0.3) 0%, transparent 50%);
  pointer-events: none;
  z-index: -2;
  animation: backgroundShift 15s ease-in-out infinite;
}

/* Animación de fondo con gradientes dinámicos */
body::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(45deg, 
    rgba(102, 126, 234, 0.1) 0%, 
    rgba(118, 75, 162, 0.1) 25%,
    rgba(240, 147, 251, 0.1) 50%,
    rgba(245, 87, 108, 0.1) 75%,
    rgba(102, 126, 234, 0.1) 100%);
  background-size: 400% 400%;
  animation: gradientWave 5s ease infinite;
  pointer-events: none;
  z-index: -1;
}

/* Partículas flotantes animadas */
.floating-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
}

.particle {
  position: absolute;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50%;
  animation: float 15s infinite linear;
}

.particle:nth-child(1) {
  width: 6px;
  height: 6px;
  left: 10%;
  animation-delay: 0s;
  animation-duration: 12s;
}

.particle:nth-child(2) {
  width: 4px;
  height: 4px;
  left: 20%;
  animation-delay: -2s;
  animation-duration: 18s;
}

.particle:nth-child(3) {
  width: 8px;
  height: 8px;
  left: 30%;
  animation-delay: -4s;
  animation-duration: 15s;
}

.particle:nth-child(4) {
  width: 5px;
  height: 5px;
  left: 40%;
  animation-delay: -6s;
  animation-duration: 20s;
}

.particle:nth-child(5) {
  width: 7px;
  height: 7px;
  left: 50%;
  animation-delay: -8s;
  animation-duration: 14s;
}

.particle:nth-child(6) {
  width: 60px;
  height: 60px;
  left: 60%;
  animation-delay: -10s;
  animation-duration: 16s;
}

.particle:nth-child(7) {
  width: 50px;
  height: 50px;
  left: 70%;
  animation-delay: -12s;
  animation-duration: 22s;
}

.particle:nth-child(8) {
  width: 40px;
  height: 40px;
  left: 80%;
  animation-delay: -14s;
  animation-duration: 13s;
}

.particle:nth-child(9) {
  width: 30px;
  height: 30px;
  left: 90%;
  animation-delay: -16s;
  animation-duration: 19s;
}

.particle:nth-child(10) {
  width: 20px;
  height: 20px;
  left: 15%;
  animation-delay: -18s;
  animation-duration: 17s;
}

/* Keyframes para las animaciones */
@keyframes backgroundShift {
  0%, 100% {
    transform: translateX(0) translateY(0);
    filter: hue-rotate(0deg);
  }
  25% {
    transform: translateX(10px) translateY(-5px);
    filter: hue-rotate(90deg);
  }
  50% {
    transform: translateX(-5px) translateY(10px);
    filter: hue-rotate(180deg);
  }
  75% {
    transform: translateX(-10px) translateY(-10px);
    filter: hue-rotate(270deg);
  }
}

@keyframes gradientWave {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

@keyframes float {
  0% {
    transform: translateY(100vh) translateX(0px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) translateX(100px) rotate(360deg);
    opacity: 0;
  }
}

/* Efecto de ondas en el fondo */
.wave-animation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(ellipse at center, rgba(255,255,255,0.05) 0%, transparent 70%);
  animation: waveEffect 10s ease-in-out infinite;
}

@keyframes waveEffect {
  0%, 100% {
    transform: scale(1) rotate(0deg);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.1) rotate(180deg);
    opacity: 0.1;
  }
}

/* Responsividad mejorada */
@media (max-width: 768px) {
  .form-signin {
    margin: 20px;
    padding: 20px;
  }
  
  .btn {
    padding: 10px 20px;
    font-size: 14px;
  }
  
  .card {
    margin-bottom: 15px;
  }
}

/* Transiciones suaves para todos los elementos */
* {
  transition: all 0.3s ease;
}

/* Mejoras para el texto */
h1, h2, h3, h4, h5, h6 {
  font-weight: 600;
  color: #2c3e50;
}

/* Estilo para el logo */
#logo {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.2));
  transition: all 0.3s ease;
}

#logo:hover {
  transform: scale(1.05) rotate(5deg);
}

/* Mejoras para los iconos */
.fas, .far, .fab {
  transition: all 0.3s ease;
}

.card:hover .fas,
.card:hover .far,
.card:hover .fab {
  transform: scale(1.1);
  color: #667eea;
}

/* Efecto Ripple para botones */
.btn {
  position: relative;
  overflow: hidden;
}

.ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  transform: scale(0);
  animation: ripple-animation 0.6s linear;
  pointer-events: none;
}

@keyframes ripple-animation {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* Mejoras para focus de inputs */
.input-focused {
  transform: translateY(-2px);
}

.input-focused .form-control {
  border-color: #667eea !important;
  box-shadow: 0 0 20px rgba(102, 126, 234, 0.3) !important;
}

/* Notificaciones modernas */
.modern-notification {
  border-radius: 15px;
  border: none;
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
  font-weight: 500;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

/* Spinner moderno */
.modern-spinner {
  width: 60px;
  height: 60px;
  border: 8px solid rgba(255, 255, 255, 0.3);
  border-top: 8px solid #667eea;
  border-radius: 50%;
  animation: spin 1s linear infinite, pulse 2s infinite;
}

/* Loading overlay moderno */
.modern-loading {
  backdrop-filter: var(--backdrop-blur);
  -webkit-backdrop-filter: var(--backdrop-blur);
}

/* ============================================
   ESTILOS PARA ESCÁNER QR MEJORADO
   ============================================ */

/* Video wrapper con overlay */
.video-wrapper {
  position: relative;
  display: inline-block;
  border-radius: 15px;
  overflow: hidden;
}

/* Overlay para el marco de escaneo */
.scan-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
}

/* Marco de escaneo */
.scan-frame {
  position: relative;
  width: 250px;
  height: 250px;
  border: 2px solid transparent;
}

/* Esquinas del marco */
.scan-corner {
  position: absolute;
  width: 30px;
  height: 30px;
  border: 3px solid #00ff41;
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.8);
}

.scan-corner-tl {
  top: 0;
  left: 0;
  border-right: none;
  border-bottom: none;
  border-radius: 8px 0 0 0;
}

.scan-corner-tr {
  top: 0;
  right: 0;
  border-left: none;
  border-bottom: none;
  border-radius: 0 8px 0 0;
}

.scan-corner-bl {
  bottom: 0;
  left: 0;
  border-right: none;
  border-top: none;
  border-radius: 0 0 0 8px;
}

.scan-corner-br {
  bottom: 0;
  right: 0;
  border-left: none;
  border-top: none;
  border-radius: 0 0 8px 0;
}

/* Línea de escaneo animada */
.scan-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #00ff41, transparent);
  box-shadow: 0 0 10px rgba(0, 255, 65, 0.8);
  animation: scanLineMove 2s linear infinite;
}

@keyframes scanLineMove {
  0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(246px);
  }
}

/* Animación de las esquinas */
.scan-corner {
  animation: cornerPulse 2s infinite;
}

@keyframes cornerPulse {
  0%, 100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.7;
    transform: scale(1.05);
  }
}

/* Status del escaneo */
.scan-status {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

#scanResult {
  background: rgba(255, 255, 255, 0.95);
  border: none;
  border-radius: 25px;
  padding: 15px 25px;
  backdrop-filter: var(--backdrop-blur);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  font-weight: 500;
}

#scanResult.alert-success {
  background: rgba(40, 167, 69, 0.9);
  color: white;
  animation: successPulse 0.5s ease-out;
}

#scanResult.alert-warning {
  background: rgba(255, 193, 7, 0.9);
  color: #212529;
}

#scanResult.alert-danger {
  background: rgba(220, 53, 69, 0.9);
  color: white;
}

@keyframes successPulse {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
  }
}

/* ============================================
   ESTILOS ADICIONALES PARA COUNTDOWN
   ============================================ */

/* Contador de pánico mejorado */
.countdown-circle {
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: var(--danger-gradient);
  border: 8px solid rgba(255, 255, 255, 0.3);
  box-shadow: 
    0 0 30px rgba(250, 112, 154, 0.5),
    inset 0 0 30px rgba(255, 255, 255, 0.1);
  animation: countdownPulse 1s infinite;
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

.countdown-circle::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: conic-gradient(from 0deg, transparent, rgba(255, 255, 255, 0.1), transparent);
  animation: countdownSpin 3s linear infinite;
}

@keyframes countdownPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 
      0 0 30px rgba(250, 112, 154, 0.5),
      inset 0 0 30px rgba(255, 255, 255, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 
      0 0 50px rgba(250, 112, 154, 0.8),
      inset 0 0 40px rgba(255, 255, 255, 0.2);
  }
}

@keyframes countdownSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* ============================================
   MEJORAS RESPONSIVAS ADICIONALES
   ============================================ */

@media (max-width: 768px) {
  .scan-frame {
    width: 200px;
    height: 200px;
  }
  
  .scan-corner {
    width: 25px;
    height: 25px;
  }
  
  @keyframes scanLineMove {
    0% {
      transform: translateY(0);
    }
    100% {
      transform: translateY(196px);
    }
  }
  
  .countdown-circle {
    width: 250px;
    height: 250px;
  }
  
  .qr-instructions {
    padding: 15px;
  }
  
  /* Asegurar scroll en móviles */
  body {
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch; /* Smooth scrolling en iOS */
  }
  
  /* Asegurar que el contenido principal sea scrolleable */
  .container-fluid {
    min-height: auto !important;
    overflow-y: visible !important;
  }
  
  /* Prevenir problemas con modales en móviles */
  .modal-open {
    overflow-y: auto !important;
    padding-right: 0 !important;
  }
}

/* ===== ESTILOS SIMPLIFICADOS PARA MODALES DEL SUPERVISOR ===== */
/* Diseño limpio, claro y mobile-friendly */

/* Modales del supervisor - Estilo general simplificado */
#botonPanicoModal .modal-content,
#puntosDeControlModal .modal-content,
#empleadosModal .modal-content,
#objetivosModal .modal-content,
#presentismoModal .modal-content,
#hombreVivoModal .modal-content,
#novedadesModal .modal-content {
  background: #ffffff !important;
  border: 1px solid #e9ecef !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Headers simplificados con colores suaves */
#botonPanicoModal .modal-header {
  background: linear-gradient(135deg, #ff6b6b, #ff5252) !important;
  color: white !important;
  border: none !important;
  padding: 16px 24px !important;
}

#puntosDeControlModal .modal-header,
#empleadosModal .modal-header,
#objetivosModal .modal-header,
#presentismoModal .modal-header,
#hombreVivoModal .modal-header,
#novedadesModal .modal-header {
  background: linear-gradient(135deg, #4fc3f7, #29b6f6) !important;
  color: white !important;
  border: none !important;
  padding: 16px 24px !important;
}

/* Títulos simplificados */
#botonPanicoModal .modal-title,
#puntosDeControlModal .modal-title,
#empleadosModal .modal-title,
#objetivosModal .modal-title,
#presentismoModal .modal-title,
#hombreVivoModal .modal-title,
#novedadesModal .modal-title {
  font-size: 1.25rem !important;
  font-weight: 600 !important;
  margin: 0 !important;
  text-shadow: none !important;
}

/* Body de modales con fondo limpio */
#botonPanicoModal .modal-body,
#puntosDeControlModal .modal-body,
#empleadosModal .modal-body,
#objetivosModal .modal-body,
#presentismoModal .modal-body,
#hombreVivoModal .modal-body,
#novedadesModal .modal-body {
  background: #fafbfc !important;
  padding: 24px !important;
  color: #2c3e50 !important;
}

/* Alertas informativas simplificadas */
#botonPanicoModal .alert-info,
#puntosDeControlModal .alert-info,
#empleadosModal .alert-info,
#objetivosModal .alert-info,
#presentismoModal .alert-info,
#hombreVivoModal .alert-info,
#novedadesModal .alert-info {
  background: #e8f4fd !important;
  border: 1px solid #bee5eb !important;
  border-radius: 8px !important;
  color: #0c5460 !important;
  padding: 16px !important;
  margin-bottom: 20px !important;
}

/* Contenedores de tabla simplificados */
#botonPanicoModal .table-container,
#puntosDeControlModal .table-container,
#empleadosModal .table-container,
#objetivosModal .table-container,
#presentismoModal .table-container,
#hombreVivoModal .table-container,
#novedadesModal .table-container {
  background: white !important;
  border-radius: 8px !important;
  padding: 20px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
  border: 1px solid #e9ecef !important;
}

/* Tablas con diseño limpio */
#botonPanicoModal table,
#puntosDeControlModal table,
#empleadosModal table,
#objetivosModal table,
#presentismoModal table,
#hombreVivoModal table,
#novedadesModal table {
  background: white !important;
  border-radius: 6px !important;
  overflow: hidden !important;
  box-shadow: none !important;
  border: 1px solid #dee2e6 !important;
}

/* Headers de tabla simplificados */
#botonPanicoModal table thead th,
#puntosDeControlModal table thead th,
#empleadosModal table thead th,
#objetivosModal table thead th,
#presentismoModal table thead th,
#hombreVivoModal table thead th,
#novedadesModal table thead th {
  background: #f8f9fa !important;
  color: #495057 !important;
  font-weight: 600 !important;
  font-size: 0.875rem !important;
  text-transform: none !important;
  letter-spacing: normal !important;
  padding: 12px 16px !important;
  border-bottom: 2px solid #dee2e6 !important;
}

/* Filas de tabla con hover suave */
#botonPanicoModal table tbody tr,
#puntosDeControlModal table tbody tr,
#empleadosModal table tbody tr,
#objetivosModal table tbody tr,
#presentismoModal table tbody tr,
#hombreVivoModal table tbody tr,
#novedadesModal table tbody tr {
  transition: background-color 0.2s ease !important;
  border-bottom: 1px solid #f1f3f4 !important;
}

#botonPanicoModal table tbody tr:hover,
#puntosDeControlModal table tbody tr:hover,
#empleadosModal table tbody tr:hover,
#objetivosModal table tbody tr:hover,
#presentismoModal table tbody tr:hover,
#hombreVivoModal table tbody tr:hover,
#novedadesModal table tbody tr:hover {
  background: #f8f9fa !important;
  transform: none !important;
}

/* Celdas de tabla */
#botonPanicoModal table tbody td,
#puntosDeControlModal table tbody td,
#empleadosModal table tbody td,
#objetivosModal table tbody td,
#presentismoModal table tbody td,
#hombreVivoModal table tbody td,
#novedadesModal table tbody td {
  padding: 12px 16px !important;
  color: #495057 !important;
  font-weight: 400 !important;
  border: none !important;
  vertical-align: middle !important;
}

/* Botones de modal simplificados */
#botonPanicoModal .btn,
#puntosDeControlModal .btn,
#empleadosModal .btn,
#objetivosModal .btn,
#presentismoModal .btn,
#hombreVivoModal .btn,
#novedadesModal .btn {
  border-radius: 6px !important;
  font-weight: 500 !important;
  padding: 8px 16px !important;
  border: 1px solid transparent !important;
  transition: all 0.2s ease !important;
}

/* Botón de cierre simplificado */
#botonPanicoModal .btn-close,
#puntosDeControlModal .btn-close,
#empleadosModal .btn-close,
#objetivosModal .btn-close,
#presentismoModal .btn-close,
#hombreVivoModal .btn-close,
#novedadesModal .btn-close {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 6px !important;
  opacity: 0.8 !important;
  padding: 8px !important;
  transition: all 0.2s ease !important;
}

#botonPanicoModal .btn-close:hover,
#puntosDeControlModal .btn-close:hover,
#empleadosModal .btn-close:hover,
#objetivosModal .btn-close:hover,
#presentismoModal .btn-close:hover,
#hombreVivoModal .btn-close:hover,
#novedadesModal .btn-close:hover {
  background: rgba(255, 255, 255, 0.3) !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Responsive mejorado para móviles */
@media (max-width: 768px) {
  #botonPanicoModal .modal-dialog,
  #puntosDeControlModal .modal-dialog,
  #empleadosModal .modal-dialog,
  #objetivosModal .modal-dialog,
  #presentismoModal .modal-dialog,
  #hombreVivoModal .modal-dialog,
  #novedadesModal .modal-dialog {
    max-width: 95% !important;
    margin: 8px auto !important;
  }
  
  #botonPanicoModal .modal-content,
  #puntosDeControlModal .modal-content,
  #empleadosModal .modal-content,
  #objetivosModal .modal-content,
  #presentismoModal .modal-content,
  #hombreVivoModal .modal-content,
  #novedadesModal .modal-content {
    border-radius: 8px !important;
  }
  
  #botonPanicoModal .modal-header,
  #puntosDeControlModal .modal-header,
  #empleadosModal .modal-header,
  #objetivosModal .modal-header,
  #presentismoModal .modal-header,
  #hombreVivoModal .modal-header,
  #novedadesModal .modal-header {
    padding: 12px 16px !important;
  }
  
  #botonPanicoModal .modal-title,
  #puntosDeControlModal .modal-title,
  #empleadosModal .modal-title,
  #objetivosModal .modal-title,
  #presentismoModal .modal-title,
  #hombreVivoModal .modal-title,
  #novedadesModal .modal-title {
    font-size: 1.1rem !important;
  }
  
  #botonPanicoModal .modal-body,
  #puntosDeControlModal .modal-body,
  #empleadosModal .modal-body,
  #objetivosModal .modal-body,
  #presentismoModal .modal-body,
  #hombreVivoModal .modal-body,
  #novedadesModal .modal-body {
    padding: 16px !important;
  }
  
  #botonPanicoModal .table-container,
  #puntosDeControlModal .table-container,
  #empleadosModal .table-container,
  #objetivosModal .table-container,
  #presentismoModal .table-container,
  #hombreVivoModal .table-container,
  #novedadesModal .table-container {
    padding: 12px !important;
    border-radius: 6px !important;
  }
  
  #botonPanicoModal table thead th,
  #puntosDeControlModal table thead th,
  #empleadosModal table thead th,
  #objetivosModal table thead th,
  #presentismoModal table thead th,
  #hombreVivoModal table thead th,
  #novedadesModal table thead th {
    padding: 8px 12px !important;
    font-size: 0.8rem !important;
  }
  
  #botonPanicoModal table tbody td,
  #puntosDeControlModal table tbody td,
  #empleadosModal table tbody td,
  #objetivosModal table tbody td,
  #presentismoModal table tbody td,
  #hombreVivoModal table tbody td,
  #novedadesModal table tbody td {
    padding: 8px 12px !important;
    font-size: 0.875rem !important;
  }
}

/* Mejoras específicas para DataTables en modales simplificados */
#botonPanicoModal .dataTables_wrapper,
#puntosDeControlModal .dataTables_wrapper,
#empleadosModal .dataTables_wrapper,
#objetivosModal .dataTables_wrapper,
#presentismoModal .dataTables_wrapper,
#hombreVivoModal .dataTables_wrapper,
#novedadesModal .dataTables_wrapper {
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  box-shadow: none !important;
}

/* Forzar textos oscuros en todo el contenido de los modales */
#botonPanicoModal .modal-body *:not(.btn):not(.badge):not(.alert):not(.card-header),
#puntosDeControlModal .modal-body *:not(.btn):not(.badge):not(.alert):not(.card-header),
#empleadosModal .modal-body *:not(.btn):not(.badge):not(.alert):not(.card-header),
#objetivosModal .modal-body *:not(.btn):not(.badge):not(.alert):not(.card-header),
#presentismoModal .modal-body *:not(.btn):not(.badge):not(.alert):not(.card-header),
#hombreVivoModal .modal-body *:not(.btn):not(.badge):not(.alert):not(.card-header),
#novedadesModal .modal-body *:not(.btn):not(.badge):not(.alert):not(.card-header) {
  color: #2c3e50 !important;
}

/* Excepción para encabezados de cards que deben mantener texto blanco */
#botonPanicoModal .card-header.bg-primary,
#puntosDeControlModal .card-header.bg-primary,
#empleadosModal .card-header.bg-primary,
#objetivosModal .card-header.bg-primary,
#presentismoModal .card-header.bg-primary,
#hombreVivoModal .card-header.bg-primary,
#novedadesModal .card-header.bg-primary {
  color: white !important;
}

#botonPanicoModal .card-header.bg-primary *,
#puntosDeControlModal .card-header.bg-primary *,
#empleadosModal .card-header.bg-primary *,
#objetivosModal .card-header.bg-primary *,
#presentismoModal .card-header.bg-primary *,
#hombreVivoModal .card-header.bg-primary *,
#novedadesModal .card-header.bg-primary * {
  color: white !important;
}
/* Mejorar visibilidad de controles DataTables */

/* Estilo FORZADO para el cuadro de búsqueda en todos los modales del supervisor */
#botonPanicoModal .dataTables_filter,
#puntosDeControlModal .dataTables_filter,
#empleadosModal .dataTables_filter,
#objetivosModal .dataTables_filter,
#presentismoModal .dataTables_filter,
#hombreVivoModal .dataTables_filter,
#novedadesModal .dataTables_filter {
  margin-bottom: 15px;
}

#botonPanicoModal .dataTables_filter label,
#puntosDeControlModal .dataTables_filter label,
#empleadosModal .dataTables_filter label,
#objetivosModal .dataTables_filter label,
#presentismoModal .dataTables_filter label,
#hombreVivoModal .dataTables_filter label,
#novedadesModal .dataTables_filter label {
  color: #1a252f !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 2px solid #2c3e50 !important;
  display: inline-block !important;
}

/* Asegurar que TODOS los textos dentro de los labels sean negros */
#botonPanicoModal .dataTables_filter label *,
#puntosDeControlModal .dataTables_filter label *,
#empleadosModal .dataTables_filter label *,
#objetivosModal .dataTables_filter label *,
#presentismoModal .dataTables_filter label *,
#hombreVivoModal .dataTables_filter label *,
#novedadesModal .dataTables_filter label * {
  color: #1a252f !important;
}

#botonPanicoModal .dataTables_filter input[type="search"],
#puntosDeControlModal .dataTables_filter input[type="search"],
#empleadosModal .dataTables_filter input[type="search"],
#objetivosModal .dataTables_filter input[type="search"],
#presentismoModal .dataTables_filter input[type="search"],
#hombreVivoModal .dataTables_filter input[type="search"],
#novedadesModal .dataTables_filter input[type="search"] {
  background: #ffffff !important;
  border: 3px solid #2c3e50 !important;
  border-radius: 10px !important;
  padding: 10px 15px !important;
  margin-left: 12px !important;
  color: #1a252f !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.3s ease !important;
  min-width: 250px !important;
}

#botonPanicoModal .dataTables_filter input[type="search"]:focus,
#puntosDeControlModal .dataTables_filter input[type="search"]:focus,
#empleadosModal .dataTables_filter input[type="search"]:focus,
#objetivosModal .dataTables_filter input[type="search"]:focus,
#presentismoModal .dataTables_filter input[type="search"]:focus,
#hombreVivoModal .dataTables_filter input[type="search"]:focus,
#novedadesModal .dataTables_filter input[type="search"]:focus {
  outline: none !important;
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.3) !important;
  background: #ffffff !important;
  color: #1a252f !important;
}

#botonPanicoModal .dataTables_filter input[type="search"]::placeholder,
#puntosDeControlModal .dataTables_filter input[type="search"]::placeholder,
#empleadosModal .dataTables_filter input[type="search"]::placeholder,
#objetivosModal .dataTables_filter input[type="search"]::placeholder,
#presentismoModal .dataTables_filter input[type="search"]::placeholder,
#hombreVivoModal .dataTables_filter input[type="search"]::placeholder,
#novedadesModal .dataTables_filter input[type="search"]::placeholder {
  color: #6c757d !important;
  font-style: italic !important;
  font-weight: 500 !important;
}

/* Estilo FORZADO para el selector de cantidad de registros */
#botonPanicoModal .dataTables_length,
#puntosDeControlModal .dataTables_length,
#empleadosModal .dataTables_length,
#objetivosModal .dataTables_length,
#presentismoModal .dataTables_length,
#hombreVivoModal .dataTables_length,
#novedadesModal .dataTables_length {
  margin-bottom: 15px;
}

#botonPanicoModal .dataTables_length label,
#puntosDeControlModal .dataTables_length label,
#empleadosModal .dataTables_length label,
#objetivosModal .dataTables_length label,
#presentismoModal .dataTables_length label,
#hombreVivoModal .dataTables_length label,
#novedadesModal .dataTables_length label {
  color: #1a252f !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  border: 2px solid #2c3e50 !important;
  display: inline-block !important;
}

/* Asegurar que TODOS los textos dentro de los labels sean negros */
#botonPanicoModal .dataTables_length label *,
#puntosDeControlModal .dataTables_length label *,
#empleadosModal .dataTables_length label *,
#objetivosModal .dataTables_length label *,
#presentismoModal .dataTables_length label *,
#hombreVivoModal .dataTables_length label *,
#novedadesModal .dataTables_length label * {
  color: #1a252f !important;
}

#botonPanicoModal .dataTables_length select,
#puntosDeControlModal .dataTables_length select,
#empleadosModal .dataTables_length select,
#objetivosModal .dataTables_length select,
#presentismoModal .dataTables_length select,
#hombreVivoModal .dataTables_length select,
#novedadesModal .dataTables_length select {
  background: #ffffff !important;
  border: 3px solid #2c3e50 !important;
  border-radius: 8px !important;
  padding: 8px 15px !important;
  margin: 0 12px !important;
  color: #1a252f !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  min-width: 80px !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
}

#botonPanicoModal .dataTables_length select:focus,
#puntosDeControlModal .dataTables_length select:focus,
#empleadosModal .dataTables_length select:focus,
#objetivosModal .dataTables_length select:focus,
#presentismoModal .dataTables_length select:focus,
#hombreVivoModal .dataTables_length select:focus,
#novedadesModal .dataTables_length select:focus {
  outline: none !important;
  border-color: #e74c3c !important;
  box-shadow: 0 0 0 4px rgba(231, 76, 60, 0.3) !important;
  background: #ffffff !important;
  color: #1a252f !important;
}

/* Estilo FORZADO para la información de paginación */
#botonPanicoModal .dataTables_info,
#puntosDeControlModal .dataTables_info,
#empleadosModal .dataTables_info,
#objetivosModal .dataTables_info,
#presentismoModal .dataTables_info,
#hombreVivoModal .dataTables_info,
#novedadesModal .dataTables_info {
  color: #1a252f !important;
  font-weight: 700 !important;
  font-size: 15px !important;
  text-shadow: 2px 2px 4px rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.95) !important;
  padding: 12px 20px !important;
  border-radius: 10px !important;
  margin-top: 15px !important;
  border: 2px solid #2c3e50 !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

/* Estilo FORZADO para los controles de paginación */
#botonPanicoModal .dataTables_paginate,
#puntosDeControlModal .dataTables_paginate,
#empleadosModal .dataTables_paginate,
#objetivosModal .dataTables_paginate,
#presentismoModal .dataTables_paginate,
#hombreVivoModal .dataTables_paginate,
#novedadesModal .dataTables_paginate {
  margin-top: 20px !important;
}

#botonPanicoModal .dataTables_paginate .paginate_button,
#puntosDeControlModal .dataTables_paginate .paginate_button,
#empleadosModal .dataTables_paginate .paginate_button,
#objetivosModal .dataTables_paginate .paginate_button,
#presentismoModal .dataTables_paginate .paginate_button,
#hombreVivoModal .dataTables_paginate .paginate_button,
#novedadesModal .dataTables_paginate .paginate_button {
  color: #1a252f !important;
  background: #ffffff !important;
  border: 2px solid #2c3e50 !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  margin: 0 4px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8) !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1) !important;
}

#botonPanicoModal .dataTables_paginate .paginate_button:hover,
#puntosDeControlModal .dataTables_paginate .paginate_button:hover,
#empleadosModal .dataTables_paginate .paginate_button:hover,
#objetivosModal .dataTables_paginate .paginate_button:hover,
#presentismoModal .dataTables_paginate .paginate_button:hover,
#hombreVivoModal .dataTables_paginate .paginate_button:hover,
#novedadesModal .dataTables_paginate .paginate_button:hover {
  color: #ffffff !important;
  background: linear-gradient(135deg, #3498db, #2980b9) !important;
  border-color: #2980b9 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 15px rgba(52, 152, 219, 0.4) !important;
  text-shadow: none !important;
}

#botonPanicoModal .dataTables_paginate .paginate_button.current,
#puntosDeControlModal .dataTables_paginate .paginate_button.current,
#empleadosModal .dataTables_paginate .paginate_button.current,
#objetivosModal .dataTables_paginate .paginate_button.current,
#presentismoModal .dataTables_paginate .paginate_button.current,
#hombreVivoModal .dataTables_paginate .paginate_button.current,
#novedadesModal .dataTables_paginate .paginate_button.current {
  color: #ffffff !important;
  background: linear-gradient(135deg, #e74c3c, #c0392b) !important;
  border-color: #c0392b !important;
  font-weight: 700 !important;
  box-shadow: 0 4px 15px rgba(231, 76, 60, 0.4) !important;
  text-shadow: none !important;
}

/* Wrapper general FORZADO para DataTables en modales del supervisor */
#botonPanicoModal .dataTables_wrapper,
#puntosDeControlModal .dataTables_wrapper,
#empleadosModal .dataTables_wrapper,
#objetivosModal .dataTables_wrapper,
#presentismoModal .dataTables_wrapper,
#hombreVivoModal .dataTables_wrapper,
#novedadesModal .dataTables_wrapper {
  background: rgba(255, 255, 255, 0.2) !important;
  border-radius: 15px !important;
  padding: 20px !important;
  backdrop-filter: blur(15px) !important;
  border: 2px solid rgba(255, 255, 255, 0.3) !important;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15) !important;
  color: #1a252f !important;
}

/* Forzar color negro en TODOS los textos de DataTables */
#botonPanicoModal .dataTables_wrapper *,
#puntosDeControlModal .dataTables_wrapper *,
#empleadosModal .dataTables_wrapper *,
#objetivosModal .dataTables_wrapper *,
#presentismoModal .dataTables_wrapper *,
#hombreVivoModal .dataTables_wrapper *,
#novedadesModal .dataTables_wrapper * {
  color: #1a252f !important;
}

/* Excepciones para elementos específicos que necesitan colores diferentes */
#botonPanicoModal .dataTables_wrapper .paginate_button:hover,
#puntosDeControlModal .dataTables_wrapper .paginate_button:hover,
#empleadosModal .dataTables_wrapper .paginate_button:hover,
#objetivosModal .dataTables_wrapper .paginate_button:hover,
#presentismoModal .dataTables_wrapper .paginate_button:hover,
#hombreVivoModal .dataTables_wrapper .paginate_button:hover,
#novedadesModal .dataTables_wrapper .paginate_button:hover {
  color: #ffffff !important;
}

#botonPanicoModal .dataTables_wrapper .paginate_button.current,
#puntosDeControlModal .dataTables_wrapper .paginate_button.current,
#empleadosModal .dataTables_wrapper .paginate_button.current,
#objetivosModal .dataTables_wrapper .paginate_button.current,
#presentismoModal .dataTables_wrapper .paginate_button.current,
#hombreVivoModal .dataTables_wrapper .paginate_button.current,
#novedadesModal .dataTables_wrapper .paginate_button.current {
  color: #ffffff !important;
}

/* Estilos responsive para móviles FORZADOS */
@media (max-width: 768px) {
  #botonPanicoModal .dataTables_filter label,
  #puntosDeControlModal .dataTables_filter label,
  #empleadosModal .dataTables_filter label,
  #objetivosModal .dataTables_filter label,
  #presentismoModal .dataTables_filter label,
  #hombreVivoModal .dataTables_filter label,
  #novedadesModal .dataTables_filter label,
  #botonPanicoModal .dataTables_length label,
  #puntosDeControlModal .dataTables_length label,
  #empleadosModal .dataTables_length label,
  #objetivosModal .dataTables_length label,
  #presentismoModal .dataTables_length label,
  #hombreVivoModal .dataTables_length label,
  #novedadesModal .dataTables_length label {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
  }
  
  #botonPanicoModal .dataTables_filter input[type="search"],
  #puntosDeControlModal .dataTables_filter input[type="search"],
  #empleadosModal .dataTables_filter input[type="search"],
  #objetivosModal .dataTables_filter input[type="search"],
  #presentismoModal .dataTables_filter input[type="search"],
  #hombreVivoModal .dataTables_filter input[type="search"],
  #novedadesModal .dataTables_filter input[type="search"],
  #botonPanicoModal .dataTables_length select,
  #puntosDeControlModal .dataTables_length select,
  #empleadosModal .dataTables_length select,
  #objetivosModal .dataTables_length select,
  #presentismoModal .dataTables_length select,
  #hombreVivoModal .dataTables_length select,
  #novedadesModal .dataTables_length select {
    width: 100% !important;
    margin: 0 !important;
    min-width: auto !important;
  }
  
  #botonPanicoModal .dataTables_info,
  #puntosDeControlModal .dataTables_info,
  #empleadosModal .dataTables_info,
  #objetivosModal .dataTables_info,
  #presentismoModal .dataTables_info,
  #hombreVivoModal .dataTables_info,
  #novedadesModal .dataTables_info {
    font-size: 13px !important;
    text-align: center !important;
    padding: 10px 15px !important;
  }
  
  #botonPanicoModal .dataTables_paginate .paginate_button,
  #puntosDeControlModal .dataTables_paginate .paginate_button,
  #empleadosModal .dataTables_paginate .paginate_button,
  #objetivosModal .dataTables_paginate .paginate_button,
  #presentismoModal .dataTables_paginate .paginate_button,
  #hombreVivoModal .dataTables_paginate .paginate_button,
  #novedadesModal .dataTables_paginate .paginate_button {
    padding: 6px 12px !important;
    margin: 0 2px !important;
    font-size: 13px !important;
  }
}