/* ============================================================================
   Anime Studio - panels-float.css
   PANELES SUELTOS: lo que le pasa a un panel del dock cuando deja de estar en
   el dock. Tres estados y un gesto:

     `.panel.is-floating`   ventana flotante DENTRO de la pagina
     `.panel.is-popped`     el hueco que queda cuando el panel se ha ido a una
                            ventana del sistema operativo
     `[data-panel-slot]`    el marcador que guarda el sitio del que salio
     arrastre               `#right-dock.is-dragging`, `.panel-drag-ghost`
                            y `.panel-drop-line`

   Quien pone y quita estas clases: `ui/panelManager.js` (que persiste el
   reparto en localStorage bajo "as.panels.v1") y `ui/panelWindow.js`.

   CONVIVENCIA CON EL RESTO DE HOJAS. No es cosmetica, es orden de carga:

   - Se carga DESPUES de `panels.css` y ANTES de `mobile.css`.

   - `main.css` §11 define `.panel / .panel-head / .panel-body` y el plegado, y
     `panels.css` §1 anade lo propio del dock. Aqui NO se redefine ninguno de
     los tres: solo se transforman los estados nuevos.

   - `panels.css` ancla varias reglas del dock en un ID
     (`#right-dock .panel-head`, `#right-dock > .panel + .panel`,
     `#right-dock > .panel > .panel-body`, y `#right-dock > #panel-layers` con
     DOS ids). Un selector de clases no puede ganarles por muchas clases que
     lleve, asi que cada anulacion de aqui repite el ancla de ID y lo explica en
     su comentario. Sin eso, una ventana flotante conserva la cabecera pegajosa,
     el techo de altura del cuerpo y la linea de separacion del dock.

   - LA POSICION LA PONE EL JS, por cualquiera de los dos caminos: estilo en
     linea (`style.left/top/width/height`) o los canales `--panel-x/y/w/h`. Se
     aceptan los dos a proposito; lo que hay aqui son solo valores por defecto
     para que un panel al que todavia no le han escrito el rect no aparezca en
     0x0. Un estilo en linea gana siempre a esta hoja, que es lo que se quiere.

   - Ningun color literal: todo sale de `tokens.css`. El acento aparece en dos
     sitios y nada mas -la linea de destino del arrastre y el halo del panel que
     se esta moviendo-, porque son justo "lo activo".

   Indice:
     1. Metricas y capa propia
     2. `.panel.is-floating`: ventana flotante dentro de la pagina
     3. Cabecera arrastrable
     4. Tirador de redimension
     5. `.panel.is-popped`: el hueco reservado en el dock
     6. `[data-panel-slot]`: el marcador
     7. Arrastre: dock, fantasma y linea de destino
     8. Convivencia con los estados globales del editor
     9. Puntero grueso, pantallas estrechas, movimiento reducido y colores
        forzados
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. METRICAS Y CAPA PROPIA

   Van en `:root` y no en `#right-dock` porque un panel flotante puede acabar
   colgado fuera del dock (ver §8) y el fantasma del arrastre vive en <body>.
   Mismo criterio que `mobile.css`, que declara ahi sus capas `--z-sheet` y
   compania.
   ------------------------------------------------------------------------ */
:root {
  /* Suelo de una ventana flotante: por debajo de esto la cabecera y el cuerpo
     ya no caben y el panel deja de ser utilizable. */
  --panel-float-min-w: 208px;
  --panel-float-min-h: 116px;

  /* Lado del tirador de redimension de la esquina. */
  --panel-grip: 18px;

  /* Aire que se respeta contra el borde del viewport al reencuadrar. */
  --panel-float-gap: var(--sp-5);

  /* Capa de los paneles sueltos: por encima del dock y del lienzo, por debajo
     del velo de las superposiciones (--z-overlay), de los dialogos y de los
     menus. Se deriva de --z-dock para que siga a `tokens.css` si alli se
     reordena el reparto de capas. */
  --z-panel-float: calc(var(--z-dock) + 110);
}


/* ---------------------------------------------------------------------------
   2. `.panel.is-floating`: VENTANA FLOTANTE DENTRO DE LA PAGINA

   `position: fixed` y no `absolute` por una razon concreta: el dock tiene
   `overflow-y: auto` (editor.css §8) y un hijo absoluto quedaria recortado por
   el. Con `fixed` sale del recorte, y en este armazon funciona porque ningun
   antecesor del dock tiene `transform`, `filter` ni `contain` (comprobado en
   editor.css y mobile.css: el unico `transform` del cromo esta en la barra
   movil, que no es antecesora del dock).
   ------------------------------------------------------------------------ */
