/* LAS HOJAS: cómo se abre un diálogo en un móvil.
 *
 * En un ordenador, un <dialog> centrado con su sombra está bien: hay sitio de
 * sobra alrededor y el ratón llega a la X sin esfuerzo. En un móvil no. Ahí una
 * ventana flotante en mitad de la pantalla deja franjas de fondo por los cuatro
 * lados, la X cae arriba —lejos del pulgar— y no hay forma de quitarla de en
 * medio que no sea apuntar a un botón pequeño.
 *
 * Así que en pantallas estrechas TODOS los diálogos de la casa se abren pegados
 * abajo, ocupando el ancho entero y dejando ver un trozo de lo que hay debajo,
 * con un asa arriba de la que se tira para cerrarlos. Es lo que hace el sistema
 * en un teléfono y lo que la mano ya sabe hacer sin que nadie se lo explique.
 *
 * VALE PARA TODOS SIN TOCAR NINGUNO. No hay que ir app por app: esta hoja la
 * carga el sitio entero y se aplica a cualquier <dialog>, incluidos los que se
 * escriban mañana. Quien no lo quiera lo dice con data-hoja="no" —el visor de
 * fotos de la tienda, que es una foto a pantalla completa y no un formulario—.
 *
 * TODO EN rem, como los ajustes: el tamaño del texto se cambia desde el panel y
 * las hojas tienen que crecer con él.
 */

/* Hasta dónde es "un móvil". El mismo número que usan las apps para pasar a una
   columna: por debajo de eso ya no hay sitio para nada flotante. */
@media (max-width: 40rem) {
  dialog:modal:not([data-hoja="no"]) {
    /* Un <dialog> modal viene con inset:0 y margin:auto, que es lo que lo
       centra. Dejando el margen de abajo en cero se va al suelo y se queda
       pegado ahí, sin position ni cálculos. */
    margin: auto auto 0;
    width: 100%;
    max-width: 100%;
    /* Que sobre un trozo arriba. No es adorno: es lo que dice de un vistazo que
       esto está ENCIMA de la página y que la página sigue ahí detrás. Sin ese
       trozo parece otra pantalla, y entonces cerrar deja de ser obvio. */
    max-height: 88dvh;
    border: none;
    border-radius: 1.25rem 1.25rem 0 0;
    /* El asa se queda arriba mientras el contenido sube: el diálogo es el que
       lleva la barra de desplazamiento, así que sin sticky el asa se iría. */
    overflow-y: auto;
    overscroll-behavior: contain;
    box-shadow: 0 -0.5rem 2.5rem rgba(0, 0, 0, .45);
    /* Y SIN RELLENO ARRIBA. El asa se pega con sticky al borde del área de
       relleno, no al de la caja, así que con el relleno de arriba puesto queda
       una franja por ENCIMA del asa por la que se ve pasar el texto que sube:
       en el merchandising se leía "A la venta" cortado por la mitad, encima de
       la rayita. El hueco de arriba lo pone ya el propio asa, que mide 1,75rem
       y va antes que todo lo demás. */
    padding-top: 0;
  }

  /* El hueco de la barra del sistema, por debajo del último botón. Como un
     trozo de contenido y NO como padding: el padding de una hoja lo pone cada
     app, y pisárselo desde aquí le quitaría el suyo —la caja se quedaría sin
     sus 16 px de aire abajo— sin que nadie hubiera pedido eso. */
  dialog:modal:not([data-hoja="no"])::after {
    content: '';
    display: block;
    height: env(safe-area-inset-bottom, 0px);
  }

  /* Los VELOS: un <div> a pantalla completa con la caja del modal dentro, que
     es como se hacían los modales antes de que <dialog> se pudiera usar sin
     miedo. Quedan dos así, los de los disfraces y los de las clasificatorias.
     Se marcan con data-velo en su app y desde aquí se tratan igual. */
  [data-velo] {
    /* La caja, al suelo. Estos velos centran con flex, así que basta con decir
       por dónde se alinea; nada de posiciones ni de cálculos. */
    align-items: flex-end !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  [data-velo] > .modal {
    width: 100%;
    max-width: 100%;
    max-height: 88dvh;
    border-radius: 1.25rem 1.25rem 0 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* Lo mismo que en los <dialog>: sin relleno arriba, o el texto sube por
       encima del asa. */
    padding-top: 0;
    animation: hoja-sube 260ms cubic-bezier(.22, 1, .28, 1);
  }
  [data-velo] > .modal::after {
    content: '';
    display: block;
    height: env(safe-area-inset-bottom, 0px);
  }

  /* Mientras se arrastra manda el dedo, no la transición. */
  dialog.hoja-cogida,
  .modal.hoja-cogida { transition: none !important; }
  .modal.hoja-vuelve { transition: transform 320ms cubic-bezier(.22, 1, .28, 1); }

  /* Entrar subiendo desde abajo, que es de donde viene. La animación de cada
     app —un scale, un fundido— dice lo contrario en una hoja, así que aquí se
     sustituye entera. */
  dialog:modal:not([data-hoja="no"])[open] {
    animation: hoja-sube 260ms cubic-bezier(.22, 1, .28, 1);
  }
  @keyframes hoja-sube {
    from { transform: translateY(100%); }
    to   { transform: none; }
  }

  /* El asa. Es una línea, y está donde se pone el pulgar cuando uno va a
     quitarse algo de en medio. */
  .hoja-asa {
    position: sticky;
    top: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Alto de sobra para el dedo: la línea se ve de 0.25rem, pero se coge un
       área de 1.75rem. Una diana del tamaño de lo que se dibuja no se acierta. */
    height: 1.75rem;
    margin: 0;
    /* Hereda el fondo de la hoja para tapar lo que pasa por debajo al subir. */
    background: inherit;
    cursor: grab;
    /* Sin esto, arrastrar hacia abajo desplaza la página en vez de la hoja. */
    touch-action: none;
    -webkit-user-select: none;
    user-select: none;
  }
  .hoja-asa::before {
    content: '';
    width: 2.25rem;
    height: .25rem;
    border-radius: 999px;
    /* Del color de la letra pero muy apagado: tiene que verse sobre un fondo
       claro y sobre uno oscuro sin saber en cuál está. */
    background: currentColor;
    opacity: .28;
    transition: opacity 160ms ease, width 160ms ease;
  }
  .hoja-asa:active::before,
  dialog.hoja-cogida .hoja-asa::before { opacity: .5; width: 2.75rem; }
  .hoja-asa:active { cursor: grabbing; }

  /* Al soltar sin llegar al punto de cierre, vuelve a su sitio con un rebote
     corto. Lo pone y lo quita hoja.js. */
  dialog.hoja-vuelve { transition: transform 320ms cubic-bezier(.22, 1, .28, 1); }
}

/* En un ordenador no hay asa que valga: se cierra con la X o con Escape, y una
   línea de arrastre ahí no la usaría nadie. Se esconde y no se quita del DOM
   para no tener que volver a ponerla al girar el teléfono. */
@media (min-width: 40.0625rem) {
  .hoja-asa { display: none; }
}

/* Con "poco movimiento" puesto, ni subir ni volver: aparece y ya. Arrastrar
   sigue funcionando —eso lo mueve el dedo, no una animación—. */
html[data-movimiento="poco"] dialog:modal:not([data-hoja="no"])[open] {
  animation: none;
}