/* === A. Desk (workspace background) ============================== */
.desk-light {
  position: relative;
  background-color: var(--panel-cream);
  color: var(--sepia);
}

/* === B. Trays (bandejas / paneles) =============================== */
/* .tray base: contenedor con material y relieve. Se compone con */
.tray {
  border-radius: 18px;
  color: var(--sepia);
  background-color: var(--panel-cream);
  box-shadow:
    /* sombra exterior direccional sobre la mesa */
    15px 25px 45px var(--desk-shadow),
    /* ribete superior de madera oscura */
    inset 0 2px 0 rgba(80, 40, 15, 0.18),
    /* incrustación de marfil claro */
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    /* hilo de latón inferior */
    inset 0 -1.5px 0 var(--brass);
  transition: box-shadow 180ms ease, transform 180ms ease;
}/* tray-island — navbar como 3 islas de madera independientes */
.tray-island {
  position: relative;
  display: inline-flex;
  align-items: stretch;
  /* Padding interno generoso: 0.75rem vertical, 1rem horizontal. */
  padding: 0.75rem 1rem;
  /* Min-height: 100px. Aumento la altura para que el wrapper */
  min-height: 100px;
  pointer-events: none; /* los hijos (top, shadow, content) re-habilitan */
}

/* Los hijos directos de la isla necesitan pointer-events:auto */
.tray-island > * {
  pointer-events: auto;
}

/* Top: la superficie de la madera. Ocupa la parte superior */
.tray-island-top {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 10%;
  z-index: 0;
  background-color: #e7c89a;
  background-image: var(--ui-texture-interface, url('../resources/ui-textures/interface-texture.webp'));
  /* §22.6xx.interface-texture-rotate-vertical.v3 — Tray-island HORIZONTAL
     (navbar). Tamaño nativo 1100×300. */
  background-size: 1100px 300px;
  background-repeat: no-repeat;
  background-position: center;
  /* Curva en AMBAS esquinas inferiores — radio 15px. La base */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
  /* Inset shadow INFERIOR sutil: marca la línea de sombra que */
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1);
}

/* Shadow: grosor lateral de la madera. Ocupa TODA la isla pero */
.tray-island-shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  background-color: #a08250;
  background-image: var(--ui-texture-interface, url('../resources/ui-textures/interface-texture.webp'));
  /* §22.6xx.interface-texture-rotate-vertical.v3 — Tamaño nativo 1100×300. */
  background-size: 1100px 300px;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: multiply;
  /* Inset shadow SUPERIOR sutil: marca la línea donde el top */
  box-shadow: inset 0 3px 5px rgba(50, 25, 5, 0.6);
  /* Curva en AMBAS esquinas inferiores — radio 15px. La base */
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  border-bottom-left-radius: 15px;
  border-bottom-right-radius: 15px;
}

/* Contenido de la isla (logo, botones, sliders). position:relative */
.tray-island-content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* tray-island-groove — hendidura carved en la madera (3 box-shadows) */
.tray-island-groove {
  /* Color de fondo LIGERAMENTE más oscuro que el top (#e7c89a) */
  background-color: #d8b585;
  background-image: var(--ui-texture-interface, url('../resources/ui-textures/interface-texture.webp'));
  /* §22.6xx.interface-texture-rotate-vertical.v3 — Groove horizontal,
     tamaño nativo 1100×300. */
  background-size: 1100px 300px;
  background-repeat: no-repeat;
  padding: 0.5rem;
  border-radius: 16px;
  /* Las 3 sombras de la spec — combinadas en un único box-shadow. */
  box-shadow:
    /* Drop shadow BLANCO (highlight, abajo-derecha) */
    5px 5px 2.2px -1px rgba(255, 253, 253, 0.54),
    /* Drop shadow NEGRO (profundidad, arriba-izquierda) */
    -2px -3px 4px 0px rgba(0, 0, 0, 0.31),
    /* Inner shadow NEGRO (sombra interior del well) */
    inset 3px 4px 2.2px 3px rgba(0, 0, 0, 0.29);
}

