/* =========================================
   CORRECCIÓN DE VISUALIZACIÓN (CELULAR VS PC)
   ========================================= */

/* 1. Asegurar que el padding no agrande los elementos */
* {
    box-sizing: border-box;
}

/* 2. Fondo para la PC (gris clarito para que resalte la app) */
body {
    background-color: #F4F1EA; /* Color de fondo de escritorio */
    margin: 0;
    font-family: sans-serif; /* O tu tipografía */
    display: flex;
    justify-content: center; /* Centra el marco horizontalmente */
    min-height: 100vh; /* Asegura que ocupe todo el alto */
}

/* 3. EL MARCO DEL CELULAR VIRTUAL */
.app-frame-container {
    width: 100%; /* En celular ocupa todo el ancho */
    max-width: 430px; /* EN PC: No deja que pase de 430px (ancho de un iPhone Max) */
    
    background-color: #F4F1EA; /* Fondo blanco de la app */
    min-height: 100vh; /* Ocupa toda la altura de la pantalla */
    
    margin: 0 auto; /* Centrado automático si falla el flex del body */
    position: relative; /* Necesario para elementos fixed/absolute */
    
    /* LA CLAVE: Oculta todo lo que intente salirse horizontalmente */
    overflow-x: hidden; 
    
    /* Opcional: Sombrita para que parezca que flota en PC */
    box-shadow: 0 0 20px rgba(0,0,0,0.1); 
}

/* IMPORTANTE: Asegúrate que tu .top-nav y .bottom-nav
   tengan 'position: absolute' o que si usan 'fixed'
   estén dentro de este contenedor y referenciados correctamente.
   Si tus barras se ven raras, avísame y ajustamos ese detalle. */


/* ========================================= */

/* 1. RESET Y BASE (Mobile First) */

/* ========================================= */



* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}



/* 🛑 REGLAS CRÍTICAS PARA EL LAYOUT MÓVIL (CORRECCIÓN DE MOVIMIENTO) 🛑 */

html, body {

    height: 100%;

    width: 100%; /* CRÍTICO: Asegura que el body no se expanda más allá del viewport */

    overflow-x: hidden; /* CRÍTICO: Elimina el scroll horizontal y el desplazamiento */

    /* 👇 AGREGA ESTA LÍNEA AQUÍ 👇 */
    background-color: #F4F1EA;

}



:root {

    /* CONSOLIDACIÓN DE COLORES */

    --primary-color: #e28d8d;

    --secondary-color: #fce4e4;

    --secondary-color-light: #fff5f5;

    --text-color: #333;

    --dark-gray: #65676b;

    --light-gray: #f0f2f5;

    --border-color: #ddd;

    --card-background: #fff;



    --max-width-desktop: 430px;

    --header-height: 60px;

    --nav-height: 55px;

}



body {

    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

    background-color: var(--light-gray);

    color: var(--text-color);

    display: flex;

    justify-content: center;

    min-height: 100vh;

   

    /* 🛑 IMPORTANTE: Ya no necesitamos el overflow-x aquí, lo pusimos en html, body */

    /* Pero mantenemos la estructura de centrado */

}



/* Links y Botones Base */

a {

    color: var(--primary-color);

    text-decoration: none;

}

button {

    cursor: pointer;

    border: none;

    background-color: var(--primary-color);

    color: white;

    padding: 8px 15px;

    border-radius: 5px;

    transition: background-color 0.2s ease;

}

button:hover {

    /* Sustitución segura de darken() */

    background-color: #d17c7c;

}





/* ========================================= */

/* 2. CABECERA (TOP-NAV) - Compacto y Fijo */

/* ========================================= */

/* Bloque reemplazo: header y control de iconos (pegar en lugar del bloque antiguo) */
/* --- BARRA SUPERIOR (HEADER) ESTILO COQUETTE --- */

.top-nav {
    position: fixed;
    top: 0;
    
    /* === CENTRADO (Igual que la barra de abajo) === */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px; /* Ancho máximo de celular */
    box-sizing: border-box;
    /* ============================================ */

    height: 70px; /* Un poco más alta para que respire */
    background-color: #ffe0e0; /* TU COLOR ROSA */
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px; /* Espacio a los costados */
    
    /* === LAS PUNTAS REDONDEADAS (La clave) === */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
    
    /* Sombrita suave hacia abajo */
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
    
    z-index: 1000;
}

/* =========================================
   FIX FINAL: EL TÍTULO TIENE PRIORIDAD DE ESPACIO
   ========================================= */

/* 1. Contenedor de la izquierda (La clave para que el título entre) */
.top-nav .nav-left {
    display: flex;
    align-items: center;
    flex-grow: 1; /* 🔥 CLAVE: Le damos toda la prioridad de crecimiento */
    min-width: 0; /* Permitimos que el texto se corte si es MUY largo */
    overflow: hidden;
    padding-left: 0;
}

/* 2. El Título Bellaris */
.app-title {
    font-family: 'Playfair Display', serif !important;
    color: #bd9653 !important;
    font-size: 1.6rem !important; /* Tamaño correcto */
    font-weight: 700;
    
    /* Aseguramos que se alinee a la izquierda dentro de su contenedor */
    text-align: left !important; 
    white-space: nowrap; /* Mantiene el texto en una sola línea */
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 3. El contenedor de iconos se queda fijo (nav-right) */
.top-nav .nav-right {
    flex-shrink: 0; /* No se achica */
    gap: 8px; /* Espacio mínimo */
}

/* Botones/iconos del header: tamaño táctil y alineación */
.top-nav .nav-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 6px;
    border-radius: 50%;
    background: transparent;
    color: var(--dark-gray);
    font-size: 1.2em;
    cursor: pointer;
    border: none;
    position: relative; /* para que el badge se posicione relativo al botón */
    box-sizing: content-box;
}

.top-nav .nav-icon:hover {
    color: var(--primary-color);
    background-color: rgba(226,141,141,0.08);
}

/* BADGE UNIFICADO (ESTILO CÍRCULO ROJO) */
.notification-badge, .badge-mensajes {
    position: absolute;
    top: 4px !important;    /* Ajuste fino vertical */
    right: 3px !important;  /* Ajuste fino horizontal */
    
    background-color: #d9534f; /* Rojo intenso */
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    
    min-width: 16px;     /* Tamaño fijo mínimo */
    height: 16px;        /* Altura fija para ser círculo */
    border-radius: 50%;  /* Círculo perfecto */
    
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0; 
    
    border: 2px solid white; /* Borde blanco para separar del icono */
    z-index: 10;
    box-shadow: 0 1px 2px rgba(0,0,0,0.2); /* Sombra sutil */
}

/* Si existe otro contenedor .header-icons en el css, lo anulamos para evitar duplicados */
.header-icons {
    display: none !important;
}

/* Ajustes para pantallas muy pequeñas */
@media (max-width: 360px) {
    .top-nav .nav-icon {
        width: 34px;
        height: 34px;
        padding: 4px;
        font-size: 1.1em;
    }
    .notification-badge {
        top: 4px;
        right: 4px;
        padding: 2px 5px;
        min-width: 12px;
    }
    .app-title { font-size: 1.9em; }
}
/* ========================================= */

/* 3. NAVEGACIÓN INFERIOR (BOTTOM-NAV) */

/* ========================================= */

.bottom-nav {

    display: flex;

    justify-content: space-around;

    align-items: center;

    height: var(--nav-height);

    background-color: var(--card-background);

    box-shadow: 0 -2px 5px rgba(0,0,0,0.1);

    position: fixed; /* Fijo para que esté siempre en la parte inferior */

    bottom: 0;

    z-index: 900;

    width: 100%;

    max-width: var(--max-width-desktop);

}



.bottom-nav button {

    background: none;

    border: none;

    font-size: 1.5em;

    cursor: pointer;

    color: var(--dark-gray);

    padding: 5px 10px;

    transition: color 0.2s ease;

}



.bottom-nav button.active {

    color: var(--primary-color);

}


/* =========================================
   HISTORIAS BELLARIS (ESTILO GOLD & GLOW)
   ========================================= */

/* Contenedor con scroll invisible */

.historias-container {
    width: 100%;
    max-width: 430px;
    margin: 0 auto;
    display: flex;
    gap: 15px;

    /* 👇 CAMBIO 1: Le damos 45px abajo para que nada corte el nombre ni el botón + */
    padding: 15px 10px 45px 10px; 

    /* 👇 CAMBIO 2: Forzamos una altura mínima para que la caja sea alta */
    min-height: 140px; 

    /* 👇 CAMBIO 3: Alineamos todo arriba para que el espacio sobre abajo */
    align-items: flex-start;

    overflow-x: auto;
    scrollbar-width: none;
}

.historias-container::-webkit-scrollbar {
    display: none;
}

/* Cada historia individual */
.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    flex-shrink: 0;
    width: 72px; /* Ancho total */
}

/* EL ANILLO DE COLOR (La magia) */
.story-photo-wrapper {
    position: relative;
    width: 66px; /* Tamaño del círculo externo */
    height: 66px;
    border-radius: 50%;
    padding: 3px; /* Grosor del borde de color */
    
    /* DEGRADADO: Rosa suave a Dorado (Combinando con tu barra) */
    background: linear-gradient(45deg, #e28d8d, #bd9653); 
}

/* Si ya viste la historia, se pone gris */
.story-item.vistas .story-photo-wrapper {
    background: #e0e0e0;
}

/* La foto adentro */
.story-photo-avatar {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #fff; /* Borde blanco interno para separar */
    background-color: #fff;
    display: block;
}

/* Nombre debajo */
.story-name {
    margin-top: 6px;
    font-size: 0.75rem;
    color: #333;
    text-align: center;
    font-weight: 500;
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* --- ESTILO PARA "TU HISTORIA" (Sin borde de color) --- */
.story-create-btn .story-photo-wrapper {
    background: transparent; /* Sin degradado */
    padding: 0;
    width: 66px;
    height: 66px;
    border: 2px solid #ffe0e0; /* Borde rosa muy clarito */
    display: flex;
    align-items: center;
    justify-content: center;
}

.story-create-btn .story-photo-avatar {
    border: none;
    width: 90%; /* Un poquito más chica para que entre bien */
    height: 90%;
}

/* EL BOTÓN (+) MÁS LINDO */
.story-plus-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    background-color: #e28d8d; /* Tu rosa principal */
    color: white;
    border: 2px solid #fff;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}



/* === VISOR A PANTALLA COMPLETA === */

.visor-historias {
  display: flex;
  align-items: center;
  justify-content: center;
}

.visor-historias.oculto {
  display: none;
}

.visor-historias-inner {
  max-width: 400px;
  width: 100%;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
}

/* Header del visor */
.visor-historias-header {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  margin-bottom: 8px;
}

.visor-avatar {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e28d8d;
}

.visor-nombre {
  font-size: 0.95rem;
  font-weight: 600;
}

.visor-tiempo {
  font-size: 0.8rem;
  color: #ccc;
}

.visor-cerrar {
  margin-left: auto;
  border: none;
  background: transparent;
  color: #fff;
  font-size: 1.3rem;
  cursor: pointer;
}

/* Barras de progreso arriba */
.visor-progresos {
  display: flex;
  gap: 4px;
  margin: 4px 2px 10px 2px;
}

.visor-progress-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.25);
  border-radius: 999px;
  overflow: hidden;
}

.visor-progress-inner {
  width: 0%;
  height: 100%;
  background: linear-gradient(90deg, #ffe0e0, #e28d8d);
  border-radius: inherit;
  transition: width 0.1s linear;
}

/* Cuerpo del visor */

.visor-historias-body {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.visor-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}

/* Áreas táctiles izquierda/derecha */
.visor-tap-area {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
}

.visor-tap-area.izquierda {
  left: 0;
}

.visor-tap-area.derecha {
  right: 0;
}

/* Mobile */
@media (max-width: 480px) {
  .visor-historias-inner {
    border-radius: 0;
    max-width: 100%;
    height: 100vh;
  }
}

/* ========================================= */

/* 5. SECCIÓN CREAR PUBLICACIÓN (COMPACTA) */

/* ========================================= */

.create-post-section {

    background-color: var(--card-background);

    padding: 15px;

    margin-bottom: 15px;

    border-bottom: 1px solid var(--border-color);

}



.create-post-card {

    display: flex;

    align-items: center;

    gap: 10px;

}



.create-post-card .post-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

}



.create-post-card .post-input-text {

    flex-grow: 1;

    padding: 10px 15px;

    border: 1px solid var(--border-color);

    border-radius: 20px;

    font-size: 1em;

    outline: none;

    background-color: var(--light-gray);

    color: var(--dark-gray);

}



.create-post-card .add-photo-btn {

    background: none;

    border: none;

    font-size: 1.2em;

    color: var(--primary-color);

    padding: 8px;

    border-radius: 50%;

}





/* ========================================= */

/* 6. FEED Y PUBLICACIONES */

/* ========================================= */



.feed-posts {
  width: 100%;
  max-width: 600px; /* o 700px si querés más ancho en pantallas grandes */
  margin: 0 auto;
}



.post-header {

    display: flex;

    align-items: center;

    padding: 10px 15px;

}

.post-avatar {

    width: 40px;

    height: 40px;

    border-radius: 50%;

    object-fit: cover;

    margin-right: 10px;

    border: 2px solid var(--primary-color);

}

.post-username {

    font-weight: bold;

    color: var(--text-color);

}

.post-image {
  width: 100%;
  max-width: 100%;
  height: 400px;          /* 📏 altura estándar tipo Facebook */
  object-fit: cover;      /* 📸 llena el espacio sin deformarse */
  border-radius: 0;       /* 🔲 sin bordes redondeados */
  display: block;
  margin-top: 8px;
}





/* Botones de acción del post */

.post-actions {

    display: flex;

    gap: 15px;

    padding: 5px 15px;

    border-top: 1px solid var(--border-color);

}

.post-actions button {

    background: none;

    color: var(--dark-gray);

    font-size: 1.1em;

    font-weight: normal;

    padding: 5px 0;

}

.post-actions button:hover {

    color: var(--primary-color);

    background-color: transparent;

}





/* ========================================= */

/* 7. PANEL DE NOTIFICACIONES (OCULTADO) */

/* ========================================= */



.notifications-panel {

    /* Mantenemos display: none ya que usamos redirección a notificaciones.html */

    display: none !important;

    position: fixed;

    top: 0;

    right: 0;

    width: 100%;

    max-width: 300px;

    height: 100%;

    background-color: var(--card-background);

    z-index: 2000;

}





/* ========================================= */

/* 8. Estilos de Búsqueda y Mensajes */

/* ========================================= */



.modern-search-input {

    /* Estilos copiados y consolidados */

    width: calc(100% - 30px);

    margin: 15px 15px 20px 15px;

    padding: 12px 15px;

    border-radius: 20px;

    border: 1px solid var(--border-color);

    background-color: var(--light-gray);

    font-size: 1em;

}



.chat-item-card {

    background: var(--card-background);

    padding: 15px;

    margin: 0 15px 10px 15px;

    border-radius: 8px;

    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);

    border: 1px solid var(--border-color);

}

.chat-item-card:hover {

    background: var(--secondary-color);

}

.chat-avatar {

    border: 2px solid var(--primary-color);

}

.chat-arrow {

    color: var(--primary-color);

}





/* ========================================= */

/* 9. Estilos de Perfil */

/* ========================================= */



.profile-stats strong {

    color: var(--primary-color);

}

.edit-profile-btn {

    background-color: var(--primary-color);

}

.profile-photo {

    border: 2px solid var(--primary-color);

}



/* Ocultar elementos de menú antiguo */

