/* ==========================================================================
   ht-modals-desktop.css — Desktop overrides (min-width breakpoints)
   Extracted from ht-modals.css for mobile-first organization.
   ========================================================================== */

/* --- Desktop (>=768px): se convierte en modal centrado auto -------------- */
@media (min-width: 768px) {
  .ht-modal-sheet .modal-dialog {
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    left: 50% !important;
    width: calc(100vw - 50px) !important;
    max-width: 600px !important;
    height: auto !important;
    max-height: calc(100dvh - 50px) !important;
    transform: translate(-50%, -50%) scale(0.95) !important;
    transition: transform 0.3s ease, opacity 0.3s ease !important
  }

  .ht-modal-sheet.show .modal-dialog {
    transform: translate(-50%, -50%) scale(1) !important
  }

  .ht-modal-sheet .modal-content {
    height: auto !important;
    max-height: calc(100dvh - 50px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3) !important;
    border-radius: var(--radius-lg, 24px) !important
  }

  .ht-modal-sheet .modal-content::before {
    display: none !important;
  }
}

/* ==========================================================================
   DESKTOP: CONVERSIÓN DE MODALES FULL-SCREEN A VENTANAS FLOTANTES
   ========================================================================== */

@media (min-width: 992px) {

    /* 1. DOMANDO A LOS GIGANTES (Los contenedores principales) */
    .modalbox .modal-dialog,
    .ht-modal-full .modal-dialog,
    .ht-modal-glass-full .modal-dialog,
    .ht-modal-immersive .modal-dialog {
        position: relative !important; /* Los liberamos de las esquinas de la pantalla */
        width: 100% !important;
        max-width: 650px !important; /* Límite de ancho para que no se estiren al infinito */
        height: auto !important;
        min-height: 200px !important;
        max-height: 90vh !important; /* Que no toquen el techo ni el suelo */
        margin: 5vh auto !important; /* Los centramos horizontalmente y damos aire arriba/abajo */
        transform: none !important; /* Anulamos animaciones de deslizar desde abajo */
    }

    /* 2. DANDO FORMA A LAS TARJETAS (Bordes y Sombras) */
    .modalbox .modal-dialog .modal-content,
    .ht-modal-full .modal-content,
    .ht-modal-glass-full .modal-content,
    .ht-modal-immersive .modal-content {
        height: auto !important;
        max-height: 90vh !important;
        overflow: hidden !important; /* Asegura que el contenido respete los bordes curvos */
        border: 1px solid rgba(255, 255, 255, 0.4) !important;
        border-radius: var(--radius-lg) !important; /* Curvas amplias y modernas */
        box-shadow: 0 32px 64px -12px rgba(0, 0, 0, 0.3) !important; /* Sombra flotante profunda */
    }

    /* 3. ARREGLO ESPECÍFICO PARA ".modalbox" (Tenía una cabecera fija muy rebelde) */
    .modalbox .modal-dialog .modal-content {
        padding-top: 0 !important; /* Quitamos el padding que dejaba hueco arriba */
    }

    .modalbox .modal-dialog .modal-content .modal-header {
        position: relative !important; /* Matamos el fixed que lo pegaba al techo del monitor */
        padding: 24px 32px !important;
        background: var(--color-bg-body) !important; /* Le damos un tono gris muy sutil a la cabecera */
        border-radius: 24px 24px 0 0 !important;
    }

    .modalbox .modal-dialog .modal-content .modal-header .modal-title {
        font-size: 1.25rem !important;
        font-weight: 800 !important;
        text-align: left !important; /* En escritorio, los títulos centrados parecen antiguos */
    }

    /* 4. ARREGLO PARA LOS BOTONES INFERIORES FIJOS */
    /* En móvil está bien que los botones persigan al dedo, en PC deben quedarse en su sitio */
    .modal-footer-bottons,
    .ht-modal-footer--float {
        position: relative !important;
        bottom: auto !important;
        padding: 24px 32px !important;
        background: var(--color-bg-card) !important;
        border-top: 1px solid var(--color-border) !important;
        border-radius: 0 0 24px 24px !important;
    }

    /* 5. EL MENÚ DE IDIOMAS (Convertido en una cuadrícula centrada) */
    .dropdown-menu.fs-lang-menu {
        gap: 32px !important;
        /* Mantenemos que ocupe todo como un cristal, pero agrupamos el contenido */
        align-content: center !important;
        justify-content: center !important;
        padding: 40px !important;
    }

    .fs-lang-menu .lang_selector_item {
        max-width: 180px !important; /* Que las banderas no se hagan gigantes */
        height: 160px !important;
        box-shadow: 0 10px 20px rgba(0,0,0,0.08) !important;
    }
    .ht-modal-full .vh-100.proh {
    height: auto !important;
    padding: 50px;
}
/* 6. MODALES AUTO-BOTTOM: centrarlos en desktop en vez de pegarlos abajo */
    .ht-modal-auto.ht-modal-auto--bottom .modal-dialog {
        top: 50% !important;
        bottom: auto !important;
        transform: translate(-50%, -50%) !important;
    }

    .ht-modal-auto.ht-modal-auto--bottom.fade:not(.show) .modal-dialog {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.9) !important;
    }

    .ht-modal-auto.ht-modal-auto--bottom.fade.show .modal-dialog {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1) !important;
    }

.ht-modal-sheet .modal-content {
    border-radius: var(--radius-lg) !important;
}
.ht-modal-sheet .ht-modal-close-btn {
    top: 11px;
    right: 18px;
}
}