/* =====================================================
   1. BASE GLOBAL & RESET (Viewport, Tipografía y Fondo)
   ===================================================== */
html {
    font-size: 14px;
    position: relative;
    scroll-behavior: smooth;
}

/* Escalado de tipografía responsivo */
@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

/* Forzamos a que el body tenga la imagen y no sea tapado por frameworks */
body, body.scrolled {
    margin: 0;
    padding: 0;
    min-height: 100vh !important;
    background-image: url('/images/Whatsapp.avif') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
}

/* Limpiamos contenedores intermedios de plantillas */
main.main, .galeria-gato-negro, .hero-content {
    background: transparent !important;
}

/* Helpers de Texto */
.text-red {
    color: red;
    font-weight: bold;
}

.text-black {
    color: black;
    font-weight: bold;
}

/* =====================================================
   2. DARK THEME (Consolidado)
   ===================================================== */
body.dark-theme {
    background-color: #121212;
    color: #e0e0e0;
}

.dark-theme .navbar,
.dark-theme .modal-content,
.dark-theme .dropdown-menu {
    background-color: #1e1e1e !important;
}

/* =====================================================
   3. MODALES & VENTANAS EMERGENTES
   ===================================================== */
.modal-backdrop.show {
    backdrop-filter: blur(8px);
    background-color: rgba(0, 0, 0, 0.5);
}

.modal-lightblue .modal-content,
#createEditModal .modal-content {
    background-color: lightblue;
    border-radius: 25px;
    border: none;
}

.modal-glass {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(20px) saturate(150%);
    -webkit-backdrop-filter: blur(20px) saturate(150%);
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    border-radius: 20px !important;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
}

#createEditModal .modal-header {
    background-color: #007bff;
    color: white;
    border-bottom: none;
    border-top-left-radius: 25px;
    border-top-right-radius: 25px;
}

#createEditModal .btn-close {
    filter: invert(1);
}

#modalImage {
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
    object-fit: contain;
}

#modalClose {
    z-index: 10;
    transition: transform 0.2s;
    text-shadow: 0 0 10px rgba(0,0,0,1);
}

    #modalClose:hover {
        transform: scale(1.2);
        color: #c85716 !important;
    }

.custom-scroll-body {
    max-height: 65vh;
    overflow-y: auto;
    padding-right: 10px;
}

/* =====================================================
   4. TABLAS / DATATABLES
   ===================================================== */
.table-responsive {
    overflow-x: auto;
    position: relative;
}

#tblList {
    font-size: 12px;
    min-width: 1100px;
}

    #tblList th, #tblList td {
        white-space: normal !important;
        vertical-align: top !important;
    }

    #tblList thead th {
        text-align: center !important;
        vertical-align: middle !important;
    }

    #tblList tbody td.text-end {
        text-align: right !important;
    }

.descripcion-wrap {
    max-width: 250px !important;
    word-break: break-word !important;
}

#tblList img {
    max-height: 60px;
    border-radius: 4px;
    cursor: zoom-in;
    transition: transform .3s ease, box-shadow .3s ease;
}

    #tblList img:hover {
        transform: scale(4);
        box-shadow: 0 4px 12px rgba(0,0,0,.3);
        z-index: 999;
        position: relative;
    }

div.dataTables_filter {
    display: none;
}

/* =====================================================
   5. BOTONES, ICONOS & EFECTOS SWAL
   ===================================================== */
.btn {
    border-radius: 25px;
    transition: all .25s ease;
}

.btn-outline-white, .btn-outline-cancel, .btn-outline-edit,
.btn-outline-delete, .btn-outline-contact {
    background: transparent !important;
}

    .btn-outline-delete i {
        color: red !important;
    }

    .btn-outline-delete:hover i, .btn-outline-edit:hover i,
    .btn-outline-contact:hover i, .btn-outline-white:hover i,
    .btn-outline-cancel:hover i {
        transform: scale(1.3);
        color: white !important;
    }

i.fas, i.far, i.fab, i.fa {
    color: dodgerblue;
    transition: color .3s ease;
}

i:hover {
    color: #0056b3;
}

i[aria-hidden="true"] {
    pointer-events: none;
}

.swal2-confirm, .swal2-cancel {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s ease, background 0.3s ease !important;
}

    .swal2-confirm:hover, .swal2-cancel:hover {
        transform: scale(1.05);
    }

.swal-button-glow {
    background: radial-gradient( circle at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.35) 0%, transparent 70% ) !important;
}

input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
    display: none;
}