.header-icons span {

    display: none;

}

/* =========================================
   PERFIL ESTILO PREMIUM (PORTADA + HISTORIA)
   ========================================= */

.profile-header {
    padding: 0; /* Quitamos padding para que la portada toque los bordes */
    background-color: #fff;
    margin-bottom: 15px;
    position: relative;
    text-align: center;
}

/* 1. LA PORTADA (Fondo degradado o imagen) */
.profile-cover {
    width: 100%;
    height: 120px; /* Altura de la portada */
    background: linear-gradient(135deg, #fce4ec 0%, #ffe0b2 100%); /* Rosa a Dorado suave */
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}

/* 2. EL CONTENEDOR DE LA FOTO */
.profile-pic-wrapper {
    position: relative;
    width: 110px;
    height: 110px;
    margin: -60px auto 10px auto; /* Margen negativo para subirla sobre la portada */
    border-radius: 50%;
    padding: 4px; /* Espacio para el anillo de historia */
    background: #fff; /* Fondo blanco por si no hay historia */
}

/* CLASE PARA CUANDO TIENE HISTORIA (Se activa con JS) */
.profile-pic-wrapper.has-story {
    background: linear-gradient(45deg, #e28d8d, #bd9653); /* Anillo Rosa/Dorado */
}

/* LA FOTO REDONDA */
.profile-photo {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff; /* Borde blanco interno siempre visible */
    display: block;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Sombra suave */
}

/* BOTÓN CAMARITA (Editar foto) */
.edit-badge {
    position: absolute;
    bottom: 5px;
    right: 5px;
    background: #333;
    color: white;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid #fff;
    cursor: pointer;
    font-size: 0.8rem;
    z-index: 10;
}

/* Ajustes de texto */
.profile-info-text {
    padding: 0 15px;
}

.profile-name {
    margin: 5px 0 0 0;
    font-size: 1.5rem;
    color: #333;
}

.profile-type {
    margin: 2px 0 10px 0;
    color: #e28d8d;
    font-size: 0.9rem;
    font-weight: 600;
}


/* 🛑 CORRECCIÓN BOTONES DE ACCIÓN 🛑 */

.profile-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 25px;
}


.profile-actions button {
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
    height: 34px;
    line-height: 1;
}


.edit-profile-btn, .btn-follow {

    /* Toma el estilo base de button, pero ajustamos el padding y radio */

    background-color: var(--primary-color);

    color: white;

    padding: 8px 15px;

    border-radius: 20px; /* Botón redondeado */

    font-size: 0.9em;

    font-weight: 600;

}


/* SECCIÓN DE PUBLICACIONES DEL PERFIL */

.profile-posts-section {

    padding: 0 15px;

}



.profile-posts-section h3 {

    color: var(--text-color);

    font-size: 1.2em;

    padding-bottom: 10px;

    border-bottom: 2px solid var(--primary-color);

    margin-bottom: 15px;

    text-align: center;

}



/* Botón de solicitar turno (el mismo save-btn estilizado) */

#btn-solicitar-turno {

    width: calc(100% - 30px); /* Ajuste por el padding de la sección */

    margin: 20px 15px;

    padding: 12px;

    font-size: 1.1em;

    font-weight: bold;

    border-radius: 8px;

}



/* Estilos para la lista de notificaciones (tanto panel como página) */

.notificacion-card-list { padding: 10px; }

.notificacion-card {

    padding: 10px; margin-bottom: 8px; border-radius: 4px; box-shadow: 0 1px 2px rgba(0,0,0,0.05);

    border-left: 4px solid transparent; background-color: var(--card-background); cursor: pointer;

}

.notificacion-nueva {

    background-color: var(--secondary-color-light);

    border-left-color: var(--primary-color);

    font-weight: 600;

}

.notificacion-leida {

    background-color: var(--light-gray);

    color: var(--dark-gray);

    font-weight: normal;

}

.mark-read-button { /* Usado en el panel deslizante y en notificaciones.html */

    background-color: var(--primary-color);

    color: white;

    padding: 8px 15px;

    border-radius: 20px;

    font-weight: bold;

}

.notifications-panel .close-panel-btn {

    position: absolute;

    top: 15px;

    right: 15px;

    background: none;

    border: none;

    font-size: 1.5em;

    cursor: pointer;

    color: var(--dark-gray);

    z-index: 2001;

}

/* ========================================= */

/* 10. ESTILOS DE MODALES Y POPUPS (Reservas, Calendario) */

/* ========================================= */


/* También revisa modal-reserva (el calendario) */

.modal-reserva {

    position: fixed;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    /* ... el resto de estilos ... */

    z-index: 9999;

}



/* Panel de Solicitudes de Turno del Profesional */

.reservas-profesional-panel {

    /* 🛑 POSICIÓN LATERAL 🛑 */

    position: fixed;

    top: var(--header-height); /* Se pega debajo del header */

    right: 0; /* Se pega al borde derecho */

    transform: none; /* Aseguramos que no se mueva */

    width: 280px;

    max-width: 90%;

    height: calc(100vh - var(--header-height) - var(--nav-height)); /* Cubre entre navs */

    background: white;

    border-radius: 8px;

    box-shadow: -4px 0 10px rgba(0,0,0,0.1); /* Sombra hacia la izquierda */

    z-index: 9999;

    padding: 15px;

    overflow-y: auto;

}



/* 🛑 CLASE DE OCULTAMIENTO (CRÍTICA) 🛑 */

.oculto {

    display: none !important;

}


/* Otros estilos del calendario (no modificados, pero incluidos para completitud) */

.modal-overlay {

    position: fixed;

    top: 0;

    left: 0;

    right: 0;

    bottom: 0;

    background: rgba(0, 0, 0, 0.5);

    z-index: 9998;

}



.calendario-contenido {

    padding: 15px;

}



.calendario-contenido h3 {

    margin-bottom: 15px;

    color: var(--primary-color);

}



.calendario-contenido input[type="date"],

.calendario-contenido input[type="time"] {

    width: 100%;

    padding: 8px;

    margin-bottom: 10px;

    border: 1px solid var(--border-color);

    border-radius: 4px;

}



.botones-calendario {

    display: flex;

    gap: 10px;

    margin-top: 15px;

}



.btn-principal {

    flex: 1;

    background: var(--primary-color);

    color: white;

    padding: 10px;

    border-radius: 4px;

    font-weight: bold;

}



.btn-secundario {

    flex: 1;

    background: var(--light-gray);

    color: var(--dark-gray);

    padding: 10px;

    border-radius: 4px;

}



.popup-header {

    padding: 12px;

    border-bottom: 1px solid var(--border-color);

    display: flex;

    justify-content: space-between;

    align-items: center;

    background: #f8f8f8;

}



.popup-header h3 {

    margin: 0;

    color: var(--primary-color);

    font-size: 16px;

}



.popup-content {

    padding: 12px;

    max-height: 400px;

    overflow-y: auto;

}



.btn-cerrar {

    background: none;

    border: none;

    color: #666;

    font-size: 20px;

    cursor: pointer;

    padding: 4px 8px;

}



.btn-cerrar:hover {

    color: var(--primary-color);

}

/* ✅ ASÍ DEBE QUEDAR (Sin .app-title) */
.perfil-title, .crear-title, .buscar-title {
    text-align: center;
    width: 100%;
    font-size: 2em;
    color: var(--primary-color);
    margin: 10px 0;
    font-family: 'Georgia', serif;
}

/* Ajuste contenedor principal móvil */

.main-content-area {

    padding: 0 15px;

    display: flex;

    flex-direction: column;

    align-items: center;

    width: 100%;

}



/* Centrado de elementos de búsqueda */

/* BARRA DE BÚSQUEDA (Debajo del Header) */
.search-container {
    padding: 10px 15px 5px 15px;
    background-color: transparent;
    cursor: pointer;
}



/* Centrado de formularios */

.form-container {

    width: 100%;

    max-width: 400px;

    margin: 20px auto;

    padding: 15px;

}



/* Ajuste para botones en móvil */

.profile-actions {

    display: flex;

    justify-content: center;

    gap: 10px;

    padding: 0 15px;

    margin: 15px 0;

    width: 100%;

}



.profile-actions button {

    flex: 1;

    max-width: 150px;

}



/* Centrado de títulos y texto */

h1, h2, h3, .section-title {

    text-align: center;

    width: 100%;

    margin: 15px 0;

}



/* Ajuste de inputs en móvil */

input[type="text"],

input[type="search"],

textarea {

    width: 100%;

    max-width: 400px;

    margin: 10px auto;

    padding: 12px;

    border-radius: 20px;

    border: 1px solid var(--border-color);

    background: var(--light-gray);

}



/* Ajuste para imágenes de perfil */

.profile-photo-container {

    width: 100%;

    display: flex;

    justify-content: center;

    margin: 20px 0;

}



/* Ajuste de botones inferiores */

.bottom-nav {

    padding: 0 10px;

    justify-content: space-around;

}



.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #ddd;
    margin-right: 10px;
}


.post-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.post-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
}

.post-user-info {
    display: flex;
    flex-direction: column;
}

.post-username {
    font-weight: bold;
    font-size: 1em;
    text-decoration: none;
    color: #333;
}

.post-action {
    font-size: 0.85em;
    color: gray;
}

/* --- Estilos para el Modal de Calendario de Reservas --- */

/* Asegura que el modal esté centrado y visible */
.modal-reserva {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 300; /* Alto para estar sobre el overlay */
    background-color: white;
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    width: 90%;
    max-width: 350px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espaciado entre elementos internos */
}

.modal-reserva.oculto {
    display: none;
}

/* Encabezado del modal */
.modal-reserva h3 {
    margin-top: 0;
    margin-bottom: 5px;
    color: var(--primary-color, #e28d8d);
    text-align: center;
    font-size: 1.2em;
}

/* Estilo para los inputs de fecha y hora */
.modal-reserva input[type="date"],
.modal-reserva input[type="time"] {
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 1em;
    text-align: center;
    width: 100%;
    box-sizing: border-box; /* Asegura que el padding no desborde */
}

/* Botones de acción (Confirmar y Cancelar) */
.modal-reserva button {
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 8px;
    padding: 12px 20px;
    transition: background-color 0.2s;
    flex-grow: 1;
}

/* Contenedor para botones (para que estén uno al lado del otro) */
.modal-reserva > div {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

/* Estilo específico para el botón Cancelar */
.modal-reserva button[onclick*="cerrarCalendario"] {
    background-color: #ccc;
    color: #444;
}

/* Ajuste del botón Confirmar */
#btn-confirmar-reserva {
    background-color: #f0a0a0;
    color: white;
}

.post-action {
  font-size: 14px;
  color: #b75cff; /* violeta suave */
  margin-top: 2px;
  font-weight: 500;
}


/* =========================================
   12. CHAT Y MENSAJES (FIX MÓVIL)
   ========================================= */

.chat-container { 
    background: #fff9f4; 
    display: flex; 
    flex-direction: column; 
    /* Usamos dvh para que las barras del navegador no tapen el chat en el celular */
    height: 100vh; 
    height: 100dvh; 
    width: 100%;
    overflow: hidden; /* Evita scroll doble */
}

.chat-header { 
    padding: 10px 15px; 
    background: #fff; 
    border-bottom: 1px solid #eee; 
    display: flex; 
    align-items: center; 
    gap: 10px;
    flex-shrink: 0; /* El header no se achica */
    height: 60px;
}

#messages { 
    flex: 1; /* Ocupa todo el espacio disponible */
    padding: 15px; 
    overflow-y: auto; /* Scroll solo aquí */
    display: flex; 
    flex-direction: column; 
    gap: 10px; 
    /* Truco para que el scroll sea suave en iPhone */
    -webkit-overflow-scrolling: touch; 
}

/* Input Fijo abajo */
#messageForm.input-container { 
    padding: 10px; 
    background: #fff; 
    border-top: 1px solid #eee; 
    display: flex; 
    gap: 10px; 
    align-items: center;
    flex-shrink: 0; /* No se aplasta */
    padding-bottom: 15px; /* Un poco de aire abajo para celulares */
}

/* Burbujas de Chat */
.message { 
    max-width: 75%; 
    padding: 10px 15px; 
    border-radius: 18px; 
    font-size: 0.95rem; 
    position: relative; 
    word-wrap: break-word; /* Evita que textos largos rompan todo */
}

.message.user { 
    align-self: flex-end; 
    background: #e28d8d; 
    color: white; 
    border-bottom-right-radius: 4px; 
}

.message.client { 
    align-self: flex-start; 
    background: #fff; 
    border: 1px solid #eee; 
    color: #333; 
    border-bottom-left-radius: 4px; 
}

/* ================================================= */
/* ESTILOS DE PERFIL (Para Perfil.html) */
/* ================================================= */

/* Contenedor de acciones: Asegura que los botones se vean uno al lado del otro y centrados */
.profile-actions {
    display: flex;
    justify-content: center; 
    gap: 10px; /* Espacio entre los botones */
    margin-top: 20px;
    margin-bottom: 20px;
    padding: 0 10px; /* Pequeño relleno para evitar que se peguen a los bordes */
}

/* Estilo base para todos los botones de acción del perfil (Cambiar Foto, Editar, Seguir, Mensaje) */
.edit-profile-btn {
    /* 🛑 Propiedades que dan la forma estética 🛑 */
    padding: 10px 18px; /* Relleno amplio para que se vean grandes y bien proporcionados */
    border: 1px solid #e28d8d;
    border-radius: 10px; /* Bordes redondeados */
    
    /* Propiedades de fuente y color */
    font-size: 1em;
    font-weight: bold;
    cursor: pointer;
    text-align: center;
    transition: background-color 0.3s, color 0.3s;
    
    /* Propiedad que permite que los dos botones crezcan y ocupen el ancho disponible */
    flex-grow: 1; 
    max-width: 150px; /* Límite para que no se extiendan demasiado en pantallas grandes */
}

/* Estilos de Color para botones principales (Rellenos de rosa) */
#btn-cambiar-foto,
#btn-editar-perfil[onclick*="editar-perfil.html"], /* Estilo para el botón de edición si es el principal */
.btn-follow, 
.save-btn { /* Incluimos el btn-solicitar-turno si tiene la clase save-btn */
    background-color: #e28d8d; 
    color: white;
    border-color: #e28d8d;
}

/* Estilos de Color para botones secundarios (Outline o Texto rosa) */
.btn-message {
    background-color: transparent; 
    color: #e28d8d; 
}

/* ================================================= */
/* ESTILOS ESPECÍFICOS DE LANDING PAGE (index.html) */
/* NOTA: Usamos sufijos -landing para evitar conflictos con la app */
/* ================================================= */

/* NAVBAR */
.top-nav-landing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 30px;
    background: white;
    box-shadow: var(--shadow-soft);
    position: sticky;
    top: 0;
    z-index: 100;
}

.app-title-landing {
    margin: 0;
    color: var(--primary);
    font-size: 28px;
    font-weight: bold;
    letter-spacing: -1px;
}

.nav-right {
    display: flex;
    gap: 15px;
}

.nav-btn {
    padding: 10px 20px;
    border-radius: var(--radius);
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    transition: background-color 0.3s;
}

.nav-login-landing {
    border: 2px solid var(--primary);
    color: var(--primary);
    background: white;
}

.nav-register-landing {
    background: var(--primary);
    color: white;
    box-shadow: var(--shadow-soft);
}

