/* ============================================================================
   Anime Studio - panels.css
   PANELES del dock derecho (`#right-dock`) y todo lo que se despliega desde
   ellos: capas, color, pincel, navegador, popovers, hojas inferiores y el
   menu contextual.

   Convivencia con el resto del sistema (importante, no es cosmetica):
   - `main.css` §11 ya define `.panel / .panel-head / .panel-body` y el plegado.
     Aqui SOLO se anade lo que falta para el dock: cabecera pegajosa, panel que
     crece y separacion entre paneles.
   - `ui/layersPanel.js` INYECTA su propia hoja (`#layers-panel-styles`) en
     <head> al montarse. Al inyectarse despues de este fichero, sus reglas ganan
     a igualdad de especificidad. Por eso el bloque de capas de aqui no repite
     lo que ya hace ese modulo: solo anade lo que le falta (linea de jerarquia,
     multiseleccion e indicadores de arrastre genericos) y, cuando necesita
     imponerse, se ancla en `#panel-layers-body` para subir la especificidad.
   - `ui/colorPanel.js` y `ui/optionsBar.js` maquetan mucho con estilos EN
     LINEA, que ganan a cualquier regla de esta hoja. Lo de aqui cubre lo que
     esos modulos dejan a la hoja: color, tipografia, estados y las cajas con
     clase propia.
   - Ningun color literal: todo sale de `tokens.css`.

   Indice:
     1. Dock y paneles (cabecera pegajosa, panel que crece)
     2. Panel de CAPAS
     3. Panel de COLOR
     4. Panel de PINCEL (y rejilla de preajustes, compartida con el popover)
     5. Panel NAVEGADOR
     6. Popover
     7. Hoja inferior (`.sheet`)
     8. Menu contextual y menus flotantes de panel
     9. Puntero grueso, movimiento reducido y colores forzados
   ========================================================================== */


/* ---------------------------------------------------------------------------
   1. DOCK Y PANELES
   ------------------------------------------------------------------------ */

/* Variables locales de los paneles. Se declaran en el dock para que un panel
   sacado a un popover o a una hoja movil siga teniendo valores validos. */
#right-dock,
.popover,
.sheet {
  --panel-pad: var(--sp-5);
  --row-h: 26px;              /* alto de una fila compacta de lista */
  --checker-size: 8px;        /* lado de la casilla del damero de alfa */
}

/* La cabecera se queda pegada arriba mientras el dock se desplaza: con cuatro
   paneles abiertos, sin esto se pierde de vista a que panel pertenece lo que
   se esta mirando. */
#right-dock .panel-head {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Separacion real entre paneles: una linea no basta cuando los dos paneles
   contiguos tienen el mismo fondo. */
#right-dock > .panel + .panel {
  border-top: 1px solid var(--bd);
}

/* `#panel-layers` lleva esta clase en `editor.php`: es el panel que se queda
   con el espacio sobrante del dock. El `min-height` impide que quede reducido
   a dos filas cuando los demas paneles estan todos abiertos. */
.panel-grow {
  flex: 1 1 auto;
  min-height: 200px;
}

.panel[data-collapsed="true"].panel-grow,
.panel.is-collapsed.panel-grow {
  min-height: 0;
}

/* Cuerpo que aloja una lista con desplazamiento propio: el cuerpo NO desplaza
   (lo hace la lista) o saldrian dos barras superpuestas. */
#panel-layers-body {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* Cuerpos con controles: separacion vertical homogenea. */
#panel-color-body,
#panel-brush-body,
#panel-navigator-body {
  padding: var(--panel-pad);
}

/* Separador interior reutilizable dentro de un panel. */
.panel-sep {
  height: 1px;
  margin: var(--sp-4) calc(var(--panel-pad) * -1);
  background: var(--bd-soft);
}

/* Subtitulo de grupo dentro de un panel. */
.panel-group-title {
  margin-bottom: var(--sp-3);
  color: var(--fg-dim);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}


/* ---------------------------------------------------------------------------
   2. PANEL DE CAPAS

   `ui/layersPanel.js` trae su propia hoja con las filas, las miniaturas, los
   conmutadores y la linea de soltar. Lo que sigue la COMPLETA.
   ------------------------------------------------------------------------ */

