/* 
███╗   ██╗ █████╗ ██╗   ██╗                                                
████╗  ██║██╔══██╗██║   ██║                                                
██╔██╗ ██║███████║██║   ██║                                                
██║╚██╗██║██╔══██║╚██╗ ██╔╝                                                
██║ ╚████║██║  ██║ ╚████╔╝                                                 
╚═╝  ╚═══╝╚═╝  ╚═╝  ╚═══╝                                                  
                                                                           
██╗███╗   ██╗███████╗███████╗██████╗ ██╗ ██████╗ ██████╗                   
██║████╗  ██║██╔════╝██╔════╝██╔══██╗██║██╔═══██╗██╔══██╗                  
██║██╔██╗ ██║█████╗  █████╗  ██████╔╝██║██║   ██║██████╔╝                  
██║██║╚██╗██║██╔══╝  ██╔══╝  ██╔══██╗██║██║   ██║██╔══██╗                  
██║██║ ╚████║██║     ███████╗██║  ██║██║╚██████╔╝██║  ██║                  
╚═╝╚═╝  ╚═══╝╚═╝     ╚══════╝╚═╝  ╚═╝╚═╝ ╚═════╝ ╚═╝  ╚═╝                  
                                                                         
                                                                           
██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗
╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝ */

/* nav-inferior.css (Estilo corregido y mejorado) */
.nav-inferior {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    height: 75px;

    /* Fondo elegante y desenfoque */
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Borde superior */
    border-top: 1px solid var(--border-color, #333);

    display: flex;
    align-items: center;

    /* CAMBIO CLAVE 1:
      Distribuye los botones uniformemente cuando caben en la pantalla.
      Si no caben, el scroll horizontal se activa y se alinean al inicio.
    */
    justify-content: space-evenly; 

    overflow-x: auto;
    flex-wrap: nowrap;

    /*
      AÑADIDO CLAVE 2:
      Evita el scroll/arrastre vertical en dispositivos táctiles.
      Solo permite el desplazamiento horizontal.
    */
    touch-action: pan-x;

    padding: 0.75rem 0;
    box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.5);
    z-index: 999;
}

/* Ocultar la barra de scroll para una apariencia más limpia */
.nav-inferior::-webkit-scrollbar {
    display: none;
}
.nav-inferior {
    -ms-overflow-style: none;  /* IE y Edge */
    scrollbar-width: none;  /* Firefox */
}

.nav-inferior div {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 0.75rem;
    color: var(--text-secondary, #ccc);
    line-height: 1;
    min-width: 80px; /* Ancho mínimo para cada elemento */
    text-align: center;
    margin-bottom: 4px;
    transition: color 0.3s ease;
}

/* Estilo base para los botones de la navegación inferior */
.nav-inferior button {
    background: none;
    border: none;
    font-size: 1.9rem; /* Tamaño del icono */
    cursor: pointer;
    color: #ffffffb4; /* Color base: blanco semitransparente */
    padding: 10px; /* Añadido para un área de click más grande y cómoda */
    margin-bottom: 4px;
    transition: all 0.2s ease-in-out; /* Transición suave para todos los cambios */
}

/* Efecto al pasar el cursor (hover): el icono se vuelve blanco opaco */
.nav-inferior button:hover {
    color: #ffffff;
    transform: translateY(-3px); /* Pequeño efecto de elevación */
}

/* Efecto al pulsar el botón (active): feedback inmediato */
.nav-inferior button:active {
    transform: translateY(-1px) scale(0.95); /* Se hunde y reduce ligeramente */
    color: #ffffff;
}

/* --- Estilos para el botón ACTIVO --- */

/* Contenedor del botón activo */
.nav-inferior div.activa {
    /* Mantenemos el color del texto y el icono unificados */
    color: #d0ff00;; /* Un verde vibrante y moderno */
}

/* Icono del botón activo */
.nav-inferior div.activa button i {
    color: inherit; /* Hereda el color verde del padre (div.activa) */
    animation: parpadeo-suave 1.8s infinite;
    transform: scale(1.2); /* Escala ligeramente más sutil */
}

/* Texto del botón activo */
.nav-inferior div.activa div {
    font-weight: bold;
    color: inherit; /* Hereda el color verde del padre para mantener la consistencia */
}

/* Animación de parpadeo mejorada para ser menos distractora */
@keyframes parpadeo-suave {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.6;
    }
}





















/* 


██╗  ██╗███████╗ █████╗ ██████╗ ███████╗██████╗                            
██║  ██║██╔════╝██╔══██╗██╔══██╗██╔════╝██╔══██╗                           
███████║█████╗  ███████║██║  ██║█████╗  ██████╔╝                           
██╔══██║██╔══╝  ██╔══██║██║  ██║██╔══╝  ██╔══██╗                           
██║  ██║███████╗██║  ██║██████╔╝███████╗██║  ██║                           
╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝╚═════╝ ╚══════╝╚═╝  ╚═╝                           
                                                                          
                                                                           
██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗
╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝ */

/* === Estilos para el HEADER de Manu Barbershop === */

.header-perfil {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 70px;
  padding: 0.5rem 1rem;



    /* Fondo elegante y desenfoque */
    background: rgba(255, 255, 255, 0);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Borde superior */
    border-top: 1px solid var(--border-color, #333);


  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.bloque-logo-nombre {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.logo-empresa {
  height: 60px;
  width: auto;
  object-fit: contain;
}

.nombre-app {
  font-size: 1.4rem;
  font-weight: bold;
  color: #fffefeb5;
  font-family: 'Poppins', sans-serif;
}

.bloque-usuario {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.foto-perfil {
  height: 42px;
  width: 42px;
  border-radius: 50%;
  object-fit: cover;
  cursor: pointer;
  border: 2px solid var(--azul); /* Usa tu variable principal */
}









.menu-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.8rem;
  color: white;
  cursor: pointer;
  z-index: 999;
}





.menu-toggle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  font-size: 1.8rem;
  color: white;
  cursor: pointer;
  z-index: 999;
}

.menu-desplegable {
  
  position: absolute;
  top: 60px;
  right: 10px;
  background: rgb(106, 106, 106);
  backdrop-filter: blur(108px);
  border: 1px solid rgba(255, 255, 255, 0);
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
  display: none;
  flex-direction: column;
  z-index: 9999;
}

.menu-desplegable button {
  
  background: none;
  border: none;
  color: white;
  text-align: left;
  padding: 1rem 1.5rem;
  font-size: 1rem;
  width: 100%;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.menu-desplegable button:hover {
  background: rgba(255,255,255,0.1);
}








































/* 

██╗███╗   ██╗██████╗ ███████╗██╗  ██╗                                         
██║████╗  ██║██╔══██╗██╔════╝╚██╗██╔╝                                         
██║██╔██╗ ██║██║  ██║█████╗   ╚███╔╝                                          
██║██║╚██╗██║██║  ██║██╔══╝   ██╔██╗                                          
██║██║ ╚████║██████╔╝███████╗██╔╝ ██╗                                         
╚═╝╚═╝  ╚═══╝╚═════╝ ╚══════╝╚═╝  ╚═╝                                                                                                                 
                                                                              
██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗██╗
╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝╚═╝ */

:root {
  /* Color de acento principal para 'seleccionado', igual al de 'paso completado'. */
  --hora-color-seleccionado: #00b894; 
  
  /* Un naranja/dorado para el efecto hover, igual al del profesional activo. */
  --hora-color-hover: #00b894;        
  
  /* Fondo oscuro para botones disponibles, similar al fondo de tus modales. */
  --hora-color-disponible: #2a2d2f; 
  
  /* Gris muy oscuro y desaturado para los botones no disponibles. */
  --hora-color-ocupado: #404040;
  
  /* Sombras más intensas para coincidir con las sombras de tu modal y calendario. */
  --hora-sombra-normal: 0 5px 10px rgba(0, 0, 0, 0.3);
  --hora-sombra-flotante: 0 10px 20px rgba(0, 0, 0, 0.4);
}
  :root {
    --azul: #007bff;
    --gris-claro: #f8f8f8;
    --gris-medio: #ccc;
    --texto: #333;

  }
:root {
    --azul: #007bff;
    --gris-claro: #f8f8f8;
    --gris-medio: #ccc;
    --texto: #333;
    --fondo-claro: #f9f9f9;
    --rojo-borrar: #dc3545;
}
:root {
  --azul: #007bff;
  --gris-claro: #f8f8f8;
  --gris-medio: #ccc;
  --texto: #333;
  --fondo-claro: #f9f9f9;
}
:root {
  --azul: #007bff;
  --gris-claro: #f8f8f8;
  --gris-medio: #ccc;
  --texto: #333;
  --fondo-claro: #f9f9f9;
}





html {
  height: 100%;
  margin: 0;
  padding: 0;
  
}

/* ======================================================= */
/* === FONDOS ESPECÍFICOS PARA CADA VISTA (OPCIÓN A) === */
/* ======================================================= */

/* Fondo para la vista de Inicio */
#vista-index {
  min-height: 100vh;
  
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('zen.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* Fondo para las vistas de Citas y Reserva */
#vista-citas,
#vista-reserva {
  min-height: 100vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('zen.jpg') no-repeat center center fixed;
  background-size: cover;
}

/* Fondo para la vista de Perfil */
#vista-perfil {
  min-height: 100vh;
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('zen.jpg') no-repeat center center fixed;
  background-size: cover;
}

#vista-productos {
  min-height: 100vh;
  
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)),
    url('zen.jpg') no-repeat center center fixed;
  background-size: cover;
}



/* ========================================= */
/* === ESTILO BASE UNIFICADO PARA BODY ===== */
/* ========================================= */

body {
  /* --- Estructura y Dimensiones --- */
  margin: 0;
  padding: 0;
  min-height: 100vh; /* Asegura que ocupe toda la altura */
  position: relative; /* Útil para posicionar elementos hijos */
  
  /* --- Tipografía y Espaciado --- */
  font-family: 'Segoe UI', sans-serif;
  padding-bottom: 80px; /* Espacio para la barra de navegación inferior */

  /* --- Estilos Visuales POR DEFECTO --- */
  /* Estos son los estilos que tendrá la app si no se especifica otra cosa. */
  background-color: #696A6C; /* Un fondo oscuro base */
  color: rgb(255, 255, 255); /* Texto blanco por defecto */
  
  /* --- Comportamiento de Scroll --- */
  /* Por defecto, el scroll está permitido. 
     Lo cambiaremos con clases solo cuando sea necesario. */
  overflow: auto; 
}






/* Mostrar cuando se active */
body.mostrar {
  visibility: visible;
}

body.tutorial-activo-bloqueo-total {
  /* Desactiva el scroll de toda la página */
  overflow: hidden !important;
  /* ✨ LA CLAVE: Desactiva TODOS los eventos de ratón (clics, hover, etc.) en toda la página */
  pointer-events: none !important;
}

body.form-visible .form-container {
    transform: translateX(0);
}

body.form-visible .nav-inferior {
    display: none;
}









































#vista-index .bloque-logo-nombre {
    display: flex;
    align-items: center;
    gap: 1rem;
}

#vista-index .logo-empresa {
    height: 60px;
    width: auto;
    object-fit: contain;
}

#vista-index .nombre-app {
    font-size: 1.4rem;
    font-weight: bold;
    color: #fffefeb5;
    font-family: 'Poppins', sans-serif;
}

#vista-index .bloque-usuario {
    display: flex;
    align-items: center;
    gap: 0.7rem;
}

#vista-index .foto-perfil {
    height: 42px;
    width: 42px;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    border: 2px solid var(--azul);
}

#vista-index .contenido-scroll {

    padding: 1rem;
    background: transparent;
}

#bloqueProximaCita{
   margin-top: 70px;

 }



  /* 📦 Contenido entre header y footer */
  #vista-reserva .contenido-scroll {


    padding: 2rem 1rem 3rem;
    overflow-y: auto;
    flex-grow: 1;
  }


#vista-index .hero-index {
    background: none;
    background-color: transparent;
    position: relative;

    color: #d0ff00;;
    text-align: center;
}

#vista-index .hero-index::before {
    display: none;
    /* elimina capa oscura */
}


#vista-index .seccion-contenido {
margin-top: 2rem;
    padding: 1rem;

    color: white;
    background-color: rgba(0, 0, 0, 0);
    /* opcional: panel oscuro semitransparente */
    border-radius: 12px;
}

#vista-index .hero-index h1,
#vista-index .hero-index .subtitulo,
#vista-index .hero-index .btn-reservar {
    z-index: 1;
    position: relative;
}

#vista-index .hero-index h1 {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}

#vista-index .hero-index .subtitulo {
    font-size: 1.1rem;
    color: #ddd;
    margin-bottom: 1.5rem;
}

#vista-index .btn-reservar {
    font-size: 1.1rem;
    padding: 1rem 2rem;
    background: #5e796500;
    color: white;
    border: none;
    border-radius: 30px;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    animation: parpadeoBrillante 1.8s infinite;
    transition: transform 0.3s ease;
}

@keyframes parpadeoBrillante {

    0%,
    100% {
        box-shadow: 0 0 8px 4px rgba(117, 171, 85, 0);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 18px 8px rgba(255, 255, 255, 0.9);
        transform: scale(1.05);
    }
}


#vista-index .card-cita {
    background: rgba(255, 255, 255, 0.118);
    border-left: 6px solid #d0ff00;;
    border-radius: 16px;
    padding: 1.2rem 1.4rem;

    width: 90%;
    max-width: 600px;
    margin: 0 auto;
    box-shadow:
        0 4px 10px rgba(255, 255, 255, 0.504),
        0 8px 24px rgba(255, 255, 255, 0.395);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

#vista-index .card-cita:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.15);
}

#vista-index .info-cita {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

#vista-index .cita-fecha {
    font-size: 1.1rem;
    font-weight: bold;
    color: #ffffff;
}

#vista-index .cita-hora {
    font-size: 1rem;
    font-weight: 500;
    color: #fcfcfc;
}