.panel.is-floating {
  position: fixed;
  z-index: var(--z-panel-float);

  /* Respaldos: si el rect aun no esta escrito, la ventana sale a la vista y con
     el ancho del dock, en lugar de quedarse en una caja de 0x0 invisible. */
  left: var(--panel-x, 22vw);
  top: var(--panel-y, 96px);
  width: var(--panel-w, var(--dock-w));
  height: var(--panel-h, auto);

  min-width: var(--panel-float-min-w);
  min-height: var(--panel-float-min-h);
  max-width: calc(100vw - var(--panel-float-gap) * 2);
  /* `--vvh` lo declara `mobile.css` (100vh, y 100dvh donde exista) para
     descontar la barra de direcciones movil. El respaldo cubre el caso de que
     esta hoja se use sin ella. */
  max-height: calc(var(--vvh, 100vh) - var(--panel-float-gap) * 2);

  display: flex;
  flex-direction: column;

  /* Superficie elevada: el mismo salto que ya usan dialogos y popovers, que son
     las otras dos superficies que flotan en esta aplicacion. */
  background: var(--s-2);
  /* Filo de un pelo, NO marco: la sombra es la que separa la ventana del fondo.
     La linea existe solo porque en tema claro `--sh-3` es muy suave y sin ella
     la ventana se derrama sobre el lienzo; `--bd` es casi invisible a
     proposito. */
  border: 1px solid var(--bd);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  /* El radio tiene que recortar la cabecera y el cuerpo. */
  overflow: hidden;

  transition: box-shadow var(--t-fast);
  /* Solo opacidad: la posicion puede venir por `transform` desde el JS y una
     animacion que tocara el transform se comeria el arrastre. */
  animation: panel-float-in 120ms var(--ease-out) both;
}

@keyframes panel-float-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* La cabecera es la barra de titulo de la ventana: se separa del cuerpo con una
   linea tenue, igual que `.dialog-head`. Sin ella no se lee donde acaba la zona
   de agarre. */
.panel.is-floating > .panel-head {
  background: var(--s-2);
  border-bottom: 1px solid var(--bd-soft);
}

/* El cuerpo se queda con el hueco de la ventana. `panels.css` le pone un techo
   (`#right-dock > .panel > .panel-body`, con ID: no se le gana con clases) que
   dentro de una ventana flotante dejaria el contenido cortado a media altura y
   con una segunda barra de desplazamiento. */
.panel.is-floating > .panel-body,
#right-dock > .panel.is-floating > .panel-body {
  flex: 1 1 auto;
  min-height: 0;
  max-height: none;
  overflow: auto;
  overscroll-behavior: contain;
}

/* Un panel flotante plegado se queda en su cabecera. El alto del rect viene EN
   LINEA y solo `!important` gana a un estilo en linea: sin esto, plegar deja
   una caja vacia del tamano que tenia abierta, que es justo lo contrario de
   plegar. */
.panel.is-floating[data-collapsed="true"],
.panel.is-floating.is-collapsed {
  height: auto !important;
  min-height: 0;
}

/* Mientras se mueve o se redimensiona, mas elevacion y un halo de acento: dice
   "esto es lo que estas manejando ahora mismo" sin anadir ningun nodo. */
.panel.is-floating.is-dragging,
.panel.is-floating.is-resizing {
  box-shadow: var(--sh-3), var(--accent-glow);
}

/* `panels.css` pinta la linea entre dos paneles contiguos con especificidad de
   ID. Una ventana flotante ya no esta en el flujo del dock, asi que no le toca
   la del dock sino su propio filo: se repite el ancla para que no queden dos
   grosores distintos arriba y a los lados. */
#right-dock > .panel.is-floating {
  border-top: 1px solid var(--bd);
}

/* `panels.css` usa DOS ids en `#right-dock > #panel-layers` (el panel que se
   queda el hueco sobrante del dock, con suelo de 150 px). Ni ese suelo ni ese
   `flex` valen cuando el panel de capas esta flotando o se ha ido a otra
   ventana: el primero impediria encogerlo y el segundo inflaria el hueco. Hacen
   falta dos ids para ganarle. */
#right-dock > #panel-layers.is-floating {
  flex: 0 0 auto;
  min-height: var(--panel-float-min-h);
}