/* HERO */
.hero-landing {
    padding: 90px 20px;
    text-align: center;
    max-width: 900px;
    margin: auto;
}
.hero-landing h2 {
    font-size: 46px;
    font-weight: bold;
    color: var(--dark);
    line-height: 1.2;
}
.hero-landing p {
    margin-top: 20px;
    font-size: 20px;
    max-width: 650px;
    margin-left: auto;
    margin-right: auto;
    color: var(--gray);
}
.cta-main { /* Botón principal de llamada a la acción */
    display: inline-block;
    margin-top: 35px;
    padding: 18px 40px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius);
    font-size: 20px;
    font-weight: bold;
    text-decoration: none;
    box-shadow: var(--shadow);
    transition: transform 0.2s;
}
.cta-main:hover {
    transform: translateY(-2px);
}


/* FEATURES */
.section-landing {
    padding: 70px 20px;
    max-width: 1200px;
    margin: auto;
}
.section-landing h3 {
    text-align: center;
    font-size: 32px;
    margin-bottom: 40px;
    color: var(--dark);
}
.features-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 30px;
}
.feature-box {
    width: 320px;
    background: white;
    border-radius: var(--radius);
    padding: 25px;
    text-align: center;
    box-shadow: var(--shadow-soft);
    border: 1px solid var(--light-gray);
    transition: box-shadow 0.3s;
}
.feature-box:hover {
    box-shadow: var(--shadow);
}
.feature-box h4 {
    color: var(--primary);
    margin-bottom: 10px;
    font-size: 22px;
}
.feature-box p {
    color: var(--gray);
    font-size: 16px;
}

/* SOCIAL PROOF */
.proof-landing {
    background: var(--light-gray);
    padding: 70px 30px;
    text-align: center;
}
.proof-landing h3 {
    font-size: 28px;
    margin-bottom: 20px;
}
.proof-landing p {
    max-width: 700px;
    margin: auto;
    color: var(--gray);
    font-style: italic;
    font-size: 18px;
}

/* FOOTER */
footer {
    text-align: center;
    padding: 25px;
    background: var(--dark);
    color: white;
    margin-top: 60px;
}

/* RESPONSIVE */
@media(max-width: 600px) {
    .top-nav-landing {
        flex-direction: column;
        gap: 15px;
    }
    .hero-landing h2 { font-size: 32px; }
    .nav-right {
        flex-direction: column;
        width: 100%;
    }
    .nav-btn {
        text-align: center;
    }
}

/* ================================================= */
/* ESTILOS ESPECÍFICOS PARA LA CUADRÍCULA (PORTFOLIO) */
/* ================================================= */

.publicaciones-grid {
    display: grid;
    /* 🔥 CAMBIO CLAVE: 2 columnas para que se vean grandes los detalles */
    grid-template-columns: repeat(2, 1fr); 
    gap: 12px; /* Más espacio entre fotos para que respiren */
    padding: 15px; 
    background: #fff; /* Fondo limpio */
    margin-top: 5px;
}

.publicaciones-grid .post-item-grid {
    width: 100%;
    padding-bottom: 100%; /* Mantiene formato cuadrado */
    position: relative;
    overflow: hidden;
    /* Bordes más redondeados y sombrita para efecto "tarjeta" */
    border-radius: 15px; 
    box-shadow: 0 4px 8px rgba(0,0,0,0.08);
    background-color: #f9f9f9;
}

.publicaciones-grid .post-item-grid img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease; /* Efecto suave al tocar */
}

/* Efecto zoom suave al pasar el mouse (opcional) */
.publicaciones-grid .post-item-grid:hover img {
    transform: scale(1.05);
}

/* Mensaje cuando no hay fotos */
.publicaciones-grid p {
    grid-column: 1 / -1;
    text-align: center;
    color: #999;
    padding: 30px;
    font-style: italic;
}

/* ░░░ Botones IG – Bellaris Edition ░░░ */

.profile-actions {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 18px 0 25px;
}

.profile-actions button {
    padding: 7px 14px;
    border-radius: 10px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: 0.25s ease;
    height: 34px;
    line-height: 1;
}

/* SEGUIR / DEJAR DE SEGUIR (sólido tipo Instagram) */
#btn-seguir {
    background-color: #e28d8d;
    border: 1px solid #e28d8d;
    color: white;
}

#btn-seguir:hover {
    background-color: #cf7b7b;
    border-color: #cf7b7b;
}

/* MENSAJE (outline tipo Instagram) */
#btn-mensaje {
    background-color: transparent;
    border: 1.4px solid #e28d8d;
    color: #e28d8d;
}

#btn-mensaje:hover {
    background-color: #ffe6e6;
}

/* ========================================= */
/* CONTADORES DE PERFIL (CENTRADO PERFECTO) */
/* ========================================= */

.profile-stats {
    display: flex !important;
    justify-content: space-evenly !important; /* Distribuye el espacio igual entre los 3 */
    align-items: center !important;
    width: 100% !important;
    margin: 20px 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.stat-box {
    flex: 1 !important; /* Obliga a que todos tengan el MISMO ancho */
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* Centra horizontalmente */
    justify-content: center !important;
    text-align: center !important;
    position: relative; /* Por si quieres poner bordes entre ellos */
}

/* Opcional: Línea divisoria entre números */
.stat-box:not(:last-child)::after {
    content: '';
    position: absolute;
    right: 0;
    top: 20%;
    height: 60%;
    width: 1px;
    background-color: #eee;
}

.stat-box strong {
    display: block;
    font-size: 1.2rem;
    color: #bd9653;
    font-weight: bold;
}

.stat-label {
    font-size: 0.75rem;
    color: #999;
    text-transform: uppercase;
    margin-top: 3px;
}

.profile-stats div {
    text-align: center;
    flex: 1;
}

/* separador visual entre cada bloque */
.profile-stats div:not(:first-child) {
    border-left: 1px solid #e28d8d33;
}

/* número */
.profile-stats strong {
    display: block;
    font-size: 1.4rem;
    font-weight: 700;
    color: #e28d8d; /* Rosa Bellaris */
    margin-bottom: 3px;
}

/* texto debajo */
.profile-stats span {
    font-size: 0.85rem;
    color: #555;
}

.profile-stats div span {
    padding: 0 8px;   /* 🔥 separa las palabras hacia los lados */
}

/* ░░░ Mini Rating debajo del nombre ░░░ */
.rating-mini {
    margin-top: 5px;
    font-size: 1.1rem;
    color: #ff4d6d;
    font-weight: 600;
    text-align: center;
}

.rating-mini span {
    margin: 0 3px;
    cursor: pointer;
}

/* ░░░ Botón Solicitar Turno estilo Premium ░░░ */
.btn-solicitar-turno {
    width: 90%;
    margin: 20px auto;
    display: block;
    background: #e28d8d;
    color: white;
    font-weight: bold;
    padding: 12px;
    border-radius: 10px;
    border: none;
    font-size: 1.1rem;
    text-align: center;
    transition: 0.2s;
}

.btn-solicitar-turno:hover {
    background: #d37d7d;
}

/* Ocultar lista grande de opiniones hasta que el usuario entre */
#opiniones-list.collapsed {
    display: none;
}

.rating-mini {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-top: -5px;
    margin-bottom: 10px;
    cursor: pointer;
}

.rating-mini span {
    font-size: 1.2rem;
}

.rating-mini-prom {
    color: var(--primary-color) !important;
    font-weight: 600;
    margin: 0 4px;
}

.rating-mini-count {
    color: var(--primary-color) !important;
}


.modal-opiniones {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4);
    display: none;
    justify-content: center;
    align-items: center;
    z-index: 999;
}

.modal-content-op {
    background: white;
    width: 90%;
    max-width: 380px;
    max-height: 80%;
    padding: 20px;
    border-radius: 15px;
    overflow-y: auto;
    box-shadow: 0 0 12px rgba(0,0,0,0.15);
    animation: aparecer 0.25s ease-out;
}

@keyframes aparecer {
    from { transform: scale(0.9); opacity: 0; }
    to   { transform: scale(1); opacity: 1; }
}

.close-modal-op {
    float: right;
    font-size: 22px;
    cursor: pointer;
    color: var(--primary-color);
}

.opinion-card-modal {
    padding: 12px;
    border-bottom: 1px solid #eee;
}

.opinion-card-modal .name {
    font-weight: bold;
    color: #333;
}

.opinion-card-modal .stars {
    color: gold;
    margin: 5px 0;
}

.opinion-card-modal .comment {
    color: #555;
    font-size: 0.9em;
}

.visor-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 999;
  padding: 20px;
}

.visor-popup img {
  max-width: 100%;
  max-height: 60vh;
  border-radius: 10px;
  margin-bottom: 10px;
}

.visor-descripcion {
  color: white;
  text-align: center;
  font-size: 16px;
  max-width: 90%;
}

.cerrar-visor {
  position: absolute;
  top: 20px;
  right: 25px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

.post-wrapper {
  position: relative;
}

.btn-borrar-publicacion {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(255, 0, 0, 0.8);
  color: white;
  border: none;
  padding: 5px 7px;
  border-radius: 50%;
  font-size: 14px;
  cursor: pointer;
}

.btn-borrar-publicacion:hover {
  background: red;
}

.header-icons {
    /* Centrado vertical dentro del header y en línea */
    position: absolute;
    top: 50%;
    right: 15px;
    transform: translateY(-50%); /* centra en Y según la altura del header */
    display: flex;
    gap: 10px;
    align-items: center;
    z-index: 1100;
    pointer-events: auto;
}

/* Asegura que los botones/iconos estén alineados y tengan área táctil */
.header-icons button,
.header-icons .nav-icon,
.header-icons i,
.header-icons img,
.header-icons svg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 6px;
    border-radius: 50%;
    color: #555;
    background: transparent;
    line-height: 1;
    box-sizing: content-box;
}

/* Hover visual */
.header-icons button:hover,
.header-icons .nav-icon:hover,
.header-icons i:hover,
.header-icons svg:hover {
    color: var(--primary-color);
    background: rgba(226,141,141,0.08);
}



.top-nav {
    height: 60px !important;
    display: flex;
    align-items: center;
}

.nav-right {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* === FIX FORZADO PARA HEADER EN PERFIL (MÓVIL) === */
@media (max-width: 600px) {

    .top-nav {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        height: 55px !important;
        padding: 0 15px !important;
    }

    .top-nav .app-title {
        font-size: 1.7em !important;
        line-height: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-right {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 12px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .nav-icon {
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        padding: 6px !important;
    }

}

/* === FIX HEADER PERFIL — CORRIGE DESALINEACIÓN === */
.top-nav .app-title {
    font-size: 1.8rem !important;
    line-height: 1 !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Mantener iconos alineados */
.top-nav .nav-right {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Asegurar que todo quede en una sola línea */
.top-nav {
    height: 60px !important;
    display: flex !important;
    align-items: center !important;
}

/* ...existing code... */

/* Corrección overlay + modal reserva */
#overlay-reserva {
    position: fixed;
    inset: 0; /* top:0; right:0; bottom:0; left:0; */
    background: rgba(0,0,0,0.45);
    z-index: 10000; /* por debajo del modal */
    display: none;
}

/* mostrar overlay */
#overlay-reserva.active,
#overlay-reserva:not(.oculto) {
    display: block;
}

#modal-reserva {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    max-width: 360px;
    background: #fff;
    border-radius: 10px;
    padding: 18px;
    box-shadow: 0 6px 24px rgba(0,0,0,0.25);
    z-index: 10001; /* siempre por encima del overlay */
    display: none;
    pointer-events: auto;
}

/* mostrar modal */
#modal-reserva:not(.oculto) {
    display: block;
}

/* evitar que un overlay global (visor) lo tape: bajamos su z-index si está oculto */
.visor.oculto {
    z-index: -1 !important;
    display: none !important;
}

/* ...existing code... */

#story-create-bubble,
#story-create-bubble *,
.stories-carrusel,
.stories-carrusel * {
    cursor: pointer !important;
}

.visor-historias-body {
    position: relative;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: black;
}

.visor-img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
}

.stories-carrusel {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    overflow-x: auto;
    scrollbar-width: none;
}
.stories-carrusel::-webkit-scrollbar {
    display: none;
}

.story-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 70px;
    cursor: pointer;
}

.story-photo-wrapper {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    border: 3px solid #ff9bbb;
    overflow: hidden;
    position: relative;
}

.story-photo-avatar {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.story-plus {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background: #ff9bbb;
    color: white;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    font-size: 1em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
}

.stories-carrusel {
    display: flex !important;
    flex-direction: row !important;
    align-items: center;
    gap: 15px;
    padding: 10px 15px;
    overflow-x: auto;
    scrollbar-width: none;
    white-space: nowrap;
}

.stories-carrusel::-webkit-scrollbar {
    display: none;
}

/* Borde rosado (historias nuevas) */
.story-item.nuevas .story-photo-wrapper {
    border: 3px solid #ff7aa8 !important;
}

/* Borde gris (todas vistas) */
.story-item.vistas .story-photo-wrapper {
    border: 3px solid #ccc !important;
}

.story-item.my-story {
  position: relative;
}


.story-plus {
  position: absolute;
  bottom: -2px;
  right: -2px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #ff4f8b;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 16px;
  border: 2px solid #fff;
  cursor: pointer;
}

.story-create-bubble {
    position: relative;
}


.my-story {
    position: relative;
}

.story-plus-btn {
    position: absolute;
    bottom: 22px;      /* AJUSTADO PARA QUE QUEDE PEGADO AL BORDE */
    right: 8px;
    width: 20px;
    height: 20px;
    background: #ff4da6;
    color: white;
    border-radius: 50%;
    font-size: 14px;
    border: 2px solid white;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 5;
}

/* === BOTONES DE ACCIÓN COMPACTOS (Me gusta – Comentarios – Compartir) === */

.post-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 12px;
    border-top: 1px solid var(--border-color);
    font-size: 0.85rem; /* Reduce tamaño general */
}

.post-actions button {
    background: none;
    border: none;
    padding: 4px 6px;
    font-size: 0.85rem; /* Más chico */
    color: #555;
    display: flex;
    align-items: center;
    gap: 4px; /* Separación ícono/texto */
}

.post-actions button i {
    font-size: 1rem; /* Iconos más chiquitos */
    color: #e28d8d; /* Rosa Bellaris */
}

.post-actions button:hover {
    color: #e28d8d;
    background: transparent;
}

.post-actions .post-likes {
    color: #e28d8d;
    font-weight: 600;
}

/* === BOTONES DE ACCIÓN ESTILO BELLARIS (MEJOR QUE IG) === */

.post-actions {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 18px;
    margin-top: 4px;
}

.action-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.4rem;
    color: #555;
    transition: 0.18s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.action-btn i {
    font-size: 1.5rem;
    color: #444;
}

.action-btn:hover i {
    color: #e89090; /* Rosa Bellaris */
}

/* LIKE ANIMADO */
.btn-like.liked i {
    color: #ff4f79;
    transform: scale(1.25);
}

.btn-like i {
    transition: 0.2s ease;
}

.like-count {
    font-size: 0.75rem;
    color: #444;
}



.nav-right {
    display: flex;
    align-items: center;
    gap: 14px;      /* Deja espacio entre iconos */
}


/* Contenedor del botón */
.nav-right {
    display: flex;
    align-items: center;
    gap: 16px;  /* deja visible el botón */
}





#modal-reserva,
#overlay-reserva,
#visor-publicacion {
    z-index: 99999;
}


/* Fondo rosita suave */
.top-nav {
    background-color: #fde6e6 !important;   /* rosa muy suave */
    border-bottom: 1px solid #f5d2d2;        /* línea rosada finita */
}

/* Texto BELLARIS dorado */
.top-nav .app-title {
    font-family: 'Playfair Display', serif;  /* tu estilo elegante */
    color: #b7935a !important;               /* dorado suave */
    font-weight: 700;
    letter-spacing: 1px;
}