#bloque-profesional {
    display: none;
    /* solo si es profesional */

}

 .btn-tuerca-profesional {
    width: 72px;
    height: 72px;
    background-color: #2c2c2c;
    color: rgb(186, 181, 22);
    border: 3px solid var(--azul, #007bff);
    border-radius: 50%;
    cursor: pointer;
    font-size: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    transition: all 0.25s ease-in-out;
}

.btn-tuerca-profesional:hover {
    background-color: var(--azul, #007bff);
    color: black;
    transform: scale(1.1);
}

.btn-tuerca-profesional .material-symbols-outlined {
    font-size: 2.6rem;
}





/* --- CSS PARA LA GALERÍA --- */
#vista-index .slider-container {
    overflow: hidden;
    /* Oculta el desbordamiento */
    width: 100%;
    margin-top: 1rem;
    cursor: grab;
    /* Cursor para indicar que se puede arrastrar */
    position: relative;
    /* Necesario para el efecto de máscara */

    /* Efecto de degradado en los bordes para un acabado profesional */
    -webkit-mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
    mask-image: linear-gradient(to right, transparent, black 20%, black 80%, transparent);
}

#vista-index .galeria-slider {
    display: flex;
    /* Coloca las imágenes en línea */

    /* El ancho se calcula basado en el número y tamaño de tus imágenes */
    /* (Ancho img + margen) * número total de imágenes */
    /* (280px + 15px) * 8 = 2360px */
    width: calc((280px + 15px) * 8);

    /* IMPORTANTE: La animación CSS se ha quitado de aquí. */
    /* Ahora la controla 100% el JavaScript para permitir la interacción. */
}

#vista-index .galeria-slider img {
    width: 280px;
    height: 210px;
    object-fit: cover;
    /* Asegura que la imagen cubra el espacio sin deformarse */
    border-radius: 12px;
    margin-right: 15px;
    cursor: pointer;

    /* Evita que el navegador arrastre la imagen de forma nativa */
    -webkit-user-drag: none;
    user-select: none;
}

/* --- ESTILOS PARA EL MODAL (VENTANA EMERGENTE) --- */

/* --- ESTILOS PARA LA GALERÍA A PANTALLA COMPLETA --- */


/* --- NUEVOS ESTILOS PARA EL MODAL (PANTALLA COMPLETA Y SCROLL) --- */

/* El fondo oscuro que ocupa toda la pantalla */
#vista-index .modal {
    display: none;
    /* Oculto por defecto */
    position: fixed;
    /* Clave: posición fija para cubrir toda la ventana */
    z-index: 2000;
    /* Un z-index alto para estar sobre el header (999) */
    left: 0;
    top: 0;
    width: 100%;
    /* Ocupa el 100% del ancho */
    height: 100%;
    /* Ocupa el 100% de la altura */
    background-color: rgba(0, 0, 0, 0.95);
    /* Negro casi opaco */
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
    /* ¡CLAVE! Permite el scroll vertical si el contenido es más alto que la pantalla */
    overflow-y: auto;
}

/* Clase para mostrar el modal con animación */
#vista-index .modal.visible {
    display: block;
    opacity: 1;
}

/* El contenedor de las imágenes */
#vista-index .modal-contenido {
    padding-top: 80px;
    /* Dejamos espacio para el botón de cerrar fijo */
    padding-bottom: 20px;
    display: flex;
    flex-direction: column;
    /* Apilamos las imágenes verticalmente */
    align-items: center;
    /* Centramos las imágenes horizontalmente */
    gap: 20px;
    /* Espacio entre las imágenes */
}

/* Cada imagen dentro del modal */
#vista-index .modal-contenido img {
    max-width: 90vw;
    /* 90% del ancho de la pantalla */
    height: auto;
    /* La altura se ajusta automáticamente */
    object-fit: contain;
    border-radius: 8px;
    animation: zoomIn 0.3s ease-in-out;
}

/* El botón de cerrar (la 'X') - AHORA CON POSICIÓN FIJA */
#vista-index .cerrar-modal {
    position: fixed;
    /* Clave: Fijo en la ventana, no se mueve con el scroll */
    top: 20px;
    right: 25px;
    color: #fff;
    font-size: 45px;
    font-weight: bold;
    cursor: pointer;
    z-index: 2001;
    /* Por encima del contenido que se desplaza */
    transition: color 0.2s, transform 0.2s;
}

#vista-index .cerrar-modal:hover {
    color: #bbb;
    transform: scale(1.1);
}

/* Ocultamos las flechas que ya no se usan */
#vista-index .prev,
#vista-index .next {
    display: none;
}

/* Animación de zoom */
@keyframes zoomIn {
    from {
        transform: scale(0.9);
        opacity: 0;
    }

    to {
        transform: scale(1);
        opacity: 1;
    }
}






/* ======== PEGA ESTE CÓDIGO DENTRO DE LA ETIQUETA <style> VACÍA ======== */
/* AÑADIDO: Contenedor para el título y el botón de editar */
#vista-index .titulo-seccion {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

/* Contenedores para las nuevas secciones */
#vista-index .servicios-container,
#vista-index .horario-container {
    margin-top: 1.5rem;
    color: #f0f0f0;
    /* Color de texto base para el contenido */
}

/* Títulos de las categorías de servicios (ej. "Corte y Barba") */
#vista-index .servicios-container h3 {
    color: #f1bd38e3;
    /* Color dorado del botón */
    font-size: 1.4rem;
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
}

/* Lista de servicios (<ul>) */
#vista-index .servicios-list {
    list-style: none;
    /* QUITA los puntos de la lista */
    padding: 0;
    margin: 0;
}

/* Cada elemento de la lista de servicios (<li>) */
#vista-index .servicios-list li {
    display: flex;
    /* Alinea el nombre y el precio en la misma línea */
    justify-content: space-between;
    /* Pone espacio entre nombre y precio */
    align-items: baseline;
    padding: 0.9rem 0.5rem;
    font-size: 1rem;
    border-bottom: 1px dashed rgba(255, 255, 255, 0.2);
}

#vista-index .servicios-list li:last-child {
    border-bottom: none;
    /* Elimina la línea del último elemento */
}

/* El precio del servicio */
#vista-index .servicios-list .price {
    font-weight: bold;
    color: #d0ff00;
    /* Color dorado */
    white-space: nowrap;
    /* Evita que el precio se parta en dos líneas */
    margin-left: 1rem;
}

/* Párrafos para la sección de horario */
#vista-index .horario-container p {
    font-size: 1.1rem;
    line-height: 1.6;
    padding: 0.5rem 0;
}

#vista-index .horario-container p strong {
    color: #f1bd38;
    margin-right: 10px;
}

/* ======== AÑADIDO: ESTILOS PARA EL MODO EDICIÓN ======== */
#vista-index .btn-editar,
#vista-index .btn-accion {
    background-color: var(--azul);
    color: white;
    border: none;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.9rem;
    margin-left: 10px;
    transition: background-color 0.2s;
}

#vista-index .btn-editar:hover,
#vista-index .btn-accion:hover {
    background-color: #0056b3;
}

#vista-index .btn-accion.guardar {
    background-color: #28a745;
}

#vista-index .btn-accion.guardar:hover {
    background-color: #218838;
}

#vista-index .btn-accion.borrar {
    background-color: var(--rojo-borrar);
}

#vista-index .btn-accion.borrar:hover {
    background-color: #c82333;
}

#vista-index .editable-input {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--gris-medio);
    color: white;
    padding: 8px;
    border-radius: 5px;
    width: 100%;
    box-sizing: border-box;
}

#vista-index .servicios-list li .editable-input {
    width: auto;
    flex-grow: 1;
}

#vista-index .servicios-list li .editable-input.price-input {
    max-width: 80px;
    margin-left: 1rem;
}

/* AÑADIDO: Estilo para el contenedor de inputs en una línea */
#vista-index .input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}


/* --- CSS AÑADIDO PARA LA EDICIÓN DE LA GALERÍA --- */


/* Contenedor para la imagen y su botón de borrar */
#vista-index .imagen-editable-container {
    position: relative;
    /* Necesario para posicionar el botón de borrar */
    display: inline-block;
    /* Ocupa solo el espacio de la imagen */
}

/* El botón de borrar (la 'x') */
#vista-index .btn-borrar-imagen {
    position: absolute;
    top: 5px;
    right: 20px;
    /* Ajustado para que no quede pegado al borde del contenedor */
    background-color: var(--rojo-borrar);
    color: white;
    border: 2px solid white;
    border-radius: 50%;
    width: 30px;
    height: 30px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 10;
    /* Para que esté por encima de la imagen */
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.5);
    transition: transform 0.2s;
}

#vista-index .btn-borrar-imagen:hover {
    transform: scale(1.1);
}

/* --- ESTILOS PARA EL DESPLEGABLE DE SERVICIOS --- */



/* Contenedor del título de la categoría (lo hacemos clickeable) */
#vista-index .categoria-titulo {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    padding: 0.5rem 0;
    user-select: none;
    /* Evita que el texto se seleccione al hacer clic */
}

/* El H3 que ya tenías, pero sin margen inferior para que quede pegado a la línea */
#vista-index .categoria-titulo h3 {
    margin: 0;
    color: #d0ff00;
    font-size: 1.4rem;
}

/* La flecha ">" */
/* --- ESTILOS PARA LA FLECHA GIRATORIA (ABAJO/ARRIBA) --- */

/* El contenedor del icono */
#vista-index .flecha-desplegable {
    font-size: 1.2rem;
    color: #ffffffe3;
}

/* El icono de la flecha en sí */
#vista-index .flecha-desplegable .fas {
    transition: transform 0.3s ease-in-out;
    /* La animación de giro suave */
}

/* Cuando el título tiene la clase 'active' (al hacer clic)... */
#vista-index .categoria-titulo.active .flecha-desplegable .fas {
    transform: rotate(90deg);
    /* ...giramos la flecha para que apunte hacia arriba */
}

/* Clase que se añade con JS para girar la flecha */
#vista-index .categoria-titulo.active .flecha-desplegable {
    transform: rotate(90deg);
}

/* La lista de servicios, oculta por defecto */
#vista-index .servicios-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-height: 0;
    /* La clave para ocultarla */
    overflow: hidden;
    /* Oculta el contenido que se desborda */
    transition: max-height 0.4s ease-out;
    /* Animación suave para el despliegue */
}

/* Clase que se añade con JS para mostrar la lista */
#vista-index .servicios-list.desplegado {
    /* Un valor suficientemente grande para que quepan todos los servicios */
    max-height: 500px;
}



/* --- ESTILOS PARA EL BOTÓN FLOTANTE DE WHATSAPP --- */



#vista-index .whatsapp-flotante {
    position: fixed;
    /* Fijo en la pantalla */


    /* Posicionamiento: */
    bottom: 115px;
    /* 75px de la nav-inferior + 20px de margen */
    right: 20px;

    z-index: 1000;
    /* Por encima de la nav-inferior (999) pero por debajo del modal (2000) */

    /* Estilos visuales: */
    background-color: #25d36500;
    /* Color de fondo de WhatsApp */
    border-radius: 50%;
    /* Para que sea un círculo perfecto */
    box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.3);
    /* Sombra para que resalte */

    /* Centrar el logo dentro del círculo */
    display: flex;
    align-items: center;
    justify-content: center;

    transition: transform 0.3s ease;
    /* Animación suave */
}

/* Efecto al pasar el ratón por encima */
#vista-index .whatsapp-flotante:hover {
    transform: scale(1.1);
    /* Se agranda un poco */
}

/* Estilos para la imagen del logo dentro del botón */
#vista-index .whatsapp-flotante img {
    width: 55px;
    /* Tamaño del logo */
    height: 55px;
}





/* 
// ██████╗ ███████╗███████╗███████╗██████╗ ██╗   ██╗ █████╗ ██████╗                                                                                            
// ██╔══██╗██╔════╝██╔════╝██╔════╝██╔══██╗██║   ██║██╔══██╗██╔══██╗                                                                                           
// ██████╔╝█████╗  ███████╗█████╗  ██████╔╝██║   ██║███████║██████╔╝                                                                                           
// ██╔══██╗██╔══╝  ╚════██║██╔══╝  ██╔══██╗╚██╗ ██╔╝██╔══██║██╔══██╗                                                                                           
// ██║  ██║███████╗███████║███████╗██║  ██║ ╚████╔╝ ██║  ██║██║  ██║                                                                                           
// ╚═╝  ╚═╝╚══════╝╚══════╝╚══════╝╚═╝  ╚═╝  ╚═══╝  ╚═╝  ╚═╝╚═╝  ╚═╝                                                                                           
// █████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗
 */


#vista-reserva .bloque-calendario {
  display: flex;
  justify-content: center;
  padding: 1rem;
  overflow: visible; /* 🔥 muy importante */
  position: relative; /* para que el calendario se posicione correctamente */
  margin-top: 25px;

}



#vista-reserva .flatpickr-calendar {
  background: #1e1e1e00;
  color: #fff;
  border: none;
  border-radius: 12px;
  font-family: 'Poppins', sans-serif;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}
#vista-reserva .flatpickr-day {
  border-radius: 10px;
  color: #fff ;
  transition: all 0.2s ease;
}


#vista-reserva .flatpickr-day:hover {
  background-color: #333;
  color: #fff;
}


#vista-reserva .flatpickr-day.today {
  border: 2px solid #ffffff87;
}

/* ✅ ESTA ES LA REGLA CORREGIDA Y MÁS ESPECÍFICA */
#vista-reserva .flatpickr-calendar .flatpickr-day.selected {
  background-color: #ffffff6f;
  color: #000 !important;
  font-weight: bold;
}





#vista-reserva .flatpickr-weekdays,
#vista-reserva .flatpickr-weekday {
  background: #2a2a2a;
  color: #ccc !important;
  text-transform: uppercase;
  font-weight: 600;
}

#vista-reserva .flatpickr-months {
  background: #252525;
  color: #fff !important;
  font-weight: bold;
  border-bottom: 1px solid #444;
  padding: 0.5rem;
  display: flex;
  justify-content: space-between;
}

#vista-reserva .flatpickr-current-month {
  color: #fff !important;
  padding: 0;
}

#vista-reserva .flatpickr-monthDropdown-months,
#vista-reserva .flatpickr-months .numInput {

  border: none;
  color: #fff !important;
  font-weight: bold;
}

/* Flechas de navegación */
#vista-reserva .flatpickr-prev-month,
#vista-reserva .flatpickr-next-month,
#vista-reserva .flatpickr-prev-month svg,
#vista-reserva .flatpickr-next-month svg {
  fill: #fff !important;
  stroke: #fff !important;
  color: #fff !important;
}

#vista-reserva .flatpickr-prev-month:hover,
#vista-reserva .flatpickr-next-month:hover {
  background-color: #c9c9c99f;
  border-radius: 6px;
}


#vista-reserva .flatpickr-day.prevMonthDay,
#vista-reserva .flatpickr-day.nextMonthDay {
  color: #ffffff00 !important;

  opacity: 0.3;

  position: relative;
 
}


#vista-reserva .flatpickr-day.disabled {

  cursor: not-allowed !important;
  pointer-events: none;
  position: relative;
}

