/**
 * Athena — Chrome del bottom sheet (hoja inferior)
 * ================================================
 *
 * Fuente unica del aspecto de las hojas inferiores basadas en modal
 * (`.modal-dialog-bottom` + `.modal-content-bottom`): buscadores de entidad,
 * filtros de listado, selectores.
 *
 * Por que existe este archivo:
 *   1. La hoja del "+" de la barra inferior es un offcanvas de Bootstrap y su
 *      chrome vive en `mobile-bottom-nav.css`, que SI se carga globalmente.
 *      Las hojas de busqueda/filtros son modales y su chrome vivia en
 *      `bottom-sheet.css`, que solo se incluye pagina por pagina: en las que
 *      no lo incluian (listado de productos, de miembros...) `filtersModal` ni
 *      siquiera se abria como hoja inferior, se veia como modal corriente.
 *      Resultado: dos componentes que deberian ser el mismo se veian distinto.
 *   2. `bottom-sheet.css` no se puede cargar en global: junto al chrome trae
 *      reglas sin acotar (`.table th { display:none }`, `.badge.bg-*`,
 *      `.btn-sm`) que romperian las tablas de las paginas que hoy no lo cargan.
 *
 * Aqui va SOLO lo que pinta la hoja. Nada global, nada de tablas.
 */

/* ============================================================
   La hoja
   ============================================================ */
.modal-dialog-bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
    max-width: 100%;
    height: auto;
    max-height: 85vh;
    transform: translateY(100%);
    transition: transform 0.3s ease-out;
}

.modal.show .modal-dialog-bottom { transform: translateY(0); }
.modal.fade:not(.show) .modal-dialog-bottom { transform: translateY(100%); }

