/*
Theme Name: Instituto Clínico SYNAPTA
Theme URI: https://www.clinica-synapta.com
Author: SYNAPTA Team
Author URI: https://www.clinica-synapta.com
Description: Tema profesional para clínica de fisioterapia con diseño moderno en modo oscuro, efecto glassmorphism y animaciones suaves. Inspirado en Mercedes-Benz con paleta cyan/teal.
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: synapta
Tags: dark, healthcare, medical, physiotherapy, glassmorphism, modern, responsive
*/

/* ==========================================================================
   SYNAPTA CLINIC - WORDPRESS THEME
   ========================================================================== */

/* Reset y Variables Base */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  /* Colores principales cyan/teal */
  --cyan-50: #ecfeff;
  --cyan-100: #cffafe;
  --cyan-200: #a5f3fc;
  --cyan-300: #67e8f9;
  --cyan-400: #22d3ee;
  --cyan-500: #06b6d4;
  --cyan-600: #0891b2;
  --cyan-700: #0e7490;
  --cyan-800: #155e75;
  --cyan-900: #164e63;
  --cyan-950: #083344;
  
  --teal-50: #f0fdfa;
  --teal-100: #ccfbf1;
  --teal-200: #99f6e4;
  --teal-300: #5eead4;
  --teal-400: #2dd4bf;
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --teal-900: #134e4a;
  --teal-950: #042f2e;
  
  /* Colores zinc/gray para backgrounds */
  --zinc-50: #fafafa;
  --zinc-100: #f4f4f5;
  --zinc-200: #e4e4e7;
  --zinc-300: #d4d4d8;
  --zinc-400: #a1a1aa;
  --zinc-500: #71717a;
  --zinc-600: #52525b;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;
  
  /* Tipografía */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Espaciado */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  --spacing-4xl: 6rem;
  
  /* Border radius */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-2xl: 1.5rem;
  
  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-cyan: 0 20px 25px -5px rgba(34, 211, 238, 0.5);
}

/* WordPress Admin Bar Adjustment */
.admin-bar .navbar {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .navbar {
    top: 46px;
  }
}

/* Base Styles */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-sans);
  background-color: var(--zinc-950);
  color: var(--zinc-100);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* WordPress Content Cleanup */
.wp-block-post-content,
.entry-content,
.wp-block-group {
  max-width: 100%;
}

img {
  max-width: 100%;
  height: auto;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
  color: var(--zinc-50);
  font-weight: 700;
  line-height: 1.2;
}

h1 { font-size: clamp(2rem, 5vw, 4rem); }
h2 { font-size: clamp(1.75rem, 4vw, 3rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2rem); }
h4 { font-size: 1.25rem; }
h5 { font-size: 1.125rem; }
h6 { font-size: 1rem; }

p {
  margin-bottom: 1rem;
  color: var(--zinc-400);
}

a {
  color: var(--cyan-400);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--cyan-300);
}

/* Container */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

@media (max-width: 768px) {
  .container {
    padding: 0 1rem;
  }
}