/* Cabecera del panel: modo de fusion + opacidad. El modulo la coloca; aqui se
   fija al alto del cuerpo para que no se vaya con el desplazamiento de la
   lista, que es lo que se espera de una cabecera de capas. */
#panel-layers-body .lp {
  flex: 1 1 auto;
  min-height: 0;
}

#panel-layers-body .lp-head {
  position: sticky;
  top: 0;
  z-index: 1;
  background: var(--s-1);
}

/* --- Linea de jerarquia ---------------------------------------------------
   `.lp-indent` es un hueco cuyo ancho fija el modulo (profundidad x sangria).
   Pintarle una guia vertical en su canto derecho convierte ese hueco en una
   linea de arbol legible sin anadir ni un nodo al DOM (§46.6: los nodos de la
   lista se reutilizan, no se recrean).

   Se usa un degradado y no `border-right` a proposito: en las capas de raiz el
   ancho del hueco es 0 y un borde SI se pintaria, dejando una raya suelta
   pegada al canto de la fila. Un degradado sobre una caja de ancho 0 no pinta
   nada, que es justo lo que se quiere.
   ------------------------------------------------------------------------ */
#panel-layers-body .lp-indent {
  align-self: stretch;
  height: auto;
  background-image: linear-gradient(
    to right,
    transparent calc(100% - 1px),
    var(--bd-soft) calc(100% - 1px)
  );
}

/* --- Seleccion multiple ---------------------------------------------------
   La fila ACTIVA ya se marca con una banda de acento a la izquierda. Las demas
   filas seleccionadas necesitan una marca propia, o no se distingue una
   seleccion de tres capas de un simple hover.
   ------------------------------------------------------------------------ */
#panel-layers-body .lp-row[aria-selected="true"]:not(.is-active) {
  box-shadow: inset 2px 0 0 var(--accent-ring);
}

#panel-layers-body .lp-row[aria-selected="true"] .lp-name {
  color: var(--fg);
  font-weight: var(--fw-medium);
}

/* Capa bloqueada: el candado ya se tine de aviso; el nombre se marca en
   cursiva para que se lea tambien en escala de grises. */
#panel-layers-body .lp-row.is-locked .lp-name {
  font-style: italic;
}

/* --- Indicadores de arrastre ---------------------------------------------
   `layersPanel.js` usa `.lp-dropline.is-on` (linea flotante) y
   `.is-drop-inside` (marco sobre el grupo de destino). Las clases genericas
   `.drop-before` / `.drop-after` / `.drop-inside` se aceptan ademas como
   contrato abierto: cualquier lista arrastrable del editor puede usarlas y se
   vera igual sin volver a escribir CSS.
   ------------------------------------------------------------------------ */
.drop-before,
.drop-after,
.drop-inside {
  position: relative;
}

.drop-before::after,
.drop-after::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  height: 0;
  border-top: 2px solid var(--accent);
  pointer-events: none;
  z-index: 3;
}

.drop-before::after { top: -1px; }
.drop-after::after  { bottom: -1px; }

/* La bolita del extremo repite el lenguaje de `.lp-dropline`. */
.drop-before::before,
.drop-after::before {
  content: "";
  position: absolute;
  left: 0;
  width: 6px;
  height: 6px;
  background: var(--accent);
  border-radius: var(--r-full);
  pointer-events: none;
  z-index: 3;
}

.drop-before::before { top: -4px; }
.drop-after::before  { bottom: -4px; }

/* Soltar DENTRO de un grupo: marco completo, no linea. */
.drop-inside {
  border-radius: var(--r-sm);
  box-shadow: inset 0 0 0 2px var(--accent);
}

/* Mientras hay un arrastre en curso no debe salir ningun tooltip ni seleccion
   de texto que compita con el gesto. */
#panel-layers-body .lp-list.is-dragging * {
  user-select: none;
  -webkit-user-select: none;
}


/* ---------------------------------------------------------------------------
   3. PANEL DE COLOR

   `ui/colorPanel.js` pone en linea casi toda la geometria. Aqui van el damero
   del alfa, los estados de las pistas y de la rueda, y las rejillas de
   muestras.
   ------------------------------------------------------------------------ */