.modal-content-bottom {
    /* Mismo radio, fondo y sombra que la hoja del "+".
       Los !important no son pereza: `modern-theme.css` declara
       `.modal-content { background-color:#1C1E22 !important }` para todos los
       modales. La hoja del "+" es un offcanvas y no le entra, asi que se pintaba
       en azul pizarra (#1a252f) mientras estas hojas salian en gris neutro
       (#1C1E22). Eran, literalmente, dos colores distintos. */
    border-radius: 16px 16px 0 0;
    border: none;
    box-shadow: var(--athena-shadow-lg, 0 -4px 20px rgba(0, 0, 0, 0.15));
    max-height: 85vh;
    overflow-y: auto;
    background-color: var(--athena-primary-darker, #1a252f) !important;
    border-color: transparent !important;
    color: var(--bs-body-color, #ffffff) !important;
}

/* El tema mete calles laterales a todo modal
   (`.modal .modal-dialog:not(.modal-fullscreen) { padding: 0 .75rem }`, con
   !important en la izquierda). Una hoja inferior va de borde a borde: con esas
   calles se veia una tarjeta flotando, no una hoja. */
@media (max-width: 767.98px) {
    .modal .modal-dialog-bottom:not(.modal-fullscreen) {
        padding-left: 0 !important;
        padding-right: 0;
    }
}

/* ============================================================
   Arrastre (gesto de `js/bottom-sheet.js`)
   ============================================================ */
/* Mientras el dedo la lleva, la hoja NO interpola: sigue al dedo al pixel. Sin
   esto la transicion de 0.3s la deja siempre un poco por detras y se siente
   pegajosa, no agarrada. El `!important` es para ganarle a la propia
   `transition` de la hoja de mas arriba y a la del offcanvas de Bootstrap.

   Alcanza tambien a `.offcanvas-bottom` (la hoja del "+" y la de "Mas") porque
   el gesto es uno solo para las dos familias: si el chrome ya es el mismo, el
   comportamiento tambien. */
.modal-dialog-bottom.athena-sheet-dragging,
.offcanvas-bottom.athena-sheet-dragging {
    transition: none !important;
    will-change: transform;
}

/* La asita se enciende mientras se arrastra: es el unico acuse de recibo de que
   la hoja escucho el gesto antes de empezar a moverse.

   El !important es de especificidad, no de pereza: la asita dibujada por CSS se
   declara con un selector largo (`.modal-content-bottom .modal-header:first-of-type
   :not(:has(.drag-indicator))::before`) al que este no le llega. */
.athena-sheet-dragging .drag-indicator,
.athena-sheet-dragging .modal-header::before,
.athena-sheet-dragging .offcanvas-header::before {
    background: rgba(255, 255, 255, 0.75) !important;
}

/* Con el dedo encima no queremos seleccion de texto ni el menu de "copiar". */
.athena-sheet-dragging,
.athena-sheet-dragging * {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
}

/* ============================================================
   Cabecera
   ============================================================ */
.modal-dialog-bottom .modal-header {
    /* El separador sobre fondo oscuro se hace con blanco translucido, no con la
       linea gris del tema (que ademas viene con !important). */
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-bottom-color: rgba(255, 255, 255, 0.08) !important;
    padding: 1rem 1.5rem 0.75rem;
    background: transparent;
}

.modal-dialog-bottom .modal-title {
    color: #ffffff;
    font-weight: 600;
}

/* La cabecera se construye igual que la del "+": asita arriba, titulo a la
   izquierda y cerrar a la derecha, en la misma linea. */
.modal-content-bottom .modal-header {
    align-items: center;
}

/* Asita (grabber). Unas plantillas la ponen en el DOM (<div class="drag-indicator">)
   y otras, escritas a mano, no la ponen: sin ella la cabecera arranca pegada al
   borde superior de la hoja y la X parece flotar FUERA de la tarjeta en vez de
   dentro. Se dibuja desde CSS cuando falta, para que ninguna hoja dependa de que
   la plantilla se acuerde de escribirla. */
.drag-indicator {
    width: 40px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 4px;
}

.modal-content-bottom .modal-header:first-of-type:not(:has(.drag-indicator)) {
    position: relative;
    padding-top: 1.5rem;
}

.modal-content-bottom .modal-header:first-of-type:not(:has(.drag-indicator))::before {
    content: "";
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.4);
}

/* Boton de cerrar.
   El tema (core.css) trae esto para CUALQUIER modal:

       .modal .btn-close { background-color:#fff; border-radius:.5rem;
                           box-shadow:...; transform:translate(23px,-25px); }

   Es su estetica a proposito para modales normales: una pastilla blanca que
   flota FUERA de la esquina. Pero la hoja del "+" es un offcanvas, no un modal,
   asi que a ella no le aplica: alli la X es blanca, plana y dentro de la
   cabecera. De ahi que "no parezcan el mismo componente": distinto color
   (pastilla blanca vs. X blanca) y distinto sitio (fuera vs. dentro).

   Dentro de la hoja se anula esa pastilla y se copia la X del offcanvas. Los
   modales normales de la app conservan el look del tema: esto solo alcanza a
   `.modal-content-bottom`. */
.modal-content-bottom .btn-close,
.modal-content-bottom .modal-header .btn-close {
    /* Fuera la pastilla */
    background-color: transparent;
    box-shadow: none;
    border-radius: var(--athena-radius, 0.375rem);
    /* El desplazamiento es lo que la sacaba de la tarjeta. El tema lo marca
       !important en otras variantes, asi que aqui tambien, o vuelve a escaparse. */
    transform: none !important;
    margin: 0;
    padding: 0.5rem;
    /* Misma X blanca que `btn-close-white` en la hoja del "+" */
    filter: var(--bs-btn-close-white-filter, invert(1) grayscale(100%) brightness(200%));
    opacity: 0.95;
}

.modal-content-bottom .btn-close:hover,
.modal-content-bottom .btn-close:focus,
.modal-content-bottom .btn-close:active {
    background-color: rgba(255, 255, 255, 0.12);
    box-shadow: none;
    transform: none !important;
    opacity: 1;
}

/* ============================================================
   Cuerpo
   ============================================================ */
.modal-dialog-bottom .modal-body {
    padding: 0 1.5rem 1.25rem;
    /* El sitio que deja la cabecera; el propio cuerpo hace scroll. */
    max-height: calc(85vh - 120px);
    overflow-y: auto;
    background: transparent;
    /* En moviles con barra de gestos, el ultimo boton quedaba debajo de ella. */
    padding-bottom: calc(1.5rem + env(safe-area-inset-bottom, 0px));
}

/* ============================================================
   Desktop: la hoja vuelve a ser un modal normal
   ============================================================ */
@media (min-width: 768px) {
    .modal-dialog-bottom {
        position: relative;
        bottom: auto;
        left: auto;
        right: auto;
        margin: 1.75rem auto;
        max-width: 500px;
        height: auto;
        max-height: none;
        transform: none !important;
        transition: none;
    }

    .modal-content-bottom {
        border-radius: var(--athena-radius-lg, 12px);
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        max-height: none;
    }

    .modal-dialog-bottom .modal-header { padding: 1rem 1.5rem; }

    .modal-dialog-bottom .modal-body {
        padding: 1rem 1.5rem 1.5rem;
        max-height: none;
    }

    /* Sin gesto de arrastre en escritorio, no hay asita que mostrar. */
    .drag-indicator { display: none; }

    .modal-content-bottom .modal-header:first-of-type:not(:has(.drag-indicator)) {
        padding-top: 1rem;
    }

    .modal-content-bottom .modal-header:first-of-type:not(:has(.drag-indicator))::before {
        content: none;
    }
}

/* ============================================================
   Convivencia con clases de Bootstrap que ya traen las plantillas
   ============================================================ */

/* Una docena de plantillas combina la hoja con `modal-fullscreen-sm-down`.
   En el telefono esa clase la estira a pantalla completa y deshace la hoja:
   sin esquinas redondeadas, sin altura de hoja y sin el borde superior por el
   que se entiende que es algo que subio desde abajo. Aqui manda la hoja. */
@media (max-width: 575.98px) {
    .modal-fullscreen-sm-down.modal-dialog-bottom {
        height: auto;
        max-height: 85vh;
        margin: 0;
    }

    .modal-fullscreen-sm-down.modal-dialog-bottom .modal-content-bottom {
        height: auto;
        border-radius: 16px 16px 0 0;
    }
}

/* En escritorio la hoja se convierte en modal de 500px; los buscadores piden
   `modal-lg` a proposito (la lista de resultados necesita el ancho). */
@media (min-width: 768px) {
    .modal-dialog-bottom.modal-lg { max-width: 800px; }
}