/* =====================================================
   6. HEADER & NAVEGACIÓN
   ===================================================== */
#header.header {
    background: rgba(33,53,63,.55) !important;
    backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255,255,255,.12);
    z-index: 997;
}

#header .navbar {
    background: transparent !important;
    box-shadow: none !important;
}

#header .nav-link {
    color: #fff !important;
    font-weight: 600;
    transition: color .25s ease;
}

    #header .nav-link:hover, #header .nav-link.active,
    #header .show > .nav-link {
        color: #003cff !important;
        font-weight: 700;
    }

#header .dropdown-menu {
    background: rgba(33,53,63,.9);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    border: none;
}

#header .dropdown-item {
    color: #fff !important;
}

    #header .dropdown-item:hover {
        background: rgba(255,255,255,.08);
    }

.navbar-toggler {
    border: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

/* =====================================================
   7. SISTEMA DE FILAS Y GLASS CARDS (UNIFICADO)
   ===================================================== */
.row.justify-content-center {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch; /* Mismo alto para todas las columnas de la fila */
}

.col-md-4.col-lg-3.d-flex {
    display: flex !important;
}

/* Tarjetas Vidrio Base */
.glass-card, .hero-glass-card {
    cursor: pointer;
    background: rgba(0, 0, 0, 0.35) !important;
    backdrop-filter: blur(14px) !important;
    -webkit-backdrop-filter: blur(14px) !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35) !important;
    padding: 1.5rem !important;
    transition: transform .35s ease, box-shadow .35s ease, background .35s ease;
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%; /* Sincroniza con el stretch de la fila */
}

    /* Hovers de tarjetas */
    .glass-card:hover, .hero-glass-card:hover {
        transform: translateY(-10px) scale(1.01);
        background: rgba(0, 0, 0, 0.45) !important;
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5) !important;
        border: 1px solid rgba(255, 255, 255, 0.25) !important;
    }

        .glass-card:hover i {
            transform: scale(1.15) rotate(-5deg);
        }

/* Contenedor del cuerpo interno */
.glass-card-body {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
}

    /* Empuja los botones de reserva simétricamente al fondo */
    .glass-card-body .hero-buttons {
        margin-top: auto !important;
        padding-top: 15px;
    }

/* Forzar tarjeta cabecera/hero a ser compacta */
.hero-glass-card {
    height: auto !important;
    min-height: unset !important;
}

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

/* =====================================================
   8. CAROUSEL & ELEMENTOS INTERNOS
   ===================================================== */
.galeria-gato-negro .carousel-item {
    height: 550px;
}

.galeria-gato-negro .img-wrapper {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.galeria-gato-negro .carousel-item img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.galeria-gato-negro .carousel-control-prev-icon,
.galeria-gato-negro .carousel-control-next-icon {
    width: 50px;
    height: 50px;
    position: relative;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(14px);
    border-radius: 18px;
}

    .galeria-gato-negro .carousel-control-prev-icon::after,
    .galeria-gato-negro .carousel-control-next-icon::after {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 12px;
        height: 12px;
        border: solid #fff;
        border-width: 0 3px 3px 0;
    }

    .galeria-gato-negro .carousel-control-prev-icon::after {
        transform: translate(-50%, -50%) rotate(135deg);
    }

    .galeria-gato-negro .carousel-control-next-icon::after {
        transform: translate(-50%, -50%) rotate(-45deg);
    }

.testimonial-avatar {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid #fff;
    transition: transform .3s ease;
}

    .testimonial-avatar:hover {
        transform: scale(1.06);
    }

/* Botón Especial de Reserva */
.btn-reserva {
    color: #fff;
    border: 1px solid rgba(255,255,255,0.6);
    background: rgba(255,255,255,0.05);
    backdrop-filter: blur(4px);
    transition: all 0.35s ease;
    font-weight: 500;
    border-radius: 25px;
}

    .btn-reserva:hover, .btn-reserva:focus {
        background: #fff;
        color: #111;
        box-shadow: 0 8px 25px rgba(255,255,255,0.35);
        transform: translateY(-2px);
    }

/* =====================================================
   9. SISTEMA DE CHAT (MENÚS & CAPAS CORREGIDAS)
   ===================================================== */
#chatMessages, .chat-messages-container, #chatModal .modal-body {
    isolation: isolate !important;
    position: relative !important;
}

#chatMessages {
    padding: 10px;
    overflow-y: auto;
    overflow-x: visible !important;
}

