/* assets/css/custom_popup.css */

/* -------------------------------------------------------------------------- */
/*             Variables CSS Globales para el Popup de Reserva                */
/* -------------------------------------------------------------------------- */
:root {
    /* Colores Principales de la Marca Komunah */
    --komunah-color-principal: #FE647C; /* Rosa Komunah */
    --komunah-color-principal-hover: #E55269; /* Un tono más oscuro para hover */
    --komunah-color-principal-light: rgba(254, 100, 124, 0.1); /* Para btn-light-primary */
    --komunah-color-principal-light-hover: rgba(254, 100, 124, 0.2);

    /* Colores de Texto */
    --komunah-color-texto-oscuro-base: #181C32; /* kt-text-gray-900, para títulos fuertes */
    --komunah-color-texto-medio: #3F4254;      /* kt-text-gray-700, texto general de contenido */
    --komunah-color-texto-suave: #7E8299;      /* kt-text-gray-600, texto muted, descripciones */
    --komunah-color-texto-placeholder: #A1A5B7; /* kt-text-gray-500, para placeholders */
    --komunah-color-texto-claro: #FFFFFF;       /* Para texto sobre fondos oscuros */

    /* Stepper Lateral (Tema Oscuro Personalizado) */
    --komunah-stepper-fondo: #07090D;         /* Negro muy oscuro, casi puro */
    --komunah-stepper-texto-general: #B5B5C3;  /* Gris claro para texto general en stepper (kt-text-gray-500 para tema oscuro) */
    --komunah-stepper-texto-titulo: #E0E0E0;   /* Un poco más claro para títulos de paso */
    --komunah-stepper-borde-separador: #2B2B40;/* Borde para separadores (línea punteada) */
    --komunah-stepper-borde-layout: #2D2D44;   /* Borde derecho del stepper en desktop */
    
    --komunah-stepper-icono-fondo-default: #1E1E2D; /* Fondo del ícono del paso (kt-card-bg-dark) */
    --komunah-stepper-icono-texto-default: var(--komunah-stepper-texto-general); /* Texto/número del ícono */
    
    --komunah-stepper-icono-fondo-current: var(--komunah-color-principal); /* Ícono activo */
    --komunah-stepper-icono-texto-current: var(--komunah-color-texto-claro);
    
    --komunah-stepper-icono-fondo-completed: var(--komunah-color-principal); /* Ícono completado (igual que activo) */
    --komunah-stepper-icono-texto-completed: var(--komunah-color-texto-claro);

    /* Área de Contenido Principal (Tema Claro Estándar) */
    --komunah-content-fondo: #FFFFFF;
    --komunah-content-borde-suave: #EFF2F5; /* kt-gray-300, para bordes de cards, inputs */
    --komunah-content-input-fondo: #F5F8FA; /* kt-gray-100, para fondo de inputs */
    --komunah-content-input-borde-focus: var(--komunah-color-principal); /* Borde al hacer focus */
    --komunah-content-input-sombra-focus: rgba(254, 100, 124, 0.25); /* Sombra al hacer focus */

    /* Tamaños de Fuente Base (ajustar según tu tema Metronic si es necesario) */
    --komunah-font-size-base: 1rem;      /* ~16px */
    --komunah-font-size-sm: 0.925rem;    /* ~14.8px (Metronic suele usar 0.925rem para fs-7 o similar) */
    --komunah-font-size-xs: 0.85rem;     /* ~13.6px */
    --komunah-font-size-lg: 1.15rem;     /* ~18.4px */
    --komunah-font-size-xl: 1.35rem;     /* ~21.6px para títulos principales */

    /* Radios de Borde */
    --komunah-border-radius: 0.625rem; /* 10px, un radio común en Metronic */
}

/* -------------------------------------------------------------------------- */
/*                Estilos Generales del Layout del Popup                      */
/* -------------------------------------------------------------------------- */
body#kt_booking_popup_body {
    background-color: #F0F1F5; /* Un fondo global ligeramente más oscuro que el content-fondo */
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Alinea el popup arriba en pantallas grandes */
    min-height: 100vh;
    padding: 1rem;
    box-sizing: border-box;
    font-family: 'Inter', sans-serif; /* Asegurar consistencia de fuente si no la hereda bien */
}

.booking-popup-wrapper {
    background-color: var(--komunah-content-fondo);
    border-radius: var(--komunah-border-radius);
    box-shadow: 0px 0px 40px 0px rgba(82, 63, 105, 0.1); /* Sombra estándar de Metronic */
    display: flex;
    flex-direction: column; /* Móvil: stepper arriba, contenido abajo */
    width: 100%;
    max-width: 500px;       /* Ancho para móviles */
    min-height: auto;
    margin: auto;           /* Centrar */
    overflow: hidden;      /* Para que el border-radius afecte a los hijos */
}