#right-dock > #panel-layers.is-popped {
  flex: 0 0 auto;
  min-height: 0;
}


/* ---------------------------------------------------------------------------
   3. CABECERA ARRASTRABLE

   `cursor: grab` SOLO donde de verdad se puede arrastrar: un cursor de agarre
   sobre algo que no se mueve es una promesa falsa. `panelManager` marca los
   paneles movibles con `data-draggable="true"`; uno ya flotante lo es siempre.

   Se le pone TAMBIEN al `.panel-toggle`, y no solo a la cabecera, porque el
   boton de plegar ocupa casi toda la barra (`flex: 1 1 auto` en main.css §11) y
   trae su propio `cursor: pointer` de la regla global de `button`: sin esta
   linea el agarre solo se veria en la franja de los botones de accion. Esos
   botones conservan su `pointer` por el mismo motivo, y eso es lo que se busca:
   hacen otra cosa.
   ------------------------------------------------------------------------ */
.panel[data-draggable="true"] > .panel-head,
.panel[data-draggable="true"] > .panel-head > .panel-toggle,
.panel.is-floating > .panel-head,
.panel.is-floating > .panel-head > .panel-toggle {
  cursor: grab;
  /* El gesto es nuestro: sin esto, arrastrar con el dedo desplaza el dock. */
  touch-action: none;
}

.panel.is-dragging > .panel-head,
.panel.is-dragging > .panel-head > .panel-toggle,
#right-dock.is-dragging .panel[data-draggable="true"] > .panel-head,
#right-dock.is-dragging .panel[data-draggable="true"] > .panel-head > .panel-toggle {
  cursor: grabbing;
}

/* La cabecera del dock es pegajosa (`#right-dock .panel-head`, con ID). Dentro
   de una ventana flotante no hay nada que desplazar, y su `z-index: 2` solo
   complica el apilado del tirador de la esquina. Se devuelve a `relative` para
   que siga siendo origen de posicionamiento de lo que cuelgue de ella. */
.panel.is-floating > .panel-head,
#right-dock > .panel.is-floating > .panel-head {
  position: relative;
  z-index: auto;
}


/* ---------------------------------------------------------------------------
   4. TIRADOR DE REDIMENSION (esquina inferior derecha)

   Dos piezas a proposito:

   - El DIBUJO va en `::after` y es inerte (`pointer-events: none`): la esquina
     se ve agarrable siempre, tambien si `panelManager` resuelve el
     redimensionado midiendo el puntero contra la esquina en vez de con un nodo
     propio.
   - La ZONA DE AGARRE es el nodo OPCIONAL (`.panel-resize` o
     `[data-panel-resize]`): transparente y por encima del dibujo. Asi las dos
     implementaciones posibles se ven exactamente igual y nunca se pintan dos
     tiradores superpuestos.

   `--s-hi` es literalmente el token de los tiradores de redimension
   (tokens.css), asi que el dibujo no inventa ningun color.

   No se usa el `resize: both` del navegador a proposito: escribe
   `width`/`height` EN LINEA por su cuenta, sin avisar a nadie, y
   `panelManager` nunca se enteraria del nuevo tamano, asi que no se guardaria.
   ------------------------------------------------------------------------ */
.panel.is-floating::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: var(--panel-grip);
  height: var(--panel-grip);
  /* Rayas diagonales. Sintaxis conservadora de paradas de color (sin posiciones
     dobles) para que se pinte igual en todos los navegadores del objetivo. */
  background-image: repeating-linear-gradient(
    -45deg,
    var(--s-hi),
    var(--s-hi) 1.5px,
    transparent 1.5px,
    transparent 4px
  );
  /* Triangulo de la esquina. Donde no haya `clip-path` queda un cuadradito de
     rayas en el mismo sitio: sigue leyendose como tirador. */
  clip-path: polygon(100% 0, 100% 100%, 0 100%);
  opacity: var(--op-muted);
  pointer-events: none;
}

.panel.is-floating > .panel-resize,
.panel.is-floating > [data-panel-resize] {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  /* Un poco mas grande que el dibujo: se agarra antes de tocar el pixel exacto. */
  width: calc(var(--panel-grip) + var(--sp-3));
  height: calc(var(--panel-grip) + var(--sp-3));
  padding: 0;
  background: none;
  border: 0;
  /* Todo lo visible lo pone `::after`; este nodo solo aporta cursor y area. */
  color: transparent;
  font-size: 0;
  cursor: nwse-resize;
  touch-action: none;
}