#vista-reserva .flatpickr-day.flatpickr-disabled, #vista-reserva .flatpickr-day.flatpickr-disabled:hover {
    cursor: not-allowed;
    color: rgba(89, 89, 89, 0.248);
}

#vista-reserva .flatpickr-day.disabled::after {
  content: "No disponible";
  position: absolute;
  top: -1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: #cccccc;
  white-space: nowrap;
  display: none;
}

#vista-reserva .flatpickr-day.disabled:hover::after {
  display: block;
}


/* ✅ Icono de prohibido encima (visualmente, incluso en móvil) */
#vista-reserva .flatpickr-day.disabled::before {
  content: "🚫";
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.8rem;
  opacity: 0.8;
  pointer-events: none;
}



#vista-reserva .flatpickr-calendar {
  transform: scale(1.1);
  max-width: 100%;
}










/* <!-- general --> */





  h2 {
    color: white;
    text-align: center;
    margin: 1rem 0;
    font-size: 1.5rem;
  }

#vista-reserva .contenedor-reserva {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

@media (min-width: 768px) {
  #vista-reserva .contenedor-reserva {
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    gap: 2rem;
  }

  #vista-reserva .bloque-calendario,
  #vista-reserva .bloque-disponibilidad {
    flex: 1;
    max-width: 50%;
  }
}








  
  #vista-reserva .bloque-disponibilidad {
    background-color: transparent;
    padding: 1rem;

    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.08);
  }

  #vista-reserva .bloque-disponibilidad h3 {
    margin-top: 0;
    font-size: 1.2rem;
    color: var(--azul);
  }

  /* 🕐 Horas disponibles */
/* 🕐 Horas disponibles */
#vista-reserva #listaHoras {
  
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
  gap: 1rem; /* ✅ Aumentado de 0.6rem a 1rem para más espacio */
  margin-top: 0.5rem;
}

  #vista-reserva #listaHoras > div {
    padding: 0.5rem;
    font-size: 0.9rem;
  }

  #vista-reserva .hora-btn {
     box-sizing: border-box; /* <<< AÑADE ESTA LÍNEA */
  position: relative;
  padding: 0.8rem 1.5rem;
    background-color: var(--azul);
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    font-size: 1rem;

  }

  #vista-reserva .hora-btn[disabled] {
    background-color: var(--gris-medio);
    cursor: not-allowed;
  }

#vista-reserva .flatpickr-months .flatpickr-prev-month svg, #vista-reserva .flatpickr-months .flatpickr-next-month svg {
    width: 24px;
    height: 24px;
}

#vista-reserva .flatpickr-day.selected, 
#vista-reserva .flatpickr-day.startRange,
#vista-reserva .flatpickr-day.endRange, 
#vista-reserva .flatpickr-day.selected.inRange, 
#vista-reserva .flatpickr-day.startRange.inRange, 
#vista-reserva .flatpickr-day.endRange.inRange, 
#vista-reserva .flatpickr-day.selected:focus, 
#vista-reserva .flatpickr-day.startRange:focus, 
#vista-reserva .flatpickr-day.endRange:focus, 
#vista-reserva .flatpickr-day.selected:hover, 
#vista-reserva .flatpickr-day.startRange:hover, 
#vista-reserva .flatpickr-day.endRange:hover, 
#vista-reserva .flatpickr-day.selected.prevMonthDay, 
#vista-reserva .flatpickr-day.startRange.prevMonthDay, 
#vista-reserva .flatpickr-day.endRange.prevMonthDay, 
#vista-reserva .flatpickr-day.selected.nextMonthDay, 
#vista-reserva .flatpickr-day.startRange.nextMonthDay, 
#vista-reserva .flatpickr-day.endRange.nextMonthDay

 {
  transform: scale(1) rotate(-1deg);

  border: 3px solid #d0ff00;
  box-shadow: 0 0 15px #ffffff;
  transition: all 0.3s ease;
}





/* <!-- modal --> */

#vista-reserva .modal-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: #1e1e1e;
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#vista-reserva .modal {
  background: rgba(30, 30, 30, 0);
  backdrop-filter: blur(8px);
  border-radius: 16px;

  color: #fff;
  text-align: center;
  max-width: 400px;
  width: 90%;
  height: 100vh; /* Más compacto y aprovechando altura */
  box-shadow: 0 8px 20px rgba(180, 180, 180, 0);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  animation: fadeIn 0.3s ease-out;
  overflow-y: auto;
}

#vista-reserva .section {
  background: rgba(255, 255, 255, 0);
  padding: 1rem;
  margin: 0.8rem 0;
  border-radius: 10px;
  text-align: center;
}

#vista-reserva .section h4 {
  margin-bottom: 0.6rem;
  font-size: 0.95rem;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  padding-bottom: 0.4rem;
}


#vista-reserva .confirmacion-nombre {
  font-size: 1.3rem;
  font-weight: bold;
  color: #fff;
}

#vista-reserva .servicio-nombre {
  font-size: 1.1rem;
  font-weight: 600;
  color: #ffd700;
  margin-bottom: 0.4rem;
}

#vista-reserva .servicio-detalles {
  font-size: 0.95rem;
  color: #ddd;
  display: flex;
  justify-content: center;
  gap: 1rem;
}

#vista-reserva .fecha {
  font-size: 0.95rem;
  color: #ddd;
}

#vista-reserva .hora {
  font-size: 1.4rem;
  font-weight: bold;
  color: #00b894;
  margin-top: 0.4rem;
}

#vista-reserva .confirmacion-nota p {
  font-size: 0.85rem;
  color: #bbb;
  margin-top: 1rem;
  line-height: 1.4;
}

/* Botones abajo */
#vista-reserva .modal-buttons {
  margin-top: 1rem;
  margin-bottom: 2rem;
  display: flex;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,0.1);
}

#vista-reserva .modal-buttons button {
  flex: 1 1 40%;
  padding: 0.8rem;
  border: none;
  border-radius: 50px;
  font-size: 1rem;
  cursor: pointer;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

#vista-reserva .btn-aceptar {
  background: linear-gradient(135deg, #00b894, #00cec9);
  color: #fff;
}

#vista-reserva .btn-aceptar:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

#vista-reserva .btn-cancelar {
  background: linear-gradient(135deg, #e57373, #ff6b6b);
  color: #fff;
}

#vista-reserva .btn-cancelar:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 15px rgba(0,0,0,0.3);
}

/* <!-- 
selector profesionales --> */

  /* ... (your existing styles) ... */

  /* Styles for the professional selector */
  #vista-reserva #selectorProfesionales {
    display: flex; /* Keeps items in a row */
    overflow-x: auto; /* Enables horizontal scrolling */
    white-space: nowrap; /* Prevents items from wrapping to the next line */
    justify-content: space-evenly; /* Aligns items to the start (left) */
 gap: 2rem;
    margin-top: 1rem;
    margin-bottom: 1rem;

    padding-top: 1rem;
    padding-bottom: 10px; /* Add some padding at the bottom for the scrollbar, if visible */
    -webkit-overflow-scrolling: touch; /* Improves scrolling performance on iOS */
  
  /* ▼▼▼ AÑADE ESTA LÍNEA ▼▼▼ */
  min-height: 125px; /* Evita que el contenedor se encoja durante la animación */
flex-wrap: wrap;


}

  /* Style for individual professional buttons inside the selector */
  #vista-reserva #selectorProfesionales button {
    flex-shrink: 0; /* Prevents buttons from shrinking */
    /* Add any other button specific styles here if needed */
  }

  /* Optional: Hide scrollbar but keep functionality for a cleaner look */
  #vista-reserva #selectorProfesionales::-webkit-scrollbar {
    display: none; /* For Webkit browsers like Chrome, Safari */
  }

  #vista-reserva #selectorProfesionales {
    -ms-overflow-style: none;  /* For Internet Explorer and Edge */
    scrollbar-width: none;  /* For Firefox */
  }
#vista-reserva .profesional-activo img {
  transform: scale(1.2) rotate(-1deg);

  border: 3px solid #d0ff00;
  box-shadow: 0 0 15px #ffffff;
  transition: all 0.3s ease;
}

#vista-reserva .profesional-activo div {
  color: #d0ff00;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: 0.5px;
  transition: all 0.3s ease;
}

/* Animación suave de entrada (aplicada al botón al activarse) */
#vista-reserva .profesional-activo {
  animation: resaltarSeleccion 0.4s ease;
}

@keyframes resaltarSeleccion {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }
  50% {
    transform: scale(1.05);
    opacity: 1;
  }
  100% {
    transform: scale(1);
  }
}
#vista-reserva .profesional-btn {
  border: none;
  background: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#vista-reserva .profesional-img {
  width: 80px;
  height: 80px;
  border-radius: 50%;

  object-fit: cover;
  transition: transform 0.2s ease;
}

#vista-reserva .profesional-nombre {
  color: white;
  font-size: 0.9rem;
  text-align: center;
}

  /* ... (rest of your existing styles) ... */




/* <!-- 
selector servicios --> */

#vista-reserva #selectorServicios {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px; /* Espacio más reducido entre botones */
    margin-top: 25px;
    margin-bottom: 80px;
    padding: 10px;
    background-color: #00000000; /* Fondo claro para el contenedor de botones */
    border-radius: 8px;

}

#vista-reserva #selectorServicios button {
    padding: 12px 15px; /* Padding más compacto */
    font-size: 15px; /* Tamaño de fuente ligeramente más pequeño */
    border-radius: 8px;
    border: 1px solid #e0e0e0; /* Borde muy ligero */
    background-color: #ffffff01; /* Fondo blanco para los botones */
    color: #ffffff; /* Texto oscuro para contraste */
    cursor: pointer;
    transition: all 0.2s ease;
    width: 95%; /* Ocupa casi todo el ancho disponible */
    max-width: 400px; /* Un poco más de ancho máximo si la pantalla es grande */
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.05); /* Sombra muy sutil */
    
    /* === CAMBIOS CLAVE AQUÍ: USO DE GRID === */
    display: grid; /* Cambiamos a Grid para el diseño de columnas */
    /* Definimos 3 columnas:
       1fr: el nombre ocupa todo el espacio restante
       auto: la duración se ajusta a su contenido
       auto: el precio se ajusta a su contenido
    */
    grid-template-columns: 1fr auto auto;
    gap: 10px; /* Espacio entre las columnas */
    align-items: center; /* Centra verticalmente el contenido en cada fila */
    /* Eliminamos text-align: left; porque lo controlaremos por cada celda de grid */
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Fuente limpia y legible */
}

/* Hover y Active States */
#vista-reserva #selectorServicios button.servicio-activo:active {
    background-color: #a9a9a9;/* Rojo para "quitar" */
}

#vista-reserva #selectorServicios button:active {
    background-color: #ffffff; /* Un gris más oscuro al hacer click */
    transform: translateY(1px); /* Efecto de "hundimiento" */
    box-shadow: 0px 1px 2px rgba(0, 0, 0, 0.08);
}
#vista-reserva #selectorServicios button.servicio-activo {
    background-color: #ffffff00; /* Un gris más oscuro al hacer click */
    transform: translateY(1px); /* Efecto de "hundimiento" */

  border: 3px solid #d0ff00;
  box-shadow: 0 0 15px #ffffff;
  transition: all 0.3s ease;




    font-weight: bold;

}

/* Estilos para el contenido dentro del botón */
#vista-reserva #selectorServicios button .service-name {
    font-weight: bold;
    color: #3f51b5; /* Un azul distintivo para el nombre */
    text-align: left; /* Asegura que el nombre esté a la izquierda en su columna */
    white-space: nowrap; /* Evita que el nombre se rompa en varias líneas */
    overflow: hidden; /* Oculta el texto que se desborda */
    text-overflow: ellipsis; /* Añade puntos suspensivos si el texto es demasiado largo */
    /* Las propiedades flex-grow y margin-right ya no son necesarias con Grid aquí */
}

#vista-reserva #selectorServicios button .service-duration {
    font-size: 14px; /* Tamaño de fuente más pequeño para los detalles */
    color: #666666; /* Color más suave para los detalles */
    white-space: nowrap; /* Evita que la duración se rompa */
    text-align: right; /* Alinea el texto y el icono a la derecha de su columna */
    display: flex; /* Para que el texto y el icono puedan alinearse bien dentro */
    align-items: center; /* Centra verticalmente texto e icono */
    justify-content: flex-end; /* Empuja el contenido (texto + icono) hacia la derecha de la celda */
    gap: 4px; /* Pequeño espacio entre el texto de la duración y el icono */
}

#vista-reserva #selectorServicios button .service-duration i {
    color: #888888; /* Color sutil para el icono */
    font-size: 13px;
    /* margin-right ya no es necesario aquí */
}

#vista-reserva #selectorServicios button .service-price {
    font-size: 14px; /* Tamaño de fuente más pequeño para los detalles */
    color: #666666; /* Color más suave para los detalles */
    font-weight: bold; /* El precio suele ir en negrita */
    white-space: nowrap; /* Evita que el precio se rompa */
    text-align: right; /* Alinea el precio a la derecha de su columna */
}

/* Elimina las siguientes reglas, ya que 'service-details' ya no se usa como contenedor principal */
/*
#vista-reserva #selectorServicios button .service-details {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #666666;
}

#vista-reserva #selectorServicios button .service-details span {
    white-space: nowrap;
}
*/

#vista-reserva #selectorServicios p {
    font-size: 15px;
    color: #666;
    text-align: center;
    margin: 15px 0;
}




/* ======================================================= */
/* ===         COMPONENTE: PANTALLA DE ÉXITO           === */
/* ======================================================= */

/* <!-- Mensaje de exito --> */
#pantalla-exito {
  position: fixed;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  background: #ffffffd4;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  animation: fadeIn 0.5s ease forwards;
}


 .icono-exito svg {
  width: 120px;
  height: 120px;
  stroke: #4caf50;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  animation: pop 0.3s ease-out forwards;
}

.mensaje-exito {
  margin-top: 1rem;
  font-size: 2rem;
  color: #333;
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
  animation-delay: 0.5s;
}

.circle {
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: drawCircle 1s forwards;
}

 .check {
  stroke-dasharray: 50;
  stroke-dashoffset: 50;
  animation: drawCheck 0.5s 1s forwards;
}

/* Animaciones */
@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

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