/* --- CORRECCION NECESARIA -------------------------------------------------
   El modulo oculta las pestanas con `pane.hidden = true`, pero les pone
   `display:flex` EN LINEA. Un estilo en linea gana a la regla `[hidden]` de la
   hoja del navegador, asi que sin esto los paneles RGB/HSV/HSL/paletas se
   verian todos a la vez. El `!important` es imprescindible: es la unica forma
   de que una hoja externa gane a un `display` en linea.
   ------------------------------------------------------------------------ */
.cp-pane[hidden] {
  display: none !important;
}

.cp {
  min-width: 0;
}

/* Cuadros primario y secundario: el foco tiene que verse por encima del otro. */
#color-primary:focus-visible,
#color-secondary:focus-visible {
  outline: var(--focus-w) solid var(--accent-ring);
  outline-offset: 2px;
  z-index: 2;
}

#color-hex {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}

/* Rueda de color: el canvas ya trae cursor y touch-action en linea. */
#color-wheel-canvas {
  max-width: 100%;
  border-radius: var(--r-full);
}

#color-wheel-canvas:focus-visible {
  outline: var(--focus-w) solid var(--accent-ring);
}

/* --- Fila de deslizador de canal ---------------------------------------- */
.cp-slider-row {
  min-height: var(--ctrl-h-sm-cur);
}

.cp-abbr {
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  cursor: default;
}

/* La pista es un <canvas> que el modulo repinta con el degradado del canal.
   La hoja solo aporta el marco y el estado. */
.cp-track {
  border: 1px solid var(--bd);
}

.cp-track:hover {
  border-color: var(--bd-strong);
}

.cp-track:focus-visible {
  outline: var(--focus-w) solid var(--accent-ring);
}

/* --- Damero de transparencia --------------------------------------------
   Cualquier superficie que muestre alfa (cuadros primario y secundario, pista
   del alfa, muestras con transparencia) se pinta sobre un damero.

   RESPALDO: cuatro degradados lineales, la tecnica que funciona en todos los
   navegadores del objetivo. `main.css` ya la usa en `.checker`; aqui se repite
   para `.checker-alpha` y se ajusta la casilla al tamano del panel.

   MEJORA: donde exista `repeating-conic-gradient` (Chrome 99+, Safari 15+,
   Firefox 83+) basta UN degradado, asi que hay menos capas que componer en
   cada repintado del panel de color, que se repinta mucho.

   La prueba del `@supports` usa `black`/`white` a proposito: con `var()` dentro
   la consulta dara SIEMPRE positiva (una declaracion con `var()` se considera
   valida hasta el calculo del valor) y el respaldo no llegaria a usarse nunca.
   ------------------------------------------------------------------------ */
.checker-alpha,
#right-dock .checker,
.popover .checker,
.sheet .checker {
  background-color: var(--checker-b);
  background-image:
    linear-gradient(45deg, var(--checker-a) 25%, transparent 25%),
    linear-gradient(-45deg, var(--checker-a) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--checker-a) 75%),
    linear-gradient(-45deg, transparent 75%, var(--checker-a) 75%);
  background-size: calc(var(--checker-size, 8px) * 2) calc(var(--checker-size, 8px) * 2);
  background-position:
    0 0,
    0 var(--checker-size, 8px),
    var(--checker-size, 8px) calc(var(--checker-size, 8px) * -1),
    calc(var(--checker-size, 8px) * -1) 0;
}

@supports (background-image: repeating-conic-gradient(black 0% 25%, white 0% 50%)) {
  .checker-alpha,
  #right-dock .checker,
  .popover .checker,
  .sheet .checker {
    background-image: repeating-conic-gradient(
      var(--checker-a) 0% 25%,
      var(--checker-b) 0% 50%
    );
    background-position: 0 0;
  }
}

/* --- Rejillas de muestras (paletas y recientes) -------------------------- */
#color-palette-grid,
#color-recents-grid {
  align-content: flex-start;
}

/* El tamano de la muestra lo fija el modulo segun el tipo de puntero (22px con
   raton, 44px con el dedo). Aqui solo van el acabado y los estados. */
#color-palette-grid .swatch,
#color-recents-grid .swatch {
  border-radius: var(--r-sm);
  transition: transform var(--t-fast), box-shadow var(--t-fast);
}