/* Si el tirador es un boton, tambien se llega por teclado: el foco tiene que
   verse. `outline-offset` negativo porque el nodo esta pegado al radio. */
.panel.is-floating > .panel-resize:focus-visible,
.panel.is-floating > [data-panel-resize]:focus-visible {
  outline: var(--focus-w) solid var(--accent-ring);
  outline-offset: -2px;
  border-radius: var(--r-sm);
}

/* Plegado no hay nada que redimensionar. */
.panel.is-floating[data-collapsed="true"]::after,
.panel.is-floating.is-collapsed::after,
.panel.is-floating[data-collapsed="true"] > .panel-resize,
.panel.is-floating.is-collapsed > .panel-resize,
.panel.is-floating[data-collapsed="true"] > [data-panel-resize],
.panel.is-floating.is-collapsed > [data-panel-resize] {
  display: none;
}


/* ---------------------------------------------------------------------------
   5. `.panel.is-popped`: EL HUECO RESERVADO EN EL DOCK

   El panel esta en otra ventana del sistema; en el dock queda su sitio. Tiene
   que leerse como "aqui falta algo a proposito, y asi lo traes de vuelta", no
   como un panel vacio que se ha roto. De ahi dos decisiones:

   - El fondo se HUNDE (`--s-0`, mas al fondo que el propio panel): un hueco no
     se eleva.
   - El filo es DISCONTINUO. Es la unica excepcion razonable a "jerarquia por
     superficie y no por borde": un espacio reservado no tiene contenido que
     ensenar, y es el mismo recurso que `panels.css` ya usa para una paleta de
     color vacia.
   ------------------------------------------------------------------------ */
.panel.is-popped {
  flex: 0 0 auto;
  min-height: 0;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  margin: var(--sp-4);
  padding: var(--sp-5) var(--sp-4);
  background: var(--s-0);
  border: 1px dashed var(--bd-strong);
  border-radius: var(--r-md);
  color: var(--fg-mute);
  text-align: center;
}

/* `panels.css` pinta la linea entre paneles contiguos con especificidad de ID
   (`#right-dock > .panel + .panel`): sin repetir el ancla, sobre el filo
   discontinuo del hueco reaparece media linea solida por arriba. */
#right-dock > .panel.is-popped {
  border: 1px dashed var(--bd-strong);
}

/* Si el hueco conserva la cabecera del panel, deja de ser interactiva: no hay
   nada que plegar. El galon de plegar se va; los botones de `.panel-actions` se
   respetan, que es donde `panelManager` puede colocar el de traer de vuelta. */
.panel.is-popped > .panel-head,
#right-dock > .panel.is-popped > .panel-head {
  position: static;
  height: auto;
  padding: 0;
  cursor: default;
}

.panel.is-popped > .panel-head > .panel-toggle {
  cursor: default;
  pointer-events: none;
}

.panel.is-popped > .panel-head .panel-chevron {
  display: none;
}

/* El cuerpo del hueco no desplaza ni reserva altura: el relleno ya lo pone el
   propio hueco. Anclado en ID porque `panels.css` da techo y desplazamiento a
   todo `.panel-body` del dock. */
.panel.is-popped > .panel-body,
#right-dock > .panel.is-popped > .panel-body {
  flex: 0 0 auto;
  max-height: none;
  padding: 0;
  overflow: visible;
}

/* --- Contenido del hueco --------------------------------------------------
   Ganchos para `panelManager`. Tambien vale montar dentro el `.empty-state` de
   `main.css` §17: justo debajo se aprieta para el ancho del dock.
   ------------------------------------------------------------------------ */
.panel-popped {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-3);
  min-width: 0;
}

.panel-popped-icon {
  width: 24px;
  height: 24px;
  color: var(--s-hi);
  stroke-width: 1.2;
}

/* El nombre del panel, con el mismo rotulo en versalitas que `.panel-toggle`:
   el hueco se sigue reconociendo como "este era el panel de color". */
.panel-popped-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-dim);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.panel-popped-hint {
  max-width: 26ch;
  color: var(--fg-mute);
  font-size: var(--fs-xs);
  line-height: var(--lh-normal);
}

/* El boton de traer de vuelta es el unico elemento activo del hueco: se deja
   tal cual lo estila `main.css` y solo se le impide estirarse a lo ancho. */
.panel.is-popped .btn {
  flex: 0 0 auto;
}