/* Utility Classes */
.gradient-text {
  background: linear-gradient(to right, var(--cyan-400), var(--teal-400));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.gradient-bg {
  background: linear-gradient(to right, var(--cyan-500), var(--teal-500));
}

.glassmorphism {
  background: rgba(39, 39, 42, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(63, 63, 70, 0.5);
}

/* Text Utilities */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

/* Spacing Utilities */
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mb-6 { margin-bottom: 3rem; }
.mb-8 { margin-bottom: 4rem; }

.mt-1 { margin-top: 0.5rem; }
.mt-2 { margin-top: 1rem; }
.mt-3 { margin-top: 1.5rem; }
.mt-4 { margin-top: 2rem; }

.pt-20 { padding-top: 5rem; }
.pt-24 { padding-top: 6rem; }
.py-12 { padding: 3rem 0; }
.py-16 { padding: 4rem 0; }
.py-20 { padding: 5rem 0; }
.py-24 { padding: 6rem 0; }

/* ==========================================================================
   3. NAVBAR
   ========================================================================== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  transition: all 0.3s ease;
}

.navbar.scrolled {
  background: rgba(9, 9, 11, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(63, 63, 70, 0.5);
  box-shadow: 0 10px 15px -3px rgba(34, 211, 238, 0.05);
}

.navbar-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 80px;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
  gap: 2rem;
}

.navbar-logo {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  order: 1;
  min-width: 150px;
}

.navbar-logo a {
  display: flex;
  align-items: center;
  text-decoration: none;
  line-height: 0;
}

.navbar-logo .custom-logo-link {
  display: flex;
  align-items: center;
  line-height: 0;
}

.navbar-logo img,
.navbar-logo .custom-logo,
.navbar-logo .custom-logo-link img {
  height: 40px;
  width: auto;
  display: block;
  max-width: none;
}

.navbar-logo span {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.navbar-menu {
  display: flex !important;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0 auto !important;
  padding: 0 !important;
  flex: 1 1 auto;
  justify-content: center;
  order: 2;
}

.navbar-menu li {
  list-style: none;
  margin: 0;
  padding: 0;
}

.navbar-menu a {
  color: var(--zinc-300);
  text-decoration: none;
  font-size: 0.875rem;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
  font-weight: 500;
  white-space: nowrap;
}

.navbar-menu a:hover,
.navbar-menu a.active,
.navbar-menu .current-menu-item > a,
.navbar-menu .current_page_item > a {
  color: var(--cyan-400);
}

.navbar-actions {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  order: 3;
}

.navbar-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: linear-gradient(to right, var(--cyan-500), var(--teal-500));
  color: white !important;
  padding: 0.625rem 1.5rem;
  border-radius: var(--radius-lg);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
  white-space: nowrap;
}

.navbar-cta:hover {
  box-shadow: 0 20px 25px -5px rgba(34, 211, 238, 0.5);
  transform: translateY(-1px);
  color: white !important;
}

.mobile-menu-toggle {
  display: none;
  background: none;
  border: none;
  color: var(--zinc-300);
  cursor: pointer;
  padding: 0.5rem;
  font-size: 1.5rem;
  flex-shrink: 0;
}

.mobile-menu {
  display: none;
  background: rgba(24, 24, 27, 0.95);
  backdrop-filter: blur(20px);
  border-top: 1px solid rgba(63, 63, 70, 0.5);
  padding: 1.5rem 2rem;
}

.mobile-menu.active {
  display: block;
}

.mobile-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.mobile-menu li {
  list-style: none;
  margin: 0;
}

.mobile-menu a {
  display: block;
  color: var(--zinc-300);
  text-decoration: none;
  padding: 0.75rem 0;
  font-size: 1rem;
  letter-spacing: 0.05em;
  transition: color 0.2s ease;
}

.mobile-menu a:hover,
.mobile-menu a.active,
.mobile-menu .current-menu-item > a {
  color: var(--cyan-400);
}

.mobile-menu .navbar-cta {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 1rem;
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

.footer {
  background: var(--zinc-900);
  border-top: 1px solid var(--zinc-800);
  padding: 4rem 0 2rem;
}

.footer-container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 2rem;
}

.footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 3rem;
  margin-bottom: 3rem;
}

.footer-section h3 {
  font-size: 1.125rem;
  margin-bottom: 1rem;
  color: var(--cyan-400);
}

.footer-section ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-section ul li {
  margin-bottom: 0.75rem;
  list-style: none;
}

.footer-section a {
  color: var(--zinc-400);
  text-decoration: none;
  transition: color 0.2s ease;
  font-size: 0.875rem;
}

.footer-section a:hover {
  color: var(--cyan-400);
}

.footer-section p {
  color: var(--zinc-400);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

.footer-bottom {
  border-top: 1px solid var(--zinc-800);
  padding-top: 2rem;
  text-align: center;
  color: var(--zinc-500);
  font-size: 0.875rem;
}

/* ==========================================================================
   SECTIONS
   ========================================================================== */

.section {
  padding: 6rem 0;
}

.section-dark {
  background: var(--zinc-900);
}

.section-gradient {
  background: linear-gradient(to bottom right, rgba(22, 78, 99, 0.2), rgba(19, 78, 74, 0.2));
  border-top: 1px solid var(--zinc-800);
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-subtitle {
  color: var(--cyan-400);
  letter-spacing: 0.15em;
  font-size: 0.875rem;
  margin-bottom: 1rem;
  font-weight: 500;
  text-transform: uppercase;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1rem;
}

.section-description {
  color: var(--zinc-400);
  font-size: 1.125rem;
  max-width: 42rem;
  margin: 0 auto;
}

/* ==========================================================================
   BUTTONS
   ========================================================================== */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem 2rem;
  border-radius: var(--radius-lg);
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  border: none;
  font-size: 1rem;
  line-height: 1;
}

.btn-primary {
  background: linear-gradient(to right, var(--cyan-500), var(--teal-500));
  color: white !important;
}

.btn-primary:hover {
  box-shadow: 0 20px 25px -5px rgba(34, 211, 238, 0.5);
  transform: translateY(-2px);
  color: white !important;
}

.btn-secondary {
  border: 2px solid var(--zinc-700);
  color: var(--zinc-300);
  background: transparent;
}

.btn-secondary:hover {
  border-color: var(--cyan-400);
  color: var(--cyan-400);
}

/* ==========================================================================
   CARDS
   ========================================================================== */

.card {
  background: rgba(39, 39, 42, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(63, 63, 70, 0.5);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all 0.3s ease;
}

.card:hover {
  border-color: rgba(34, 211, 238, 0.5);
  transform: translateY(-4px);
}

.card-image {
  width: 100%;
  height: 250px;
  position: relative;
  overflow: hidden;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.card:hover .card-image img {
  transform: scale(1.1);
}

.card-content {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.25rem;
  margin-bottom: 0.75rem;
  transition: color 0.3s ease;
  color: var(--zinc-50);
}

.card:hover .card-title {
  color: var(--cyan-400);
}

.card-description {
  color: var(--zinc-400);
  font-size: 0.875rem;
  margin-bottom: 1rem;
}

/* ==========================================================================
   GRID LAYOUTS
   ========================================================================== */

.grid {
  display: grid;
  gap: 2rem;
}

.grid-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-3 {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}

.grid-4 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

@media (max-width: 768px) {
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ==========================================================================
   FORMS
   ========================================================================== */

.form-group {
  margin-bottom: 1.5rem;
}

.form-label {
  display: block;
  color: var(--zinc-300);
  font-size: 0.875rem;
  margin-bottom: 0.5rem;
  font-weight: 500;
}

.form-input,
.form-textarea,
.form-select {
  width: 100%;
  padding: 0.75rem 1rem;
  background: rgba(39, 39, 42, 0.5);
  border: 1px solid rgba(63, 63, 70, 0.5);
  border-radius: var(--radius-md);
  color: var(--zinc-100);
  font-size: 1rem;
  transition: all 0.2s ease;
}

.form-input:focus,
.form-textarea:focus,
.form-select:focus {
  outline: none;
  border-color: var(--cyan-400);
  box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.1);
}

.form-textarea {
  min-height: 120px;
  resize: vertical;
}

/* ==========================================================================
   WORDPRESS CONTENT
   ========================================================================== */

.wp-content {
  max-width: 1280px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

.wp-content h1,
.wp-content h2,
.wp-content h3 {
  margin-bottom: 1rem;
}

.wp-content p {
  margin-bottom: 1.5rem;
  color: var(--zinc-400);
  line-height: 1.8;
}

.wp-content a {
  color: var(--cyan-400);
  text-decoration: underline;
}

.wp-content a:hover {
  color: var(--cyan-300);
}

/* WordPress Blocks */
.wp-block-image img {
  border-radius: var(--radius-xl);
  max-width: 100%;
  height: auto;
}

.wp-block-quote {
  border-left: 4px solid var(--cyan-500);
  padding-left: 1.5rem;
  margin: 2rem 0;
  font-style: italic;
  color: var(--zinc-300);
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 1024px) {
  .navbar-container {
    gap: 1rem;
  }
  
  .navbar-menu {
    display: none !important;
  }
  
  .navbar-actions {
    display: none !important;
  }
  
  .mobile-menu-toggle {
    display: block !important;
    order: 3 !important;
    margin-left: auto !important;
  }
  
  .navbar-logo {
    order: 1 !important;
    margin-right: 0 !important;
  }
}

@media (max-width: 768px) {
  .section {
    padding: 3rem 0;
  }
  
  .navbar-container {
    padding: 0 1rem;
  }
  
  h1 { font-size: 2rem; }
  h2 { font-size: 1.75rem; }
  h3 { font-size: 1.5rem; }
}

@media (max-width: 640px) {
  .container {
    padding: 0 1rem;
  }
  
  .grid {
    gap: 1rem;
  }
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

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

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

@keyframes slideInLeft {
  from {
    opacity: 0;
    transform: translateX(-30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

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

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(10px); }
}

.animate-fade-in {
  animation: fadeIn 0.8s ease-out;
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out;
}

.animate-slide-in-left {
  animation: slideInLeft 0.8s ease-out;
}

.animate-slide-in-right {
  animation: slideInRight 0.8s ease-out;
}

.animate-bounce {
  animation: bounce 2s infinite;
}

/* ==========================================================================
   ICONS (Lucide)
   ========================================================================== */

.lucide {
  display: inline-block;
  vertical-align: middle;
}

/* Evita Cumulative Layout Shift: antes de que Lucide reemplace el <i data-lucide>
   por el <svg> real, el navegador ignora width/height en un elemento inline por
   defecto, así que el icono "aparece de golpe" tras cargar el JS. Al forzar
   inline-block ya desde el estado inicial, el hueco se reserva desde el principio. */
[data-lucide] {
  display: inline-block;
  vertical-align: middle;
}

/* ==========================================================================
   AUTH PAGES (Login, Registro, Recuperar Password)
   ========================================================================== */

.auth-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--zinc-950) 0%, var(--zinc-900) 100%);
}

.auth-container {
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 480px;
}

/* Glassmorphism Card */
.auth-card {
  background: rgba(39, 39, 42, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  padding: 3rem 2.5rem;
  box-shadow: 
    0 8px 32px 0 rgba(0, 0, 0, 0.37),
    inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  animation: fadeIn 0.5s ease;
}

.auth-card-large {
  max-width: 600px;
  width: 100%;
}

/* Logo */
.auth-logo {
  text-align: center;
  margin-bottom: 2rem;
  animation: slideDown 0.5s ease;
}

.auth-logo img {
  max-width: 180px;
  height: auto;
}

/* Title and Subtitle */
.auth-title {
  font-size: 1.875rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 0.5rem;
  background: linear-gradient(135deg, var(--cyan-400), var(--teal-400));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.auth-subtitle {
  text-align: center;
  color: var(--zinc-400);
  margin-bottom: 2rem;
  font-size: 0.9375rem;
}

/* Form */
.auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.form-group label {
  color: var(--zinc-300);
  font-size: 0.875rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-group input {
  background: rgba(24, 24, 27, 0.8);
  border: 1px solid var(--zinc-700);
  border-radius: var(--radius-md);
  padding: 0.875rem 1rem;
  color: var(--zinc-100);
  font-size: 0.9375rem;
  transition: all 0.3s ease;
  outline: none;
}

.form-group input:focus {
  border-color: var(--cyan-500);
  box-shadow: 0 0 0 3px rgba(6, 182, 212, 0.1);
}

.form-group input::placeholder {
  color: var(--zinc-600);
}

/* Checkbox */
.form-checkbox {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.form-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  border: 2px solid var(--zinc-600);
  border-radius: var(--radius-sm);
  background: transparent;
  cursor: pointer;
  accent-color: var(--cyan-500);
}

.form-checkbox label {
  color: var(--zinc-400);
  font-size: 0.875rem;
  cursor: pointer;
  user-select: none;
}

.form-checkbox a {
  color: var(--cyan-400);
  text-decoration: none;
  transition: color 0.2s ease;
}

.form-checkbox a:hover {
  color: var(--cyan-300);
}

/* Submit Button */
.btn-auth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 1rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(135deg, var(--cyan-500), var(--teal-500));
  color: white;
  font-weight: 600;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  margin-top: 0.5rem;
  text-decoration: none;
}

.btn-auth:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 24px rgba(6, 182, 212, 0.4);
}

.btn-auth:active {
  transform: translateY(0);
}

/* Links */
.auth-links {
  margin-top: 1.5rem;
  text-align: center;
}

.auth-link {
  color: var(--cyan-400);
  text-decoration: none;
  font-size: 0.875rem;
  transition: color 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.auth-link:hover {
  color: var(--cyan-300);
}

.auth-divider {
  height: 1px;
  background: var(--zinc-800);
  margin: 1.5rem 0;
}

.auth-signup {
  color: var(--zinc-400);
  font-size: 0.9375rem;
  margin: 0;
}

.auth-signup a {
  color: var(--cyan-400);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s ease;
}

.auth-signup a:hover {
  color: var(--cyan-300);
}

/* Error Messages */
.auth-errors {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  border-radius: var(--radius-md);
  padding: 1rem;
  margin-bottom: 1.5rem;
}

.auth-errors p {
  color: #fca5a5;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0;
}

.auth-errors p:first-child {
  margin-top: 0;
}

.auth-errors p:last-child {
  margin-bottom: 0;
}

/* Success Messages */
.auth-success {
  background: rgba(34, 197, 94, 0.1);
  border: 1px solid rgba(34, 197, 94, 0.3);
  border-radius: var(--radius-md);
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  text-align: center;
}

.auth-success p {
  color: #86efac;
  font-size: 0.9375rem;
  margin: 0.75rem 0 0 0;
  line-height: 1.6;
}

.auth-success i {
  color: #4ade80;
  margin-bottom: 0.5rem;
}

/* Decorative Background Blurs */
.auth-bg-blur {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  opacity: 0.3;
  pointer-events: none;
  z-index: 1;
}

.auth-bg-blur-1 {
  width: 400px;
  height: 400px;
  background: var(--cyan-600);
  top: -200px;
  right: -200px;
}

.auth-bg-blur-2 {
  width: 500px;
  height: 500px;
  background: var(--teal-600);
  bottom: -250px;
  left: -250px;
}

/* Animations */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsive */
@media (max-width: 640px) {
  .auth-page {
    padding: 1rem;
  }

  .auth-card {
    padding: 2rem 1.5rem;
  }

  .auth-title {
    font-size: 1.5rem;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .auth-bg-blur-1,
  .auth-bg-blur-2 {
    display: none;
  }
}

/* ==========================================================================
   MI CUENTA PAGE
   ========================================================================== */

.mi-cuenta-page {
  min-height: 100vh;
  background: var(--zinc-950);
}

.mi-cuenta-header {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--zinc-800);
}

.user-avatar {
  position: relative;
}

.user-avatar .avatar-img {
  border-radius: 50%;
  border: 3px solid var(--cyan-500);
  box-shadow: 0 0 20px rgba(6, 182, 212, 0.3);
}

.mi-cuenta-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 1.5rem;
  margin-bottom: 3rem;
}

/* Cuenta Card */
.cuenta-card {
  background: rgba(39, 39, 42, 0.6);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--radius-xl);
  overflow: hidden;
  transition: all 0.3s ease;
}

.cuenta-card:hover {
  border-color: rgba(34, 211, 238, 0.3);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.cuenta-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.5rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.cuenta-card-header h3 {
  font-size: 1.125rem;
  margin: 0;
  color: var(--zinc-100);
}

.cuenta-card-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cuenta-card-footer {
  padding: 1.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
  display: flex;
  gap: 0.75rem;
}

/* Info Rows */
.info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.info-row:last-child {
  border-bottom: none;
}

.info-label {
  color: var(--zinc-500);
  font-size: 0.875rem;
  font-weight: 500;
}

.info-value {
  color: var(--zinc-200);
  font-size: 0.9375rem;
}

/* Citas */
.cita-item {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: rgba(24, 24, 27, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-lg);
  transition: all 0.3s ease;
}

.cita-item:hover {
  border-color: rgba(34, 211, 238, 0.3);
  background: rgba(24, 24, 27, 0.8);
}

.cita-date {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--cyan-500), var(--teal-500));
  border-radius: var(--radius-md);
  padding: 0.75rem;
  min-width: 60px;
  text-align: center;
}

.date-day {
  font-size: 1.5rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}

.date-month {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.9);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-top: 0.25rem;
}

.cita-info {
  flex: 1;
}

.cita-info h4 {
  font-size: 1rem;
  margin: 0 0 0.5rem 0;
  color: var(--zinc-100);
}

.cita-info p {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  color: var(--zinc-400);
  font-size: 0.875rem;
  margin: 0.25rem 0;
}

/* Historial */
.historial-item {
  display: flex;
  gap: 1rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.historial-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.historial-date {
  color: var(--cyan-400);
  font-size: 0.8125rem;
  font-weight: 600;
  min-width: 80px;
}

.historial-info {
  flex: 1;
}

.historial-info h5 {
  font-size: 0.9375rem;
  margin: 0 0 0.25rem 0;
  color: var(--zinc-200);
}

.historial-info p {
  color: var(--zinc-500);
  font-size: 0.8125rem;
  margin: 0;
}

/* Documentos */
.documento-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: rgba(24, 24, 27, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--zinc-300);
  font-size: 0.875rem;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
}

.documento-item:last-child {
  margin-bottom: 0;
}

.documento-item:hover {
  background: rgba(24, 24, 27, 0.8);
  border-color: rgba(34, 211, 238, 0.3);
  color: var(--cyan-400);
}

/* Configuración */
.config-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.875rem;
  background: rgba(24, 24, 27, 0.3);
  border: 1px solid rgba(255, 255, 255, 0.05);
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--zinc-300);
  font-size: 0.9375rem;
  transition: all 0.3s ease;
  margin-bottom: 0.5rem;
}