@keyframes pop {
  from {
    transform: scale(0.5);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

@keyframes drawCircle {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes drawCheck {
  to {
    stroke-dashoffset: 0;
  }
}











/* Estilo para el nuevo modal de alerta de cancelación */
#vista-reserva .modal-alerta {
  background: #282828;
  padding: 1.8rem;
  border-radius: 16px;
  width: 80%;
  max-width: 400px;
  text-align: center;
  border-top: 4px solid #ff8a80;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  color: #f0f0f0;
  animation: fadeIn 0.3s ease-out;
}
#vista-reserva .modal-alerta p {
  line-height: 1.6;
  font-size: 1rem;
  margin-bottom: 1.5rem;
}
#vista-reserva .modal-alerta button {
  width: 100%;
}

  /* Pon esto en tu <head> dentro de una etiqueta <style> */
#vista-reserva .driver-popover {
    background-color: #1e1e1e; /* Fondo oscuro */
    color: #e0e0e0;           /* Texto claro */
    border: 1px solid #444;
    border-radius: 10px;
}
#vista-reserva .driver-popover-title {
    font-size: 1.25rem;
    color: #ffaa00; /* Color de acento para el título */
}
#vista-reserva .driver-popover-description {
    color: #ccc; /* Color para la descripción */
}
#vista-reserva .driver-popover-next-btn, 
#vista-reserva .driver-popover-done-btn {
    background-color: #ffaa00; /* Color de acento para el botón */
    color: #000;
    text-shadow: none;
    border-radius: 5px;
}
#vista-reserva .driver-popover-prev-btn {
    color: #ffaa00;
    border-radius: 5px;
}

    /* ✅ Anula la interactividad del elemento destacado durante el tutorial */
    #vista-reserva .driver-active-element {
      pointer-events: none !important;
    }

  /* ✅ REGLA DE BLOQUEO TOTAL Y DEFINITIVO */


/* Estilos para el nuevo sistema de pasos */
#vista-reserva #contenedor-pasos {
    display: flex;
    flex-direction: column;
    gap: 1.5rem; /* Espacio entre cada paso */
    max-width: 800px;
    margin: 2rem auto;

}


#vista-reserva .paso-reserva {
    background: rgba(255, 255, 255, 0);

    backdrop-filter: blur(5px);
    border-radius: 16px;
    padding: 1rem;
    transition: all 0.5s ease-in-out;

     margin-bottom: 25px;
}



#vista-reserva #paso-3.paso-reserva {
    background: rgba(255, 255, 255, 0);
    border: 1px solid rgba(255, 255, 255, 0);
    backdrop-filter: blur(5px);
    border-radius: 16px;
    padding: 0;
    transition: all 0.5s ease-in-out;
     box-shadow: 0 4px 15px #00000000;
     margin-bottom: 25px;
}

/* ▼▼▼ ESTILOS NUEVOS Y MEJORADOS ▼▼▼ */

/* 1. Preparamos el contenedor del título */
#vista-reserva .paso-header {
  background-color: #00000085;
    display: flex;
    justify-content: space-between;
    align-items: center;
border-radius: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);

    position: relative; /* 👈 ¡MUY IMPORTANTE! para que el ícono se posicione respecto a él */
}

/* 2. Estilo base del ícono (cuando está oculto) */
#vista-reserva .paso-completado-icono {
    display: flex;
    align-items: center;
    justify-content: center;
    
    position: absolute; /* ✨ La magia para que se salga del contenedor */
    top: -25px;       /* Lo subimos para que quede por fuera */
    right: -10px;      /* Lo movemos a la derecha */
    
    width: 50px;      /* Tamaño del círculo */
    height: 50px;     /* Tamaño del círculo */
    font-size: 3rem;  /* Tamaño del símbolo '✔' */
    
    color: #d0ff00;                       /* Color del '✔' */
               /* Fondo verde */
    border-radius: 50%;                 /* Para que sea un círculo perfecto */
    
    
    z-index: 10;      /* Se asegura que esté por encima de otros elementos */
    opacity: 0;       /* Empezará totalmente invisible */
    pointer-events: none; /* No se podrá hacer clic en él */
    transform: scale(0);  /* Empezará totalmente encogido */
}

/* 3. Estilo cuando el paso se completa */
/* 3. Estilo cuando el paso se completa */
#vista-reserva .paso-reserva.completado .paso-completado-icono {
    opacity: 1; /* Lo hacemos visible */
    color: #d0ff00 !important; /* ✅ AÑADE !important AQUÍ */
    pointer-events: auto; /* Hacemos que sea interactuable si se quisiera */
    
    /* ¡Aquí aplicamos la animación que creamos antes! */
    animation: animacionCheck 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* Opcional: Cambia el color del título también, como ya lo tenías */
#vista-reserva .paso-reserva.completado .paso-header h3 {
    color: #d0ff00; 
}

#vista-reserva .paso-header h3 {
    margin: 1rem;
    color: #ffffff;
    font-size: 1.2rem;
}



@keyframes animacionCheck {
  0% {
    /* Empieza invisible, pequeño y girado */
    opacity: 0;
    transform: scale(0.5) rotate(-90deg);
  }
  70% {
    /* Crece más de su tamaño final y casi termina de girar */
    opacity: 1;
    transform: scale(1.1) rotate(10deg);
  }
  100% {
    /* Termina en su tamaño y posición final */
    transform: scale(1) rotate(0deg);
  }
}

/* --- ESTADOS DE LOS PASOS --- */

/* Estado DESACTIVADO: El paso aún no es accesible */
/* ✅ NUEVO ESTILO: Oculta el paso por completo */
#vista-reserva .paso-reserva.desactivado {
    display: none; /* La clave está aquí: el paso desaparece */
}


#vista-reserva .paso-reserva.completado .paso-completado-icono {
    display: block; /* Mostramos el icono de check ✔ */
}

#vista-reserva .paso-reserva.completado .paso-header h3 {
    color: #d0ff00; /* Cambiamos el color del título */
}





























































  /* ============================================== */
/* === ESTILOS PARA EL MODAL DE CONFIRMACIÓN === */
/* ============================================== */

/* ... (tus estilos existentes del modal) ... */


/* ▼▼▼ AÑADE ESTOS NUEVOS ESTILOS ▼▼▼ */

/* Sección para la nota del cliente */
#vista-reserva .confirmacion-comentario {
    text-align: left; /* Alineamos el texto a la izquierda dentro de esta sección */
}

/* Estilo para el campo de texto (textarea) */
#vista-reserva .comentario-textarea {
    width: 99%;
    min-height: 80px; /* Altura inicial, puede crecer */
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 8px;

    color: #ffffff;
    font-family: 'Poppins', sans-serif;
    font-size: 0.95rem;
    resize: vertical; /* Permite al usuario ajustar la altura verticalmente */
    margin-top: 0.5rem;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Efecto visual cuando el usuario hace clic en el campo */
#vista-reserva .comentario-textarea:focus {
    outline: none;
    border-color: #ffaa00; /* Color de acento al seleccionar */
    box-shadow: 0 0 10px rgba(255, 170, 0, 0.3);
}

/* Estilo del texto de placeholder */
#vista-reserva .comentario-textarea::placeholder {
    color: #888;
    font-style: italic;
}

/* ▲▲▲ FIN DE LOS NUEVOS ESTILOS ▲▲▲ */
/* ▼▼▼ AÑADE ESTOS NUEVOS ESTILOS ▼▼▼ */

/* Estilo para el botón que despliega el campo de texto */
#vista-reserva .btn-add-note {
    width: 100%;
    background: none;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    color: #ccc;
    padding: 12px;
    margin-top: 0.5rem;
    border-radius: 8px;
    cursor: pointer;
    text-align: left;
    font-size: 0.9rem;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s ease;
}

#vista-reserva .btn-add-note:hover {
    background: rgba(255, 255, 255, 0.05);
    color: #ffaa00;
    border-color: #ffaa00;
}

/* ▲▲▲ FIN DE LOS NUEVOS ESTILOS ▲▲▲ */

/* ... (el resto de tus estilos) ... */

/* ============================================== */
/* === ESTILOS PARA EL MODAL DE CONFIRMACIÓN === */
/* ============================================== */

/* ... (tus otros estilos del modal se mantienen igual) ... */

/* ▼▼▼ MODIFICACIÓN CLAVE AQUÍ ▼▼▼ */

/* Contenedor principal de la sección del profesional */
#vista-reserva .section.confirmacion-profesional {
    display: flex; /* 👈 Convertimos la sección en un contenedor flex */
    align-items: center; /* Centramos verticalmente la imagen y el texto */
    gap: 15px; /* Espacio entre la imagen y el texto */
    padding: 0.75rem 1rem; /* Ajustamos un poco el padding */
}

/* Eliminamos el título "Profesional" que ocupaba espacio extra */
#vista-reserva .section.confirmacion-profesional h4 {
    display: none; /* 👈 Ocultamos el "h4" que decía "Profesional" */
}


/* Nombre del profesional: ahora al lado de la imagen */
#vista-reserva .confirmacion-nombre {
    font-size: 1.3rem; /* Tamaño de fuente ligeramente ajustado */
    font-weight: bold;
    color: #fff;
    text-align: left; /* Alineado a la izquierda */
}

/* ▲▲▲ FIN DE LAS MODIFICACIONES ▲▲▲ */


/* ... (El resto de tus estilos para .section, .servicio-item, .fecha, .hora, etc., se quedan como están) ... */



  /* ======================================================= */
/* === ESTILOS PARA BOTONES DE HORA (EN ARMONÍA) === */
/* ======================================================= */

/* ✨ NOVEDAD: Variables de color EN ARMONÍA con tu diseño.
 * He elegido colores que ya estás usando en otras partes de la web
 * para lograr una consistencia visual perfecta.
 */

 

/* Contenedor para los botones (sugerencia de uso). */
#vista-reserva .contenedor-horas {
  display: flex;
  flex-wrap: wrap; 
  gap: 1rem;      
  justify-content: center;
}

/* Estilo base para CADA botón de hora. */
#vista-reserva .hora-btn {
  position: relative;
  padding: 0.8rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.1); /* Borde sutil como en tus 'pasos'. */
  border-radius: 12px; /* Mismo radio que usas en otras tarjetas. */
  font-family: 'Poppins', sans-serif; /* Coincide con la fuente de tu calendario. */
  font-weight: 600;
  font-size: 1.1rem;
  text-align: center;
  color: white;
  min-width: 100px;
  cursor: pointer;
  overflow: hidden;
  
  /* Transición suave para todos los efectos. */
  transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, background-color 0.2s ease, border-color 0.2s ease;

  /* Sombra inicial que coincide con la profundidad de tu diseño. */
  box-shadow: var(--hora-sombra-normal);
}

/* --- ESTADOS DE LOS BOTONES --- */

/* 1. Hora DISPONIBLE */
#vista-reserva .hora-btn.disponible {
  background-color: var(--hora-color-disponible);
}

/* ✨ EFECTO FLOTANTE al pasar el ratón por encima (hover).
 * Usamos el color de acento NARANJA/DORADO para el borde en hover, 
 * creando una conexión visual con la selección de profesional.
 */
#vista-reserva .hora-btn.disponible:hover {
  transform: translateY(-5px); 


  border: 3px solid #d0ff00;
  box-shadow: 0 0 15px #ffffff;
  transition: all 0.3s ease; /* Borde de acento al pasar el ratón. */
}

/* ✨ ESTILO PARA LA HORA SELECCIONADA.
 * Usamos el TURQUESA para crear consistencia con los botones de 
 * confirmación y los pasos completados.
 */
#vista-reserva .hora-btn.seleccionado {

  border: 3px solid #d0ff00;
  box-shadow: 0 0 15px #ffffff;
  transition: all 0.3s ease;
}

/* Añadimos un check de confirmación al botón seleccionado. */
#vista-reserva .hora-btn.seleccionado::after {
  /* content: '✔'; */
  position: absolute;
  top: 4px;
  right: 8px;
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.9);
}

/* 3. Hora OCUPADA */
#vista-reserva .hora-btn.ocupado {
  background-color: var(--hora-color-ocupado);
  color: rgba(255, 255, 255, 0.4);
  cursor: not-allowed;
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  
  /* El 'opacity' general es una forma limpia y moderna de mostrar inactividad. */
  opacity: 0.7;
  box-shadow: none; /* Le quitamos la sombra para que parezca "apagado". */
  border-color: rgba(255, 255, 255, 0.05);
}

/* El estado ocupado no debe tener ningún efecto al pasar el ratón. */
#vista-reserva .hora-btn.ocupado:hover {
  transform: none;
  box-shadow: none;
}



  /* ========================================================== */
/* === ESTILOS UNIFICADOS PARA EL MODAL DE CONFIRMACIÓN === */
/* ========================================================== */

/* 1. CONTENEDOR PRINCIPAL DEL MODAL (LA VENTANA) */
#vista-reserva #modalConfirmacion .modal {
  /* --- Posicionamiento y Dimensiones --- */
  position: relative;         /* CLAVE para posicionar los botones de Aceptar/Cancelar dentro de él */
  width: 90%;                 /* Ocupa el 90% del ancho de la pantalla */
  max-width: 400px;           /* Pero nunca más de 400px de ancho */
  height: auto;               /* La altura se adapta al contenido */
  max-height: 90vh;           /* NUNCA será más alto que el 90% de la pantalla */
  display: flex;
  flex-direction: column;

  /* --- Estilos Visuales --- */
  background: #1e1e1e;        /* Fondo oscuro */
  color: #fff;                /* Texto blanco */
  border-radius: 16px;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
  text-align: center;
  animation: fadeIn 0.3s ease-out;

  /* --- Scroll y Espaciado Interno (Padding) --- */
  overflow-y: auto;           /* ✨ Si el contenido se pasa, se podrá hacer scroll */
  padding: 60px 20px 115px 20px; /* Espacio para el botón de atrás (arriba) y el de aceptar (abajo) */
}


/* Botón de Cancelar (Flecha atrás) */
#vista-reserva #modalConfirmacion #btnCancelar {
  position: absolute;   
  top: 85px;            
  left: 25px;           
  background: none;
  border: none;
  box-shadow: none;
  font-size: 1.8rem;    
  color: #fff;          
  padding: 5px;
  cursor: pointer;
}
/* 2. ESTILO PARA LAS TARJETAS (SECCIONES INTERNAS) */
#vista-reserva .section {
  background: rgba(255, 255, 255, 0.05); /* Fondo semitransparente */
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 1rem;
  margin-bottom: 1rem; /* Espacio entre cada tarjeta */
  text-align: center;
}

#vista-reserva .section h4 {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  padding-bottom: 0.75rem;
}

/* 3. SECCIONES ESPECÍFICAS (PROFESIONAL, SERVICIOS, FECHA) */

/* Profesional */
#vista-reserva .confirmacion-foto {
  width: 90px;
  height: 90px;

  object-fit: cover;


}