#color-palette-grid .swatch:hover,
#color-recents-grid .swatch:hover {
  transform: scale(1.08);
  box-shadow: var(--sh-1);
  z-index: 1;
}

#color-palette-grid .swatch:focus-visible,
#color-recents-grid .swatch:focus-visible {
  outline: var(--focus-w) solid var(--accent-ring);
  outline-offset: 2px;
  z-index: 2;
}

/* Muestra vacia de una paleta sin colores. */
#color-palette-grid:empty::after {
  content: "";
  display: block;
  width: 100%;
  height: var(--row-h);
  border: 1px dashed var(--bd);
  border-radius: var(--r-sm);
}

#color-recents {
  padding-top: var(--sp-2);
  border-top: 1px solid var(--bd-soft);
}


/* ---------------------------------------------------------------------------
   4. PANEL DE PINCEL

   La rejilla de preajustes es la MISMA que usa el popover de `ui/toolbar.js`
   (`.preset-grid` / `.preset-item` / `.preset-thumb` / `.preset-name`), asi que
   se define una sola vez y sirve en los dos sitios.
   ------------------------------------------------------------------------ */
.preset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--sp-3);
  min-width: 0;
}

.preset-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--sp-2);
  min-width: 0;
  padding: var(--sp-3);
  background: var(--s-2);
  color: var(--fg-dim);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
  text-align: left;
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast);
}

.preset-item:hover {
  background: var(--s-3);
  border-color: var(--bd-strong);
  color: var(--fg);
}

.preset-item[aria-pressed="true"],
.preset-item.is-active {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-ring);
}

.preset-item:focus-visible {
  outline: var(--focus-w) solid var(--accent-ring);
  outline-offset: 1px;
}

/* Previsualizacion del trazo: el modulo fija su tamano CSS exacto, aqui solo
   va el fondo sobre el que se dibuja y el recorte. */
.preset-thumb {
  display: block;
  width: 100%;
  max-width: 100%;
  background: var(--s-0);
  border-radius: var(--r-sm);
  pointer-events: none;
}

.preset-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-xs);
  line-height: var(--lh-tight);
}

/* --- Parametros del pincel ---------------------------------------------- */
.brush-params {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}

.brush-params .panel-row > .panel-row-label {
  width: 72px;
}

/* Previsualizacion grande del trazo, encima de los parametros. */
.brush-preview {
  display: block;
  width: 100%;
  height: 48px;
  margin-bottom: var(--sp-4);
  background: var(--s-0);
  border: 1px solid var(--bd);
  border-radius: var(--r-md);
}


/* ---------------------------------------------------------------------------
   5. PANEL NAVEGADOR
   Miniatura del documento con el rectangulo de la vista actual encima.
   ------------------------------------------------------------------------ */
.navigator {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  min-width: 0;
}

/* Contenedor posicionado: el rectangulo de vista se coloca contra el. */
.navigator-view {
  position: relative;
  width: 100%;
  min-height: 72px;
  background: var(--s-0);
  border: 1px solid var(--bd);
  border-radius: var(--r-sm);
  overflow: hidden;
  cursor: move;
  touch-action: none;            /* el arrastre del encuadre es nuestro */
}

.navigator-canvas {
  display: block;
  margin: 0 auto;
  image-rendering: auto;
}

/* Rectangulo de la porcion visible. Lo posiciona el modulo con `left/top/
   width/height` en linea; el borde doble lo hace visible sobre imagen clara y
   sobre imagen oscura. */
.navigator-rect {
  position: absolute;
  box-sizing: border-box;
  border: 1px solid var(--accent-ring);
  box-shadow: 0 0 0 1px var(--canvas-shadow);
  pointer-events: none;
}

.navigator-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  color: var(--fg-mute);
  font-family: var(--font-mono);
  font-size: var(--fs-xs);
  font-variant-numeric: tabular-nums;
}


/* ---------------------------------------------------------------------------
   6. POPOVER

   Lo usan `ui/toolbar.js` (preajustes de herramienta) y `ui/optionsBar.js`
   (opciones desbordadas). Los dos modulos lo colocan con `position:fixed` y
   `left/top` en linea, y ANTES comprueban si esta hoja ya le da fondo: si lo
   tiene, no aplican su acabado de emergencia. Mismo lenguaje visual que
   `.menu` de `main.css` para que el editor no parezca dos aplicaciones.
   ------------------------------------------------------------------------ */