/* -------------------------------------------------------------------------- */
/*                      Estilos para el Stepper (Móvil Primero)               */
/* -------------------------------------------------------------------------- */
.stepper-aside {
    width: 100%;
    background-color: var(--komunah-stepper-fondo);
    padding: 1.25rem 1rem; /* Más padding vertical en móvil */
    border-bottom: 1px solid var(--komunah-stepper-borde-layout);
    color: var(--komunah-stepper-texto-general);
    position: -webkit-sticky; /* Safari */
    position: sticky;         /* Stepper fijo arriba en móvil */
    top: 0;
    z-index: 1030; /* Similar a Metronic header */
}

.popup-logo {
    margin-bottom: 1.25rem;
    text-align: center;
}
.popup-logo img.logo-desktop { display: none; }
.popup-logo img.logo-mobile { display: inline-block; max-height: 35px; } /* Un poco más grande */

.popup-flow-title {
    font-size: var(--komunah-font-size-sm);
    font-weight: 600;
    color: var(--komunah-stepper-texto-general); /* Usar el general para el título del flujo */
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 1rem;
    padding-bottom: 1rem;
    border-bottom: 1px dashed var(--komunah-stepper-borde-separador);
    text-align: center;
}

/* Estilos para el componente Stepper de Metronic dentro de .stepper-aside */
.stepper-aside .stepper.stepper-pills {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto; /* Scroll horizontal para los pasos en móvil */
    padding-bottom: 0.5rem; /* Espacio para scrollbar */
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--komunah-stepper-borde-separador) var(--komunah-stepper-fondo);
}
.stepper-aside .stepper.stepper-pills::-webkit-scrollbar { height: 4px; }
.stepper-aside .stepper.stepper-pills::-webkit-scrollbar-thumb { background: var(--komunah-stepper-borde-separador); border-radius: 2px; }

.stepper-aside .stepper.stepper-pills .stepper-item {
    margin-bottom: 0;
    margin-right: 0.5rem; /* Espacio entre iconos de paso */
    flex-shrink: 0; /* Para que no se compriman */
}
.stepper-aside .stepper.stepper-pills .stepper-item:last-child { margin-right: 0; }

.stepper-aside .stepper.stepper-pills .stepper-item .stepper-icon {
    margin-right: 0; /* En móvil, solo el icono */
    width: 36px; height: 36px; /* Tamaño de íconos */
    background-color: var(--komunah-stepper-icono-fondo-default);
    color: var(--komunah-stepper-icono-texto-default);
    transition: background-color 0.3s ease, color 0.3s ease; /* Transición suave */
}
/* Icono actual (current) */
.stepper-aside .stepper.stepper-pills .stepper-item.current .stepper-icon {
    background-color: var(--komunah-stepper-icono-fondo-current);
    color: var(--komunah-stepper-icono-texto-current);
}
/* Icono completado (completed) */
.stepper-aside .stepper.stepper-pills .stepper-item.completed .stepper-icon {
    background-color: var(--komunah-stepper-icono-fondo-completed);
    color: var(--komunah-stepper-icono-texto-completed);
}
/* Número y check dentro del ícono */
.stepper-aside .stepper.stepper-pills .stepper-item .stepper-icon .stepper-number { color: inherit; }
.stepper-aside .stepper.stepper-pills .stepper-item.completed .stepper-icon .stepper-check { color: inherit; }

/* Ocultar texto del paso y línea en móvil para diseño compacto */
.stepper-aside .stepper.stepper-pills .stepper-item .stepper-label { display: none; }
.stepper-aside .stepper.stepper-pills .stepper-line { display: none; }


/* -------------------------------------------------------------------------- */
/*                Estilos para el Área de Contenido (Claro)                   */
/* -------------------------------------------------------------------------- */
.stepper-content-main {
    flex-grow: 1;
    padding: 1.5rem; /* Padding para móvil */
    overflow-y: auto;
    background-color: var(--komunah-content-fondo);
    color: var(--komunah-color-texto-medio);
}
/* Contenedor interno del paso actual de Metronic (usualmente un div con data-kt-stepper-element="content") */
.stepper-content-main > [data-kt-stepper-element="content"] {
    padding-bottom: 100px; /* Espacio para botones de navegación fijos abajo en móvil */
}

