/* 
   ADMINISTRATIVO PANEL Y OPTIMIZADO PARA MEJOR RENDIMIENTO ES LOS DIPOSITIVO Y RESPONSIVE TAMBIEN
*/

/* 
   LOGIN
*/

#login-screen {
  /* Esto hace el fondo con gradiente vibrante y partículas */
  background: linear-gradient(135deg,
      #667eea 0%,
      #764ba2 50%,
      #f093fb 100%) !important;
  background-size: 400% 400% !important;
  animation: gradientFlow 15s ease infinite !important;
  position: relative !important;
  overflow: hidden !important;
  will-change: background-position;
}

/* Animación de fondo suave */
@keyframes gradientFlow {

  0%,
  100% {
    background-position: 0% 50%;
  }

  50% {
    background-position: 100% 50%;
  }
}

/* Partículas decorativas en el fondo */
#login-screen::before,
#login-screen::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  will-change: transform;
  filter: blur(60px);
}

#login-screen::before {
  width: 600px;
  height: 600px;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.15) 0%,
      transparent 70%);
  top: -200px;
  right: -200px;
  animation: floatParticle 20s ease-in-out infinite;
}

#login-screen::after {
  width: 450px;
  height: 450px;
  background: radial-gradient(circle,
      rgba(255, 255, 255, 0.1) 0%,
      transparent 70%);
  bottom: -150px;
  left: -150px;
  animation: floatParticle 18s ease-in-out infinite reverse;
}

@keyframes floatParticle {

  0%,
  100% {
    transform: translate(0, 0) scale(1) rotate(0deg);
  }

  50% {
    transform: translate(30px, -30px) scale(1.1) rotate(180deg);
  }
}

/* Container del login */
.login-container {
  position: relative !important;
  z-index: 10 !important;
  animation: fadeInUp 0.6s ease-out !important;
  will-change: transform, opacity;
}

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

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Logo más grande con animación */
.login-logo img {
  width: 110px !important;
  height: 110px !important;
  filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.3)) !important;
  animation: subtleBounce 2.5s ease-in-out infinite !important;
  will-change: transform;
}

@keyframes subtleBounce {

  0%,
  100% {
    transform: translateY(0) scale(1);
  }

  50% {
    transform: translateY(-8px) scale(1.05);
  }
}

/* Título con relieve 3D */
.login-logo h1 {
  font-size: 2.5rem !important;
  font-weight: 900 !important;
  letter-spacing: 2px !important;
  color: #ffffff !important;
  text-shadow: 0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9,
    0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
    0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2),
    0 5px 10px rgba(0, 0, 0, 0.25), 0 10px 20px rgba(0, 0, 0, 0.15) !important;
  transform: translateY(-2px);
}

/* Tarjeta login glassmorphism */
.login-card {
  background: rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-radius: 24px !important;
  padding: 3rem 2.5rem !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35),
    0 10px 30px rgba(124, 58, 237, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.2) !important;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
}

.login-card:hover {
  transform: translateY(-5px) scale(1.01) !important;
  box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4),
    0 15px 40px rgba(124, 58, 237, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
}