.popover {
  position: fixed;
  z-index: var(--z-menu);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  max-width: min(420px, calc(100vw - var(--sp-6) * 2));
  max-height: calc(100vh - var(--sp-6) * 2);
  padding: var(--sp-4);
  background: var(--s-2);
  color: var(--fg);
  border: 1px solid var(--bd-strong);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: menu-in 110ms var(--ease-out) both;
}

.popover:focus {
  outline: none;
}

.popover-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--bd-soft);
}

.popover-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-dim);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  user-select: none;
  -webkit-user-select: none;
}

.popover-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

/* Popover de preajustes: mas ancho, porque las miniaturas de trazo necesitan
   sitio para que el trazo se reconozca. */
.popover-presets {
  width: min(360px, calc(100vw - var(--sp-6) * 2));
}

/* Popover de opciones: columna de controles a lo largo. */
.popover-options {
  min-width: 248px;
}


/* ---------------------------------------------------------------------------
   7. HOJA INFERIOR (`.sheet`)

   `ui/optionsBar.js` la usa en movil en lugar del popover. El modulo fija
   posicion, alto maximo y z-index en linea; aqui van el acabado, el fondo
   oscurecido y la entrada.
   ------------------------------------------------------------------------ */
.sheet-backdrop {
  position: fixed;
  inset: 0;
  z-index: var(--z-dialog);
  background: var(--canvas-shadow);
  animation: backdrop-in 160ms var(--ease) both;
}

.sheet {
  /* El modulo la coloca con `position:fixed` en linea. Se declara `relative`
     como base para que el tirador (`.sheet-head::before`) tenga siempre un
     contexto de posicionamiento, tambien si alguien reutiliza `.sheet` en
     flujo normal. */
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-5) calc(var(--sp-5) + env(safe-area-inset-bottom, 0px));
  background: var(--s-2);
  color: var(--fg);
  border-top: 1px solid var(--bd-strong);
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  box-shadow: var(--sh-3);
  overscroll-behavior: contain;
  animation: sheet-in 200ms var(--ease-out) both;
}

.sheet:focus {
  outline: none;
}

.sheet-head {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 0 0 auto;
}

/* Tirador visual de la hoja: no es interactivo, solo comunica "esto sube y
   baja". Va dentro de la cabecera para no anadir nodos. */
.sheet-head::before {
  content: "";
  position: absolute;
  left: 50%;
  top: var(--sp-2);
  width: 36px;
  height: 4px;
  background: var(--s-hi);
  border-radius: var(--r-full);
  transform: translateX(-50%);
  pointer-events: none;
}

.sheet-title {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fg-dim);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
}

.sheet-body {
  flex: 1 1 auto;
  min-height: 0;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--bd-soft);
}

@keyframes sheet-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}


/* ---------------------------------------------------------------------------
   8. MENU CONTEXTUAL Y MENUS FLOTANTES DE PANEL

   `ui/contextmenu.js` crea un `.menu` dentro de `#context-menu-root`, que
   `main.css` §15 ya coloca y anima. `ui/layersPanel.js` usa `.lp-menu` y
   `ui/timelineUI.js` usa `.tl-menu`: los dos son `.menu` colocados en
   `position:fixed` por su modulo. Aqui solo se les da el limite de altura y el
   desplazamiento que `main.css` no puede suponer.
   ------------------------------------------------------------------------ */