/* Títulos dentro del contenido del paso */
.stepper-content-main .pb-10.pb-lg-15.text-center h2.fw-bold, /* Ajusta a tu estructura de Metronic */
.stepper-content-main .page-title h1 {
    color: var(--komunah-color-texto-oscuro-base) !important;
    font-size: var(--komunah-font-size-lg);
    margin-bottom: 0.5rem !important;
}
.stepper-content-main .pb-10.pb-lg-15.text-center .text-muted {
    color: var(--komunah-color-texto-suave) !important;
    font-size: var(--komunah-font-size-sm);
    margin-bottom: 1.25rem !important;
}

/* Elementos de Formulario */
.stepper-content-main .form-label {
    color: var(--komunah-color-texto-medio);
    font-weight: 500; /* Metronic usa 600 (fw-semibold) o 500 */
    margin-bottom: 0.45rem; /* Ajustar a Metronic */
    font-size: var(--komunah-font-size-sm);
}
.stepper-content-main .form-label.required::after {
    content: " *";
    color: var(--komunah-color-principal);
}
.stepper-content-main .form-control,
.stepper-content-main .form-select {
    background-color: var(--komunah-content-input-fondo);
    border: 1px solid var(--komunah-content-borde-suave);
    color: var(--komunah-color-texto-medio);
    font-size: var(--komunah-font-size-base);
    border-radius: var(--komunah-border-radius); /* Aplicar radio a inputs */
}
.stepper-content-main .form-control::placeholder {
    color: var(--komunah-color-texto-placeholder);
    opacity: 1; /* Placeholder siempre visible */
}
/* Estilos para Select2 (si Metronic lo estiliza así) */
.stepper-content-main .select2-container--bootstrap5 .select2-selection {
    background-color: var(--komunah-content-input-fondo);
    border: 1px solid var(--komunah-content-borde-suave);
    color: var(--komunah-color-texto-medio);
    border-radius: var(--komunah-border-radius);
}
.stepper-content-main .select2-container--bootstrap5 .select2-selection--single .select2-selection__rendered {
    color: var(--komunah-color-texto-medio);
}
.stepper-content-main .form-control:focus,
.stepper-content-main .form-select:focus,
.stepper-content-main .select2-container--bootstrap5.select2-container--open .select2-selection {
    border-color: var(--komunah-content-input-borde-focus);
    box-shadow: 0 0 0 0.2rem var(--komunah-content-input-sombra-focus);
}

/* Separadores */
.stepper-content-main .separator-dashed {
    border-bottom-style: dashed !important;
    border-bottom-color: var(--komunah-content-borde-suave) !important;
    margin-top: 1.75rem;  /* my-7 o my-8 de Metronic */
    margin-bottom: 1.75rem;
}

/* Botones */
.stepper-content-main .btn {
    font-size: var(--komunah-font-size-sm); /* Tamaño base de Metronic para btn */
    padding: 0.75rem 1.5rem; /* btn-md de Metronic aprox. */
    border-radius: var(--komunah-border-radius);
}
.stepper-content-main .btn-lg { /* Si usas .btn-lg de Metronic */
    font-size: var(--komunah-font-size-base);
    padding: 0.875rem 1.75rem;
}
.stepper-content-main .btn-primary {
    background-color: var(--komunah-color-principal);
    border-color: var(--komunah-color-principal);
    color: var(--komunah-color-texto-claro);
}
.stepper-content-main .btn-primary:hover,
.stepper-content-main .btn-primary:focus,
.stepper-content-main .btn-primary:active {
    background-color: var(--komunah-color-principal-hover);
    border-color: var(--komunah-color-principal-hover);
    color: var(--komunah-color-texto-claro);
}
.stepper-content-main .btn-light-primary { /* Estilo de Metronic */
    background-color: var(--komunah-color-principal-light);
    color: var(--komunah-color-principal);
    border-color: transparent;
}
.stepper-content-main .btn-light-primary:hover {
    background-color: var(--komunah-color-principal-light-hover);
    color: var(--komunah-color-principal);
}

/* Barra de botones de navegación (Anterior/Siguiente) fija en móvil */
.stepper-content-main .d-flex.flex-stack.pt-10 { /* Ajusta selector si Metronic lo cambia */
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    background-color: var(--komunah-content-fondo);
    padding: 1rem 1.5rem; /* Padding interno de la barra */
    border-top: 1px solid var(--komunah-content-borde-suave);
    z-index: 100; /* Sobre el contenido scrolleable pero bajo modales etc. */
    margin-left: -1.5rem;  /* Compensar padding de .stepper-content-main */
    margin-right: -1.5rem;
    margin-bottom: -1.5rem;/* Si .stepper-content-main tiene padding-bottom, compensar */
    border-bottom-left-radius: var(--komunah-border-radius); /* Para que coincida con el wrapper */
    border-bottom-right-radius: var(--komunah-border-radius);
}