.login-card h2 {
  background: linear-gradient(135deg, #ffffff 0%, #e0e7ff 100%) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  font-size: 1.75rem !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  margin-bottom: 2.5rem !important;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

/* Input con efecto de glassmorphism */
.form-group label {
  color: rgba(255, 255, 255, 0.95) !important;
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin-bottom: 0.75rem !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

.form-group input {
  padding: 1.125rem 1.25rem !important;
  background: rgba(255, 255, 255, 0.15) !important;
  backdrop-filter: blur(12px) !important;
  border: 2px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 14px !important;
  color: white !important;
  font-weight: 500 !important;
  transition: all 0.3s ease !important;
  will-change: transform, border-color;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.form-group input::placeholder {
  color: rgba(255, 255, 255, 0.6) !important;
}

.form-group input:focus {
  background: rgba(255, 255, 255, 0.2) !important;
  border-color: rgba(167, 139, 250, 0.7) !important;
  box-shadow: 0 0 0 4px rgba(167, 139, 250, 0.2),
    0 8px 20px rgba(124, 58, 237, 0.2) !important;
  transform: translateY(-2px) !important;
}

/* Botón con gradiente */
.btn-primary {
  padding: 1.25rem !important;
  background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%) !important;
  border-radius: 14px !important;
  font-size: 1.125rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  box-shadow: 0 10px 30px rgba(124, 58, 237, 0.4) !important;
  transition: all 0.3s ease !important;
  will-change: transform, box-shadow;
  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.6s;
}

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

.btn-primary:hover {
  transform: translateY(-3px) scale(1.02) !important;
  box-shadow: 0 15px 40px rgba(124, 58, 237, 0.5) !important;
  background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%) !important;
}

.btn-primary:active {
  transform: translateY(-1px) scale(1.01) !important;
}

/* 
  AQUI TODA LA PARTE DEL DASHBOARD 
*/

/* Stats con gradientes */
.stat-card {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform;
  border-left-width: 5px !important;
}

.stat-card:hover {
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.15) !important;
}

.stat-primary {
  border-color: #8b5cf6 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f5f3ff 100%) !important;
}

.stat-success {
  border-color: #10b981 !important;
  background: linear-gradient(135deg, #ffffff 0%, #f0fdf4 100%) !important;
}

.stat-warning {
  border-color: #f59e0b !important;
  background: linear-gradient(135deg, #ffffff 0%, #fffbeb 100%) !important;
}

.stat-info {
  border-color: #3b82f6 !important;
  background: linear-gradient(135deg, #ffffff 0%, #eff6ff 100%) !important;
}

.stat-purple {
  border-color: #a855f7 !important;
  background: linear-gradient(135deg, #ffffff 0%, #faf5ff 100%) !important;
}

.stat-primary .stat-icon {
  background: linear-gradient(135deg,
      rgba(139, 92, 246, 0.2) 0%,
      rgba(124, 58, 237, 0.2) 100%) !important;
  color: #7c3aed !important;
  box-shadow: 0 4px 12px rgba(124, 58, 237, 0.2);
}

.stat-success .stat-icon {
  background: linear-gradient(135deg,
      rgba(16, 185, 129, 0.2) 0%,
      rgba(5, 150, 105, 0.2) 100%) !important;
  color: #059669 !important;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.2);
}

.stat-warning .stat-icon {
  background: linear-gradient(135deg,
      rgba(245, 158, 11, 0.2) 0%,
      rgba(217, 119, 6, 0.2) 100%) !important;
  color: #d97706 !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
}

.stat-info .stat-icon {
  background: linear-gradient(135deg,
      rgba(59, 130, 246, 0.2) 0%,
      rgba(37, 99, 235, 0.2) 100%) !important;
  color: #2563eb !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.stat-purple .stat-icon {
  background: linear-gradient(135deg,
      rgba(168, 85, 247, 0.2) 0%,
      rgba(147, 51, 234, 0.2) 100%) !important;
  color: #9333ea !important;
  box-shadow: 0 4px 12px rgba(168, 85, 247, 0.2);
}

.stat-value {
  background: linear-gradient(135deg, #1f2937 0%, #4b5563 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* 
  TABLA DE RESERVAS
 */

/* Animación al cargar datos */
#tabla-reservas tbody tr {
  animation: fadeInRow 0.5s ease-out backwards;
  will-change: opacity, transform;
  transition: all 0.3s ease;
}

#tabla-reservas tbody tr:nth-child(1) {
  animation-delay: 0.05s;
}

#tabla-reservas tbody tr:nth-child(2) {
  animation-delay: 0.1s;
}

#tabla-reservas tbody tr:nth-child(3) {
  animation-delay: 0.15s;
}

#tabla-reservas tbody tr:nth-child(4) {
  animation-delay: 0.2s;
}

#tabla-reservas tbody tr:nth-child(5) {
  animation-delay: 0.25s;
}

#tabla-reservas tbody tr:nth-child(6) {
  animation-delay: 0.3s;
}