/* Mantener iconos igual */
.top-nav .nav-icon i {
    color: #555 !important;   /* gris oscuro, como ya los tenías */
}

/* HEADER ROSA */
.top-nav {
    background-color: #F8DDDA;
    color: #B58C45; /* Dorado del texto BELLARIS */
}

/* Título dorado */
.top-nav .app-title {
    color: #B58C45;
}

/* NAV INFERIOR ROSA */
.bottom-nav {
    background-color: #F8DDDA !important;
    border-top: 1px solid #e3c5c3;
}

/* ÍCONOS INFERIORES → SIN CAMBIAR COLOR */
.bottom-nav .nav-icon i {
    color: #555;   /* gris original */
}

/* ÍCONO ACTIVO → EL ORIGINAL (NO ROSA) */
.bottom-nav .nav-icon.active i {
    color: #555 !important;
}

/* =========================================
   CONTENEDOR GENERAL
========================================= */
.chat-container {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: #f9f5f5;
}

/* =========================================
   HEADER DEL CHAT
========================================= */
.chat-header {
    display: flex;
    align-items: center;
    padding: 14px;
    background: #ffdfdf;
    color: #7a4a4a;
    font-size: 22px;
    font-weight: bold;
    border-bottom: 1px solid #e5bcbc;
    position: sticky;
    top: 0;
    z-index: 10;
}

.chat-header .back-btn {
    font-size: 24px;
    margin-right: 10px;
    cursor: pointer;
}

.chat-header .user-icon {
    margin-left: auto;
    font-size: 24px;
}

/* =========================================
   MENSAJES
========================================= */
#messages {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Mensaje base */
.message {
    max-width: 70%;
    padding: 10px 14px;
    border-radius: 18px;
    position: relative;
    font-size: 15px;
    line-height: 1.3;
    box-shadow: 0px 2px 4px rgba(0,0,0,0.1);
    animation: fadeIn .2s ease-in-out;
}

/* Mensaje del usuario (derecha) */
.message.user {
    align-self: flex-end;
    background: #ffb7c5;
    color: #4a2b2b;
    border-bottom-right-radius: 4px;
}

/* Mensaje del receptor (izquierda) */
.message.client {
    align-self: flex-start;
    background: #ffffff;
    color: #333;
    border-bottom-left-radius: 4px;
}

/* Hora */
.message .hora {
    font-size: 11px;
    color: #6b6b6b;
    margin-top: 4px;
    display: block;
    text-align: right;
}

/* Animación */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(5px); }
    to { opacity: 1; transform: translateY(0); }
}

/* =========================================
   INPUT
========================================= */
#messageForm {
    display: flex;
    padding: 12px;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    gap: 10px;
    position: sticky;
    bottom: 0;
}

#messageInput {
    flex: 1;
    padding: 12px 14px;
    border-radius: 25px;
    border: 1px solid #d8bebe;
    outline: none;
    font-size: 15px;
    background: #faf0f0;
}

#messageInput:focus {
    border-color: #ff9bb3;
}

#messageForm button {
    padding: 10px 18px;
    background: #ff8fa3;
    border: none;
    color: white;
    border-radius: 25px;
    font-size: 16px;
    cursor: pointer;
}

#messageForm button:hover {
    background: #ff7a92;
}

.nav-icon {
    position: relative;
}

.badge-mensajes {
    position: absolute;
    top: 10px;       /* YA AJUSTADO */
    right: 10px;      /* ← ANTES 6px, ahora MÁS A LA IZQUIERDA */
    transform: translate(40%, -40%);
    background-color: red;
    color: white;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.7em;
    line-height: 1;
    min-width: 14px;
    text-align: center;
    pointer-events: none;
}

/* =========================================
   NUEVO FEED ESTILO MARKETPLACE (GRID)
   ========================================= */

/* El contenedor de dos columnas */
.feed-grid {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Dos columnas iguales */
    gap: 15px; /* Espacio entre tarjetas */
    padding: 10px 15px;
    padding-bottom: 80px; /* Espacio para que el menú no tape lo último */
}

/* La tarjeta individual */
.service-card {
    background: white;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.2s;
    display: flex;
    flex-direction: column;
}

.service-card:active {
    transform: scale(0.98);
}

/* La imagen de la tarjeta */
.card-image-box {
    width: 100%;
    aspect-ratio: 1 / 1; /* Cuadrado perfecto */
    overflow: hidden;
    background: #f0f0f0;
    position: relative;
}

.card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Información de la tarjeta */
.card-info {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.card-user-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: #000;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.card-service-title {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fila de precio y acciones */
.card-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 5px;
}

.card-price {
    font-weight: 600;
    font-size: 0.95rem;
    color: #333;
}

.btn-reservar-mini {
    background: transparent;
    border: 1px solid #333;
    border-radius: 5px;
    padding: 3px 8px;
    font-size: 0.75rem;
    cursor: pointer;
    color: #333;
}

.card-stats {
    display: flex;
    gap: 10px;
    font-size: 0.8rem;
    color: #888;
    margin-top: 5px;
}

/* --- ESTILOS MARKETPLACE REAL --- */

/* Contenedor de categorías (Pildoras) */
.categorias-scroll {
    display: flex;
    gap: 10px;
    padding: 10px 15px;
    overflow-x: auto;
    white-space: nowrap;
    background: #fff;
    scrollbar-width: none; /* Ocultar scrollbar */
}

.cat-pill {
    border: 1px solid #eee;
    background: #fff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #555;
    cursor: pointer;
}

.cat-pill.active {
    background: #333; /* Negro elegante o tu color primario */
    color: #fff;
    border-color: #333;
}



/* --- BARRA DE NAVEGACIÓN ESTILO APP "COQUETTE" (CORREGIDA) --- */

.bottom-nav {
    position: fixed;
    bottom: 0;
    
    /* === CORRECCIÓN DE CENTRADO === */
    left: 50%; /* 1. Mueve el inicio de la barra al centro exacto de la pantalla */
    transform: translateX(-50%); /* 2. La mueve hacia atrás la mitad de su tamaño para centrarla perfectamente */
    width: 100%; /* Intenta ocupar todo el ancho... */
    max-width: 430px; /* 3. ¡IMPORTANTE! Limita el ancho al tamaño de tu contenedor principal (ajusta 430px si usas otro valor) */
    box-sizing: border-box; /* Asegura que el padding no aumente el ancho total */
    /* ============================== */

    height: 65px;
    background-color: #ffe0e0; /* TU COLOR ROSA */
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
    z-index: 1000;
    padding-bottom: 5px;
}

/* --- BARRA ESTILO COQUETTE (Rosa + Botón Flotante) --- */

.bottom-nav {
    position: fixed;
    bottom: 0;
    /* Centrado para PC y Móvil */
    left: 50%;
    transform: translateX(-50%);
    width: 100%;
    max-width: 430px; /* Ancho máximo de celular */
    
    height: 65px;
    background-color: #ffe0e0; /* TU COLOR ROSA */
    display: flex;
    justify-content: space-around;
    align-items: center;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    box-shadow: 0 -5px 15px rgba(0,0,0,0.05);
    z-index: 1000;
    padding-bottom: 5px;
    box-sizing: border-box;
}

/* Botones normales */
.nav-item {
    background: none;
    border: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: #b08d8d; /* Color Marrón/Rosado elegante */
    cursor: pointer;
    flex: 1;
    gap: 3px;
    transition: all 0.2s ease;
}

.nav-item i {
    font-size: 1.3rem;
    margin-bottom: 1px;
}

.nav-item span {
    font-size: 0.65rem;
    font-weight: 500;
    letter-spacing: 0.5px;
}

/* Estado Activo */
.nav-item.active {
    color: #d16d6d; /* Rosa más fuerte al seleccionar */
    transform: translateY(-2px);
}

/* --- EL BOTÓN DEL MEDIO (FLOTANTE) --- */
.nav-item.center-btn {
    background-color: #fff; /* Blanco */
    width: 45px;
    height: 45px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.1);
    transform: translateY(-15px); /* FLOTA HACIA ARRIBA */
    color: #e28d8d; /* Icono rosa */
    border: 3px solid #ffe0e0; /* Borde para fusionarse */
    flex: 0 0 45px;
}

.nav-item.center-btn i {
    font-size: 1.4rem;
    margin: 0;
}

.nav-item.center-btn:active {
    transform: translateY(-12px) scale(0.95);
}

/* =========================================
   CSS DEL VISOR DE HISTORIAS (PREMIUM)
   ========================================= */

/* El contenedor principal (tapa todo) */
.story-viewer {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000; /* Fondo negro base */
    z-index: 9999; /* Por encima de TODO */
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.story-viewer.oculto {
    display: none;
}

/* Fondo desenfocado para efecto "wow" */
.story-viewer-blur-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    filter: blur(20px) brightness(0.7); /* Muy desenfocado y oscuro */
    transform: scale(1.1); /* Escalar para evitar bordes blancos por el blur */
    z-index: 1;
}

/* Contenido principal (centrado y limitado al ancho de celular) */
.story-viewer-content {
    position: relative;
    width: 100%;
    max-width: 430px; /* Ancho máximo de la app */
    height: 100%;
    display: flex;
    flex-direction: column;
    z-index: 2; /* Sobre el fondo desenfocado */
}

/* Cabecera (Barras y Usuario) */
.story-header {
    padding: 15px;
    padding-top: 20px; /* Espacio para la barra de estado del cel */
    /* background: linear-gradient(to bottom, rgba(0,0,0,0.5), transparent); */ /* Opcional: sombra arriba */
    color: white;
    position: relative;
}

/* Barra de Progreso */
.story-progress-bar-container {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.3); /* Barra gris claro de fondo */
    border-radius: 2px;
    margin-bottom: 10px;
    overflow: hidden;
}

.story-progress-bar-fill {
    height: 100%;
    width: 0%; /* Empieza en 0 */
    background: white; /* Color de la barra que avanza */
    border-radius: 2px;
    /* La animación se controla con JS */
}

/* Animación de progreso (5 segundos) */
@keyframes storyProgress {
    from { width: 0%; }
    to { width: 100%; }
}

.animar-progreso {
    animation: storyProgress 5s linear forwards;
}

/* Info del Usuario arriba */
.story-user-details {
    display: flex;
    align-items: center;
    gap: 10px;
}

.story-header-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.5);
}

.story-header-name {
    font-weight: 600;
    font-size: 0.9rem;
}

.story-header-time {
    font-size: 0.8rem;
    opacity: 0.7;
}

/* Botón Cerrar (X) */
.story-close-btn {
    position: absolute;
    top: 25px; /* Ajustar según padding */
    right: 15px;
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    opacity: 0.8;
}

/* Contenedor de la Imagen Principal */
.story-image-container {
    flex: 1; /* Ocupa el resto del espacio */
    display: flex;
    align-items: center; /* Centrado vertical */
    justify-content: center;
    padding-bottom: 20px; /* Espacio abajo */
}

.story-main-img {
    width: 100%;
    height: 100%;
    object-fit: contain; /* 'contain' muestra toda la foto sin recortar. Usa 'cover' si prefieres pantalla completa recortada */
    max-height: 85vh; /* Limite de altura */
    border-radius: 10px; /* Bordes redondeados suaves */
}

/* --- BANNER MÁGICO (DISEÑADOR DE UÑAS) --- */

.magic-banner-section {
    padding: 0 20px; /* Quitamos el padding de arriba (antes era 15px) */
    margin-bottom: 15px;
    margin-top: 0; 
    position: relative;
    z-index: 1;
}