.menu.lp-menu,
.menu.tl-menu,
#context-menu-root > .menu {
  max-height: min(80vh, 560px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Menu colgado del boton de opciones de un panel: mismo acabado, anclado por
   el modulo con `position:fixed`. */
.panel-menu {
  position: fixed;
  z-index: var(--z-menu);
  max-height: min(70vh, 480px);
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: menu-in 110ms var(--ease-out) both;
}


/* ---------------------------------------------------------------------------
   9. PUNTERO GRUESO, MOVIMIENTO REDUCIDO Y COLORES FORZADOS
   ------------------------------------------------------------------------ */
@media (pointer: coarse) {
  #right-dock,
  .popover,
  .sheet {
    --panel-pad: var(--sp-6);
    --row-h: 34px;
    --checker-size: 10px;
  }

  /* Rejilla de preajustes: menos columnas y celdas mas grandes con el dedo. */
  .preset-grid {
    grid-template-columns: repeat(auto-fill, minmax(116px, 1fr));
    gap: var(--sp-4);
  }

  .preset-item {
    padding: var(--sp-4);
  }

  /* El hover de las muestras no existe en tactil y el escalado solo produce
     saltos al arrastrar el dedo por la paleta. */
  #color-palette-grid .swatch:hover,
  #color-recents-grid .swatch:hover {
    transform: none;
  }

  .navigator-view {
    min-height: 96px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .popover,
  .sheet,
  .sheet-backdrop,
  .panel-menu {
    animation: none;
  }

  #color-palette-grid .swatch,
  #color-recents-grid .swatch,
  .preset-item {
    transition: none;
  }
}

@media (forced-colors: active) {
  .popover,
  .sheet,
  .preset-item,
  .navigator-view {
    border-color: ButtonBorder;
  }

  .preset-item[aria-pressed="true"],
  .preset-item.is-active {
    forced-color-adjust: none;
    background: Highlight;
    color: HighlightText;
  }

  .drop-before::after,
  .drop-after::after {
    border-top-color: Highlight;
  }

  .drop-inside {
    box-shadow: inset 0 0 0 2px Highlight;
  }

  .navigator-rect {
    border-color: Highlight;
    box-shadow: none;
  }
}


/* ===================================================================
   Estilos trasladados desde app/js/ui/layersPanel.js.
   Estaban inyectados como <style> desde JavaScript, cosa que la
   politica de seguridad de contenido (style-src 'self') bloquea.
   =================================================================== */
.lp{display:flex;flex-direction:column;height:100%;min-height:0;font-size:var(--fs-md);}
.lp-head{flex:0 0 auto;display:flex;flex-direction:column;gap:var(--sp-3);
  padding:var(--sp-4);border-bottom:1px solid var(--bd-soft);background:var(--s-1);}
.lp-head-row{display:flex;align-items:center;gap:var(--sp-3);min-width:0;}
.lp-head-row>.select{flex:1 1 auto;min-width:0;}
.lp-head-label{flex:0 0 auto;min-width:56px;font-size:var(--fs-xs);color:var(--fg-mute);
  text-transform:uppercase;letter-spacing:var(--ls-wide);white-space:nowrap;}
.lp-tools{display:flex;align-items:center;gap:1px;flex-wrap:wrap;}
.lp-tools .grow{flex:1 1 auto;}
.lp-list{position:relative;flex:1 1 auto;min-height:0;overflow-y:auto;overflow-x:hidden;
  outline:none;touch-action:pan-y;-webkit-overflow-scrolling:touch;
  user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;}
.lp-list.is-dragging{touch-action:none;cursor:grabbing;}
/* Sin linea entre filas: en una lista de 30 capas son 30 rayas de ruido. La
   separacion la da el propio contenido y el fondo al pasar por encima. */
.lp-row{position:relative;display:flex;align-items:center;gap:var(--sp-2);
  width:100%;box-sizing:border-box;padding:4px var(--sp-3) 4px 0;
  border-bottom:0;color:var(--fg);background:transparent;
  border-radius:var(--r-sm);cursor:default;}
.lp-row:hover{background:var(--s-2);}
.lp-row[aria-selected="true"]{background:var(--accent-soft);}
.lp-row.is-active{background:var(--accent-soft);box-shadow:inset 2px 0 0 var(--accent);}
.lp-row:focus-visible{outline:var(--focus-w) solid var(--accent-ring);outline-offset:-2px;}
.lp-row.is-hidden .lp-thumb,.lp-row.is-hidden .lp-name{opacity:var(--op-muted);}
.lp-row.is-dragged{opacity:var(--op-muted);}
.lp-row.is-drop-inside{box-shadow:inset 0 0 0 2px var(--accent);border-radius:var(--r-sm);}
.lp-indent{flex:0 0 auto;height:1px;}
.lp-chevron{flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:16px;height:22px;padding:0;background:none;border:0;border-radius:var(--r-sm);
  color:var(--fg-mute);cursor:pointer;}
.lp-chevron:hover{color:var(--fg);}
.lp-chevron .icon{width:12px;height:12px;transition:transform var(--t-fast);}
.lp-chevron[aria-expanded="false"] .icon{transform:rotate(-90deg);}
.lp-chevron.is-empty{pointer-events:none;visibility:hidden;}
.lp-thumb{position:relative;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
  width:${THUMB_W}px;height:${THUMB_H}px;border:1px solid var(--bd);border-radius:var(--r-sm);
  overflow:hidden;}
.lp-thumb canvas{display:block;image-rendering:pixelated;}
.lp-thumb .icon{width:18px;height:18px;color:var(--fg-mute);}
.lp-col{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;justify-content:center;gap:1px;}
.lp-name-row{display:flex;align-items:center;gap:var(--sp-2);min-width:0;}
.lp-type{flex:0 0 auto;width:13px;height:13px;color:var(--fg-mute);}
.lp-name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  font-size:var(--fs-md);line-height:var(--lh-tight);}
.lp-name-input{flex:1 1 auto;min-width:0;width:100%;height:var(--ctrl-h-sm);
  padding:0 var(--sp-2);background:var(--s-0);border:1px solid var(--accent);
  border-radius:var(--r-sm);color:var(--fg);font:inherit;font-size:var(--fs-md);}
