/* ═══════════════════════════════════════════════════════════════════════════
   ibSheet — EL ASPECTO DE *LA* HOJA de Impulsibox (D-DESIGN-8 §1).
   Su comportamiento vive en `public/core/js/ib-sheet.js`; aquí solo el look.

   MÓVIL (≤768, modo app): sale de abajo, a sangre completa, con velo, asa y
   tope de alto. ESCRITORIO (≥769): diálogo centrado, como ya hace `ibConfirm`.

   ════════════════════════════════════════════════════════════════════
   LA ESCALA DE ALTURAS DE LA CASA (fila A de la tanda 6B, 2026-09-17)
   ════════════════════════════════════════════════════════════════════
   Estaba PENDIENTE desde el 2026-09-04 (DESIGN.md, «Pendiente»): «falta una
   escala única (p. ej. página < shell < modal < hoja de acciones < toast) y que
   `ibConfirm` esté siempre en la capa más alta». Mientras no estuviera escrita,
   quién quedaba encima de quién era una casualidad del orden del DOM —y con
   `ibConfirm` construido sobre esta pieza (misma capa, 1701) una pregunta podía
   salir POR DEBAJO de la hoja que la abrió.

   LA ESCALA, de abajo arriba:

     página ................  auto / 0
     pantalla del shell ....  1390-1470   (`partials/shell/*`)
     HOJA (`ibSheet`) ......  velo 1700 · caja 1701
     PREGUNTA (`ibConfirm`).  velo 1720 · caja 1721   (variante `ask`)
     AVISO (`ibToast`) .....  20000       (`.ib-snack`, dashboard.css)

   LO QUE ESTE ÁRBOL NO TOCA, y hay que decirlo: el picker de medios (10000 /
   10001) y los `Swal` que quedan (20000 `!important`) siguen donde estaban —son
   piezas ajenas a este encargo—, así que el picker sigue saliendo por encima de
   la pregunta y conserva su parche local (`dashboard_layout.twig`,
   `pickerAviso`). Meterlos en la escala es la decisión de sistema que sigue
   pendiente; esta escala es lo que hoy sí se puede afirmar, y el árbol del
   dinero la lleva a `DESIGN.md`.
   ════════════════════════════════════════════════════════════════════

   RSD: flexbox (ni un `grid`), el asa es un ELEMENTO —no un `::before`, que
   además no se podría arrastrar—, ningún estado marcado con borde lateral y
   nada que dependa del `hover`. Paleta `--ib-*`, sin colores nuevos.
   ═══════════════════════════════════════════════════════════════════════════ */

.ib-sheet-backdrop {
    position: fixed; inset: 0; background: rgba(17, 24, 39, 0.45);
    z-index: 1700; opacity: 0; transition: opacity 0.18s;
}
.ib-sheet-backdrop.is-in { opacity: 1; }
/* La PREGUNTA, un escalón por encima de la hoja (la escala de arriba): con
   `ibConfirm` construido sobre esta misma pieza, sin este escalón el orden lo
   decidiría el DOM. */
.ib-sheet-backdrop--ask { z-index: 1720; }

/* Doble clase A PROPÓSITO: el escalón tiene que ganar a `.ib-sheet` sin depender
   de quién se declare antes (su hermana de la caja vive en `ib-confirm.css`,
   que se carga ANTES que este fichero). */
.ib-sheet.ib-sheet--ask { z-index: 1721; }

.ib-sheet {
    position: fixed; z-index: 1701; background: #fff; box-sizing: border-box;
    display: flex; flex-direction: column; min-height: 0;
    /* Fila 0a: llegar al final de la hoja NO arrastra al fondo (scroll chaining). */
    overscroll-behavior: contain;
}

/* Asa: la que se arrastra hacia abajo para cerrar. 44 px de ancho como la de
   `ibConfirm`, pero con área táctil de verdad alrededor (D-DESIGN-2). */
.ib-sheet-handle {
    flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
    height: 26px; cursor: pointer; touch-action: none;
}
.ib-sheet-handle > span {
    display: block; width: 44px; height: 5px; border-radius: 999px;
    background: var(--ib-border, rgba(0, 0, 0, 0.12));
}

.ib-sheet-title {
    flex: 0 0 auto; margin: 0; padding: 2px 16px 10px;
    font-size: 17px; font-weight: 800; color: var(--ib-text, #111827);
}

/* El contenido manda: crece, y si no cabe, se desplaza ÉL (nunca la página). */
.ib-sheet-body {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

.ib-sheet-actions {
    flex: 0 0 auto; display: flex; flex-direction: column; gap: 8px;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
}
.ib-sheet-actions .ib-btn {
    width: 100%; box-sizing: border-box;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.ib-sheet-actions .ib-btn i,
.ib-sheet-actions .ib-btn svg { width: 18px; height: 18px; flex: 0 0 auto; }

@media (max-width: 768px) {
    .ib-sheet {
        left: 0; right: 0; bottom: 0;
        border-radius: 18px 18px 0 0;
        padding-bottom: env(safe-area-inset-bottom, 0px);
        box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.18);
        /* Tope generoso: la hoja de comentarios necesita sitio para leer, y
           el trozo de muro que queda arriba es lo que le dice a la persona que
           NO ha salido de donde estaba (el dictado del owner del 17-09). */
        max-height: 86vh;
        transform: translateY(100%); transition: transform 0.22s;
    }
    .ib-sheet.is-in { transform: translateY(0); }
    /* EL ARRASTRE NATURAL (fila D de la tanda 6B, dictado del owner del
       2026-09-17: «se siente muy estático y no natural lo del action sheet»).
       El gesto vive en `ib-sheet.js` y es UNO para todas las hojas; aquí solo
       están las dos medidas que cada piel resuelve a su manera:
         · mientras el dedo la mueve, la hoja no interpola —sigue al dedo—;
         · al soltar hacia arriba crece hasta el TOPE del 90 % del alto.
       La hoja del post abierto tiene sus dos reglas gemelas en su propia piel
       (`users/_post_modal.twig`), porque ahí el alto se fija con `top`. */
    .ib-sheet.ib-sheet-arrastrando { transition: none; }
    .ib-sheet.ib-sheet-expandida { max-height: 90vh; }
}

@media (min-width: 769px) {
    .ib-sheet {
        left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0.97);
        width: min(560px, 92vw); max-height: 86vh;
        border-radius: 18px; box-shadow: 0 24px 64px rgba(0, 0, 0, 0.25);
        opacity: 0; transition: transform 0.18s, opacity 0.18s;
    }
    .ib-sheet.is-in { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    /* En escritorio el asa no se arrastra: sigue siendo el botón de cerrar y
       el recordatorio visual de que es la misma pieza. */
    .ib-sheet-handle { height: 22px; }
}

/* El fondo no se desplaza mientras la hoja está abierta.
   ESTA REGLA SOLA NO BASTA, y por eso no es la única (fila 0a de la tanda 6A):
   `overflow:hidden` frena la RUEDA y el teclado en escritorio, pero en táctil
   el `touchmove` sigue desplazando el documento y no frena a los contenedores
   con scroll propio que hay detrás. Lo que de verdad cierra la puerta vive en
   `ib-sheet.js` (candado canónico `ibLockScroll` + cancelación del gesto fuera
   de la hoja); esta clase se queda como la capa de escritorio y como el gancho
   que ya usan otras piezas. */
body.ib-sheet-open { overflow: hidden; }