#tabla-reservas tbody tr:nth-child(7) {
  animation-delay: 0.35s;
}

#tabla-reservas tbody tr:nth-child(8) {
  animation-delay: 0.4s;
}

@keyframes fadeInRow {
  from {
    opacity: 0;
    transform: translateX(-15px);
  }

  to {
    opacity: 1;
    transform: translateX(0);
  }
}

#tabla-reservas tbody tr:hover {
  background: linear-gradient(90deg,
      rgba(124, 58, 237, 0.05) 0%,
      transparent 100%) !important;
  transform: translateX(3px);
}

/* Badges de estado */
.estado-select {
  font-weight: 700 !important;
  border-radius: 10px !important;
  padding: 0.75rem 1.125rem !important;
  transition: all 0.3s ease !important;
  border-width: 2px !important;
  cursor: pointer !important;
}

.estado-select[style*="background: #FEF3C7"] {
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%) !important;
  border-color: #f59e0b !important;
  color: #92400e !important;
  box-shadow: 0 2px 8px rgba(245, 158, 11, 0.2);
}

.estado-select[style*="background: #D1FAE5"] {
  background: linear-gradient(135deg, #d1fae5 0%, #a7f3d0 100%) !important;
  border-color: #10b981 !important;
  color: #065f46 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.2);
}

.estado-select[style*="background: #FEE2E2"] {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%) !important;
  border-color: #ef4444 !important;
  color: #991b1b !important;
  box-shadow: 0 2px 8px rgba(239, 68, 68, 0.2);
}

.estado-select:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