#vista-reserva .confirmacion-nombre {
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
}

/* Servicios */
#vista-reserva .servicio-item {
  display: flex;
  justify-content: space-between;
  font-size: 1rem;
  padding: 0.5rem 0;
}
#vista-reserva .servicio-item span:first-child {
  color: #e0e0e0;
  text-align: left;
}
#vista-reserva .servicio-item span:last-child {
  color: #fff;
  font-weight: 600;
}
#vista-reserva .resumen-total {
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 1rem;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 1.2rem;
  font-weight: bold;
}
#vista-reserva .resumen-total .total-duracion {
  font-size: 0.8em; 
  color: #ccc; 
  font-weight: normal;
  text-align: right;
}

/* Fecha y Hora */
#vista-reserva .fecha {
  font-size: 1rem;
  color: #ddd;
  text-transform: capitalize;
}

#vista-reserva .hora {
  font-size: 2.2rem;
  font-weight: bold;
  color: #00d2d3; /* Cian brillante */
  margin-top: 0.5rem;
  text-shadow: 0 0 10px rgba(0, 210, 211, 0.5);
}

/* Nota Final */
#vista-reserva .confirmacion-nota p {
  font-size: 0.85rem;
  color: #bbb;
  margin: 0;
  line-height: 1.4;
}
#vista-reserva .confirmacion-nota i {
  color: #ffaa00;
  margin-right: 8px;
}


/* 4. BOTONES FLOTANTES (ACEPTAR Y CANCELAR) */

/* Contenedor de botones (reseteado) */
#vista-reserva #modalConfirmacion .modal-buttons {
  all: unset;
}







  /* ======================================================= */
  /* ===   ANIMACIÓN ELEGANTE "FLIP 3D" PARA IMÁGENES    === */
  /* ======================================================= */

  /* Contenedor para la perspectiva 3D (el botón) */
  #vista-reserva .profesional-btn {
    perspective: 800px;
  }

  #vista-reserva .profesional-img {
    /* Fondo del marcador de posición */
    background-color: #33333300;
    border-radius: 50%;
    
    /* Estado inicial: girada 90 grados (invisible de lado) */
    transform: rotateY(-90deg);
    opacity: 0;
    
    /* Transición para la transformación y la opacidad */
    transition: transform 0.5s ease-in-out, opacity 0.3s ease;
  }

  /* Clase que se añade con JavaScript una vez que la imagen esté cargada */
  #vista-reserva .profesional-img.loaded {
    /* Estado final: visible y en su posición normal */
    transform: rotateY(0deg);
    opacity: 1;
  }



    /* Estilos para la vista de gestión de servicios (tarjetas desplegables) */
    #vista-reserva .servicios-list-gestion { 
      display: flex; 
      flex-direction: column; 
      gap: 1rem;
      width: 100%;
      max-width: 600px;
      margin: 0 auto;
    }
    #vista-reserva .servicio-card {
      background-color: rgba(60, 60, 60, 0.7);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 16px;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      overflow: hidden;
      color: #fff;
    }
    #vista-reserva .servicio-header {
      display: flex; justify-content: space-between; align-items: center;
      padding: 1rem 1.25rem;
      cursor: pointer;
    }
    #vista-reserva .servicio-title { display: flex; align-items: center; gap: 0.75rem; font-weight: 600; }
    #vista-reserva .status-indicator { width: 9px; height: 9px; border-radius: 50%; }
    #vista-reserva .status-active { background-color: #10b981; }
    #vista-reserva .status-inactive { background-color: #6c757d; }
    #vista-reserva .expand-icon { transition: transform 0.4s ease; }

    #vista-reserva .servicio-details {
      max-height: 0;
      overflow: hidden;
      opacity: 0;
      transition: max-height 0.5s ease, opacity 0.5s ease, padding 0.5s ease;
      padding: 0 1.25rem;
      border-top: 1px solid rgba(255,255,255,0.2);
    }
    #vista-reserva .servicio-card.activo .servicio-details {
      max-height: 500px;
      opacity: 1;
      padding: 1.25rem;
    }
    #vista-reserva .servicio-card.activo .expand-icon { transform: rotate(180deg); }
    #vista-reserva .detail-item {
      display: flex; justify-content: space-between;
      font-size: 0.9rem;
      padding: 0.6rem 0;
      border-bottom: 1px solid rgba(255,255,255,0.1);
    }
    #vista-reserva .detail-item:last-child { border: none; }
    #vista-reserva .detail-item span:first-child { color: #ccc; }

  /* --- Estilos para el panel de edición de servicios --- */
 .form-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #f4f7f6;
    padding: 20px;
    box-sizing: border-box;
    overflow-y: auto;
    transform: translateX(100%);
    transition: transform 0.4s ease-in-out;
    z-index: 5000;
  }


  /* --- Estilos de los campos del formulario --- */
 .form-container h3 {
    color: #1d2d35;
  }
  .form-group { margin-bottom: 1rem; }
 .form-group label {
    font-weight: 500;
    color: #5f7481;
    font-size: 0.9rem;
    display: block;
    margin-bottom: 5px;
  }
 .form-container input,   
 .form-container textarea,
  .form-container select {
    width: 100%;
    box-sizing: border-box;
    padding: 14px;
    border: 1px solid #e5e9ed;
    border-radius: 10px;
    font-size: 1rem;
    background-color: #fff;
    color: #1d2d35;
    transition: all 0.2s;
  }
 .form-container input:focus,  
 .form-container textarea:focus, 
 .form-container select:focus {
    outline: none;
    border-color: #10b981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  }
  #vista-reserva .submit-btn, 
  #vista-reserva .cancel-btn {
    width: 100%;
    padding: 16px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
  }
  #vista-reserva .submit-btn {
    background-color: #10b981;
    color: #fff;
    margin-top: 1rem;
  }
  #vista-reserva .cancel-btn {
    background-color: #e5e7eb;
    color: #5f7481;
    margin-top: 0.5rem;
  }

  /* --- Botones de acción en la lista de servicios --- */
  #vista-reserva .servicio-actions-container {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto; /* Empuja los iconos a la derecha */
  }
  #vista-reserva .btn-action-icon {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    font-size: 1rem;
    color: #888;
    transition: color 0.2s;
  }
  #vista-reserva .btn-action-icon.edit:hover {
    color: #3b82f6; /* Azul */
  }
  #vista-reserva .btn-action-icon.delete:hover {
    color: #ef4444; /* Rojo */
  }
  
  /* Contenedor del botón "Añadir Servicio" */
  #vista-reserva #add-service-container {
      padding: 15px;
      text-align: center;
  }
  #vista-reserva #btn-add-service {
    background-color: #2a2d2f;
    color: #00b894;
    border: 2px dashed #00b894;
    width: 100%;
    max-width: 400px;
    padding: 12px;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
  }
  #vista-reserva #btn-add-service:hover {
      background-color: #00b894;
      color: #fff;
  }

  /* AÑADE ESTO A TUS ESTILOS EN EL <head> */
#vista-reserva .danger-btn {
  width: 100%;
  padding: 16px;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  background-color: #ef4444; /* Color rojo de peligro */
  color: #fff;
  margin-top: 0.5rem;
}
#vista-reserva .danger-btn:hover {
  background-color: #dc2626; /* Rojo más oscuro al pasar el ratón */
}









/* 

//  ██████╗██╗████████╗ █████╗ ███████╗                                                                                                                        
// ██╔════╝██║╚══██╔══╝██╔══██╗██╔════╝                                                                                                                        
// ██║     ██║   ██║   ███████║███████╗                                                                                                                        
// ██║     ██║   ██║   ██╔══██║╚════██║                                                                                                                        
// ╚██████╗██║   ██║   ██║  ██║███████║                                                                                                                        
//  ╚═════╝╚═╝   ╚═╝   ╚═╝  ╚═╝╚══════╝                                                                                                                        
// █████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗
// ╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝
                                                                                                                                                            
          */




#vista-citas .titulo-principal {
  text-align: center;
  margin-top: 1rem;
  font-size: 1.5rem;
  font-weight: bold;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
}

/* CAMBIO 2: Nuevos estilos para el contenedor del título y los 3 puntos */
#vista-citas .header-seccion {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0rem 1rem 0.5rem 1rem;
  /* --- AÑADE ESTAS DOS LÍNEAS --- */
  position: relative;
  /* Para que z-index funcione */
  z-index: 2;
  /* Para ponerlo en una capa superior */
  padding-top: 2rem;
}

#vista-citas .titulo-seccion {
  font-size: 1.8rem;
  /* Título más grande */
  font-weight: bold;
  color: #e0e0e0;
  padding: 0;
  margin: 0;
  box-shadow: none;

}

#vista-citas #listaCitasProximas,
#vista-citas #listaCitasHistorial {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  max-width: 800px;
  margin: 2rem auto;
  padding: 1rem;

  /* Aumentamos el espacio entre tarjetas */
}

#vista-citas .sin-citas {
  list-style: none;
  padding: 2rem;
  text-align: center;
  color: #c9c9c9;
  font-size: 1rem;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 12px;
  margin: 1rem 0;
}

#vista-citas .card-cita.desaparecer {
  animation: fadeOutScale 0.3s forwards ease-out;
}

@keyframes fadeOutScale {
  to {
    opacity: 0;
    transform: scale(0.8);
    height: 0;
    margin: 0;
    padding: 0;
  }
}

#vista-citas .modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.889);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
}

#vista-citas .modal {
  background: #ffffff09;
  padding: 1.5rem;
  border-radius: 12px;
  text-align: center;
  max-width: 300px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
}

#vista-citas .modal-buttons {
  margin-top: 1rem;
  display: flex;
  justify-content: space-around;
  gap: 1rem;
}

#vista-citas .btn {
  padding: 0.5rem 1.2rem;
  border: none;
  border-radius: 8px;
  font-weight: bold;
  cursor: pointer;
  font-size: 0.95rem;
}

#vista-citas .btn-aceptar {
  background-color: #2e7d32;
  color: white;
}

#vista-citas .btn-aceptar:hover {
  background-color: #1b5e20;
}

#vista-citas .btn-cancelar {
  background-color: #e6c8c8;
  color: #7d2e2e;
}

#vista-citas .btn-cancelar:hover {
  background-color: #d6a5a5;
}

#vista-citas .toast-exito {
  position: fixed;
  bottom: 100px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #4caf50;
  color: white;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  font-size: 0.95rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  z-index: 9999;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease-in-out;
}

#vista-citas .toast-exito.mostrar {
  opacity: 1;
}










/* === ESTILOS TARJETA DE CITA (NUEVOS) === */
#vista-citas .card-cita {
  background: rgba(0, 0, 0, 0); /* El fondo lo darán las secciones internas */
  backdrop-filter: blur(10px);
  border-radius: 20px;

  color: #fff;
  display: flex;
  flex-direction: column;
  gap: 1rem; /* Espacio entre las secciones de la tarjeta */
  padding: 0;
  overflow: visible;
  margin-bottom: 2rem;

  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.37);



}

#vista-citas .section {
  background: rgba(255, 255, 255, 0);
  backdrop-filter: blur(10px);
  padding: 1rem 1.2rem;
  border-radius: 12px;
  text-align: center;


  
}

#vista-citas .section h4 {
  margin: 0 0 1rem 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #d0ff00;
  text-transform: uppercase;
  letter-spacing: 1px;
  border-bottom: 1px solid #d0ff00;
  padding-bottom: 0.75rem;
  text-align: left;
}

/* Sección del Profesional */
#vista-citas .cita-profesional {
  display: flex;
flex-direction: column;
  align-items: center;
gap: 1rem;
  padding: 0.8rem;
}
#vista-citas .profesional-foto {
  width: 250px;
  height: 250px;

  object-fit: cover;

}
#vista-citas .profesional-nombre {
  font-size: 2.5rem;
  font-weight: bold;
  color: #fff;
}

/* Sección de Servicios */
#vista-citas .servicio-item {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    padding: 0.5rem 0;
}
#vista-citas .servicio-item span:first-child {
    color: #e0e0e0;
    text-align: left;
}
#vista-citas .servicio-item span:last-child {
    color: #fff;
    font-weight: 600;
}
#vista-citas .resumen-total {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    margin-top: 1rem;
    padding-top: 1rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
}
#vista-citas .resumen-total .total-duracion {
    font-size: 0.8em;
    color: #ccc;
    font-weight: normal;
    text-align: right;
}

/* Sección de Fecha y Hora */
#vista-citas .fecha {
  font-size: 1rem;
  color: #ddd;
  text-transform: capitalize;
}
#vista-citas .hora {
  font-size: 2.2rem;
  font-weight: bold;
  color: #d0ff00;
  margin-top: 0.5rem;
  text-shadow: 0 0 10px #d0ff00;
}

/* Nota final */
#vista-citas .nota-final p {
  font-size: 0.85rem;
  color: #bbb;
  margin: 0;
  line-height: 1.4;
}
#vista-citas .nota-final i {
    color: #ffaa00;
    margin-right: 8px;
}

/* Botón de cancelar */
#vista-citas .btn-cancelar-cita {
  background-color: #e53935; color: white; border: none; padding: 0.8rem;
  font-size: 1rem; font-weight: 600; cursor: pointer; width: 100%;
  transition: background-color 0.2s ease; border-radius: 8px;
}
#vista-citas .btn-cancelar-cita:hover:not([disabled]) { background-color: #c62828; }
#vista-citas .btn-cancelar-cita[disabled] {
  background-color: #555; cursor: not-allowed; opacity: 0.7;
}











/* CAMBIO 3: Nuevos estilos para el menú desplegable de 3 puntos */
#vista-citas .menu-historial {
    position: relative;
    display: inline-block;
}
#vista-citas .btn-puntos {
    background: none;
    border: none;
    color: #e0e0e0;
    font-size: 1.6rem;
    cursor: pointer;
    padding: 0.5rem;
}
#vista-citas .dropdown-contenido {
    display: none;
    position: absolute;
    right: 0;
    background-color: #2e2e2e;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.5);
    z-index: 10;
    border-radius: 8px;
    overflow: hidden;
}
#vista-citas .dropdown-contenido a {
    color: white;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    font-size: 0.95rem;
}
#vista-citas .dropdown-contenido a:hover {
    background-color: #444;
}
#vista-citas .menu-historial .mostrar {
    display: block;
}