/* `.empty-state` viene calibrado para el centro de una pagina (relleno de
   --sp-8, ancho de 440 px): en una columna de 280 px hay que apretarlo. */
.panel.is-popped .empty-state {
  gap: var(--sp-3);
  max-width: none;
  padding: 0;
}

.panel.is-popped .empty-state .empty-icon {
  width: 24px;
  height: 24px;
}

.panel.is-popped .empty-state .empty-title {
  font-size: var(--fs-md);
}

.panel.is-popped .empty-state .empty-text {
  max-width: 26ch;
  font-size: var(--fs-xs);
}


/* ---------------------------------------------------------------------------
   6. `[data-panel-slot]`: EL MARCADOR

   `panelManager` deja este nodo en el sitio EXACTO del que sale el panel para
   poder devolverlo con un `insertBefore`. Es un marcador, no una caja.

   `display: contents` hace justo eso: el elemento no genera ninguna caja
   propia, asi que no deja hueco, no rompe el reparto flex del dock y no pinta
   nada; y si el manager mete dentro el hueco de un panel sacado
   (`.panel.is-popped`), ese hueco pasa a ser hijo directo del flex del dock y
   se coloca solo, sin caja intermedia que lo descoloque.
   ------------------------------------------------------------------------ */
[data-panel-slot] {
  display: contents;
}

/* Respaldo real donde no haya `display: contents`: una caja sin acabado ninguno
   que sigue conservando el sitio, y nada en absoluto mientras este vacia. El
   nodo permanece en el DOM en los dos casos, que es lo que el `insertBefore`
   necesita. */
@supports not (display: contents) {
  [data-panel-slot] {
    display: block;
    min-width: 0;
    margin: 0;
    padding: 0;
    background: none;
    border: 0;
  }

  [data-panel-slot]:empty {
    display: none;
  }
}


/* ---------------------------------------------------------------------------
   7. ARRASTRE: DOCK, FANTASMA Y LINEA DE DESTINO
   ------------------------------------------------------------------------ */

#right-dock.is-dragging {
  /* Origen de posicionamiento para `.panel-drop-line`, que se coloca entre
     panel y panel. Pasar de `static` a `relative` no mueve absolutamente nada
     (no hay desplazamientos que resolver): solo da a la linea contra que
     medirse, y ademas la hace acompanar al desplazamiento del dock. Las
     cabeceras pegajosas y los menus `position: fixed` de los paneles no se
     enteran. */
  position: relative;
  cursor: grabbing;
  scroll-behavior: auto;          /* sin desplazamiento suave a media maniobra */
}

/* Mientras se reparte no debe poder seleccionarse texto ni salir el menu de
   pulsacion larga: los dos gestos compiten con el nuestro. */
#right-dock.is-dragging,
#right-dock.is-dragging * {
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

/* El panel que se esta moviendo se queda como referencia atenuada, igual que
   una fila de capas arrastrada (`.lp-row.is-dragged`). Se aceptan los dos
   nombres como contrato abierto: `panelManager` puede marcarlo de cualquiera de
   las dos formas y se vera igual. */
#right-dock.is-dragging > .panel.is-dragging,
#right-dock.is-dragging > .panel.is-dragged {
  opacity: var(--op-muted);
}

/* --- Fantasma que sigue al puntero ---------------------------------------
   Mismo lenguaje que `.lp-ghost` (panels.css): lo que se arrastra en este
   editor se ve siempre igual, sea una capa o un panel entero.
   ------------------------------------------------------------------------ */
.panel-drag-ghost {
  position: fixed;
  z-index: var(--z-overlay);
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  max-width: 240px;
  padding: var(--sp-2) var(--sp-4);
  background: var(--s-2);
  color: var(--fg);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-md);
  box-shadow: var(--sh-2);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  opacity: 0.92;
  pointer-events: none;           /* nunca puede ser el destino de su propio gesto */
  /* Se mueve en cada `pointermove`. Desplazarlo por `transform` no obliga a
     recalcular el layout del documento en cada paso (§46); si el manager
     prefiere `left/top` en linea, esto se queda en un translate de cero y no
     estorba. */
  transform: translate(var(--drag-dx, 0px), var(--drag-dy, 0px));
  will-change: transform;
}

.panel-drag-ghost .icon {
  flex: 0 0 auto;
  color: var(--fg-mute);
}