.magic-card {
    /* Esto es lo que pone el texto a la izquierda y el icono a la derecha */
    display: flex; 
    align-items: center;
    justify-content: space-between;
    
    /* El resto del estilo */
    position: relative;
    background: linear-gradient(135deg, #e28d8d 0%, #bd9653 100%);
    border-radius: 15px;
    height: 80px;
    padding: 0 25px;
    overflow: hidden;
    cursor: pointer;
    box-shadow: 0 5px 15px rgba(226, 141, 141, 0.3);
}

.magic-card:active {
    transform: scale(0.98); /* Efecto de clic */
}

/* Texto */
.magic-text h3 {
    color: white;
    margin: 0;
    font-size: 1.1rem;
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

.magic-text p {
    color: rgba(255,255,255, 0.9);
    margin: 3px 0 0 0;
    font-size: 0.75rem;
    font-weight: 400;
}

/* Icono de la derecha */
.magic-icon-box {
    background: rgba(255,255,255,0.2); /* Blanco transparente */
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px); /* Efecto vidrio */
    z-index: 2;
}

.magic-icon-box i {
    color: white;
    font-size: 1.2rem;
}

/* Círculos decorativos de fondo (Efecto abstracto) */
.magic-circle {
    position: absolute;
    border-radius: 50%;
    background: rgba(255,255,255,0.1);
}

.c1 {
    width: 100px;
    height: 100px;
    top: -20px;
    left: -20px;
}

.c2 {
    width: 60px;
    height: 60px;
    bottom: -10px;
    right: 40px;
}

/* =========================================
   ESTUDIO DE DISEÑO DE UÑAS (CSS)
   ========================================= */

.nail-studio-stage {
    flex: 1;
    background: #f9f9f9;
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hand-container {
    position: relative;
    width: 350px; /* Tamaño fijo para que no se descuadren las uñas */
    height: 500px;
}

.hand-bg {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 20px;
    opacity: 0.9;
}

/* --- LAS UÑAS DIGITALES --- */
.digital-nail {
    position: absolute;
    background-color: rgba(255, 255, 255, 0.5); /* Color inicial transparente */
    width: 30px;
    height: 45px;
    z-index: 10;
    opacity: 0.85; /* Un poco de transparencia para que parezca real */
    transition: all 0.3s ease;
    box-shadow: inset 2px 2px 5px rgba(255,255,255,0.4); /* Brillo 3D */
    
    /* Forma por defecto (Redonda) */
    border-top-left-radius: 15px;
    border-top-right-radius: 15px;
    border-bottom-left-radius: 5px;
    border-bottom-right-radius: 5px;
}

/* POSICIONES EXACTAS (Ajustadas a la foto de ejemplo) */
/* Ajusta estos valores si cambias la foto de fondo */
.thumb  { top: 280px; left: 30px;  transform: rotate(-60deg); width: 32px; height: 40px; }
.index  { top: 180px; left: 90px;  transform: rotate(-30deg); width: 30px; height: 42px; }
.middle { top: 140px; left: 160px; transform: rotate(-5deg);  width: 32px; height: 44px; }
.ring   { top: 160px; left: 230px; transform: rotate(15deg);  width: 30px; height: 41px; }
.pinky  { top: 230px; left: 285px; transform: rotate(40deg);  width: 26px; height: 36px; }

/* --- FORMAS DE UÑAS (CSS SHAPES) --- */
.digital-nail.square {
    border-radius: 2px; /* Cuadrada */
}
.digital-nail.round {
    border-radius: 15px 15px 5px 5px; /* Redonda */
}
.digital-nail.stiletto {
    border-radius: 0;
    clip-path: polygon(50% 0%, 100% 85%, 85% 100%, 15% 100%, 0% 85%); /* Punta */
}
.digital-nail.almond {
    border-radius: 50% 50% 5px 5px; /* Almendra */
}

/* --- PANEL DE CONTROL INFERIOR --- */
.nail-controls-panel {
    background: white;
    padding: 20px;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.1);
    z-index: 20;
}

.tools-tabs {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.tool-tab {
    flex: 1;
    padding: 10px;
    border: none;
    background: #f0f0f0;
    border-radius: 10px;
    font-weight: 600;
    color: #777;
    cursor: pointer;
}

.tool-tab.active {
    background: #e28d8d;
    color: white;
}

.control-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

/* Botones de color */
.color-swatch {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    border: 2px solid white;
    margin: 0 auto;
}

/* Botones de forma */
.shape-btn {
    padding: 10px;
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-size: 0.8rem;
    cursor: pointer;
}

.shape-btn:hover {
    border-color: #e28d8d;
    color: #e28d8d;
}

.save-design-btn {
    width: 100%;
    padding: 15px;
    background: #333;
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
}

/* --- ESTILOS DE FUSIÓN IA --- */

.fusion-inputs {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 20px;
}

.upload-box {
    flex: 1;
    height: 100px;
    background: #f8f8f8;
    border: 2px dashed #e28d8d;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: background 0.2s;
}

.upload-box:active { background: #ffebeb; }

.upload-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    color: #e28d8d;
    text-align: center;
}

.upload-placeholder i { font-size: 1.5rem; }
.upload-placeholder span { font-size: 0.65rem; font-weight: 600; }

.preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0; left: 0;
}

.preview-img.hidden { display: none; }

.plus-sign {
    font-size: 1.5rem;
    color: #333;
    font-weight: bold;
}

.btn-fusionar {
    width: 100%;
    padding: 15px;
    background: linear-gradient(45deg, #333, #555);
    color: white;
    border: none;
    border-radius: 12px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    transition: transform 0.2s;
}

.btn-fusionar:hover { transform: scale(1.02); }
.btn-fusionar i { color: #ffd700; } /* Varita dorada */

/* =========================================== */
/* MODAL FIJO (NO SE MUEVE AL SCROLLEAR) */
/* =========================================== */

/* 1. El Fondo Oscuro (La pantalla completa) */
.ventana-popup {
    position: fixed !important; /* CLAVE: Se queda pegado a la pantalla */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.6); /* Fondo oscurito */
    z-index: 9999; /* Siempre arriba de todo */
    
    /* Centrar el contenido */
    display: flex;
    justify-content: center;
    align-items: center;
    
    /* Bloquear scroll del fondo */
    overflow: hidden; 
    overscroll-behavior: contain;
}

.ventana-popup.oculto {
    display: none !important;
}

/* 2. La Cajita Blanca (El contenido) */
.modal-content-reserva {
    background: white;
    width: 90%;
    max-width: 380px; /* Tamaño ideal celular */
    border-radius: 20px;
    padding: 20px;
    
    /* CLAVE DEL SCROLL INTERNO 👇 */
    max-height: 85vh; /* Nunca será más alto que el 85% de la pantalla */
    overflow-y: auto; /* Si el contenido es largo, aparece scroll AQUÍ ADENTRO */
    
    box-shadow: 0 10px 25px rgba(0,0,0,0.2);
    position: relative;
}

@keyframes popIn {
    from { transform: scale(0.8); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 15px; }
.modal-header h3 { margin: 0; color: #333; }
.close-btn { background: none; border: none; font-size: 1.2rem; cursor: pointer; color: #999; }

.reserva-summary { background: #f9f9f9; padding: 15px; border-radius: 12px; margin-bottom: 15px; text-align: center; }
.res-title { font-weight: bold; color: #333; margin: 0; }
.res-price { color: #e28d8d; font-weight: 900; font-size: 1.2rem; margin: 5px 0; }
.res-prof { font-size: 0.8rem; color: #777; margin: 0; }

.reserva-inputs label { display: block; font-size: 0.85rem; color: #666; margin-bottom: 5px; margin-top: 10px; }
.reserva-inputs input { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 8px; box-sizing: border-box; }

.btn-confirmar-turno {
    width: 100%; background: #333; color: white; padding: 15px;
    border: none; border-radius: 12px; font-size: 1rem; font-weight: bold;
    margin-top: 20px; cursor: pointer;
}

.btn-cancelar-texto {
    width: 100%;
    background: transparent;
    border: none;
    color: #999; /* Gris suave */
    padding: 10px;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    margin-top: 5px;
}

.btn-cancelar-texto:hover {
    color: #333;
    text-decoration: underline;
}


/* =========================================
   ESTILOS DE MODALES (DEFINITIVO Y LIMPIO)
   ========================================= */

/* 1. EL FONDO OSCURO (Overlay) */
/* Usamos absolute para que se quede dentro del celular */
.ventana-popup, 
#mis-reservas.ventana-popup {
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.5); /* Fondo oscuro */
    backdrop-filter: blur(3px); /* Efecto borroso moderno */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 2000; /* Encima de todo */
}

/* Clase para ocultar */
.ventana-popup.oculto {
    display: none !important;
}

/* 2. LA CAJA BLANCA (El contenido) */
.modal-content-reserva,
#mis-reservas > div {
    background: #ffffff;
    width: 90%; /* Ancho relativo al celular */
    max-width: 340px; /* Que no se haga gigante */
    max-height: 80vh; /* Que no se salga de alto */
    border-radius: 20px;
    padding: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    display: flex;
    flex-direction: column;
    position: relative;
}

/* Título del Modal */
.modal-content-reserva h3,
#mis-reservas h3 {
    text-align: center;
    color: #bd9653; /* Dorado */
    font-family: 'Playfair Display', serif;
    margin: 0 0 15px 0;
    border-bottom: 1px solid #eee;
    padding-bottom: 10px;
    font-size: 1.3rem;
}

/* 3. LA LISTA DE RESERVAS */
#lista-reservas {
    list-style: none;
    padding: 0;
    margin: 0;
    overflow-y: auto; /* Scroll si hay muchas */
    flex: 1; /* Ocupa el espacio disponible */
}

/* 4. TARJETAS INDIVIDUALES DE RESERVA */
.reserva-item, .reserva-card {
    background: #f9f9f9;
    border-radius: 12px;
    padding: 12px;
    margin-bottom: 10px;
    border: 1px solid #eee;
    border-left: 5px solid #ccc; /* Borde de estado */
}

/* Colores de estado */
.reserva-card.estado-pendiente { border-left-color: #f0ad4e; }
.reserva-card.estado-confirmada { border-left-color: #5cb85c; }
.reserva-card.estado-rechazada { border-left-color: #d9534f; }

/* Textos dentro de la tarjeta */
.reserva-content h4 { margin: 0 0 5px 0; color: #333; font-size: 1rem; }
.reserva-content p { margin: 2px 0; font-size: 0.85rem; color: #666; }

/* Botones de la tarjeta (Aceptar/Rechazar) */
.btn-gestion-reserva {
    border: none; border-radius: 6px; padding: 6px 12px;
    font-weight: 600; font-size: 0.8rem; cursor: pointer; margin-top: 5px;
}

/* 5. BOTÓN CERRAR (El grande de abajo) */
#mis-reservas button[onclick="cerrarReservas()"] {
    width: 100%;
    padding: 12px;
    background: #333;
    color: white;
    border: none;
    border-radius: 12px;
    font-weight: bold;
    margin-top: 15px;
    cursor: pointer;
}

/* =========================================
   NUEVO ESTILO DE PUBLICACIONES (GLOW-UP)
   ========================================= */

.post-card {
    background: #fff;
    border-radius: 15px; /* Bordes más redondeados */
    margin-bottom: 20px;
    /* 🔥 LA CLAVE: Sombra suave para profundidad */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05); 
    overflow: hidden; /* Para que la imagen respete los bordes */
    border: 1px solid #f0f0f0; /* Borde muy sutil */
}

.post-header {
    display: flex;
    align-items: center;
    padding: 12px 15px;
}

.post-user-info {
    display: flex;
    flex-direction: column;
    margin-left: 10px;
}

.post-username {
    font-weight: 700;
    color: #333;
    font-size: 0.95rem;
}

.post-time {
    font-size: 0.8rem;
    color: #999; /* Fecha sutil */
}

/* Contenedor de imagen */
.post-image-container {
    width: 100%;
    background: #f8f8f8;
}

.post-image {
    width: 100%;
    height: auto;
    display: block;
    /* Opcional: si quieres que la imagen tambien tenga bordes redondos adentro */
    /* border-radius: 0 0 15px 15px; */ 
}

/* 🔥 BARRA DE ACCIONES (NUEVO) */
.post-actions-bar {
    display: flex;
    justify-content: space-between;
    padding: 10px 15px;
    margin-top: 5px;
}

.actions-left {
    display: flex;
    gap: 15px;
}

.action-btn {
    background: none;
    border: none;
    font-size: 1.4rem;
    color: #555; /* Color base gris oscuro */
    cursor: pointer;
    transition: transform 0.1s ease, color 0.2s ease;
    padding: 0;
}

.action-btn:active {
    transform: scale(1.2); /* Efecto de rebote al hacer clic */
}

.action-btn:hover {
    color: #e28d8d; /* Color rosa al pasar el mouse */
}

/* Estilo para cuando dan Like */
.liked {
    color: #fd5d93 !important; /* Rosa fuerte */
    animation: likePop 0.3s ease;
}

@keyframes likePop {
    0% { transform: scale(1); }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); }
}

/* Contador de likes */
.post-likes-count {
    padding: 0 15px 15px 15px;
    font-size: 0.9rem;
    font-weight: 600;
    color: #333;
}

/* =========================================
   ESTILO PREMIUM: FONDO CREMA (#fff9f4)
   ========================================= */

/* 1. PINTAR TODO EL FONDO DE CREMA */
body,
.app-frame-container,
.main-container,
.main-content-area,
.top-nav, 
.bottom-nav {
    background-color: #fff9f4 !important; /* EL COLOR CREMA */
}

/* 2. TARJETAS BLANCAS (Para que resalten sobre el crema) */
.post-card, 
.mkt-card, 
.reserva-card,
.create-post-section, 
.profile-header,
.chat-item-card {
    background-color: #ffffff !important; /* BLANCO PURO */
    border: 1px solid #f2e8e8; /* Borde sutil */
    box-shadow: 0 4px 15px rgba(0,0,0,0.03); /* Sombra suave */
}

/* =========================================
   MARKETPLACE FINAL - LEANDRO (DEFINITIVO)
   ========================================= */

/* 1. BUSCADOR Y CATEGORÍAS */
.search-container {
    width: 100%;
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.modern-search-input {
    background-color: #ffffff;
    border: 1px solid #e28d8d; /* Borde rosita suave */
    border-radius: 25px; /* Bien redonda */
    padding: 12px 20px;
    display: flex;
    align-items: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.modern-search-input i {
    font-size: 1.1rem;
    color: #e28d8d;
}

.categorias-scroll {
    padding-left: 20px;
    margin-bottom: 15px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scrollbar-width: none;
}

.cat-pill {
    border: 1px solid #e28d8d;
    background: #fff;
    padding: 6px 15px;
    border-radius: 20px;
    font-size: 0.85rem;
    color: #e28d8d;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.cat-pill.active {
    background: #e28d8d; 
    color: #fff;
}

/* 2. GRILLA PRINCIPAL (Arreglada para celular) */
.marketplace-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important; /* 2 columnas */
    gap: 12px !important; /* Espacio ideal */
    padding: 10px 15px !important;
    padding-bottom: 90px !important;
    
    /* Centrado y límites */
    width: 100%;
    max-width: 430px; 
    margin: 0 auto;
    box-sizing: border-box;
    align-content: start;
}

/* 3. TARJETA (Card) */
.mkt-card {
    background: #ffffff !important;
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
    border: 1px solid #f2e8e8;
    display: flex;
    flex-direction: column;
    position: relative;
}

/* 4. IMAGEN (Cuadrada Perfecta) */
.mkt-img-container {
    width: 100%;
    aspect-ratio: 1 / 1; /* 🔥 ESTO HACE LA MAGIA */
    position: relative;
    overflow: hidden;
    background: #f0f0f0;
}

.mkt-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.mkt-like-btn {
    position: absolute;
    top: 8px; right: 8px;
    background: rgba(255,255,255,0.9);
    border: none; border-radius: 50%;
    width: 28px; height: 28px;
    display: flex; align-items: center; justify-content: center;
    font-size: 14px; color: #e28d8d; cursor: pointer;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 5. DATOS DE LA TARJETA */
.mkt-info {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.mkt-title {
    font-size: 0.9rem;
    font-weight: 700;
    margin: 0;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.mkt-author {
    font-size: 0.75rem;
    color: #888;
    margin: 0;
}

.mkt-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 6px;
}

.mkt-price {
    font-weight: 800;
    font-size: 0.9rem;
    color: #bd9653; /* Dorado */
}

/* 6. BOTÓN RESERVAR (Versión Mini) */
/* Este reemplaza al botón gigante anterior */
.btn-reservar-mini {
    background: #e28d8d;
    color: white;
    border: none;
    padding: 5px 12px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(226, 141, 141, 0.3);
}

.app-frame-container {
    background-color: #fff9f4;
}

/* =========================================
   CORRECCIÓN FINAL: HISTORIAS TAPADAS (V2)
   ========================================= */

/* Opción A: Si las historias están sueltas */
.historias-container {
    /* Aumentamos a 100px para forzar que bajen más */
    margin-top: 0px !important; 
    
    padding-bottom: 10px;
    position: relative;
    z-index: 1;
    display: flex !important; /* Asegura que se vea */
}

/* Opción B: Si las historias están dentro de un contenedor principal */
.main-content-area {
    padding-top: 60px !important;
}

/* Ajuste fino para el título "Tu historia" */
.story-name {
    position: relative;
    z-index: 2;
}

/* =========================================
   CORRECCIÓN: FOTOS DEL FEED UNIFORMES
   ========================================= */

/* 1. El Contenedor de la imagen define el tamaño */
.post-image-container {
    width: 100%;
    
    /* 🔥 ESTA ES LA CLAVE: Define la forma de la foto.
       4 / 5 es el estándar de Instagram (rectangular vertical pero no gigante).
       Si prefieres cuadrado perfecto, cambia 4 / 5 por 1 / 1 */
    aspect-ratio: 4 / 5; 
    
    overflow: hidden; /* Corta lo que se salga del marco */
    background-color: #f8f8f8; /* Color de fondo por si tarda en cargar */
    position: relative;
}

/* 2. La imagen se adapta al contenedor */
.post-image {
    width: 100%;
    height: 100% !important; /* Forza a llenar el contenedor */
    
    /* 🔥 MAGIC TRICK: 'cover' hace que la imagen llene el espacio
       sin estirarse ni deformarse. Recorta los bordes sobrantes automáticamente. */
    object-fit: cover; 
    
    display: block;
}

/* =========================================
   ESTILO NOTIFICACIONES (PREMIUM)
   ========================================= */

.notificaciones-list {
    padding: 10px 15px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Tarjeta de Notificación */
.notif-card {
    background: #ffffff;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
    border: 1px solid #f2e8e8;
    transition: transform 0.2s, background-color 0.2s;
    cursor: pointer;
    position: relative;
}

.notif-card:active {
    transform: scale(0.98);
    background-color: #fafafa;
}

/* Estado: No Leída (Borde izquierdo de color) */
.notif-card.nueva {
    border-left: 4px solid #e28d8d; /* Rosa */
    background-color: #fffbfb; /* Un rosita muy muy suave de fondo */
}

/* Icono Circular */
.notif-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

/* Colores de Iconos */
.icon-reserva { background: #fff3cd; color: #d4af37; } /* Dorado/Amarillo */
.icon-confirmada { background: #d4edda; color: #155724; } /* Verde */
.icon-rechazada { background: #f8d7da; color: #721c24; } /* Rojo */
.icon-general { background: #f0f0f0; color: #555; } /* Gris */

/* Textos */
.notif-content {
    flex: 1;
}

.notif-text {
    font-size: 0.9rem;
    color: #333;
    margin: 0 0 5px 0;
    line-height: 1.4;
}

.notif-time {
    font-size: 0.75rem;
    color: #999;
    display: block;
}

/* Punto rojo si es nueva */
.notif-dot {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 8px;
    height: 8px;
    background-color: #e28d8d;
    border-radius: 50%;
}

/* =========================================
   14. ESTILOS BANDEJA DE MENSAJES (INBOX)
   ========================================= */

.chat-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.chat-item {
    background: #ffffff;
    border-radius: 15px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    border: 1px solid #f2e8e8;
    box-shadow: 0 2px 5px rgba(0,0,0,0.02);
    cursor: pointer;
    transition: background 0.2s;
}

.chat-item:active {
    background-color: #fff0f5; /* Rosita al tocar */
}

.chat-avatar-img {
    width: 50px; 
    height: 50px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid #e28d8d;
}

.chat-info {
    flex: 1;
}

.chat-name {
    font-weight: 700;
    font-size: 1rem;
    color: #333;
    margin: 0;
}

.chat-last-msg {
    font-size: 0.85rem;
    color: #888;
    margin: 2px 0 0 0;
    white-space: nowrap; 
    overflow: hidden; 
    text-overflow: ellipsis;
    max-width: 200px;
}

.chat-time {
    font-size: 0.7rem;
    color: #bd9653; /* Dorado */
    font-weight: 600;
}

/* Estado Vacío */
.chat-empty {
    text-align: center;
    padding: 40px 20px;
    color: #999;
}
.chat-empty i {
    font-size: 3rem;
    margin-bottom: 10px;
    opacity: 0.3;
}

/* =========================================
   HEADER DEL CHAT (SOLUCIÓN DESBORDE)
   ========================================= */

/* 1. El contenedor izquierdo (Flecha + Nombre) */
.nav-left {
    display: flex;
    align-items: center;
    gap: 15px; /* Separa la flecha del texto */
    
    /* 🔥 TRUCOS PARA QUE NO SE DESBORDE */
    flex: 1; /* Ocupa el espacio disponible */
    min-width: 0; /* Permite que el contenedor se encoja si hace falta */
    overflow: hidden;
}

/* 2. El Título (Nombre) */
.nav-left .app-title {
    white-space: nowrap;      /* Una sola línea */
    overflow: hidden;         /* Corta lo que sobra */
    text-overflow: ellipsis;  /* Pone "..." al final */
    margin: 0;
    
    /* Ajuste de tamaño para que entre mejor */
    font-size: 1.2rem; 
}

/* 3. Proteger la flecha */
.nav-icon {
    flex-shrink: 0; /* Evita que la flecha se aplaste */
}

/* ESTILOS DE REVIEWS */
.star-rating {
    font-size: 2rem;
    color: #ddd; /* Color apagado */
    cursor: pointer;
    display: flex;
    justify-content: center;
    gap: 5px;
}

.star-rating i.checked {
    color: #ffd700; /* Dorado brillante */
    font-weight: 900; /* Estilo 'fas' relleno */
}

.star-rating i:hover {
    transform: scale(1.2);
    transition: transform 0.2s;
}

/* SELECTOR DE ROL (REGISTRO) */
.role-selector {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

/* Ocultar el puntito del radio */
.role-selector input[type="radio"] {
    display: none;
}

/* Diseño de la tarjeta */
.role-card {
    flex: 1;
    background: #f9f9f9;
    border: 2px solid #eee;
    border-radius: 10px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    color: #999;
}

.role-card i {
    font-size: 1.5rem;
    display: block;
    margin-bottom: 5px;
}

.role-card span {
    font-size: 0.9rem;
    font-weight: 600;
}

/* Cuando está seleccionado CLIENTE */
#role-client:checked + label {
    border-color: #e28d8d;
    background-color: #fff0f5;
    color: #e28d8d;
}

/* Cuando está seleccionado PROFESIONAL */
#role-prof:checked + label {
    border-color: #bd9653;
    background-color: #fff9e6;
    color: #bd9653;
}


/* ====== FIX FINAL: HEADER VISIBLE EN MÓVIL Y DESKTOP ====== */
/* Forzar contenedor y comportamiento consistente */
.top-nav {
    position: fixed !important;
    top: 0 !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    width: min(100%, 430px) !important; /* respeta el marco */
    box-sizing: border-box !important;
    height: 64px !important;
    padding: 0 14px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    z-index: 2000 !important; /* encima de casi todo */
}

/* Contenedor izquierdo que permite truncado correcto */
.top-nav .nav-left {
    display: flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    min-width: 0 !important; /* crítico para text-overflow en flex */
    overflow: hidden !important;
}

/* Título: siempre visible, truncable y por encima de iconos */
.top-nav .app-title,
.top-nav > .nav-left > .app-title {
    display: block !important;
    position: relative !important;
    z-index: 2100 !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 1.45rem !important;
    line-height: 1 !important;
    color: #bd9653 !important;
    min-width: 0 !important;
}

/* Iconos a la derecha: no se superpongan y no usen absolute */
.header-icons,
.top-nav .nav-right {
    position: relative !important;
    z-index: 2050 !important;
    display: flex !important;
    gap: 10px !important;
    align-items: center !important;
    flex-shrink: 0 !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
}

/* Si alguna regla previa fuerza absolute en .header-icons, la anulamos */
.header-icons { display: none !important; } /* tu HTML usa .nav-right, no necesitamos .header-icons */

/* Asegurar que el contenido principal no quede debajo del header */
.main-content-area {
    padding-top: calc(64px + 10px) !important; /* espacio superior para header */
}

/* Ajustes en pantallas muy pequeñas */
@media (max-width: 420px) {
    .top-nav { height: 56px !important; padding: 0 10px !important; }
    .top-nav .app-title { font-size: 1.2rem !important; }
    .main-content-area { padding-top: calc(56px + 8px) !important; }
}

/* =========================================
   ALERTAS PERSONALIZADAS (SWEETALERT BELLARIS)
   ========================================= */

/* La ventana principal */
div:where(.swal2-container) div:where(.swal2-popup) {
    background: #fff9f4 !important; /* Tu fondo crema */
    border-radius: 20px !important; /* Bordes bien redondos */
    border: 1px solid #fce4e4;      /* Borde rosa sutil */
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
    padding: 2em;
}

/* El título */
div:where(.swal2-container) h2:where(.swal2-title) {
    color: #bd9653 !important; /* Dorado */
    font-family: 'Playfair Display', serif !important;
    font-size: 1.6em !important;
}

/* El texto del mensaje */
div:where(.swal2-container) div:where(.swal2-html-container) {
    color: #555 !important;
    font-size: 1em !important;
}

/* El botón de confirmar (OK) */
div:where(.swal2-container) button:where(.swal2-styled).swal2-confirm {
    background-color: #e28d8d !important; /* Tu Rosa Principal */
    border-radius: 12px !important;
    font-weight: bold;
    box-shadow: 0 4px 10px rgba(226, 141, 141, 0.4) !important;
    padding: 12px 24px !important;
}

/* El icono de error (Cruz) */
div:where(.swal2-icon).swal2-error {
    border-color: #e28d8d !important;
    color: #e28d8d !important;
}
div:where(.swal2-icon).swal2-error [class^='swal2-x-mark-line'] {
    background-color: #e28d8d !important;
}

/* El icono de éxito (Check) */
div:where(.swal2-icon).swal2-success {
    border-color: #bd9653 !important; /* Dorado */
    color: #bd9653 !important;
}
div:where(.swal2-icon).swal2-success [class^='swal2-success-line'] {
    background-color: #bd9653 !important;
}

/* --- AGREGAR EN TU <style> --- */

/* Clase inicial: invisible pero ocupa espacio */
.loading-state {
    opacity: 0;
    pointer-events: none; /* No se puede hacer click mientras carga */
    transition: opacity 0.4s ease-in-out;
}

/* Clase final: visible suavemente */
.loaded-state {
    opacity: 1;
    pointer-events: auto;
}

/* ========================================= */
/* ARREGLO PARA QUE LAS ALERTAS SE VEAN ARRIBA */
/* ========================================= */
.swal2-container {
    z-index: 99999 !important;
}

/* MARKETPLACE STYLES */
.marketplace-grid {
    display: grid;
    grid-template-columns: 1fr; /* Una columna en móviles */
    gap: 15px;
    padding: 15px;
}

.marketplace-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    border: 1px solid #f0f0f0;
    transition: transform 0.2s;
}

.mp-card-header {
    display: flex;
    align-items: center;
    padding: 10px;
    border-bottom: 1px solid #f9f9f9;
}

.mp-pro-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    margin-right: 10px;
}

.mp-pro-info h4 {
    margin: 0;
    font-size: 0.9rem;
    color: #333;
}

.mp-rating {
    font-size: 0.75rem;
    color: #ffa500;
}

.mp-card-body {
    padding: 15px;
}

.mp-service-title {
    margin: 0 0 10px 0;
    font-size: 1.1rem;
    color: #bd9653;
}

.mp-service-meta {
    display: flex;
    justify-content: space-between;
    font-size: 0.9rem;
    color: #666;
    margin-bottom: 15px;
}

.btn-reservar-mp {
    width: 100%;
    padding: 10px;
    background: #e28d8d;
    color: white;
    border: none;
    border-radius: 8px;
    font-weight: bold;
    cursor: pointer;
}

/* ========================================= */
/* ESTILO MODAL DE RESERVAS (MOBILE PREMIUM) */
/* ========================================= */

/* Contenedor de la grilla de horas */
#contenedor-slots {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 columnas exactas */
    gap: 10px; /* Espacio entre botones */
    margin-bottom: 25px;
    max-height: 200px; /* Altura máxima con scroll si hay muchas horas */
    overflow-y: auto;  /* Scroll suave */
    padding-right: 5px;
}

/* Botón de hora (Slot) */
.btn-slot {
    padding: 12px 5px; /* Alto cómodo para el dedo */
    border: 1px solid #e0e0e0;
    background-color: #fff;
    border-radius: 10px;
    color: #555;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.03);
}

/* Efecto al tocar */
.btn-slot:active {
    transform: scale(0.95);
}

/* Botón Seleccionado (Dorado/Rosa según tu gusto) */
.btn-slot.selected {
    background-color: #bd9653; /* Dorado */
    color: white;
    border-color: #bd9653;
    box-shadow: 0 4px 10px rgba(189, 150, 83, 0.3);
    transform: scale(1.05);
}

/* ================================================= */
/* 📱 MARKETPLACE MÓVIL: ESTILO GRILLA (2 COLUMNAS) */
/* ================================================= */
@media (max-width: 480px) {

    /* 1. Forzamos 2 columnas en el contenedor */
    .marketplace-grid {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important; /* ⬅️ LA CLAVE: 2 por fila */
        gap: 10px !important; /* Espacio entre tarjetas */
        padding: 10px !important;
    }

    /* 2. Ajustamos la altura de la foto para que sea proporcional */
    .mkt-img-container {
        height: 160px !important; /* Altura fija para que se vean parejas */
        width: 100% !important;
    }

    .mkt-img {
        object-fit: cover !important; /* La foto llena el cuadro sin deformarse */
        width: 100% !important;
        height: 100% !important;
    }

    /* 3. Ajustes de texto para que no se rompa en pantalla chica */
    .mkt-card-body {
        padding: 10px !important;
    }

    .mkt-title {
        font-size: 0.9rem !important;
        margin-bottom: 5px !important;
        /* Cortar texto si es muy largo para que no rompa la grilla */
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mkt-price {
        font-size: 1rem !important;
        font-weight: 800 !important;
    }

    /* Botón Reservar un poco más compacto */
    .btn-reservar-mp {
        padding: 8px !important;
        font-size: 0.85rem !important;
    }
}

/* ========================================= */
/* 🚑 RESCATE SUPREMO DEL TÍTULO EN MÓVIL */
/* ========================================= */
@media (max-width: 900px) {
    
    /* 1. Desbloquear el contenedor padre */
    .nav-left {
        display: flex !important;
        align-items: center !important;
        width: auto !important;  /* ⬅️ CLAVE: Que tome su espacio natural */
        min-width: 120px !important; /* ⬅️ CLAVE: Un ancho mínimo para Bellaris */
        flex-shrink: 0 !important; /* ⬅️ CLAVE: Que no se deje aplastar por los iconos */
        overflow: visible !important; /* ⬅️ CLAVE: Que no recorte el contenido */
    }

    /* 2. Forzar el Título */
    .app-title {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: auto !important;
        margin: 0 0 0 10px !important; /* Un poquito de espacio a la izquierda */
        
        /* Estilo */
        color: #bd9653 !important; 
        font-size: 1.5rem !important; 
        font-weight: 800 !important;
        font-family: 'Playfair Display', serif !important;
    }
}

/* ========================================= */
/* AJUSTE FINO: CÍRCULO DE MENSAJES (CHAT) */
/* ========================================= */
#badge-mensajes {
    position: absolute;
    
    /* 👇 JUEGA CON ESTOS NÚMEROS PARA MOVERLO */
    top: 10px !important;    /* Más negativo sube, más positivo baja */
    right: 10px !important;  /* Más negativo va a la derecha, más positivo a la izquierda */
    
    /* Diseño (Igual al otro para que combinen) */
    background-color: #d9534f; 
    color: white;
    font-size: 0.65rem;
    font-weight: bold;
    min-width: 16px;
    height: 16px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 2px solid white;
    z-index: 10;
}

/* ESTILOS REGISTRO SERVICIOS */
.servicio-item-reg {
    display: flex;
    align-items: center;
    margin-bottom: 8px;
    gap: 10px;
    background: white;
    padding: 8px;
    border-radius: 8px;
    border: 1px solid #eee;
}

.servicio-item-reg label {
    flex: 1;
    font-size: 0.85rem;
    color: #555;
    font-weight: 500;
}

.time-serv {
    width: 50px;
    padding: 5px;
    border: 1px solid #ddd;
    border-radius: 5px;
    text-align: center;
    font-size: 0.8rem;
}

/* PESTAÑAS DE RESERVAS */
.tab-reserva {
    background: none;
    border: none;
    padding: 10px 5px;
    font-size: 0.9rem;
    color: #999;
    cursor: pointer;
    font-weight: 600;
    border-bottom: 3px solid transparent;
    transition: all 0.2s;
    flex: 1; /* Para que ocupen el mismo ancho */
}

.tab-reserva.active {
    color: #bd9653;
    border-bottom: 3px solid #bd9653;
}

.tab-reserva:hover {
    color: #666;
}

/* CHECKBOX DÍAS */
.dia-check {
    background: white;
    border: 1px solid #ddd;
    padding: 8px;
    border-radius: 8px;
    text-align: center;
    font-size: 0.85rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* ========================================= */
/* MENÚ LATERAL DEFINITIVO (BLANCO Y SUAVE) */
/* ========================================= */

/* 1. El Contenedor del Menú (Oculto a la derecha) */
#menu-perfil {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    width: 280px !important;
    height: 100% !important;
    background: white !important; /* Fondo BLANCO */
    z-index: 20000 !important;    /* Arriba de todo */
    box-shadow: -5px 0 15px rgba(0,0,0,0.1) !important;
    
    /* Animación de deslizamiento */
    transform: translateX(100%) !important; 
    transition: transform 0.3s ease-in-out !important;
    
    display: flex !important;
    flex-direction: column !important;
    padding: 25px !important;
    box-sizing: border-box !important;
    color: #333 !important; /* Texto oscuro */
}

/* 2. Clase para mostrarlo (Lo trae a la pantalla) */
#menu-perfil.mostrar {
    transform: translateX(0) !important;
}

/* 3. Fondo Oscuro (Para tapar el resto de la app) */
#overlay-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: rgba(0,0,0,0.5) !important;
    z-index: 19999 !important;
    display: none !important;
}

#overlay-menu.mostrar {
    display: block !important;
}

/* 4. Estilos bonitos para la lista */
.menu-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    border-bottom: 1px solid #eee;
    padding-bottom: 15px;
}

.menu-header h3 {
    margin: 0;
    color: #bd9653; /* Dorado */
    font-family: 'Playfair Display', serif;
}

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

.menu-lista li {
    padding: 15px 0;
    font-size: 1rem;
    color: #555;
    cursor: pointer;
    border-bottom: 1px solid #f9f9f9;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: color 0.2s;
}

.menu-lista li:hover {
    color: #bd9653;
}

.menu-lista li i {
    color: #bd9653;
    width: 25px;
    text-align: center;
}

/* ========================================= */
/* VISOR ESTILO INSTAGRAM (MENÚ ...) */
/* ========================================= */

/* Asegura que el contenido del visor sea relativo para posicionar el menú */
.visor-content {
    position: relative !important;
}

/* Botón de tres puntos (...) */
.visor-menu-btn {
    position: absolute;
    top: 10px; /* Ajusta si es necesario */
    right: 50px; /* A la izquierda de la X */
    background: rgba(0, 0, 0, 0.5); /* Fondo semitransparente */
    color: white;
    border: none;
    border-radius: 50%; /* Círculo */
    width: 35px;
    height: 35px;
    font-size: 1.2rem;
    cursor: pointer;
    z-index: 10001; /* Por encima de la imagen */
    display: flex;
    justify-content: center;
    align-items: center;
    transition: background 0.2s;
}

.visor-menu-btn:hover {
    background: rgba(0, 0, 0, 0.8);
}

/* Botón X de cerrar (Ajuste ligero) */
.visor-close {
    /* Asegúrate que tenga z-index alto también */
    z-index: 10001 !important; 
}


/* Menú Desplegable */
.visor-menu-opciones {
    position: absolute;
    top: 50px; /* Justo debajo del botón ... */
    right: 10px;
    background: white;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.2);
    width: 200px;
    z-index: 10002; /* El menú por encima de todo */
    overflow: hidden; /* Para que las esquinas redondeadas funcionen */
}

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

.visor-menu-opciones li {
    padding: 15px;
    font-size: 1rem;
    color: #333;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    border-bottom: 1px solid #eee;
    transition: background 0.2s;
}

.visor-menu-opciones li:last-child {
    border-bottom: none; /* Quita borde al último */
}

.visor-menu-opciones li:hover {
    background-color: #f9f9f9;
}

.visor-menu-opciones i {
    font-size: 1.1rem;
    width: 25px;
    text-align: center;
    color: #555;
}

/* Opción Roja (Eliminar) */
.visor-menu-opciones li.opcion-roja {
    color: #d9534f; /* Rojo */
}
.visor-menu-opciones li.opcion-roja i {
    color: #d9534f;
}


/* Estilos necesarios para la nueva funcionalidad en home.html */

/* Estilo del texto que flota sobre la imagen/video */
.story-text-overlay {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrado perfecto */
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    text-shadow: 1px 1px 5px rgba(0, 0, 0, 0.7);
    z-index: 10;
    max-width: 80%;
    text-align: center;
}

/* Barra inferior de interacción */
.story-interaction-bar {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex; /* La usaremos para la distribución */
    padding: 10px 15px;
    box-sizing: border-box;
    align-items: center;
    gap: 10px;
    background: rgba(0, 0, 0, 0.4); /* Fondo semi-transparente */
    z-index: 10;
}

/* Input de mensaje */
.story-comment-input {
    flex-grow: 1; /* Ocupa el espacio restante */
    padding: 10px;
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 1rem;
}
.story-comment-input::placeholder {
    color: #ccc;
}

/* Botón de Like */
.story-like-btn {
    background: none;
    border: none;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 5px;
}
.story-like-btn i {
    transition: transform 0.1s ease;
}
/* Efecto al presionar */
.story-like-btn:active i {
    transform: scale(1.2);
}

/* Contenedor flexible para las barritas */
.story-bars-container {
    display: flex;
    gap: 4px; /* Espacio entre cada historia */
    width: 100%;
    height: 3px;
}

/* La barrita gris (fondo) */
.story-bar-item {
    flex: 1; /* Todas ocupan el mismo ancho */
    background-color: rgba(255, 255, 255, 0.3);
    border-radius: 2px;
    overflow: hidden;
    height: 100%;
}

/* El relleno blanco */
.story-bar-fill {
    display: block;
    height: 100%;
    background-color: #fff;
    width: 0%;
}

/* ESTADOS */
/* 1. Historia ya vista: llena */
.story-bar-item.visto .story-bar-fill {
    width: 100%;
}

/* 2. Historia actual: animando */
.story-bar-item.activo .story-bar-fill {
    width: 0%;
    /* La duración se controla desde JS, pero ponemos esto base */
    animation: llenarBarra linear forwards; 
}

@keyframes llenarBarra {
    from { width: 0%; }
    to { width: 100%; }
}

/* =========================================
   CALENDARIO ESTILO BELLARIS
   ========================================= */

/* Contenedor del Calendario (oculto por defecto) */
#view-calendario {
    padding: 10px;
    background: #fff;
    border-radius: 0 0 15px 15px;
}

/* Cabecera del mes */
.cal-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    padding: 0 10px;
}

.cal-title {
    color: #bd9653;
    font-size: 1.1rem;
    margin: 0;
    font-family: 'Playfair Display', serif;
}

.cal-nav-btn {
    background: #fff9f9;
    border: 1px solid #e28d8d;
    color: #e28d8d;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
}

/* Grilla de Días */
.cal-week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 0.75rem;
    color: #999;
    margin-bottom: 5px;
}

.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

/* Celda de cada día */
.cal-day {
    background: #fdfdfd;
    border: 1px solid #eee;
    border-radius: 8px;
    min-height: 60px; /* Altura para los puntitos */
    padding: 2px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.cal-day.today {
    background: #fff0f0;
    border-color: #e28d8d;
}

.day-num {
    font-size: 0.8rem;
    font-weight: bold;
    color: #555;
    margin-bottom: 2px;
}

.cal-day.today .day-num {
    background: #e28d8d;
    color: white;
    border-radius: 50%;
    width: 18px; height: 18px;
    display: flex; justify-content: center; align-items: center;
}

/* Puntitos de turnos (Chips) */
.turn-dot {
    background: #bd9653;
    color: white;
    font-size: 0.55rem;
    padding: 1px 3px;
    border-radius: 3px;
    width: 90%;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 1px;
}

/* MODAL DETALLE DEL DÍA (GLASSMORPHISM) */
.modal-glass-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(4px);
    z-index: 10000; /* Encima de todo */
    display: flex; justify-content: center; align-items: center;
}

.modal-glass-card {
    background: white;
    width: 90%; max-width: 350px;
    border-radius: 15px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.2);
    overflow: hidden;
    animation: popIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

@keyframes popIn { from {transform: scale(0.8); opacity: 0;} to {transform: scale(1); opacity: 1;} }

.glass-header {
    background: linear-gradient(135deg, #fff 0%, #fff5f5 100%);
    padding: 15px;
    display: flex; justify-content: space-between; align-items: center;
    border-bottom: 1px solid #eee;
}

.glass-body {
    max-height: 50vh; overflow-y: auto; padding: 15px;
}

/* Tarjeta de turno en el detalle */
.turno-detail-card {
    border-left: 3px solid #e28d8d;
    background: #fff;
    padding: 10px;
    margin-bottom: 8px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.05);
    border-radius: 4px;
}



.soporte-float-btn:hover {
    transform: scale(1.1);
}


/* Menú Desplegable */
.soporte-menu {
    position: fixed;
    bottom: 150px;
    right: 20px;
    width: 300px;
    background: white;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.2);
    z-index: 4999;
    overflow: hidden;
    transform-origin: bottom right;
    animation: openMenu 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.soporte-menu.oculto {
    display: none;
}

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

.soporte-header {
    background: #bd9653;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.soporte-header h4 { margin: 0; }
.soporte-header button { background: none; border: none; color: white; font-size: 1.2rem; cursor: pointer; }

.soporte-body {
    padding: 15px;
}

.soporte-body p {
    color: #666;
    font-size: 0.9rem;
    margin-bottom: 15px;
    text-align: center;
}

/* Opciones */
.opcion-soporte {
    display: flex;
    align-items: center;
    width: 100%;
    background: #fff;
    border: 1px solid #eee;
    padding: 10px;
    margin-bottom: 8px;
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
    text-align: left;
}

.opcion-soporte:hover {
    background: #fff9f9;
    border-color: #e28d8d;
    transform: translateX(5px);
}

.icon-box {
    width: 35px;
    height: 35px;
    background: #f0f0f0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bd9653;
    margin-right: 10px;
}

.soporte-footer {
    background: #f9f9f9;
    padding: 10px;
    text-align: center;
    color: #999;
    font-size: 0.75rem;
}

/* --- ESTILOS DEL EDITOR --- */
.filtro-btn {
    display: flex; flex-direction: column; align-items: center; cursor: pointer; min-width: 60px;
}
.filtro-btn span { color: white; font-size: 0.7rem; margin-top: 5px; }
.circle { width: 50px; height: 50px; border-radius: 50%; border: 2px solid white; background-size: cover; background-color: #555; }

/* DEFINICIÓN DE FILTROS (Clases CSS) */
.filtro-normal   { filter: none; }
.filtro-clarendon{ filter: contrast(1.2) saturate(1.3); }
.filtro-sepia    { filter: sepia(0.5) contrast(1.1); }
.filtro-bw       { filter: grayscale(1) contrast(1.2); }
.filtro-vintage  { filter: sepia(0.3) hue-rotate(-10deg) saturate(1.5) contrast(0.9); }

/* Vistas previas en los botoncitos (Truco visual) */
.circle.normal   { background: linear-gradient(45deg, #ff9a9e, #fad0c4); }
.circle.clarendon{ background: linear-gradient(45deg, #ff9a9e, #fad0c4); filter: contrast(1.2) saturate(1.3); }
.circle.sepia    { background: linear-gradient(45deg, #ff9a9e, #fad0c4); filter: sepia(0.5); }
.circle.bw       { background: linear-gradient(45deg, #ff9a9e, #fad0c4); filter: grayscale(1); }
.circle.vintage  { background: linear-gradient(45deg, #ff9a9e, #fad0c4); filter: sepia(0.3) hue-rotate(-10deg); }

/* --- MENÚ LATERAL --- */
.menu-overlay {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.5); z-index: 6000;
}
.menu-sidebar {
    width: 280px; height: 100%; background: white;
    position: absolute; top: 0; left: 0;
    box-shadow: 4px 0 15px rgba(0,0,0,0.1);
    animation: slideInLeft 0.3s ease;
    display: flex; flex-direction: column;
}
@keyframes slideInLeft { from {transform: translateX(-100%);} to {transform: translateX(0);} }

.menu-header {
    background: #bd9653; color: white; padding: 20px;
    display: flex; justify-content: space-between; align-items: center;
}
.menu-lista { list-style: none; padding: 0; margin: 0; }
.menu-lista li {
    padding: 15px 20px; border-bottom: 1px solid #f0f0f0;
    font-size: 1rem; color: #555; cursor: pointer;
}
.menu-lista li i { width: 25px; color: #bd9653; }
.menu-lista li:active { background: #f9f9f9; }

/* --- BOTÓN FLOTANTE ESCANER --- */
.scan-float-btn {
    position: fixed; bottom: 90px; right: 20px;
    width: 60px; height: 60px;
    background: #333; color: white;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem; box-shadow: 0 5px 20px rgba(0,0,0,0.3);
    z-index: 5000; cursor: pointer; border: 2px solid #bd9653;
}

/* --- TARJETA DE FIDELIDAD (7 Visitas) --- */
.loyalty-card-container {
    display: flex; gap: 8px; justify-content: center; margin: 20px 0;
}
.loyalty-slot {
    width: 35px; height: 35px;
    border: 2px dashed #ddd; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #ccc; font-weight: bold; font-size: 0.9rem;
    transition: all 0.3s;
}
.loyalty-slot.filled {
    background: #e28d8d; border: 2px solid #e28d8d;
    color: white; transform: scale(1.1);
    box-shadow: 0 2px 5px rgba(226, 141, 141, 0.4);
}
.loyalty-slot.final {
    border-color: #bd9653; color: #bd9653;
}
.loyalty-slot.final.filled {
    background: #bd9653; color: white;
    animation: bounce 1s infinite;
}

/* --- BOTÓN FLOTANTE SMART (HOME) --- */
.fab-smart-btn {
    position: fixed;
    bottom: 85px; /* Un poco arriba del menú inferior */
    right: 20px;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, #bd9653, #e28d8d); /* Gradiente Bellaris */
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    box-shadow: 0 4px 15px rgba(189, 150, 83, 0.4);
    z-index: 8000; /* Para que quede arriba de todo */
    cursor: pointer;
    transition: transform 0.2s;
}

.fab-smart-btn:active {
    transform: scale(0.95);
}

/* Ocultarlo hasta que cargue el usuario */
.fab-smart-btn.oculto {
    display: none !important;
}

/* --- SLIDER ANTES / DESPUÉS (FEED) - VERSIÓN UNIFORME --- */
.slider-feed-container {
    position: relative;
    width: 100%;
    /* Formato Vertical 4:5 (Ideal Instagram/Celulares) */
    aspect-ratio: 4/5; 
    overflow: hidden;
    cursor: col-resize;
    user-select: none;
    background-color: #f0f0f0; /* Fondo gris mientras carga */
    border-radius: 10px;       /* Bordes redondeados */
    margin: 10px 0;
}

/* FOTO 1 (FONDO - DESPUÉS) */
.img-feed-bg {
    position: absolute; top: 0; left: 0; 
    width: 100%; height: 100%;
    object-fit: cover;       /* Rellena todo el espacio */
    object-position: center; /* 👇 CLAVE: Centra la foto para que coincida */
    z-index: 1;
}

/* EL RECORTE (LA CAJA QUE SE MUEVE) */
.img-feed-clipper { 
    position: absolute; top: 0; left: 0; 
    height: 100%;
    width: 50%; /* Empieza a la mitad */
    z-index: 2; 
    overflow: hidden;
    border-right: 3px solid #fff; /* Línea Blanca (se ve mejor) */
    box-shadow: 2px 0 10px rgba(0,0,0,0.5); /* Sombrita a la línea */
}

/* FOTO 2 (ADENTRO DEL RECORTE - ANTES) */
.img-feed-inner {
    position: absolute; top: 0; left: 0; 
    height: 100%;
    /* 👇 IMPORTANTE: Esto asegura que no se aplaste */
    width: 100%; 
    max-width: none; 
    
    object-fit: cover;
    object-position: center; /* 👇 CLAVE: Debe ser igual a la del fondo */
}

/* EL BOTÓN REDONDO */
.slider-feed-handle {
    position: absolute; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 40px;
    background: #fff; 
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    color: #bd9653; /* Flechita dorada */
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    pointer-events: none; /* El click pasa a través */
}

/* ETIQUETAS */
.label-feed {
    position: absolute; top: 15px;
    background: rgba(0,0,0,0.7); color: white;
    padding: 5px 10px; border-radius: 5px; 
    font-size: 0.75rem; font-weight: bold;
    z-index: 5; pointer-events: none;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.lbl-antes { left: 15px; }
.lbl-despues { right: 15px; }

/* --- ARREGLO DE CAPAS --- */
/* Aseguramos que el modal de opinión flote sobre todo lo demás */
#modal-opinion {
    z-index: 10001 !important; 
}

/* Si usas un fondo oscuro (overlay), asegúrate que también tape lo de atrás */
#modal-opinion.ventana-popup {
    background: rgba(0,0,0,0.85); /* Un poco más oscuro para resaltar */
}

/* --- POSTEO VIDRIERA (PREMIUM) --- */
.post-image-container {
    position: relative; /* Para poder posicionar cosas encima */
    border-radius: 15px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.1); /* Sombra suave */
    margin: 10px 0;
}

/* La imagen del post */
.post-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Las Etiquetas Flotantes (Precio y Tiempo) */
.post-badges {
    position: absolute;
    bottom: 10px;
    left: 10px;
    display: flex;
    gap: 8px;
    z-index: 2;
}

.glass-badge {
    background: rgba(255, 255, 255, 0.85); /* Blanco semitransparente */
    backdrop-filter: blur(4px); /* Efecto borroso de fondo */
    padding: 5px 10px;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: bold;
    color: #333;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    display: flex;
    align-items: center;
    gap: 4px;
}

.glass-badge.price {
    color: #bd9653; /* Dorado para el precio */
    border: 1px solid #bd9653;
}

/* Botón "Quiero Esto" flotante */
.btn-want-this {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: #333;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    z-index: 2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    transition: transform 0.2s;
}

.btn-want-this:active { transform: scale(0.95); }

/* Gradiente negro abajo para que se lean las letras si la foto es blanca */
.post-gradient-overlay {
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 40%;
    background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
    z-index: 1;
    pointer-events: none;
}

/* --- EFECTO DE BRILLOS (EXPLOSIÓN DESDE ABAJO) --- */
.sparkle-particle {
    position: absolute;
    bottom: 0; /* Empiezan al ras del suelo */
    pointer-events: none;
    z-index: 100;
    line-height: 1;
    color: #ffd700; /* Dorado */
    text-shadow: 0 0 5px white, 0 0 10px #ffb700; /* Brillo intenso */
    opacity: 0;
    /* La animación se define en el JS para que sea variable */
}

@keyframes riseUp {
    0% {
        transform: translateY(0) scale(0.5) rotate(0deg);
        opacity: 1;
    }
    100% {
        /* Sube 400px y se mueve de costado según la variable --tx */
        transform: translate(var(--tx), -450px) scale(1.5) rotate(180deg);
        opacity: 0;
    }
}

/* --- ESTILO OFERTA FLASH (ESTILO IMAGEN) --- */
.oferta-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: rgba(226, 65, 107, 0.85); /* Rosa fuerte semitransparente */
    z-index: 1;
    text-align: center;
    color: white;
}

.story-header-wrapper, 
.story-interaction-bar {
    z-index: 100 !important; /* Más alto que la oferta */
    position: relative;
}

.oferta-titulo-off {
    font-size: 4.5rem; /* Gigante */
    font-weight: 900;
    line-height: 1;
    margin: 0;
    text-shadow: 2px 2px 0px rgba(0,0,0,0.1);
    transform: rotate(-5deg); /* Inclinado como sticker */
}

.oferta-subtitulo {
    font-size: 1.5rem;
    font-weight: bold;
    letter-spacing: 2px;
    margin-bottom: 20px;
    transform: rotate(-5deg);
}

.oferta-etiqueta-hora {
    background: black;
    color: #fff172; /* Amarillo neón */
    font-size: 1.2rem;
    font-weight: bold;
    padding: 8px 20px;
    transform: skew(-10deg); /* Inclinado estilo cinta */
    margin-bottom: 30px;
    box-shadow: 5px 5px 0px rgba(0,0,0,0.2);
}

.btn-reservar-ahora {
    background: #ff6b81;
    color: white;
    font-size: 1.2rem;
    font-weight: 800;
    padding: 15px 40px;
    border: 3px solid white;
    border-radius: 10px;
    cursor: pointer;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    animation: pulseOferta 1.5s infinite;
    display: flex;
    align-items: center;
    gap: 10px;
    text-transform: uppercase;
}

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

/* Agrega esto al final de styles.css */
.hidden, .oculto {
    display: none !important;
}

/* --- BOTÓN ORÁCULO LATERAL --- */
.oracle-floater {
    position: fixed;
    /* Quitamos top/right fijos para que el JS lo controle, 
       pero dejamos unos iniciales por si acaso */
    right: 20px;
    top: 60%; 
    z-index: 4000;
    cursor: move; /* Cursor de movimiento */
    display: flex;
    align-items: center;
    flex-direction: row-reverse;
    
    /* ESTO ES CRÍTICO PARA EL ARRASTRE EN MÓVIL: */
    touch-action: none; 
    user-select: none;
    
    /* Quitamos transiciones de posición para que el arrastre sea instantáneo */
    transition: transform 0.1s; 
}

.oracle-icon {
    background: linear-gradient(135deg, #222, #000);
    color: white;
    font-size: 1.8rem;
    width: 50px;
    height: 50px;
    border-radius: 30px 0 0 30px; /* Borde redondo solo a la izquierda */
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: -4px 4px 15px rgba(0,0,0,0.3);
    border: 1px solid #bd9653;
    border-right: none;
    transition: transform 0.2s;
}

.oracle-floater:active .oracle-icon {
    transform: scale(0.9);
}

/* El globito de texto */
.oracle-tooltip {
    background: white;
    color: #333;
    padding: 10px 15px;
    border-radius: 10px;
    font-size: 0.85rem;
    margin-right: 10px; /* Separado del icono */
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    position: relative;
    opacity: 0; /* Empieza invisible */
    transform: translateX(20px); /* Empieza corrido */
    transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: none; /* Para que no moleste el click */
    text-align: right;
    line-height: 1.2;
}

/* Triangulito del globo */
.oracle-tooltip::after {
    content: '';
    position: absolute;
    right: -6px;
    top: 50%;
    transform: translateY(-50%);
    border-width: 6px;
    border-style: solid;
    border-color: transparent transparent transparent white;
}

/* Clase para mostrar el mensaje */
.oracle-tooltip.show {
    opacity: 1;
    transform: translateX(0);
}

/* --- MINIATURA DE PERFIL EN NAVBAR --- */
.nav-miniatura {
    width: 26px;          /* Tamaño pequeño */
    height: 26px;
    border-radius: 50%;   /* Círculo perfecto */
    object-fit: cover;    /* Para que no se deforme */
    border: 1px solid #ccc;
    transition: all 0.2s;
}

/* Cuando la pestaña está activa, le ponemos borde de tu color */
.nav-item.active .nav-miniatura {
    border: 2px solid #bd9653; /* Dorado */
    transform: scale(1.1);     /* Un poquitín más grande */
}

/* =========================================
   NUEVO EDITOR "DARK ROOM" (SOLO DEDOS)
   ========================================= */
/* Esto bloquea el scroll de la web de fondo para que no aparezca barra */
body.modal-open { overflow: hidden; }

.crop-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%; 
    background: #000; z-index: 9999; display: flex; flex-direction: column;
}

/* Header transparente sobre negro */
.editor-header {
    padding: 20px; display: flex; justify-content: space-between; align-items: center; 
    background: #000; z-index: 10;
}

/* Área de la foto (Ocupa todo el espacio) */
.crop-container {
    flex: 1; background: #000; position: relative; overflow: hidden;
    display: flex; align-items: center; justify-content: center;
}

/* El pie de página (Minimalista, sin botones raros) */
.editor-footer {
    padding: 20px; background: #000; text-align: center;
    color: #666; font-size: 0.8rem;
}

/* SOBRESCRIBIR CROPPER.JS PARA QUE SE VEA LIMPIO */
.cropper-view-box { outline: 1px solid rgba(255, 255, 255, 0.5); }
.cropper-modal { opacity: 0.8; background-color: #000; }
.cropper-bg { background: #000; }

/* --- ESTILOS SUPER NAVBAR GLAMPLAN --- */
.bottom-nav-container {
    position: fixed; bottom: 0; left: 0; width: 100%; z-index: 1000;
    pointer-events: none; /* Deja pasar clicks excepto en los botones */
}

.bottom-nav {
    background: white; 
    display: flex; justify-content: space-around; align-items: flex-end;
    padding: 10px 0; 
    border-top: 1px solid #eee;
    box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
    pointer-events: auto; /* Reactiva clicks */
    height: 60px;
    position: relative;
    z-index: 20;
}

/* Items normales */
.nav-item {
    background: none; border: none; color: #888;
    display: flex; flex-direction: column; align-items: center; gap: 4px;
    font-size: 1.2rem; cursor: pointer; padding-bottom: 5px;
}
.nav-item span { font-size: 0.7rem; font-weight: 500; }

/* EL BOTÓN CENTRAL DORADO */
.nav-item-center {
    position: relative; top: -25px; /* Que sobresalga hacia arriba */
}
.center-btn {
    width: 55px; height: 55px;
    border-radius: 50%;
    background: linear-gradient(135deg, #e28d8d 0%, #bd9653 100%); /* Rosa a Dorado */
    border: 4px solid white;
    box-shadow: 0 5px 15px rgba(189, 150, 83, 0.4);
    color: white; font-size: 1.5rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.center-btn:active { transform: scale(0.9); }
.center-btn i { transition: transform 0.3s; }

/* EL MENÚ FLOTANTE (POP-UP) */
.plus-menu {
    position: absolute; 
    bottom: 85px; /* Justo encima del botón */
    left: 50%; transform: translateX(-50%);
    background: white;
    padding: 15px 25px;
    border-radius: 20px;
    display: flex; gap: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.15);
    opacity: 0; pointer-events: none; transform: translate(-50%, 20px);
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    pointer-events: auto;
}

/* Estado Abierto */
.plus-menu.open {
    opacity: 1; pointer-events: auto;
    transform: translate(-50%, 0);
}

.menu-option {
    display: flex; flex-direction: column; align-items: center; gap: 5px;
    cursor: pointer;
}
.menu-option span { font-size: 0.8rem; font-weight: bold; color: #555; }

.icon-circle {
    width: 50px; height: 50px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.2rem; color: white;
    transition: transform 0.2s;
}
.icon-circle:active { transform: scale(0.9); }

.studio-icon { background: linear-gradient(45deg, #FFD700, #FF8C00); box-shadow: 0 4px 10px rgba(255, 215, 0, 0.3); }
.upload-icon { background: #333; box-shadow: 0 4px 10px rgba(0,0,0,0.2); }

/* Triangulito abajo */
.menu-arrow {
    position: absolute; bottom: -8px; left: 50%; margin-left: -8px;
    width: 16px; height: 16px; background: white;
    transform: rotate(45deg);
    border-radius: 2px;
}

/* Utilidad oculto (por si acaso) */
.hidden { display: none; }

/* BORRA EL CSS VIEJO DE .comparison-icon Y PEGA ESTO: */

/* 1. El contenedor circular para imágenes reales */
.icon-image-container {
    width: 50px; height: 50px;
    border-radius: 50%;
    /* Un fondo neutro y una sombra suave para darle volumen */
    background: white;
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
    /* Importante: oculta lo que se salga del círculo */
    overflow: hidden;
    display: flex; align-items: center; justify-content: center;
    border: 2px solid #f0f0f0; /* Un borde fino y elegante */
    transition: transform 0.2s;
}

/* 2. Estilo para la imagen real dentro del círculo */
.real-icon-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Hace que la imagen rellene el círculo sin estirarse feo */
    display: block;
}

/* Efecto al tocar */
.icon-image-container:active {
    transform: scale(0.95);
}

/* Estilo para el botón de Historia (Degradado vibrante) */
.story-icon {
    background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
    color: white;
    box-shadow: 0 4px 10px rgba(220, 39, 67, 0.4);
}

/* AJUSTE PARA QUE ENTREN 3 BOTONES BIEN */
.plus-menu {
    gap: 20px; /* Reducimos un poco el espacio para que no sea muy ancho */
    padding: 15px 20px;
    width: max-content; /* Que se adapte al contenido */
}

/* Foto pequeña del menú inferior */
.nav-miniatura {
    width: 24px;         /* Tamaño igual a los íconos (antes era 30) */
    height: 24px;
    border-radius: 50%;  /* Redondo */
    object-fit: cover;
    margin-bottom: 2px;  /* Espacio entre la foto y el texto "Tú" */
    border: 1px solid #bd9653; 
    display: block;      /* Asegura que se comporte bien en la columna */
}

/* Asegurar alineación vertical de todo el botón */
.nav-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px; /* Espacio consistente entre icono/foto y texto */
}

/* Estilo para el botón de Oferta Flash */
.flash-btn {
    background: linear-gradient(45deg, #ff357a, #fff176) !important; /* Degradado Rosa-Amarillo */
    color: #fff !important;
    border: 2px solid #fff !important;
    font-weight: bold;
    box-shadow: 0 4px 15px rgba(255, 53, 122, 0.4);
}

.flash-btn i {
    color: #fff;
    margin-right: 5px;
    animation: palpitar 1.5s infinite; /* Efecto visual opcional */
}

/* Animación opcional para el rayito */
@keyframes palpitar {
    0% { transform: scale(1); }
    50% { transform: scale(1.3); }
    100% { transform: scale(1); }
}

/* Estilo base del botón QR (Asegúrate que tenga transición) */
#fab-accion-smart {
    /* ... tus estilos actuales ... */
    transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1); /* Animación suave */
    z-index: 900; /* Asegúrate que esté por encima de todo, pero quizás debajo del menú si quieres */
}

/* Clase para elevar el botón cuando el menú está abierto */
.qr-elevado {
    /* Ajusta el -240px según la altura de tu menú desplegado */
    transform: translateY(-240px) !important; 
}

/* =========================================
   ESTILOS DEL MENÚ DE 3 PUNTITOS
   ========================================= */
.post-menu-btn {
    background: transparent;
    border: none;
    color: #666; /* Color gris para que se vea */
    padding: 10px;
    cursor: pointer;
    font-size: 1.2rem;
    transition: color 0.3s;
}

.post-menu-btn:hover {
    color: #000;
}

.post-dropdown {
    display: none; /* Oculto por defecto */
    position: absolute;
    top: 40px;
    right: 10px;
    background: white;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15);
    border-radius: 12px;
    width: 140px;
    z-index: 100;
    overflow: hidden;
    animation: fadeIn 0.2s ease;
}

.post-dropdown.activo {
    display: block; /* Se muestra al activarse */
}

.menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 15px;
    text-align: left;
    background: white;
    border: none;
    font-size: 0.95rem;
    cursor: pointer;
    color: #333;
    border-bottom: 1px solid #f5f5f5;
}

.menu-item:hover {
    background-color: #f9f9f9;
}

.menu-item.text-danger {
    color: #dc3545; /* Rojo para eliminar */
}

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

/* --- ZONAS DE CLICK PARA HISTORIAS --- */

/* Aseguramos que el contenedor sea la referencia */
.visor-historias-body {
    position: relative; /* Importante para que los botones se queden aquí */
}

/* Los botones invisibles */
.visor-tap-area {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40%; /* Ocupan casi toda la pantalla (40% cada lado) */
    z-index: 9999; /* Por encima de la foto */
    /* background: red; <--- Descomenta esto si quieres verlas para probar */
    opacity: 0; /* Totalmente invisibles */
}

/* Ubicación: Izquierda (Retroceder) */
.visor-tap-area.izquierda {
    left: 0;
}

/* Ubicación: Derecha (Avanzar) */
.visor-tap-area.derecha {
    right: 0;
}