/* ESTILOS HISTORIAL DESPLEGABLE */
#vista-citas .historial-desplegable #cabeceraHistorial {
  display: none; /* Oculta la cabecera por defecto */
}
#vista-citas .historial-desplegable.activo #cabeceraHistorial {
  display: flex; /* La muestra como flexbox cuando el historial está activo */
}
/* El resto de estilos para .historial-desplegable.activo se mantuvo igual */
  
 #vista-citas .historial-desplegable #listaCitasHistorial {
    max-height: 0;
    overflow: hidden;
    padding-top: 0;
    padding-bottom: 0;
    margin-top: 0;
    transition: max-height 0.4s ease-out, padding 0.4s ease-out, margin 0.4s ease-out;
  }
  #vista-citas .historial-desplegable.activo #listaCitasHistorial {
    max-height: 2000px;
    padding: 1rem;
    margin-top: 1rem;
    transition: max-height 0.5s ease-in, padding 0.5s ease-in, margin 0.5s ease-in;
  }






/* 
// ██████╗ ███████╗██████╗ ███████╗██╗██╗                                                                                                                      
// ██╔══██╗██╔════╝██╔══██╗██╔════╝██║██║                                                                                                                      
// ██████╔╝█████╗  ██████╔╝█████╗  ██║██║                                                                                                                      
// ██╔═══╝ ██╔══╝  ██╔══██╗██╔══╝  ██║██║                                                                                                                      
// ██║     ███████╗██║  ██║██║     ██║███████╗                                                                                                                 
// ╚═╝     ╚══════╝╚═╝  ╚═╝╚═╝     ╚═╝╚══════╝                                                                                                                 
// █████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗
// ╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝
   */







/* Elementos ocultos por defecto */

#vista-perfil #form-registro-completo {
  display: none;
z-index: 99;
position: relative; /* <-- AÑADE ESTA LÍNEA */
background-color: #1b1a1a;
height:75vh;
margin-bottom: 4rem;
}
#vista-perfil .container{
  display: none;

position: relative; /* <-- AÑADE ESTA LÍNEA */
background-color: #1b1a1a00;
height:75vh;
margin-bottom: 4rem;
}
/* Contenedor principal */
#vista-perfil .container {
  max-width: 500px;
  margin: 1rem auto;
  margin-top: 4rem;
  padding: 2rem;
}



#vista-perfil .profile-pic-container {
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 4rem;
  position: relative;
}

#vista-perfil #user-profile-pic {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #d0ff00;
  box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

#vista-perfil #change-photo-btn {
  position: absolute;
  bottom: 10px;
  right: 35%;
  background-color: var(--azul);
  border: none;
  color: white;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

#vista-perfil .profile-info h1 {
  font-size: 1.5rem;
  margin: 0.3rem 0;
  color: white;
}

#vista-perfil .profile-info p {
  color: #ccc;
  font-size: 0.95rem;
  margin-bottom: 1rem;
}

/* 🧾 Fila de info con estilo tipo tarjeta */
#vista-perfil .campo-perfil {
  background: rgba(255, 255, 255, 0.08);
  padding: 1rem;
  border-radius: 14px;
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;

  box-shadow: 0 4px 10px rgba(253, 253, 253, 0.241);
  color: white;
  backdrop-filter: blur(6px);
}

/* Etiqueta izquierda (ej: Nombre:) */
#vista-perfil .campo-perfil strong {
  min-width: 90px;
  font-weight: 600;
  color: #f1f1f1;
}

/* Campo visual (parece texto plano) */
#vista-perfil .campo-perfil input {
  flex: 1;
  border: none;
  padding: 0;
  background: transparent;
  color: white;
  font-size: 1rem;
  font-weight: 500;
  outline: none;
}

/* Solo si es readonly, que no se pueda clicar */
#vista-perfil .campo-perfil input[readonly] {
  pointer-events: none;
}


/* Botón editar ✏️ */
#vista-perfil .icon-button {
  background: none;
  border: none;
  color: #d0ff00;
  font-size: 1.2rem;
  cursor: pointer;
  transition: transform 0.2s ease;
}

#vista-perfil .icon-button:hover {
  transform: scale(1.2);
}

#vista-perfil .botones-finales {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  margin: 2rem auto 1rem;
}

#vista-perfil .btn-accion {
  border: 1px solid rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.05); /* transparente tipo cristal */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-radius: 50%;
  padding: 1rem;
  font-size: 1.4rem;
  cursor: pointer;
  color: white;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.3); /* brillo blanco */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60px;
  height: 60px;
  transition: transform 0.2s, box-shadow 0.3s;
}

#vista-perfil .btn-accion:hover {
  transform: scale(1.1);
  box-shadow: 0 0 20px rgba(255, 255, 255, 0.6);
}

#vista-perfil #spinner-carga {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(255, 255, 255, 0.85);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 10000;
}

@keyframes girar {
  to { transform: rotate(360deg); }
}

#vista-perfil #modal-exito {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100dvh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11000;
  display: flex;
  justify-content: center;
  align-items: center;
}

#vista-perfil .modal-contenido {
  background: white;
  padding: 2rem;
  border-radius: 20px;
  text-align: center;
  width: 80%;
  max-width: 350px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  animation: fadeInUp 0.4s ease;
}

#vista-perfil .modal-contenido i {
  font-size: 3rem;
  color: #28a745;
  margin-bottom: 1rem;
}

#vista-perfil .modal-contenido h2 {
  margin: 0 0 0.5rem;
  font-size: 1.5rem;
}

#vista-perfil .modal-contenido p {
  margin-bottom: 1.5rem;
  font-size: 1rem;
  color: #555;
}

#vista-perfil .modal-contenido button {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  font-size: 1rem;
  cursor: pointer;
}

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







/* ... dentro de tu etiqueta <style> ... */

/* ▼▼▼ AÑADE ESTE ESTILO PARA EL MENSAJE DE VERIFICACIÓN ▼▼▼ */
#vista-perfil #mensaje-verificacion-correo {
  background-color: rgba(241, 189, 56, 0.15); /* Fondo amarillo muy suave */
  color: #fdd870; /* Color del texto amarillo */
  padding: 0.8rem;
  margin: 0.5rem 0 1rem 0; /* Espacio arriba y abajo */
  border-radius: 10px;
  text-align: center;
  font-size: 0.85rem;
  border: 1px solid rgba(241, 189, 56, 0.4);
  backdrop-filter: blur(5px); /* Mantiene el efecto cristal */
  transition: all 0.3s ease;
}

#vista-perfil #mensaje-verificacion-correo a {
  color: #ffffff; /* El enlace en color blanco para que resalte */
  font-weight: bold;
  text-decoration: underline; /* Subrayado para indicar que es un enlace */
}
/* ▲▲▲ FIN DEL ESTILO A AÑADIR ▲▲▲ */

  /* 📋 Estilo del título */
#vista-perfil .titulo-registro {
  text-align: center;
  color: white;
  font-size: 1.6rem;
  margin-bottom: 2rem;
}

/* 🧊 Mismo estilo que perfil */
#vista-perfil #form-registro-completo.container {
  max-width: 500px;

  padding: 2rem;
}

/* Ya está cubierto por tu clase .campo-perfil y .btn-accion, así que no hace falta duplicar */

/* Mejora visual para input file */
#vista-perfil #form-foto::file-selector-button {
  background-color: var(--azul);
  color: white;
  border: none;
  padding: 0.4rem 1rem;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 500;
}

#vista-perfil #form-foto {
  font-size: 0.95rem;
  color: white;
  background: transparent;
  border: none;
  outline: none;
}
#vista-perfil .profile-pic-container {
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 2rem;
  position: relative;
}

#vista-perfil #form-preview-foto {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid var(--azul);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

#vista-perfil #form-change-photo-btn {
  position: absolute;
  bottom: 10px;
  right: 35%;
  background-color: var(--azul);
  border: none;
  color: white;
  border-radius: 50%;
  width: 42px;
  height: 42px;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

#vista-perfil input:-webkit-autofill {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset !important;
  -webkit-text-fill-color: white !important;
  caret-color: white;
  transition: background-color 9999s ease-in-out 0s;
}
#vista-perfil input:-moz-autofill {
  box-shadow: 0 0 0 1000px rgba(0, 0, 0, 0) inset !important;
  color: white !important;
}









































/* 


██████╗░██████╗░░█████╗░██████╗░██╗░░░██╗░█████╗░████████╗░█████╗░░██████╗
██╔══██╗██╔══██╗██╔══██╗██╔══██╗██║░░░██║██╔══██╗╚══██╔══╝██╔══██╗██╔════╝
██████╔╝██████╔╝██║░░██║██║░░██║██║░░░██║██║░░╚═╝░░░██║░░░██║░░██║╚█████╗░
██╔═══╝░██╔══██╗██║░░██║██║░░██║██║░░░██║██║░░██╗░░░██║░░░██║░░██║░╚═══██╗
██║░░░░░██║░░██║╚█████╔╝██████╔╝╚██████╔╝╚█████╔╝░░░██║░░░╚█████╔╝██████╔╝
╚═╝░░░░░╚═╝░░╚═╝░╚════╝░╚═════╝░░╚═════╝░░╚════╝░░░░╚═╝░░░░╚════╝░╚═════╝░

░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗█████╗
╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝╚════╝
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░
 */


/* ========================================================== */
/* ========== ESTILOS PARA EL CARRITO DE PRODUCTOS ========== */
/* ========================================================== */




/* ========================================================== */
/* === ESTILOS CORREGIDOS PARA MODAL DE CARRITO (PANTALLA COMPLETA) === */
/* ========================================================== */

/* 1. EL OVERLAY (FONDO OSCURO Y BORROSO) */
/* Esta regla asegura que el contenedor principal ocupe TODA la pantalla y esté por encima de TODO. */
#modal-carrito.modal-overlay {
    position: fixed; /* ¡Clave! Lo saca del flujo normal de la página. */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999; /* Un número muy alto para que esté en la capa superior. */
    
    /* Estilos visuales para el fondo */
    background-color: rgba(28, 26, 26, 0.85); /* Un fondo oscuro semitransparente */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Mantenemos display: none para que JS lo controle */
    display: none; 
}

/* 2. LA VENTANA INTERNA DEL MODAL */
/* Hacemos que la ventana interna ocupe el 100% del overlay. */
#modal-carrito .modal {
    width: 100%;
    height: 100%;
    max-width: none; /* Anulamos cualquier límite de ancho */
    border-radius: 0; /* Sin bordes redondeados en pantalla completa */
    box-shadow: none;   /* Sin sombra en pantalla completa */
    
    /* Usamos Flexbox para organizar el contenido verticalmente */
    display: flex;
    flex-direction: column;
    
    /* El fondo es transparente porque el overlay ya tiene el color y el blur */
    background-color: transparent; 

    /* Evitamos que el propio modal tenga scroll */
    overflow: hidden;
}

/* 3. HEADER, FOOTER Y CONTENIDO SCROLLEABLE */
/* Nos aseguramos de que el header y el footer no se encojan */
#modal-carrito .modal-header,
#modal-carrito .modal-footer {
    flex-shrink: 0; 
}

/* ¡Clave! Hacemos que SOLO la lista de items pueda hacer scroll si es necesario. */
#modal-carrito #carrito-items-container {
    flex-grow: 1; /* Ocupa todo el espacio vertical disponible */
    overflow-y: auto; /* Añade barra de scroll si el contenido se desborda */
    padding: 10px 20px; /* Mantenemos el padding interno */
}


/* 4. ESTILOS ADICIONALES (YA LOS TENÍAS, PERO LOS AGRUPAMOS PARA CLARIDAD) */

#modal-carrito .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

#modal-carrito .modal-header h3 {
    margin: 0;
    color: #d0ff00;
}

#modal-carrito .btn-cerrar-modal {
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
}

.carrito-item-vacio {
    text-align: center;
    padding: 40px 20px;
    color: #ccc;
}

.carrito-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.carrito-item-imagen {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 15px;
}

.carrito-item-info { flex-grow: 1; }
.carrito-item-info h4 { margin: 0 0 5px 0; font-size: 1rem; }
.carrito-item-info .precio { font-size: 0.9rem; color: #ccc; }
.carrito-item-controles { display: flex; align-items: center; }
.controles-cantidad { display: flex; align-items: center; margin-right: 15px; }
.controles-cantidad button { background: #444; color: white; border: none; width: 28px; height: 28px; border-radius: 50%; font-size: 1rem; cursor: pointer; }
.controles-cantidad span { padding: 0 12px; font-weight: bold; min-width: 20px; text-align: center; }
.btn-eliminar-item { background: none; border: none; color: #ff6b6b; font-size: 1.2rem; cursor: pointer; }


#modal-carrito .modal-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: #1b1a1a; /* o el color de fondo del modal */
    z-index: 9999;

    padding: 25px 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}


#modal-carrito .carrito-total {
    display: flex;
    justify-content: space-between;
    align-items: center;

    font-size: 1.8rem;
    font-weight: bold;
    width: 100%; /* Asegura que ocupe todo el ancho disponible */
}

/* No olvides tu botón de pago */
#modal-carrito .modal-footer .btn-aceptar {
    background-color: #f1bd38;
    color: #1b1a1a;
    padding: 12px 20px;
    border: none;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
}




/* --- Contenedor del icono del carrito en el header --- */
.icono-carrito-container {
    position: relative;
    cursor: pointer;
    padding: 10px;
    margin-right: 15px; /* Espacio a la derecha */
}

.icono-carrito-container .fa-shopping-cart {
    font-size: 1.5rem; /* Tamaño del icono */
    color: #ffffff;
}

/* --- Badge (burbuja) con la cantidad de productos --- */
.carrito-badge {
    position: absolute;
    top: 0px;
    right: 0px;
    background-color: #d0ff00;
    color: rgb(0, 0, 0);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 0.75rem;
    font-weight: bold;
    border: 2px solid #2c2c2c; /* Borde para que destaque sobre el fondo */
}

/* --- Botón para añadir productos en cada tarjeta --- */
.btn-anadir-carrito {

    background-color: #2c2c2c;
    color: #ffffff;
    border: none;
height: 3.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, background-color 0.2s;
}

.btn-anadir-carrito:hover {
    transform: scale(1.2);
    background-color:#00000053 ;
}

/* Aseguramos que la tarjeta del producto tenga position: relative */
.producto-card {
    position: relative; 
}

/* --- Animación del producto volando al carrito --- */
.producto-fantasma {
    position: fixed; /* O absolute, dependiendo del contenedor principal */
    z-index: 10001; /* Debe estar por encima de todo */
    border-radius: 10px;
    transition: all 0.8s cubic-bezier(0.55, 0, 0.85, 0.36); /* Curva de aceleración */
    pointer-events: none; /* Para que no interfiera con otros clics */
}



#modal-carrito .btn-cerrar-modal {
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
}