/* --- Linea de destino ----------------------------------------------------
   Va visible por defecto: la linea solo existe durante el arrastre, y hacerla
   depender de una clase de encendido significaria no ver nada si el manager no
   la pone. Para quien prefiera crearla una sola vez y esconderla, se respetan
   `[hidden]` y `.is-off`.
   ------------------------------------------------------------------------ */
.panel-drop-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  /* Por encima de la cabecera pegajosa del dock, que se apila en z-index: 2. */
  z-index: 3;
  border-top: 2px solid var(--accent);
  pointer-events: none;
}

/* La bolita del extremo repite el lenguaje de `.lp-dropline` y de
   `.drop-before/.drop-after`: soltar un panel y soltar una capa se ven igual. */
.panel-drop-line::before {
  content: "";
  position: absolute;
  top: -4px;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: var(--r-full);
}

.panel-drop-line[hidden],
.panel-drop-line.is-off {
  display: none;
}


/* ---------------------------------------------------------------------------
   8. CONVIVENCIA CON LOS ESTADOS GLOBALES DEL EDITOR

   `editor.css` §2 apaga todo el cromo con `#app.ui-hidden` y lo vuelve inerte
   con `#app.is-drawing`, pero sus selectores NOMBRAN el dock. Un panel flotante
   que `panelManager` haya colgado fuera del dock se les escapa: se quedaria
   encima del lienzo al ocultar la interfaz, y respondiendo al puntero en medio
   de un trazo. Aqui recibe el mismo trato.
   ------------------------------------------------------------------------ */
#app.ui-hidden .panel.is-floating {
  display: none;
}

/* Igual que el resto del cromo: se sigue viendo, deja de responder. */
#app.is-drawing .panel.is-floating {
  pointer-events: none;
}


/* ---------------------------------------------------------------------------
   9. PUNTERO GRUESO, PANTALLAS ESTRECHAS, MOVIMIENTO REDUCIDO Y COLORES
      FORZADOS
   ------------------------------------------------------------------------ */

@media (pointer: coarse) {
  :root {
    /* Con el dedo, una esquina de 18 px no se agarra; y la cabecera crece a
       38 px (main.css), asi que el suelo de la ventana sube con ella. */
    --panel-grip: 26px;
    --panel-float-min-w: 240px;
    --panel-float-min-h: 148px;
  }
}

/* Pantallas estrechas. El rect guardado viene de una pantalla grande y llega EN
   LINEA: dejar media ventana fuera de un telefono no es una ventana, es un
   fallo. Se reencuadra a una hoja anclada abajo, que es el gesto que el editor
   ya usa en movil (`.sheet`). `!important` es imprescindible: es la unica forma
   de ganar a un estilo en linea. */
@media (max-width: 620px) {
  .panel.is-floating {
    left: var(--panel-float-gap) !important;
    right: var(--panel-float-gap) !important;
    top: auto !important;
    bottom: calc(var(--panel-float-gap) + env(safe-area-inset-bottom, 0px)) !important;
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: calc(var(--vvh, 100vh) * 0.6);
  }

  /* Un tirador de esquina no significa nada en una hoja anclada a los lados. */
  .panel.is-floating::after,
  .panel.is-floating > .panel-resize,
  .panel.is-floating > [data-panel-resize] {
    display: none;
  }

  /* El fantasma tampoco tiene sentido tan ancho en 360 px. */
  .panel-drag-ghost {
    max-width: calc(100vw - var(--sp-6) * 2);
  }
}

@media (prefers-reduced-motion: reduce) {
  .panel.is-floating {
    animation: none;
    transition: none;
  }
}

@media (forced-colors: active) {
  .panel.is-floating,
  .panel-drag-ghost {
    border: 1px solid ButtonBorder;
  }

  .panel.is-popped,
  #right-dock > .panel.is-popped {
    border: 1px dashed ButtonBorder;
  }

  /* Con colores forzados el acento desaparece: sin esto, el destino del
     arrastre se queda sin respuesta visible. */
  .panel-drop-line {
    border-top-color: Highlight;
  }

  .panel-drop-line::before {
    background: Highlight;
  }

  /* Un fondo decorativo tambien se sustituye, asi que el tirador hay que
     pintarlo a mano con color de sistema. */
  .panel.is-floating::after {
    forced-color-adjust: none;
    background-image: repeating-linear-gradient(
      -45deg,
      ButtonBorder,
      ButtonBorder 1.5px,
      transparent 1.5px,
      transparent 4px
    );
    opacity: 1;
  }
}