/* Override: las islas pegadas al borde del navegador deben */
.tray-island-left .tray-island-top,
.tray-island-left .tray-island-shadow {
  border-bottom-left-radius: 0;
}
.tray-island-right .tray-island-top,
.tray-island-right .tray-island-shadow {
  border-bottom-right-radius: 0;
}
/* Override: las islas pegadas al borde del navegador deben */
.tray-island-left .tray-island-top,
.tray-island-left .tray-island-shadow {
  border-bottom-left-radius: 0;
}
.tray-island-right .tray-island-top,
.tray-island-right .tray-island-shadow {
  border-bottom-right-radius: 0;
}
/* Override: las islas pegadas a los bordes laterales del */
.tray-island-left .tray-island-top,
.tray-island-left .tray-island-shadow {
  border-bottom-left-radius: 0;
}
.tray-island-right .tray-island-top,
.tray-island-right .tray-island-shadow {
  border-bottom-right-radius: 0;
}

/* tray-island-vertical — versión rotada 90° del patrón (toolbars laterales) */
.tray-island-vertical {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  /* 'center' (no 'stretch') para que .tray-island-content */
  align-items: center;
  width: 100px;
  /* Padding interno: vertical 0.5rem. Horizontal 0 porque el content */
  padding: 0.5rem 0;
  pointer-events: none;
}

.tray-island-vertical > * {
  pointer-events: auto;
}

/* Override del .tray-island-top (horizontal) para orientación vertical.
   §22.6xx.interface-texture-rotate-vertical — Textura en pseudo rotado. */
.tray-island-vertical .tray-island-top {
  position: absolute;
  top: 0;
  bottom: 0;
  --bar-wood-color: #e7c89a;
  background-color: #e7c89a;
  z-index: 0;
}

/* Override del .tray-island-shadow (horizontal) para vertical.
   §22.6xx.interface-texture-rotate-vertical — Textura en pseudo rotado. */
.tray-island-vertical .tray-island-shadow {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  --bar-wood-color: #a08250;
  background-color: #a08250;
}

.tray-island-vertical .tray-island-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  position: relative;
  z-index: 1;
  /* Ancho = solo el botón + padding del botón. Sin forzar stretch. */
  width: max-content;
}

/* tray-island-groove VERTICAL — versión rotada del "carved" del navbar.
   §22.6xx.interface-texture-rotate-vertical — Textura en pseudo rotado;
   position: relative necesaria para que el pseudo-absoluto se ancle aquí. */
.tray-island-vertical .tray-island-groove {
  background-color: #d8b585;
  --bar-wood-color: #d8b585;
  position: relative;
  padding: 0.5rem;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  box-shadow:
    5px 5px 2.2px -1px rgba(255, 253, 253, 0.54),
    -2px -3px 4px 0px rgba(0, 0, 0, 0.31),
    inset 3px 4px 2.2px 3px rgba(0, 0, 0, 0.29);
}

/* toolbar-color-hole-wrapper — mero container de layout (margin + centrado) */
.toolbar-color-hole-wrapper {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  margin: 0 auto 0.75rem;     /* centrado horizontal + extra spacing abajo */
  display: flex;
  align-items: center;
  justify-content: center;
  /* Sin box-shadows aquí — están todos en el .toolbar-color-hole */
}

.toolbar-color-hole {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  padding: 0;
  font: inherit;
  position: relative;
  /* background-color y color los pone x-bind:style="colorLauncherStyle" */
  box-shadow:
    /* 1. White drop shadow OUTSIDE BR — ACENTUADO (highlight principal, */
    4px 4px 5px 0px rgba(255, 255, 255, 0.80),
    /* 2. Black drop shadow OUTSIDE TL (pared en sombra, zona opuesta) */
    -2px -3px 4px 0px rgba(0, 0, 0, 0.30),
    /* 3. Inner shadow INSIDE TL (profundidad del "agujero" tallado) */
    inset 3px 4px 2px 2px rgba(0, 0, 0, 0.30);
  transition: box-shadow 0.12s ease;
}