.config-item:last-child {
  margin-bottom: 0;
}

.config-item:hover {
  background: rgba(24, 24, 27, 0.6);
  border-color: rgba(34, 211, 238, 0.3);
  color: var(--cyan-400);
}

.contact-link {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--zinc-400);
  text-decoration: none;
  font-size: 0.9375rem;
  transition: color 0.2s ease;
}

.contact-link:hover {
  color: var(--cyan-400);
}

/* Botones de Cuenta */
.btn-cuenta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.25rem;
  background: rgba(24, 24, 27, 0.8);
  border: 1px solid var(--zinc-700);
  border-radius: var(--radius-md);
  color: var(--zinc-300);
  text-decoration: none;
  font-size: 0.875rem;
  font-weight: 500;
  transition: all 0.3s ease;
  cursor: pointer;
  flex: 1;
}

.btn-cuenta:hover {
  border-color: var(--cyan-500);
  color: var(--cyan-400);
  background: rgba(24, 24, 27, 1);
}

.btn-cuenta.btn-primary {
  background: linear-gradient(135deg, var(--cyan-500), var(--teal-500));
  border: none;
  color: white;
}

.btn-cuenta.btn-primary:hover {
  box-shadow: 0 8px 16px rgba(6, 182, 212, 0.4);
  transform: translateY(-2px);
  color: white;
}