/* Alertas (para mensajes de error/éxito como folio_validation_message_container) */
.stepper-content-main .alert {
    padding: 1rem 1.25rem; /* Ajustar al padding de alerta de Metronic */
    font-size: var(--komunah-font-size-sm);
    border-radius: var(--komunah-border-radius);
}
.stepper-content-main .alert h4 { /* Título dentro del alert */
    font-size: var(--komunah-font-size-base);
    margin-bottom: 0.25rem;
}

/* Canvas de Firma */
.stepper-content-main #signature_pad_canvas {
    background-color: var(--komunah-content-input-fondo); /* Mismo fondo que inputs */
    border: 1px dashed var(--komunah-content-borde-suave); /* Borde punteado distintivo */
    border-radius: var(--komunah-border-radius);
    cursor: crosshair;
}


/* -------------------------------------------------------------------------- */
/*                      Media Queries para Escritorio (lg y superior)         */
/*                      Ajustar el breakpoint de Metronic (usualmente 992px)  */
/* -------------------------------------------------------------------------- */
@media (min-width: 992px) {
    body#kt_booking_popup_body {
        padding-top: 2rem;
        padding-bottom: 2rem;
        align-items: center; /* Centrar verticalmente el popup en pantalla */
    }

    .booking-popup-wrapper {
        flex-direction: row; /* Stepper a la izquierda, contenido a la derecha */
        width: 90%;
        max-width: 1140px; /* Ancho típico de contenedor -xl o -xxl de Bootstrap/Metronic */
        min-height: 700px; /* Altura mínima para vista de escritorio */
        max-height: 90vh;  /* Que no exceda la altura de la ventana */
    }

    .stepper-aside {
        width: 280px; /* Ancho fijo para el stepper lateral */
        padding: 2rem 1.75rem; /* Más padding en desktop */
        border-right: 1px solid var(--komunah-stepper-borde-layout);
        border-bottom: none; /* Quitar borde inferior */
        overflow-y: auto;    /* Permitir scroll si los pasos son muchos */
        position: static;    /* Quitar sticky */
        border-top-left-radius: var(--komunah-border-radius); /* Aplicar border radius */
        border-bottom-left-radius: var(--komunah-border-radius);
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;

    }
    .popup-logo img.logo-desktop { display: inline-block; max-height: 40px; }
    .popup-logo img.logo-mobile { display: none; }

    .stepper-aside .stepper.stepper-pills {
        flex-direction: column; /* Pasos en columna */
        overflow-x: visible;
        padding-bottom: 0;
    }
    .stepper-aside .stepper.stepper-pills .stepper-item {
        margin-bottom: 1.75rem; /* Espacio entre pasos */
        margin-right: 0;
        /* Estilo completo del paso como en Metronic */
        display: flex;
        align-items: flex-start; /* Alinear ícono y texto */
    }
    .stepper-aside .stepper.stepper-pills .stepper-item .stepper-icon {
        margin-right: 0.75rem; /* Espacio entre ícono y texto */
        width: 40px; height: 40px; /* Íconos más grandes */
        font-size: 1rem;
    }
    /* Mostrar texto del paso y línea en desktop */
    .stepper-aside .stepper.stepper-pills .stepper-item .stepper-label {
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding-top: 0.15rem; /* Ajuste vertical ligero */
    }
    .stepper-aside .stepper.stepper-pills .stepper-item .stepper-label .stepper-title {
        display: block;
        font-size: var(--komunah-font-size-base); /* Título del paso */
        font-weight: 600; /* Metronic fw-semibold */
        color: var(--komunah-stepper-texto-titulo);
    }
    .stepper-aside .stepper.stepper-pills .stepper-item .stepper-label .stepper-desc {
        display: block;
        font-size: var(--komunah-font-size-xs); /* Descripción del paso */
        font-weight: 500;
        color: var(--komunah-stepper-texto-general);
    }
    .stepper-aside .stepper.stepper-pills .stepper-line {
        display: block; /* Línea vertical entre pasos */
        margin-left: calc(40px / 2); /* Centrar con el ícono */
    }


    .stepper-content-main {
        padding: 2rem 2.5rem; /* Padding de contenido en desktop */
        border-top-right-radius: var(--komunah-border-radius); /* Aplicar border radius */
        border-bottom-right-radius: var(--komunah-border-radius);
    }
    .stepper-content-main > [data-kt-stepper-element="content"] {
        padding-bottom: 0; /* Quitar padding extra si los botones no son fijos */
    }

    .stepper-content-main .pb-10.pb-lg-15.text-center h2.fw-bold,
    .stepper-content-main .page-title h1 {
        font-size: var(--komunah-font-size-xl); /* Títulos de contenido más grandes */
    }
    .stepper-content-main .pb-10.pb-lg-15.text-center .text-muted {
        font-size: var(--komunah-font-size-base);
    }

    /* Restaurar botones de navegación a su posición original en escritorio */
    .stepper-content-main .d-flex.flex-stack.pt-10 {
        position: static; /* Quitar sticky */
        padding: 2.5rem 0 0 0; /* pt-10 de Metronic, sin padding lateral o borde */
        border-top: none;
        margin: 0; /* Quitar márgenes de compensación */
        border-radius: 0; /* Sin border radius específicos para esta barra */
    }
}