/* --- Contenido del Modal (lista de items) --- */
#carrito-items-container {
    padding: 10px 20px;
}
.carrito-item-vacio {
    text-align: center;
    padding: 40px 20px;
    color: #ccc;
}

.carrito-item {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.carrito-item-imagen {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 8px;
    margin-right: 15px;
}

.carrito-item-info {
    flex-grow: 1;
}

.carrito-item-info h4 {
    margin: 0 0 5px 0;
    font-size: 1rem;
}

.carrito-item-info .precio {
    font-size: 0.9rem;
    color: #ccc;
}

.carrito-item-controles {
    display: flex;
    align-items: center;
}

.controles-cantidad {
    display: flex;
    align-items: center;
    margin-right: 15px;
}

.controles-cantidad button {
    background: #444;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1rem;
    cursor: pointer;
}

.controles-cantidad span {
    padding: 0 12px;
    font-weight: bold;
    min-width: 20px;
    text-align: center;
}

.btn-eliminar-item {
    background: none;
    border: none;
    color: #ff6b6b;
    font-size: 1.2rem;
    cursor: pointer;
}




/* ============================================= */
/* ========== ESTILOS PARA EL CATÁLOGO ========= */
/* ============================================= */

#catalogo-productos-container {
    padding-bottom: 80px; /* Espacio para que no lo tape el menú inferior */
}

.catalogo-categoria-titulo {
    backdrop-filter: blur(10px);
    background-color: #00000000;
    color: #d0ff00;
    font-size: 1.8rem;
    font-weight: 600;
    margin-top: 2.5rem;
    margin-bottom: 1.5rem;
    padding-bottom: 2rem;
    text-align: left;
padding-left: 2rem;
}

.productos-grid {
    display: grid;
    /* Esto crea exactamente dos columnas que ocupan el mismo espacio */
    grid-template-columns: repeat(2, 1fr); 
    gap: 20px;
    margin: 1rem;
}
.producto-card {
    position: relative; /* <-- AÑADIDO CLAVE: ESTO ARREGLA TODO */
    background-color: #2a2a2e00;
    backdrop-filter: blur(15px);
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.4);
    display: flex;
    flex-direction: column;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.producto-card-actions {
    position: absolute;
    top: 15px;   /* Cambiado de 'bottom' */
    right: 15px;  /* Cambiado de 'left' */
    z-index: 5;
}

.producto-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.6);
}

.producto-card-imagen {
    width: 100%;
    height: 100px;
    object-fit: contain;
}

.producto-card-cuerpo {

    padding: 10px;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Para que ocupe el espacio restante */
}

.producto-card-nombre {
    font-size: 1.25rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: #ffffff;
}

.producto-card-descripcion {
    font-size: 0.9rem;
    color: #b0b0b0;
    margin-bottom: 15px;
    flex-grow: 1;
}

.producto-card-precio {
    font-size: 1.4rem;
    font-weight: bold;
    color: #d0ff00;
    margin-top: auto; /* Empuja el precio hacia abajo */
}

.producto-card-variantes ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.producto-card-variantes li {
    display: flex;
    justify-content: space-between;
    font-size: 1rem;
    color: #e0e0e0;
    padding: 5px 0;
}

.producto-card-variantes li strong {
    color: #d0ff00;
}



















/* CÓDIGO A AÑADIR EN: style5.css */

/* ========================================================== */
/* ===     ESTILOS PARA MODAL DE DETALLES DE PRODUCTO     === */
/* ========================================================== */

/* El overlay ya está cubierto por la regla #modal-carrito.modal-overlay, 
   pero podemos asegurarnos de que esta también funcione de forma independiente */
#modal-producto-detalle.modal-overlay {
  
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 100000; /* Un z-index aún más alto para que aparezca sobre el modal del carrito si fuera necesario */
    background-color: rgba(20, 20, 20, 0.773);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    display: none; /* Controlado por JS */
}

/* La ventana principal del modal */
#modal-producto-detalle .modal-detalle-producto {
    width: 100%;
    height: 100%;
    background-color: transparent;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    animation: fadeIn 0.4s ease; /* Animación de entrada */
}

/* Botón de cerrar (la 'X') */
.btn-cerrar-modal-detalle {
    position: absolute;
    top: 15px;
    right: 15px;
    background: rgba(0, 0, 0, 0.4);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 2rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    transition: transform 0.2s, background-color 0.2s;
}
.btn-cerrar-modal-detalle:hover {
    transform: scale(1.1);
    background-color: rgba(0, 0, 0, 0.7);
}

/* Contenedor del contenido que se podrá desplazar */
/* Reemplázala con esta versión corregida */
.modal-detalle-contenido {
    flex-grow: 1;
    overflow-y: auto;
    padding: 2rem;
    /* AÑADIDO CLAVE: Espacio extra al final para que el footer no tape el contenido */
    padding-bottom: 120px; /* Aumentamos el espacio para asegurar que quepa todo */
}

/* Imagen del producto */
.detalle-producto-imagen {
    width: 100%;
    height: 40vh; 
    object-fit: contain; /* <-- CAMBIO CLAVE: Ahora la imagen siempre se verá completa */
    background-color: rgba(0, 0, 0, 0.2); /* Opcional: un fondo por si la imagen no ocupa todo el espacio */
}
/* === NUEVOS ESTILOS PARA EL SLIDER DE IMÁGENES DEL MODAL === */

.slider-container {
    position: relative;
    width: 100%;

    overflow: hidden; /* Oculta las imágenes que están fuera de la vista */
}

.slider-track {
    display: flex;
    height: 100%;
    transition: transform 0.4s ease-in-out; /* Animación de deslizamiento */
}

.slider-slide {
    flex: 0 0 100%; /* Cada slide ocupa el 100% del contenedor */
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.slider-slide img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Usamos contain para que se vea la imagen completa */
    display: block;
}

.slider-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 20px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s;
}

.slider-arrow:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.slider-arrow.prev {
    left: 10px;
}

.slider-arrow.next {
    right: 10px;
}

.slider-dots {
    position: absolute;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 8px;
}

.slider-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.5);
    cursor: pointer;
    transition: background-color 0.2s;
}

.slider-dot.active {
    background-color: white;
}

/* Contenedor para el texto (nombre, descripción, precio) */

/* Nombre del producto */
.detalle-producto-nombre {
    font-size: 2rem;
    font-weight: 700;
    color: white;
    margin: 0 0 15px 0;
    line-height: 1.2;
}

/* Descripción del producto */
.detalle-producto-descripcion {
    font-size: 1rem;
    color: #ccc;
    line-height: 1.6;
    margin-top: 2rem;
}

/* Contenedor del precio o variantes */
#detalle-producto-precio-container {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    margin-top:2rem;

}
.detalle-precio-unico {
    font-size: 2rem;
    font-weight: bold;
    color: #d0ff00; /* Verde lima característico */
    text-align: center;
}
.detalle-variantes-lista {
    list-style: none;
    padding: 0;
    margin: 0;
}
.detalle-variantes-lista li {
    display: flex;
    justify-content: space-between;
    font-size: 1.1rem;
    color: #e0e0e0;
    padding: 10px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.detalle-variantes-lista li:last-child {
    border-bottom: none;
}
.detalle-variantes-lista li strong {
    color: #d0ff00;
}

/* Pie de página fijo */
.modal-detalle-footer {
    flex-shrink: 0;
    padding: 15px;
    background: linear-gradient(to top, rgba(15, 15, 15, 1), rgba(15, 15, 15, 0)); /* Degradado para integrar con el fondo */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin-bottom: 1rem;
}

/* Botón grande para añadir al carrito */
.btn-anadir-desde-detalle {
    width: 100%;
    padding: 18px;
    font-size: 1.1rem;
    font-weight: 600;
    background-color: #d0ff00;
    color: #1b1a1a;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: transform 0.2s;
}
.btn-anadir-desde-detalle:active {
    transform: scale(0.98);
}


/* CÓDIGO A AÑADIR EN: style5.css */

/* ========================================================== */
/* === ESTILOS PARA SELECTOR DE CANTIDAD EN MODAL DETALLE === */
/* ========================================================== */

/* Hacemos que el footer sea un contenedor flexible */
.modal-detalle-footer {
    display: flex;
    align-items: center;
    gap: 15px; /* Espacio entre el selector y el botón */
}

/* Estilos para el contenedor del selector (+, -, número) */
.controles-cantidad-detalle {
    display: flex;
    align-items: center;
margin-top: 2rem;
    border-radius: 10px;
    padding: 5px;
    justify-content: center;
}

/* Estilos para los botones + y - */
.controles-cantidad-detalle .btn-cantidad {
    background: #444;
    color: white;
    border: none;
    width: 40px;  /* Botones más grandes y táctiles */
    height: 40px;
    border-radius: 8px;
    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
.controles-cantidad-detalle .btn-cantidad:hover {
    background-color: #555;
}

/* Estilos para el número de la cantidad */
.controles-cantidad-detalle #cantidad-detalle {
    padding: 0 15px;
    font-weight: bold;
    font-size: 1.2rem;
    min-width: 25px;
    text-align: center;
    color: white;
}

/* Hacemos que el botón principal ocupe el espacio restante */
.modal-detalle-footer .btn-anadir-desde-detalle {
    flex-grow: 1;
}









/* ========================================================== */
/* ===     ESTILOS PARA EL BOTÓN DE ACCIÓN FLOTANTE (FAB) === */
/* ========================================================== */

/* Estilos para el nuevo botón flotante #btn-crear-producto-fab */
#btn-crear-producto-fab {
    position: fixed;            /* Fijo en la pantalla */
    bottom: 120px;               /* 75px de la nav-inferior + 15px de margen */
    right: 20px;                /* Margen desde la derecha */
    z-index: 1000;              /* Por encima de casi todo */

    width: 60px;                /* Ancho del círculo */
    height: 60px;               /* Alto del círculo */
    background-color: #d0ff00;  /* Color de acento verde-lima */
    color: #000000;             /* Color del icono '+' (oscuro para contraste) */
    border: none;
    border-radius: 50%;         /* Lo hace perfectamente redondo */
    
    display: flex;              /* Para centrar el icono fácilmente */
    align-items: center;
    justify-content: center;
    
    font-size: 1.8rem;          /* Tamaño del icono '+' */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    cursor: pointer;
    transition: transform 0.2s ease-out, background-color 0.2s ease;
}

#btn-crear-producto-fab:hover {
    transform: scale(1.1);      /* Efecto de agrandar al pasar el ratón */
    background-color: #e0ff4a;  /* Un poco más brillante en hover */
}

#btn-crear-producto-fab:active {
    transform: scale(0.95);     /* Efecto de pulsar */
}


  #vista-productos .btn-action-icon {
    background-color: #2c2c2c00;
    color: var(--azul);


    border: none;

    font-size: 1.5rem;
    font-weight: bold;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.2s ease, background-color 0.2s;
}












































/* ========================================================== */
/* ===     PANEL DE GESTIÓN DE PRODUCTOS (MODERNIZADO)    === */
/* ========================================================== */

/* --- Variables Globales y Estilos Base --- */
:root {
    --color-bg-panel: #181A1F;
    --color-bg-content: #21242A;
    --color-bg-input: #2B2E36;
    --color-border: #40444C;
    --color-text-primary: #EAEAEA;
    --color-text-secondary: #9DA3AE;
    --color-accent-primary: #3A86FF;
    --color-accent-danger: #D94452;
    --border-radius-sm: 6px;
    --border-radius-md: 10px;
    --font-family-base: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --shadow-panel: -4px 0 25px rgba(0, 0, 0, 0.3);
    --shadow-focus: 0 0 0 3px rgba(58, 134, 255, 0.25);
    --transition-speed: 0.3s;
}

body.panel-abierto {
    overflow: hidden;
}

/* --- Estructura del Panel --- */
.panel-gestion-producto {
    position: fixed;
    top: 0;
    right: 0;
    width: 100%;
    max-width: 450px;
    height: 100%;
    background-color: var(--color-bg-panel);
    z-index: 10001;
    display: flex;
    flex-direction: column;
    box-shadow: var(--shadow-panel);
    transform: translateX(100%);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-family: var(--font-family-base);
    color: var(--color-text-primary);
}

.panel-gestion-producto.visible {
    transform: translateX(0);
}

/* --- Contenido y Cabecera del Panel --- */
.panel-gestion-producto__contenido {
    flex-grow: 1;
    overflow-y: auto;
    padding: 25px;
    padding-top: 75px; /* Espacio para el botón de cierre */
    background-color: var(--color-bg-content);
}

.panel-gestion-producto__contenido h3 {
    margin: 0 0 30px 0;
    text-align: center;
    font-size: 1.5rem;
    font-weight: 600;
}

.panel-gestion-producto__cerrar {
    position: absolute;
    top: 15px;
    right: 15px;
    background: transparent;
    color: var(--color-text-secondary);
    border: none;
    border-radius: 50%;
    width: 45px;
    height: 45px;
    font-size: 2.2rem;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform var(--transition-speed), color var(--transition-speed);
    z-index: 10;
}

.panel-gestion-producto__cerrar:hover {
    transform: scale(1.1) rotate(90deg);
    color: var(--color-text-primary);
}

/* --- Estilos de Formulario --- */
.form-group {
    margin-bottom: 22px;
}

.form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    color: var(--color-text-secondary);
    font-size: 0.9rem;
}

.form-control {
    width: 90%;
    padding: 12px 16px;
    background-color: var(--color-bg-input);
    border: 1px solid var(--color-border);
    border-radius: var(--border-radius-md);
    color: var(--color-text-primary);
    font-family: var(--font-family-base);
    font-size: 1rem;
    transition: border-color var(--transition-speed), box-shadow var(--transition-speed);
}

.form-control::placeholder {
    color: #6a707c;
}

.form-control:focus {
    outline: none;
    border-color: var(--color-accent-primary);
    box-shadow: var(--shadow-focus);
}

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

/* Estilo para el select (añade flecha personalizada) */
select.form-control {
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239DA3AE' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 16px center;
    background-size: 1em;
}


/* --- Carga de Imagen --- */
.image-upload-wrapper {
    display: flex;
    align-items: center;
    gap: 16px;
    background-color: var(--color-bg-input);
    padding: 12px;
    border-radius: var(--border-radius-md);
    border: 1px solid var(--color-border);
}

#producto-imagen-preview {
    width: 70px;
    height: 70px;
    border-radius: var(--border-radius-sm);
    object-fit: cover;
    flex-shrink: 0;
}