.btn-cuenta.btn-logout {
  border-color: rgba(239, 68, 68, 0.3);
  color: #fca5a5;
}

.btn-cuenta.btn-logout:hover {
  border-color: rgba(239, 68, 68, 0.5);
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
}

/* Responsive */
@media (max-width: 1024px) {
  .mi-cuenta-grid {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  }
}

@media (max-width: 640px) {
  .mi-cuenta-header {
    flex-direction: column;
    text-align: center;
  }

  .mi-cuenta-grid {
    grid-template-columns: 1fr;
  }

  .info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
  }
} 
/* ============================================================
   PÁGINAS LEGALES Y DE TEXTO (Aviso Legal, Privacidad, Cookies)
   ============================================================ */
   
.legal-hero {
    padding-top: 10rem;
    padding-bottom: 4rem;
    background: radial-gradient(circle at top, rgba(34, 211, 238, 0.08) 0%, #09090b 80%);
    border-bottom: 1px solid #27272a;
    text-align: center;
}

.legal-title {
    font-size: clamp(2.5rem, 4vw, 3.5rem);
    color: #ffffff;
    margin-bottom: 1rem;
    line-height: 1.2;
    font-weight: 700;
}

.legal-title span {
    color: #22d3ee;
}

.legal-container {
    max-width: 900px; 
    margin: 0 auto;
    padding: 5rem 1.5rem;
}

.legal-box {
    background-color: #18181b;
    border: 1px solid #3f3f46;
    border-radius: 1rem;
    padding: 4rem 5rem;
    box-shadow: 0 20px 40px -10px rgba(0,0,0,0.5);
}

@media (max-width: 768px) {
    .legal-box {
        padding: 2.5rem 1.5rem;
    }
}

.legal-content h2 {
    color: #22d3ee; 
    font-size: 1.5rem;
    margin-top: 3.5rem;
    margin-bottom: 1.5rem;
    font-weight: 600;
}

.legal-content h2:first-child {
    margin-top: 0;
}

.legal-content p, 
.legal-content ul {
    color: #d4d4d8;
    font-size: 1.05rem;
    line-height: 1.8;
    margin-bottom: 1.5rem;
}

.legal-content ul {
    padding-left: 1.5rem;
    list-style-type: none; 
}

.legal-content li {
    margin-bottom: 0.75rem;
    position: relative;
}

.legal-content li::before {
    content: "•";
    color: #22d3ee;
    font-size: 1.5rem;
    position: absolute;
    left: -1.25rem;
    top: -0.25rem;
}

.legal-content li strong {
    color: #ffffff;
    font-weight: 600;
}

.legal-content a {
    color: #22d3ee;
    text-decoration: none;
    transition: color 0.3s ease, border-color 0.3s ease;
    border-bottom: 1px solid transparent;
}

.legal-content a:hover {
    color: #67e8f9; 
    border-bottom-color: #67e8f9;
}

/* ============================================================
   INTEGRACIÓN AMELIA BOOKING (DARK MODE + CIAN)
   ============================================================ */

/* 1. Fondo transparente para ver la caja de Synapta */
#amelia-booking-wrap,
.am-fs__wrapper,
.am-wrap {
    background-color: transparent !important;
    font-family: inherit !important;
}

/* 2. Forzar textos a color gris claro */
#amelia-booking-wrap *,
.am-fs__wrapper *,
.am-wrap * {
    color: #d4d4d8 !important; 
}

/* 3. Títulos internos de Amelia en blanco puro */
.am-fs__header,
.am-fs__title,
.el-form-item__label {
    color: #ffffff !important;
}

/* 4. Inputs y Selects oscuros */
.el-input__inner,
.el-textarea__inner,
.am-select,
.am-fs__select {
    background-color: #09090b !important; 
    border: 1px solid #3f3f46 !important; 
    color: #ffffff !important;
    border-radius: 0.5rem !important;
}

/* 5. Efecto focus (iluminación Cian al escribir) */
.el-input__inner:focus,
.el-textarea__inner:focus {
    border-color: #22d3ee !important;
    box-shadow: 0 0 0 2px rgba(34, 211, 238, 0.2) !important;
}

/* 6. Botones principales (Cian/Teal) */
.el-button--primary,
.am-button--primary {
    background: linear-gradient(135deg, #06b6d4, #14b8a6) !important;
    border: none !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s ease !important;
}

.el-button--primary:hover,
.am-button--primary:hover {
    box-shadow: 0 8px 16px rgba(6, 182, 212, 0.4) !important;
    transform: translateY(-2px) !important;
}

/* 7. Calendario Oscuro */
.am-calendar,
.el-picker-panel {
    background-color: #18181b !important;
    border: 1px solid #3f3f46 !important;
}

.el-date-table td.current span,
.el-date-table td.available:hover span {
    background-color: #22d3ee !important;
    color: #09090b !important;
    font-weight: bold !important;
}

/* 8. Tarjetas de servicios/empleados */
.am-fs__service-card,
.am-fs__employee-card {
    background-color: #27272a !important; 
    border: 1px solid #3f3f46 !important;
    border-radius: 0.75rem !important;
}
.am-fs__service-card:hover,
.am-fs__employee-card:hover {
    border-color: #22d3ee !important; 
}
/* ============================================================
   INTEGRACIÓN AMELIA (FUERZA BRUTA DARK MODE + CIAN)
   ============================================================ */

/* 1. Atacamos las variables raíz de Amelia para forzar colores oscuros */
.amelia-dark-mode .am-wrap,
.amelia-dark-mode #amelia-booking-wrap,
.amelia-dark-mode .am-fs__wrapper {
    --am-c-bg: #18181b !important; /* Fondo principal oscuro */
    --am-c-bg-sec: #09090b !important; /* Fondo de la barra lateral (Sidebar) */
    --am-c-text: #ffffff !important; /* Texto principal blanco */
    --am-c-text-sec: #a1a1aa !important; /* Texto secundario gris */
    --am-c-primary: #06b6d4 !important; /* Tu Cian principal */
    --am-c-border: rgba(63, 63, 70, 0.5) !important; /* Bordes grises (unificado con page-reserva.php) */
    --am-c-inp-bg: rgba(9, 9, 11, 0.6) !important; /* Fondo de los inputs (unificado con page-reserva.php) */
    --am-c-inp-text: #ffffff !important; /* Texto de los inputs */
    --am-c-inp-border: #3f3f46 !important; /* Borde de los inputs */
    --am-c-success: #14b8a6 !important; /* Teal para completado */
    font-family: inherit !important;
}

/* 2. Forzar fondo de la caja principal de Amelia (Para quitar lo blanco) */
.amelia-dark-mode .am-fs__main,
.amelia-dark-mode .am-fs__step {
    background-color: transparent !important;
}

/* 3. Forzar el fondo de la barra lateral izquierda (Para quitar lo azul oscuro/morado por defecto) */
.amelia-dark-mode .am-fs__sidebar {
    background-color: #09090b !important;
    border-right: 1px solid #3f3f46 !important;
}

/* 4. Textos, títulos y labels de los formularios */
.amelia-dark-mode .el-form-item__label,
.amelia-dark-mode .am-fs__title,
.amelia-dark-mode .am-fs__step-title,
.amelia-dark-mode .am-fs__sidebar-content * {
    color: #ffffff !important;
}

/* 5. Inputs y Desplegables (Selects) */
.amelia-dark-mode .el-input__inner,
.amelia-dark-mode .el-textarea__inner {
    background-color: #09090b !important;
    border: 1px solid #3f3f46 !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
}

.amelia-dark-mode .el-input__inner:focus {
    border-color: #22d3ee !important;
}