/* ========================================================================== */
/*           Estilos para la Barra de Progreso en Móvil                       */
/* ========================================================================== */

/* Por defecto, el contenedor de la barra de progreso está visible */
.popup-progress-bar-container {
    display: block;
    width: 100%;
    margin-top: 1rem; /* Espacio después del título del flujo */
}

/* Ocultar el stepper de Metronic por defecto (móvil primero) */
.stepper-aside .stepper.stepper-pills {
    display: none;
}

/* Estilos de la información de texto (Paso X de Y) */
.popup-progress-step-info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 0.5rem;
    font-size: var(--komunah-font-size-xs);
    color: var(--komunah-stepper-texto-general);
}
.popup-progress-step-info #mobile_progress_step_text {
    font-weight: 500;
}
.popup-progress-step-info #mobile_progress_step_title {
    font-weight: 600;
    color: var(--komunah-stepper-texto-titulo);
}

/* Estilos de la barra de progreso */
.popup-progress-bar {
    height: 6px; /* Un poco más delgada */
    background-color: var(--komunah-stepper-borde-separador); /* Color de fondo de la barra */
    border-radius: 3px;
    overflow: hidden;
}
.popup-progress-bar-fill {
    width: 0%; /* JS controlará esto */
    height: 100%;
    background-color: var(--komunah-color-principal); /* Color de la marca para el relleno */
    border-radius: 3px;
    transition: width 0.4s ease-in-out; /* Animación suave al cambiar de paso */
}


/* ========================================================================== */
/*      Media Query para Escritorio: Ocultar Barra, Mostrar Stepper          */
/* ========================================================================== */

@media (min-width: 992px) {
    /* Ocultar nuestra barra de progreso personalizada en pantallas grandes */
    .popup-progress-bar-container {
        display: none;
    }
    
    /* Mostrar de nuevo el stepper vertical de Metronic en pantallas grandes */
    .stepper-aside .stepper.stepper-pills {
        display: flex; /* O 'block' si la flexbox causa problemas con la dirección de columna */
        flex-direction: column; /* Asegurar que es vertical */
    }
}

/* ========================================================================== */
/*           NUEVO: Estilos para el Mensaje de Verificación de Folio          */
/* ========================================================================== */
.verification-message {
    display: flex;
    align-items: center;
    padding: 1rem 1.25rem;
    border-radius: var(--komunah-border-radius);
    border: 1px solid transparent;
    transition: opacity 0.3s ease, transform 0.3s ease;
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeIn 0.5s forwards;
}

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

.verification-message .icon {
    flex-shrink: 0;
    margin-right: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.verification-message .message-text {
    flex-grow: 1;
    font-size: var(--komunah-font-size-sm);
    font-weight: 500;
}

/* Estilo para mensaje de ÉXITO */
.verification-message.success {
    background-color: #E8FFF3; /* bg-light-success de Metronic */
    border-color: #50CD89;
    color: #0F573D; /* texto oscuro de éxito */
}
.verification-message.success .icon {
    color: #50CD89; /* text-success */
}

/* Estilo para mensaje de ERROR */
.verification-message.danger {
    background-color: #FFF5F8; /* bg-light-danger */
    border-color: #F1416C;
    color: #7A2E43; /* texto oscuro de error */
}
.verification-message.danger .icon {
    color: #F1416C; /* text-danger */
}

/* Ocultar la sección del titular con una animación suave */
#titular_data_section.d-none {
    display: none;
}
#titular_data_section {
    animation: slideDown 0.5s ease-out;
}
@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}