.toolbar-color-hole:hover {
  box-shadow:
    4px 4px 5px 0px rgba(255, 255, 255, 0.80),  /* white (igual) */
    -2px -3px 4px 0px rgba(0, 0, 0, 0.30),       /* black TL (igual) */
    inset 2px 3px 2px 2px rgba(0, 0, 0, 0.15);   /* inner REDUCIDO */
}

.toolbar-color-hole:active {
  box-shadow:
    4px 4px 5px 0px rgba(255, 255, 255, 0.80),
    -2px -3px 4px 0px rgba(0, 0, 0, 0.30),
    inset 2px 2px 2px 2px rgba(0, 0, 0, 0.08);
}

.toolbar-color-hole.is-active {
  /* Active: el panel Color abierto — sin cambio visual aquí, la */
}

.toolbar-color-hole-icon {
  font-size: 1.4rem;
  pointer-events: none;
  z-index: 1;
}

/* Variante RIGHT: pill en el lado derecho del viewport. */
.tray-island-vertical.hud-toolbar-pill-right {
  right: 0;
}
.tray-island-vertical.hud-toolbar-pill-right .tray-island-top {
  right: 0;
  left: 10%;
  border-top-left-radius: 30px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: inset 2px 0 4px rgba(0, 0, 0, 0.10);
}
.tray-island-vertical.hud-toolbar-pill-right .tray-island-shadow {
  border-top-left-radius: 30px;
  border-bottom-left-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  box-shadow: inset 3px 0 5px rgba(50, 25, 5, 0.6);
}

/* Variante LEFT: pill en el lado izquierdo del viewport. */
.tray-island-vertical.hud-toolbar-pill-left {
  left: 0;
}
.tray-island-vertical.hud-toolbar-pill-left .tray-island-top {
  left: 0;
  right: 10%;
  border-top-right-radius: 30px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset -2px 0 4px rgba(0, 0, 0, 0.10);
}
.tray-island-vertical.hud-toolbar-pill-left .tray-island-shadow {
  border-top-right-radius: 30px;
  border-bottom-right-radius: 15px;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset -3px 0 5px rgba(50, 25, 5, 0.6);
}

/* tray-island-touch-steppers — groove vertical de 3 steppers (Size/Opacity/Flow) */
.tray-island-touch-steppers {
  width: 110px;
  /* §22.6xx.506f — pointer-events: auto explícito. Sin esto, el pill
   * hereda pointer-events: none de .tray-island y los pointerdown
   * sobre los steppers se filtran al canvas, iniciando un stroke
   * simultáneo al drag del stepper (doble efecto en touch mode). */
  pointer-events: auto;
  /* §22.6xx.506c — touch-action solo en touch mode (ver bloque .touch-mode
   * más abajo). Si se aplica global, interfiere con el drag del mouse
   * en algunos navegadores híbridos. */
}

/* Groove que contiene los 3 steppers verticales. Mantiene el look */
.tray-island-vertical .tray-island-touch-steppers-groove {
  /* §22.6xx.506e — Reducido de 1.5rem a 0.6rem: en tablets 768-1024px
   * el groove necesita ser más compacto para que los 3 steppers
   * quepan sin solaparse con el island superior ni el island de undo. */
  gap: 0.6rem;
  padding: 0.4rem 0.4rem;
}

/* §22.6xx.506c — Solo en touch mode: bloquea scroll/zoom en iOS/Safari
 * cuando el dedo arrastra sobre los steppers o el groove. Se activa
 * con la clase .touch-mode en el body (gestionada por app.js). */
body.touch-mode .tray-island-touch-steppers,
body.touch-mode .tray-island-vertical .tray-island-touch-steppers-groove {
  touch-action: none;
}

/* Cuando un tray actúa como floating panel (draggable), necesitamos */
.tray.floating {
  position: relative;
  z-index: 40;
}