.image-upload-wrapper .btn {
    flex-grow: 1;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* --- Footer y Sistema de Botones --- */
.panel-gestion-producto__footer {
    flex-shrink: 0;
    padding: 20px 25px;
    border-top: 1px solid var(--color-border);
    background-color: var(--color-bg-panel);
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.btn {
    width: 100%;
    padding: 14px;
    font-family: var(--font-family-base);
    font-size: 1rem;
    font-weight: 600;
    border: none;
    border-radius: var(--border-radius-md);
    cursor: pointer;
    transition: transform var(--transition-speed), background-color var(--transition-speed), opacity var(--transition-speed);
}
.btn:hover {
    transform: translateY(-2px);
    opacity: 0.9;
}
.btn:active {
    transform: translateY(-1px);
}

.btn--primary {
    background-color: var(--color-accent-primary);
    color: white;
}

.btn--danger {
    background-color: var(--color-accent-danger);
    color: white;
}

.btn--secondary {
    background-color: #3C4049;
    color: var(--color-text-primary);
}
.btn--secondary:hover {
    background-color: #4a4f5a;
    opacity: 1; /* Sobrescribimos el hover genérico si queremos un efecto distinto */
}










/* Estilos para el formulario de variantes de productos */
.form-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 2rem 0;
}

#variantes-container {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.variante-form-group {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    padding: 1rem;
}

.variante-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    padding-bottom: 0.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.variante-header strong {
    color: #f1bd38;
}

.btn-eliminar-variante {
    background: #e53935;
    color: white;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 1.2rem;
    line-height: 28px;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s;
}

.btn-eliminar-variante:hover {
    background: #c62828;
}

.variante-body {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.variante-imagen-container {
    flex-shrink: 0;
}

.variante-imagen-container img {
    width: 80px;
    height: 80px;
    object-fit: cover;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    cursor: pointer;
}

.variante-inputs {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.8rem;
}

.form-group-inline {
    display: flex;
    flex-direction: column;
}

.form-group-inline label {
    font-size: 0.85rem;
    margin-bottom: 4px;
    color: #ccc;
}

.btn--add-variant {
    width: 100%;
    padding: 10px;
    font-weight: 600;
}






























/* --- Estilos para las variantes en el Modal de Detalle --- */

.detalle-variantes-selector {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 1rem 0;
    flex-wrap: wrap;
}

.detalle-variante-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 16px;
    border-radius: 20px;
    font-size: 1rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
}

.detalle-variante-btn:hover {
    background-color: rgba(255, 255, 255, 0.25);
}

.detalle-variante-btn.activo {
    background-color: #d0ff00; /* Color primario */
    color: #1b1a1a;
    border-color: #f1bd38;
    font-weight: 600;
}

.detalle-precio-dinamico {
    font-size: 3rem;
    font-weight: bold;
    color: white; /* Color primario */
    text-align: center;
    margin-top: 2rem;
}






/* --- Estilos para las tarjetas de producto con variantes --- */

.producto-card-cuerpo {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.producto-card-descripcion {
    flex-grow: 1; /* Hace que la descripción ocupe el espacio sobrante */
    margin-bottom: 1rem;
    min-height: 40px; /* Evita que las tarjetas salten de tamaño si una no tiene descripción */
}


/* Contenedor para los botones de variantes en la tarjeta */
.producto-variantes-selector {
    display: grid;
    
    /* ▼▼▼ LA ÚNICA LÍNEA QUE NECESITAS CAMBIAR ▼▼▼ */
    /* Esto crea siempre 3 columnas de igual tamaño. */
    grid-template-columns: repeat(2, 1fr);
    
    gap: 8px;
    width: 100%;

    box-sizing: border-box;
    margin-bottom: 12px;
}

/* El estilo del botón .variante-btn se mantiene igual */
.variante-btn {
    background-color: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 8px 10px;
    border-radius: 20px;
    font-size: 0.8rem;
    cursor: pointer;
    transition: background-color 0.2s, color 0.2s;
    text-align: center;
    width: 100%;
}

.variante-btn:hover {
    background-color: rgba(255, 255, 255, 0.2);
}

/* Estilo del botón de variante ACTIVO */
.variante-btn.activo {
    background-color: #d0ff00; /* Color primario */
    color: #1b1a1a; /* Color de fondo oscuro */
    border-color: #d0ff00;
    font-weight: 600;
}

/* Contenedor del precio dinámico */
.producto-card-precio-dinamico {
    font-size: 1.8rem;
    font-weight: bold;
    color: #ffffff; /* Color primario */
    text-align: center;
    margin-bottom: 1rem;
}

/* Ajuste al botón de añadir para que no se monte */
.producto-card-cuerpo .btn-anadir-carrito {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 45px;
    height: 45px;
    font-size: 2rem;
}
















/* ... Dentro de tu etiqueta <style> en el <head> ... */

/* ▼▼▼ AÑADE ESTOS NUEVOS ESTILOS ▼▼▼ */

.upsell-footer-fijo {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #1b1a1a;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 15px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.2);
    z-index: 100;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.total-carrito-upsell {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1rem;
    margin-bottom: 5px;
}
.total-carrito-upsell strong {
    font-size: 1.2rem;
    color: #f1bd38;
}

.btn-finalizar-upsell {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background-color: #f1bd38;
    color: #1b1a1a;
}

.btn-saltar-upsell-vista {
    width: 100%;
    background: none;
    border: none;
    color: #fff;
    opacity: 0.7;
    text-decoration: underline;
    cursor: pointer;
    padding-top: 5px;
}


















/* ========================================================== */
/* === ESTILOS PARA PRODUCTOS EN LA VISTA DE RESERVA (PASO 5) === */
/* ========================================================== */


/* Pega este código dentro de tu etiqueta <style> */

/* 1. Asegura el layout horizontal para los productos en la reserva */
#productos-en-reserva-container {
  display: flex;          /* Usa Flexbox para alinear los productos en una fila */
  flex-wrap: nowrap;      /* Evita que los productos salten a la siguiente línea */
  overflow-x: auto;       /* Habilita el scroll horizontal si el contenido se desborda */
  overflow-y: hidden;     /* Oculta cualquier scroll vertical accidental */
  -webkit-overflow-scrolling: touch; /* Mejora la experiencia de scroll en iOS */
  padding: 5px 0 20px 5px; /* Añade un poco de espacio para que no se vea cortado */
  
  /* Ocultar la barra de scroll por defecto */
  scrollbar-width: none;  /* Para Firefox */
}

/* Ocultar la barra de scroll en navegadores Webkit (Chrome, Safari, etc.) */
#productos-en-reserva-container::-webkit-scrollbar {
  display: none;
}

/* 2. Define la animación de "pista" */
@keyframes pista-scroll {
  0%, 100% {
    transform: translateX(0); /* Posición inicial y final */
  }
  50% {
    transform: translateX(-80px); /* Desplazamiento máximo a la izquierda */
  }
}

/* 3. Crea la clase que aplicará la animación */
.animacion-scroll-horizontal {
  /* La animación 'pista-scroll' durará 2.5s, empezará tras 1.5s de espera y se ejecutará 1 vez */
  animation: pista-scroll 2.5s ease-in-out 1.5s 1;
}
























/* Estilo de la mini-tarjeta de producto */
.producto-reserva-card {
    /* ...tus estilos existentes están bien... */
    /* AÑADIMOS ESTAS DOS LÍNEAS PARA ASEGURAR EL COMPORTAMIENTO: */
    flex-shrink: 0;   /* Evita que las tarjetas se encojan para intentar caber. */
    width: 150px;     /* Damos un ancho fijo a cada tarjeta para que el scroll sea consistente. */
}

/* (El resto de tus estilos para .producto-reserva-card se mantienen igual) */
.producto-reserva-card {
    background-color: rgba(42, 42, 46, 0.8);
    backdrop-filter: blur(10px);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.producto-reserva-card img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    margin-bottom: 10px;
}

.producto-reserva-card h4 {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    color: #fff;
    font-weight: 800;
    height: 1.5em; 
    line-height: 1.25em;
    overflow: hidden;
}

.producto-reserva-card .precio {
    font-size: 1.1rem;
    font-weight: bold;
    color: #d0ff00;

    margin: 0 0 10px;
}

.producto-reserva-card .btn-anadir-producto-reserva {
    width: 100%;
    background-color: #3e3e42;
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 8px;
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.producto-reserva-card .btn-anadir-producto-reserva:hover {
    background-color: #505054;
}

.producto-reserva-card.agregado {
    border-color: #d0ff00;
}

.producto-reserva-card.agregado .btn-anadir-producto-reserva {
    background-color: #d0ff00;
    color: #1b1a1a;
}































/* ===== ESTILOS PARA EL BOTÓN DE CONFIRMACIÓN FIJO ===== */
#btn-confirmar-reserva-final.btn-reservar {    bottom: 110px;     /* Justo encima de la navegación inferior */
    left: 0;
    right: 0;
    width: 100%;
    padding: 15px 20px;
    margin: 0;
    background: #d0ff00; /* Fondo degradado */
    border: none;
    border-radius: 10px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    color: rgb(0, 0, 0);
    font-size: 1.2rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 100;
    transition: background 0.3s ease;
}

/* Opcional: efecto hover */
#btn-confirmar-reserva-final.btn-reservar:hover {
    background: linear-gradient(to top, #292828, rgba(50, 50, 50, 0.8));
}






























/* style.css o en la etiqueta <style> del head */

/* Estilo para el nuevo botón de 'volver' */
.btn-volver {
  background: none;
  border: none;
  color: white;
  font-size: 1.2rem;
  cursor: pointer;
  position: absolute;
  left: 15px;
}

/* Contenedor para las opciones de pago */
#vista-opciones-pago {
  padding: 20px;
  text-align: center;
}

.opciones-pago-container {
  display: flex;
  flex-direction: column;
  gap: 15px; /* Espacio entre los botones */
  margin-top: 1rem;
}

/* Estilo para los botones de opción (Domicilio / Tienda) */
.btn-opcion-pago {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 15px;
  font-size: 1rem;
  font-weight: 600;
  border: 1px solid #f1bd38;
  border-radius: 12px;
  background-color: transparent;
  color: #f1bd38;
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.btn-opcion-pago:hover {
  background-color: #f1bd38;
  color: #1b1a1a;
}

.btn-opcion-pago i {
  font-size: 1.2rem;
}




/* ========================================================== */
/* === UNIFICACIÓN DE ESTILO: VISTA DE CITAS Y RESUMEN    === */
/* ========================================================== */

/* 1. Reseteamos el contenedor principal de la tarjeta */
#vista-citas .card-cita {
    background: transparent; /* Quitamos el fondo oscuro general */
    border: none;            /* Quitamos el borde azul */
    box-shadow: none;        /* Quitamos la sombra principal */
    padding: 0;              /* Quitamos el padding para que las secciones internas lo controlen */
    gap: 1rem;               /* Mantenemos el espacio entre secciones */
}

/* 2. Aplicamos el estilo de las 'secciones' del modal a las de la vista de citas */
#vista-citas .card-cita .section {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    padding: 1rem 1.2rem;
    text-align: center;
}

/* 3. Replicamos el estilo de la cabecera de la sección (título en mayúsculas) */
#vista-citas .card-cita .section h4 {
    color: #aaa;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 1px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    padding-bottom: 0.75rem;
    margin-bottom: 1rem;
    text-align: left; /* Alineamos el título a la izquierda */
}

/* 4. Ajustamos la sección del profesional para que sea horizontal y más compacta */
#vista-citas .card-cita .cita-profesional {
    display: flex;
    flex-direction: row; /* La clave: imagen y nombre en una fila */
    align-items: center;
    gap: 15px;
    padding: 0.75rem 1rem;
}

/* Ocultamos el título "h4" de la sección del profesional, como en el resumen */
#vista-citas .card-cita .cita-profesional h4 {
    display: none;
}

/* Reducimos el tamaño de la foto del profesional */
#vista-citas .card-cita .profesional-foto {
    width: 90px;
    height: 90px;
    border-radius: 50%; /* Aseguramos que sea un círculo */
}

/* Ajustamos el nombre del profesional */
#vista-citas .card-cita .profesional-nombre {
    font-size: 1.5rem; /* Reducimos el tamaño de la fuente */
    text-align: left;
}

/* 5. Unificamos el estilo de la fecha y la hora */
#vista-citas .card-cita .fecha {
    font-size: 1rem;
    color: #ddd;
    text-transform: capitalize;
}

#vista-citas .card-cita .hora {
    font-size: 2.2rem;
    font-weight: bold;
    color: #00d2d3; /* Usamos el mismo color cian brillante */
    margin-top: 0.5rem;
    text-shadow: 0 0 10px rgba(0, 210, 211, 0.5);
}

/* 6. Unificamos los estilos de la lista de servicios y el total */
#vista-citas .card-cita .servicio-item,
#vista-citas .card-cita .resumen-total {
    font-size: 1rem; /* Aseguramos un tamaño de fuente consistente */
}

/* 7. Reestilizamos la sección del botón de cancelar para que esté integrada */
#vista-citas .card-cita .btn-cancelar-cita {
    border-radius: 10px;
    padding: 14px;
    font-size: 1rem;
}
/* ========================================================== */
/* === ESTILOS PARA TARJETA DE CITA DESPLEGABLE (ACORDEÓN) === */
/* ========================================================== */

/* 1. Hacemos que la tarjeta principal sea 'clicable' y preparamos la transición */
#vista-citas .card-cita {
    cursor: pointer;
    user-select: none; /* Evita que el texto se seleccione al hacer clic */
    transition: background-color 0.3s ease;
}

/* 2. El encabezado (fecha y hora) ahora es flexible para alojar la flecha */
#vista-citas .card-cita .cita-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* 3. Estilo y animación para la flecha desplegable */
#vista-citas .flecha-desplegable {
    font-size: 1.5rem;
    color: white;
    transition: transform 0.4s ease-in-out;
}

/* 4. EL CONTENEDOR MÁGICO: por defecto está colapsado */
#vista-citas .cita-contenido-desplegable {
    max-height: 0; /* ¡La clave! Altura cero por defecto */
    overflow: hidden; /* Oculta el contenido que se desborda */
    transition: max-height 0.5s ease-in-out; /* Animación suave */
}

/* 5. CUANDO LA TARJETA ESTÁ ACTIVA (DESPLEGADA)... */
#vista-citas .card-cita.activa .cita-contenido-desplegable {
    /* Le damos una altura suficiente para mostrar todo el contenido */
    max-height: 1500px; 
}

#vista-citas .card-cita.activa .flecha-desplegable {
    /* Giramos la flecha 180 grados */
    transform: rotate(180deg);
}