/* Cards - Glassmorphism */
.card {
  background: hsl(var(--card-bg) / 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid hsl(var(--border-color) / 0.3);
  border-radius: var(--radius-lg);
  padding: 2rem;
  transition: all 0.3s ease;
}

.card-manager:hover { border-color: hsl(var(--primary) / 0.6); }
.card-receptionist:hover { border-color: hsl(var(--accent) / 0.6); }

/* Glows de Texto */
.text-glow-violet { text-shadow: 0 0 15px hsl(var(--primary) / 0.0); }
.text-glow-orange { text-shadow: 0 0 15px hsl(var(--accent) / 0.0); }
.text-primary { color: hsl(var(--primary)); }
.text-accent { color: hsl(var(--accent)); }
.text-muted { color: hsl(var(--muted-fg)); }

/* Botones y Glows Neón */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 3rem;
  padding: 0 2rem;
  border-radius: var(--radius-md);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
  border: none;
  font-family: inherit;
  font-size: 1rem;
}

.btn-manager {
  background: hsl(var(--primary));
  color: hsl(var(--fg-color));
  box-shadow: 0 0 20px hsl(var(--primary) / 0.3), 0 0 40px hsl(var(--primary) / 0.15);
}
.btn-manager:hover {
  background: hsl(var(--primary) / 0.9);
  box-shadow: 0 0 30px hsl(var(--primary) / 0.5), 0 0 60px hsl(var(--primary) / 0.25);
}

.btn-receptionist {
  background: hsl(var(--accent));
  color: hsl(var(--fg-color));
  box-shadow: 0 0 20px hsl(var(--accent) / 0.3), 0 0 40px hsl(var(--accent) / 0.15);
}
.btn-receptionist:hover {
  background: hsl(var(--accent) / 0.9);
  box-shadow: 0 0 30px hsl(var(--accent) / 0.5), 0 0 60px hsl(var(--accent) / 0.25);
}

/* Inputs */
.input-field {
  width: 100%;
  background: hsl(var(--input-bg) / 0.5);
  border: 1px solid hsl(var(--border-color));
  color: hsl(var(--fg-color));
  border-radius: var(--radius-md);
  padding: 0.75rem 1rem;
  font-family: inherit;
  transition: border-color 0.3s;
}
.input-field:focus {
  outline: none;
  border-color: hsl(var(--primary));
}

/* Utils Estructurales */
.container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.text-center { text-align: center; }
.animate-fade-in { animation: fadeIn 0.5s ease-out forwards; }
.animate-scale-in { animation: scaleIn 0.3s ease-out forwards; }

/* =========================================
   MODALES INMERSIVOS (SERVICIOS)
   ========================================= */
.modal-overlay {
  position: fixed; top: 0; left: 0; width: 100%; height: 100%;
  background: rgba(0,0,0,0.85); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  z-index: 1000; display: flex; justify-content: center; align-items: center; padding: 1.5rem;
  opacity: 0; visibility: hidden; transition: all 0.3s ease;
}
.modal-overlay.open { opacity: 1; visibility: visible; }

.modal-content::-webkit-scrollbar, .modal-info::-webkit-scrollbar, .ads-visual-section::-webkit-scrollbar { width: 6px; height: 6px; }
.modal-content::-webkit-scrollbar-track, .modal-info::-webkit-scrollbar-track { background: hsl(var(--bg-color)); border-radius: 10px; }
.modal-content::-webkit-scrollbar-thumb, .modal-info::-webkit-scrollbar-thumb { background: hsl(var(--border-color)); border-radius: 10px; }
.modal-content::-webkit-scrollbar-thumb:hover, .modal-info::-webkit-scrollbar-thumb:hover { background: hsl(var(--primary)); }

.modal-content {
  background: hsl(var(--bg-color)); width: 100%; max-width: 1200px; height: 85vh;
  border-radius: var(--radius-lg); border: 1px solid hsl(var(--primary) / 0.3);
  box-shadow: 0 0 50px hsl(var(--primary) / 0.15);
  position: relative; overflow: hidden;
  transform: scale(0.95); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.modal-overlay.open .modal-content { transform: scale(1); }

.modal-content.split-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
}

.modal-content.scroll-layout {
  display: block;
  overflow-y: auto; 
  overflow-x: hidden;
}

@media (max-width: 900px) {
  .modal-content.split-layout { grid-template-columns: 1fr; height: 95vh; overflow-y: auto; }
}

/* Botonera Flotante */
.modal-controls { position: absolute; top: 1.5rem; right: 1.5rem; display: flex; gap: 0.75rem; z-index: 50; }
.control-btn {
  width: 40px; height: 40px; background: hsl(var(--bg-color)/0.8); border: 1px solid hsl(var(--border-color));
  color: hsl(var(--fg-color)); border-radius: 50%; display: flex; align-items: center; justify-content: center;
  cursor: pointer; backdrop-filter: blur(4px); transition: all 0.3s;
}
.control-btn:hover { background: hsl(var(--primary)); color: white; transform: scale(1.1); }
.control-btn.close:hover { background: hsl(var(--destructive)); transform: rotate(90deg); }