.message-wrapper {
    position: relative;
    z-index: 1;
    transition: transform 0.1s ease-out;
    touch-action: pan-y;
    will-change: transform;
    max-width: 80%;
}

    .message-wrapper:has(.dropdown-menu.show) {
        z-index: 9999 !important;
    }

    .message-wrapper > div {
        position: relative;
        overflow: visible !important;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0,0,0,0.1);
    }

    .message-wrapper .dropdown-menu {
        position: absolute !important;
        z-index: 10000 !important;
        margin: 0;
        border: none !important;
        box-shadow: 0 4px 15px rgba(0,0,0,0.2) !important;
        background-color: #ffffff !important;
    }

body.dark-theme .message-wrapper .dropdown-menu {
    background-color: #2c2c2c !important;
    color: #e0e0e0 !important;
}

audio {
    border-radius: 20px;
    background-color: transparent;
}

.message-wrapper:has(.audio-player-custom),
.message-wrapper:has(audio) {
    min-width: 280px;
}

.progress-container:hover .progress-dot {
    transform: translate(-50%, -50%) scale(1.2);
    transition: transform 0.2s;
}

.audio-filename {
    font-size: 0.7rem;
    color: #666;
    margin-top: 5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.swipe-reply-indicator {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0;
    transition: opacity 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 35px;
    pointer-events: none;
}

.video-wrapper {
    background-color: #000;
    position: relative;
    min-height: 150px;
}

    .video-wrapper video {
        outline: none;
    }

    .video-wrapper::before {
        content: "Cargando video...";
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        color: #555;
        font-size: 0.8rem;
    }

/* =====================================================
   10. CORRECCIÓN EMOJI PICKER (PREVIEW COMPLETO)
   ===================================================== */
.emoji-picker, [data-emoji-picker] {
    z-index: 99999 !important;
    position: fixed !important;
    box-shadow: 0px 8px 30px rgba(0, 0, 0, 0.3) !important;
    border-radius: 12px !important;
    transform: translateY(-102%) translateX(5px) !important;
}

    .emoji-picker__preview,
    .emoji-picker__preview-container,
    [data-emoji-picker] [class*="preview"],
    [data-emoji-picker] [class*="footer"] {
        height: auto !important;
        min-height: 55px !important;
        overflow: visible !important;
        padding-bottom: 6px !important;
        box-sizing: border-box !important;
    }

    .emoji-picker__preview-emoji, [data-emoji-picker] [class*="preview-emoji"] {
        font-size: 2rem !important;
        line-height: 1 !important;
        display: flex !important;
        align-items: center !important;
    }

    .emoji-picker__emojis, [data-emoji-picker] .emoji-picker__container {
        padding-bottom: 10px !important;
    }

/* =====================================================
   11. FOOTER (GESTIÓN INTEGRAL)
   ===================================================== */
#footer.footer {
    background: transparent !important;
    --background-color: transparent !important;
    --surface-color: transparent !important;
}

#footer .hero-glass-card {
    background: rgba(255, 255, 255, 0.1) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3) !important;
    border-radius: 18px !important;
    padding: 25px !important;
    height: 100% !important;
}

.footer-glass {
    background: rgba(0, 0, 0, 0.4) !important;
    backdrop-filter: blur(15px) !important;
    -webkit-backdrop-filter: blur(15px) !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
    margin-top: 50px !important;
}

#footer h4 {
    color: #ffffff !important;
    font-weight: 700;
    margin-bottom: 15px;
}

#footer p, #footer small {
    color: rgba(255, 255, 255, 0.8) !important;
}

.social-links a i {
    font-size: 1.5rem;
    color: white !important;
    transition: transform 0.3s ease;
}

.social-links a:hover i {
    transform: translateY(-3px);
    color: #007bff !important;
}

/* =====================================================
   12. ANIMACIONES DE ELIMINACIÓN DE ELEMENTOS
   ===================================================== */
.row {
    transition: all 0.5s ease-in-out;
}

.item-eliminando {
    opacity: 0 !important;
    transform: scale(0.5) translateY(-40px) !important;
    max-width: 0 !important;
    flex-basis: 0 !important;
    min-width: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    overflow: hidden !important;
    pointer-events: none;
    transition: opacity 0.4s ease, transform 0.4s ease, max-width 0.5s cubic-bezier(0.4, 0, 0.2, 1), flex-basis 0.5s cubic-bezier(0.4, 0, 0.2, 1), width 0.5s cubic-bezier(0.4, 0, 0.2, 1), margin 0.5s ease, padding 0.5s ease !important;
}