/* Botones de acción */
.btn-edit,
.btn-delete {
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  will-change: transform, box-shadow;
  font-weight: 700 !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-edit {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
}

.btn-edit:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(124, 58, 237, 0.4) !important;
  background: linear-gradient(135deg, #6d28d9 0%, #7c3aed 100%) !important;
}

.btn-delete {
  background: linear-gradient(135deg, #ef4444 0%, #f87171 100%) !important;
}

.btn-delete:hover {
  transform: translateY(-3px) scale(1.05) !important;
  box-shadow: 0 6px 20px rgba(239, 68, 68, 0.4) !important;
  background: linear-gradient(135deg, #dc2626 0%, #ef4444 100%) !important;
}

/* 
  INDICADORES Y NOTIFICACIONES
*/

.notification-badge {
  animation: pulseNotification 2s ease-in-out infinite;
  font-weight: 800;
}

@keyframes pulseNotification {

  0%,
  100% {
    transform: scale(1);
    box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.7);
  }

  50% {
    transform: scale(1.1);
    box-shadow: 0 0 0 6px rgba(239, 68, 68, 0);
  }
}

.btn-icon:hover {
  background: linear-gradient(135deg, #7c3aed 0%, #8b5cf6 100%) !important;
  transform: translateY(-2px) scale(1.05);
}

/* 
PARTE RESPONSIVE PARA TELEFONOS Y TABLETS PARA TENER MEJOR RENDIMIENTO
*/

/* Tablets */
@media (max-width: 1024px) {

  /* Login responsive */
  .login-container {
    max-width: 420px !important;
  }

  .login-logo img {
    width: 95px !important;
    height: 95px !important;
  }

  .login-logo h1 {
    font-size: 2.25rem !important;
  }

  .login-card {
    padding: 2.5rem 2rem !important;
  }

  /* Dashboard */
  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
    gap: 1.25rem !important;
  }

  /* Tabla */
  .table-wrapper {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }
}

/* Móviles max-width: 768px */
@media (max-width: 768px) {

  /* Login móvil */
  #login-screen {
    padding: 1.5rem !important;
  }

  .login-container {
    max-width: 100% !important;
  }

  .login-logo img {
    width: 85px !important;
    height: 85px !important;
  }

  .login-logo h1 {
    font-size: 2rem !important;
    text-shadow: 0 1px 0 #ccc, 0 2px 0 #bbb, 0 3px 0 #aaa,
      0 4px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1),
      0 2px 3px rgba(0, 0, 0, 0.3), 0 4px 8px rgba(0, 0, 0, 0.15) !important;
  }

  .login-card {
    padding: 2rem 1.75rem !important;
    border-radius: 20px !important;
  }

  .login-card h2 {
    font-size: 1.5rem !important;
  }

  .form-group input {
    padding: 1rem 1.125rem !important;
    font-size: 1rem !important;
  }

  .btn-primary {
    padding: 1.125rem !important;
    font-size: 1.05rem !important;
  }

  /* Dashboard para movil */
  .main-content {
    padding: 1rem !important;
  }

  .dashboard-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 1rem !important;
    padding: 1.25rem !important;
  }

  .header-title h1 {
    font-size: 1.5rem !important;
  }

  .header-title p {
    font-size: 0.875rem !important;
  }

  /* Estadísticas en movil */
  .stats-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .stat-card {
    padding: 1.25rem !important;
  }

  .stat-value {
    font-size: 1.625rem !important;
  }

  /* Filtros en movil */
  .search-filters-container {
    padding: 1.25rem !important;
    gap: 1rem !important;
  }

  .search-box {
    max-width: 100% !important;
  }

  .filters-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.875rem !important;
  }

  .filter-group {
    width: 100% !important;
    flex-direction: column !important;
    align-items: flex-start !important;
  }

  .filter-select,
  .filter-date {
    width: 100% !important;
    min-width: 100% !important;
  }

  .btn-clear-filters {
    width: 100% !important;
    justify-content: center !important;
  }

  /* Tabla en móvil */
  #tabla-reservas {
    font-size: 0.875rem !important;
  }

  #tabla-reservas th,
  #tabla-reservas td {
    padding: 0.875rem 0.625rem !important;
    font-size: 0.875rem !important;
  }

  .action-buttons {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  .btn-edit,
  .btn-delete {
    width: 100% !important;
    font-size: 0.875rem !important;
    padding: 0.625rem 0.875rem !important;
  }
}

/* Móviles pequeños max-width: 480px */
@media (max-width: 480px) {

  /* Login en móviles pequeños */
  #login-screen {
    padding: 1rem !important;
  }

  .login-card {
    padding: 1.75rem 1.5rem !important;
  }

  .login-logo img {
    width: 75px !important;
    height: 75px !important;
  }

  .login-logo h1 {
    font-size: 1.75rem !important;
  }

  /* Dashboard en moviles pequeños */
  .stat-icon {
    width: 45px !important;
    height: 45px !important;
  }

  .stat-label {
    font-size: 0.875rem !important;
  }

  .stat-value {
    font-size: 1.5rem !important;
  }

  /* Tabla muy compacta */
  #tabla-reservas th,
  #tabla-reservas td {
    padding: 0.75rem 0.5rem !important;
    font-size: 0.8125rem !important;
  }
}

/* 
  OPTIMIZACIONES DE RENDIMIENTO
*/

/* GPU acceleration */
.login-card,
.stat-card,
.btn-primary,
.btn-edit,
.btn-delete,
#tabla-reservas tbody tr {
  transform: translateZ(0);
  backface-visibility: hidden;
  perspective: 1000px;
}

/* Reducir repaints en scroll */
.table-wrapper {
  contain: layout style paint;
}

/* Optimizar blur */
@supports (backdrop-filter: blur(10px)) or (-webkit-backdrop-filter: blur(10px)) {
  .login-card {
    backdrop-filter: blur(20px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  }

  .form-group input {
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }
}

/* Fallback backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
  .login-card {
    background: rgba(255, 255, 255, 0.15) !important;
  }

  .form-group input {
    background: rgba(255, 255, 255, 0.2) !important;
  }
}