/* Secciones Internas */
.modal-info { padding: 4rem 3rem; overflow-y: auto; }
.split-layout .modal-info { border-right: 1px solid hsl(var(--border-color) / 0.3); }
.scroll-layout .modal-info { border-bottom: 1px solid hsl(var(--border-color) / 0.3); }

.modal-visual { background: #000; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; overflow: hidden; }

/* Sliders Generales */
.slider-container { width: 100%; height: 100%; position: relative; display: flex; justify-content: center; align-items: center; }
.slide { display: none; opacity: 0; transition: opacity 0.4s ease; max-width: 100%; max-height: 100%; object-fit: contain; }
.slide.active { display: block; opacity: 1; }

.slider-nav {
  position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px;
  background: hsl(var(--bg-color) / 0.5); border: 1px solid hsl(var(--primary) / 0.5); color: white;
  border-radius: 50%; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(4px); transition: all 0.3s;
}
.slider-nav:hover { background: hsl(var(--primary)); box-shadow: 0 0 15px hsl(var(--primary) / 0.5); }
.prev-btn { left: 1rem; }
.next-btn { right: 1rem; }

/* Pantalla Completa & Dashboard */
.modal-content.is-fullscreen { width: 100vw; max-width: 100%; height: 100vh; border-radius: 0; border: none; }
.ads-visual-section { height: auto; padding: 2rem 0; background: #000; text-align: center; }
.dashboard-wrapper { width: 100%; height: 100vh; display: flex; flex-direction: column; padding: 2rem; background: hsl(var(--bg-color)); border-top: 1px solid hsl(var(--border-color)/0.3); }
.dashboard-iframe { flex: 1; width: 100%; border: 1px solid hsl(var(--primary) / 0.3); border-radius: var(--radius-md); background: white; }

/* =========================================
   Navegación Global (Header)
   ========================================= */
.navbar { width: 100%; padding: 1.5rem 0; position: relative; z-index: 100; }
.nav-container { 
  display: flex; align-items: center; justify-content: space-between; 
  max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; position: relative; 
}

.nav-logo { font-size: 2rem; font-weight: 700; letter-spacing: -1px; z-index: 101; }
.nav-links { display: flex; gap: 2rem; align-items: center; font-weight: 500; }
.nav-link { transition: color 0.3s; color: hsl(var(--fg-color)); }
.nav-link:hover { color: hsl(var(--primary)); }

.nav-toggle { 
  display: none; background: none; border: none; color: hsl(var(--fg-color)); 
  cursor: pointer; z-index: 101; padding: 0.5rem; 
}

/* Footer Global */
.site-footer { border-top: 1px solid hsl(var(--border-color) / 0.3); padding: 4rem 1.5rem; margin-top: 6rem; text-align: center; }
.footer-container { max-width: 1200px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.5rem; align-items: center; }

/* 📱 VERSIÓN MÓVIL (< 768px) */
@media (max-width: 768px) {
  .nav-container { justify-content: center; } /* Centra el logo */
  .nav-toggle { display: block; position: absolute; left: 1.5rem; } /* Hamburguesa a la izquierda */
  
  /* Menú Desplegable Pantalla Completa */
  .nav-links { 
    position: fixed; top: 0; left: 0; width: 100%; height: 100vh; 
    background: hsl(var(--bg-color) / 0.95); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
    flex-direction: column; justify-content: center; gap: 2.5rem;
    transform: translateY(-100%); opacity: 0; visibility: hidden; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    z-index: 100; font-size: 1.5rem;
  }
  
  .nav-links.active { transform: translateY(0); opacity: 1; visibility: visible; }
  .nav-cta { margin-top: 1rem; width: 80%; max-width: 300px; }
}

/* =========================================
   Skeleton Loaders (Carga de Alta Velocidad)
   ========================================= */
@keyframes shimmer {
  0% { background-position: -1000px 0; }
  100% { background-position: 1000px 0; }
}

.skeleton {
  background: hsl(var(--card-bg));
  background-image: linear-gradient(
    90deg,
    hsl(var(--card-bg)) 0px,
    hsl(var(--primary) / 0.1) 50%,
    hsl(var(--card-bg)) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 2s infinite linear;
  border-radius: var(--radius-md);
}

.skeleton-card {
  height: 350px;
  border: 1px solid hsl(var(--border-color)/0.3);
  border-radius: var(--radius-lg);
  display: flex;
  flex-direction: column;
  padding: 2rem;
  gap: 1rem;
}

.skeleton-title { height: 28px; width: 80%; }
.skeleton-text { height: 16px; width: 100%; }
.skeleton-text-short { height: 16px; width: 60%; }
.skeleton-btn { height: 48px; width: 100%; margin-top: auto; border-radius: 50px; }