.lp-sub{display:flex;align-items:center;gap:var(--sp-2);min-width:0;
  font-size:var(--fs-xs);color:var(--fg-mute);line-height:1.2;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.lp-sub:empty{display:none;}
.lp-badges{flex:0 0 auto;display:flex;align-items:center;gap:2px;}
.lp-flag{display:flex;align-items:center;justify-content:center;width:20px;height:20px;
  padding:0;background:none;border:0;border-radius:var(--r-sm);color:var(--fg-mute);cursor:pointer;}
.lp-flag:hover{color:var(--fg);background:var(--s-3);}
.lp-flag[aria-pressed="true"]{color:var(--accent);}
.lp-flag .icon{width:13px;height:13px;}
.lp-keys{flex:0 0 auto;min-width:16px;height:15px;padding:0 4px;background:var(--s-4);
  color:var(--fg-dim);border-radius:var(--r-full);font-size:var(--fs-xs);
  font-variant-numeric:tabular-nums;line-height:15px;text-align:center;}
.lp-keys.is-key{background:var(--accent);color:var(--accent-fg);}
.lp-toggles{flex:0 0 auto;display:flex;align-items:center;gap:1px;}
.lp-toggle{display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;padding:0;background:none;border:0;border-radius:var(--r-sm);
  color:var(--fg-dim);cursor:pointer;}
.lp-toggle:hover{background:var(--s-3);color:var(--fg);}
.lp-toggle .icon{width:15px;height:15px;}
.lp-toggle[aria-pressed="false"]{color:var(--fg-mute);opacity:var(--op-muted);}
.lp-toggle.lp-lock[aria-pressed="true"]{color:var(--warn);opacity:1;}
.lp-dropline{position:absolute;left:0;right:0;height:0;pointer-events:none;
  border-top:2px solid var(--accent);z-index:3;display:none;}
.lp-dropline::before{content:"";position:absolute;top:-4px;left:0;width:6px;height:6px;
  border-radius:var(--r-full);background:var(--accent);}
.lp-dropline.is-on{display:block;}
.lp-ghost{position:fixed;z-index:var(--z-overlay);display:flex;align-items:center;gap:var(--sp-3);
  max-width:220px;padding:var(--sp-2) var(--sp-4);background:var(--s-2);
  border:1px solid var(--bd-strong);border-radius:var(--r-md);box-shadow:var(--sh-2);
  color:var(--fg);font-size:var(--fs-sm);white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;pointer-events:none;opacity:0.92;}
.lp-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-2);padding:var(--sp-7) var(--sp-5);text-align:center;color:var(--fg-mute);}
.lp-empty-title{font-size:var(--fs-md);color:var(--fg-dim);}
.lp-empty-hint{font-size:var(--fs-xs);}
.lp-menu{position:fixed;z-index:var(--z-menu);max-height:80vh;overflow-y:auto;}
@media (pointer:coarse){
  .lp-row{padding-top:5px;padding-bottom:5px;}
  .lp-toggle{width:var(--touch-min);height:28px;}
  .lp-flag{width:24px;height:24px;}
}

/* ===================================================================
   DOCK DERECHO: los paneles NO se encogen.

   Sintoma que corrige: con una ventana baja (p.ej. 1365x679 el dock se
   queda en ~306 px) flexbox repartia el hueco encogiendo TODOS los
   paneles a la vez. El de color quedaba en 27 px de alto para 463 px de
   contenido, y el navegador en 11 px: se veia todo cortado y ademas el
   dock no llegaba a desbordar lo suficiente como para mostrar barra de
   desplazamiento, asi que no habia forma de llegar al contenido.

   Regla: cada panel conserva su altura natural (flex-shrink: 0) y quien
   se desplaza es el dock. Ademas cada cuerpo tiene un techo propio para
   que un panel largo -la rejilla de pinceles mide 1222 px- no empuje a
   los demas fuera de la vista.
   =================================================================== */
#right-dock > .panel {
  flex: 0 0 auto;
}

#right-dock > .panel > .panel-body {
  max-height: min(46vh, 420px);
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Las capas son el panel de trabajo: se queda con el hueco sobrante y
   tiene un suelo para que nunca desaparezca. */
/* Las capas son el panel de TRABAJO: se lleva el hueco sobrante y tiene un
   suelo generoso. Con 120 px no cabian la fusion, la opacidad y ni una fila, que
   es justo lo que hay que ver siempre. El dock se desplaza, asi que darle sitio
   aqui no esconde a los demas: solo los empuja hacia abajo. */
#right-dock > #panel-layers {
  flex: 1 1 auto;
  min-height: 260px;
}

/* Un panel plegado no reserva altura. */
#right-dock > .panel[data-collapsed="true"] > .panel-body,
#right-dock > .panel.is-collapsed > .panel-body {
  max-height: 0;
}

/* Ventanas muy bajas: se recortan aun mas los techos para que quepan
   siempre al menos dos paneles y el dock siga siendo navegable. */
@media (max-height: 760px) {
  /* Ventana baja: se aprietan los paneles auxiliares para que el de capas
     siga mostrando su contenido util. */
  #right-dock > .panel > .panel-body { max-height: 200px; }
  #right-dock > #panel-layers { min-height: 220px; }
}

/* ===================================================================
   BARRA DE ACCIONES DEL PANEL DE CAPAS

   La funcion de anadir capa existia y funcionaba, pero pasaba
   desapercibida: era el primero de SEIS iconos de 23 px, todos con el
   mismo peso visual. Un usuario nuevo no encontraba como crear una capa.

   Se jerarquiza: «Capa nueva» es la accion principal del panel y se
   marca con el acento; «Eliminar capa» es la destructiva y se separa al
   final avisando en rojo al pasar por encima. El resto se queda neutro.
   =================================================================== */
.lp-tools {
  gap: var(--sp-2);
  padding-block: var(--sp-2);
}

/* Los seis botones de accion viven en la CABECERA del panel (editor.php), que
   sigue visible aunque el panel este plegado. El modulo construye ademas su
   propia `.lp-tools` con las mismas seis acciones: se oculta para no
   duplicarlas. Se deja en el DOM -no se borra- porque layersPanel.js mantiene
   su estado de activado/desactivado. */
#panel-layers .lp-tools {
  display: none;
}

/* Accion principal: la unica con acento de toda la barra. */
#panel-layers .panel-actions [data-action="layer.new"],
.lp-tools [data-action="layer.new"] {
  background: var(--accent-soft);
  color: var(--accent-ring);
}

#panel-layers .panel-actions [data-action="layer.new"]:hover:not(:disabled),
.lp-tools [data-action="layer.new"]:hover:not(:disabled) {
  background: var(--accent-soft-hover);
  color: var(--accent-ring);
  box-shadow: var(--accent-glow);
}

/* La destructiva se va al final y avisa en rojo. */
#panel-layers .panel-actions [data-action="layer.delete"],
.lp-tools [data-action="layer.delete"] {
  margin-left: auto;
}

#panel-layers .panel-actions [data-action="layer.delete"]:hover:not(:disabled),
.lp-tools [data-action="layer.delete"]:hover:not(:disabled) {
  background: var(--err-soft);
  color: var(--err);
}