/* El panel central del dialog se construye con .tray .tray-top */


/* §22.6xx.658 — Borde rasgado "Tavern Keepers" en dialogs y floating panels.
   Aplica el filter SVG #thick-torn-edge al ::before del panel. El filter:
   1) distorsiona la silueta del rectángulo (feDisplacementMap, scale 12) →
   bordes rasgados estilo papel, 2) encoge la silueta 7px (feMorphology erode),
   3) resta la silueta encogida de la original (feComposite out) → anillo
   de 7px, 4) rellena el anillo con sienna cálido #A5663A (feFlood) y lo
   compone con el original (feMerge).
   El panel real pasa a background: transparent y los sub-elementos
   con paper-light/paper-noise-bg también transparentes, para que el ::before
   se vea a través de todo el contorno. Quitamos borders/border-radius
   internos para que no haya líneas duras que rompan el efecto rasgado.
   blend-mode "normal" en el paper-noise (no multiply) para que el cream
   no se oscurezca a negro. */
/* §22.6xx.658xxx — position: relative SOLO cuando el panel NO usa
   utility .absolute. Los floating panels (.floating-panel.absolute)
   necesitan position: absolute para flotar y solaparse libremente;
   position: relative los mete en el flow normal del DOM y al cargar
   un nuevo panel (lazy) empuja a los anteriores hacia abajo. El
   ::before con position:absolute; inset:0 funciona con CUALQUIER
   position (relative o absolute) porque ambos crean containing block. */
body .dialog-panel,
body .floating-panel {
  background: transparent !important;
  background-image: none !important;  /* anula el paper-noise de la regla global de dialogs.css:1055 */
  border: none !important;  /* anula el border de .paper-light en widgets.css:72 */
  border-radius: 0 !important;
  isolation: isolate;
  box-shadow: none !important;
  outline: none !important;
  /* §22.6xx.658 — Padding interno 1rem (sin padding-top) para que el contenido
     no se solape con el ring sienna de 14px. El header (floating-panel-header)
     usa margen negativo para sobresalir del padding y quedarse pegado a los
     bordes laterales del panel. */
  padding: 0 1rem 1rem;
}
body .dialog-panel:not(.absolute),
body .floating-panel:not(.absolute) {
  position: relative;
}
/* Header: pegado a los bordes superiores y laterales, sobresale del padding
   lateral del panel via margin negativo. */
body .dialog-panel .floating-panel-header,
body .floating-panel .floating-panel-header {
  margin: 0 -1rem;
  width: calc(100% + 2rem);
}
body .dialog-panel::before,
body .floating-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--panel-cream, #f7e6c0) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
  border-radius: inherit;
  filter: url(#thick-torn-edge);
  pointer-events: none;
}
/* Sub-elementos internos: transparentes y sin border/border-radius
   para que el ::before se vea a través de TODO el contorno sin
   líneas duras que rompan el efecto rasgado. */
body .dialog-panel .paper-light,
body .dialog-panel .paper-noise-bg,
body .dialog-panel nav.paper-light,
body .floating-panel .paper-light,
body .floating-panel .paper-noise-bg {
  background-color: transparent !important;
  border: none !important;
  border-radius: 0 !important;
}


/* === V. Library / Settings: headers, rows, hint text ============== */
.desk-light .library-header,
.desk-light .library-sidebar-header,
.desk-light .dialog-panel-header {
  color: var(--sepia);
  border-bottom-color: rgba(92, 64, 51, 0.18) !important;
}

/* §22.6xx.257 — DROP de .settings-section-header / .settings-subgroup-label */

.desk-light .library-pad-item:hover,
.desk-light .library-card,
.desk-light .library-card-thumb,
.desk-light .library-card-thumb-placeholder,
.desk-light .settings-tab-btn {
  color: var(--sepia);
}

.desk-light .library-card {
  /* §22.6xx.656n — Drop del gradient+texture+blend+box-shadow. Solo fondo plano. */
  background-color: var(--panel-cream);
  /* §22.6xx.656bl iter 6 — multiply en vez de soft-light. */
  background-image: var(--ui-texture-paper-noise);
  background-repeat: repeat;
  background-size: 240px 240px;
  background-blend-mode: multiply;
  border: 1px solid rgba(92, 64, 51, 0.20);
}

.desk-light .library-card:hover {
  background-color: var(--panel-birch);
}

.desk-light .library-card.is-active {
  background-color: var(--panel-birch);
  border-color: var(--robin);
}

.desk-light .library-pad-item {
  color: var(--sepia);
}

.desk-light .library-pad-item.is-active {
  background-color: color-mix(in srgb, var(--robin) 16%, transparent);
  color: var(--sepia);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.50),
    inset 0 -1px 0 var(--robin);
}

.desk-light .library-pad-item:hover {
  background-color: color-mix(in srgb, var(--brass) 16%, transparent);
}

/* === W. Settings tabs (custom) ===================================== */
.desk-light .settings-tab-btn {
  position: relative;
  background-color: transparent;  /* el ::before con --tab-bg-color hace de bg */
  color: var(--sepia-soft-text, #6B4D33);
  border: 0;
  border-radius: 0;
  isolation: isolate;
  overflow: hidden;
  /* §22.6xx.658-iter16 — Variable CSS para que el ::before herede el color
     de cada estado. Default: cream. Hover/Active: brass. */
  --tab-bg-color: var(--panel-cream, #f7e6c0);
  transition: color 140ms ease;
}
/* §22.6xx.658-iter16 — Silueta rasgada en settings-tab-btn.
   El ::before tiene la textura cream + paper-noise Y el filter distorsiona
   solo la silueta (sin ring). Como el ::before usa --tab-bg-color (variable
   que cambia según estado), el color del tab se ve a través del rasgado. */
.desk-light .settings-tab-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--tab-bg-color) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
  filter: url(#torn-silhouette);
  pointer-events: none;
  transition: background-color 140ms ease;
}
.desk-light .settings-tab-btn .ti,
.desk-light .settings-tab-btn i {
  transition: color 140ms ease;
}

.desk-light .settings-tab-btn:hover {
  --tab-bg-color: color-mix(in srgb, var(--brass) 14%, transparent);
  color: var(--brass-text, #93411c);
}
.desk-light .settings-tab-btn:hover .ti,
.desk-light .settings-tab-btn:hover i {
  color: var(--brass-text, #93411c);
}

.desk-light .settings-tab-btn.is-active {
  /* §22.6xx.658-iter17 — Brass via --tab-bg-color. Sin border-radius ni
     margin-left: la silueta rasgada del ::before es la misma forma en
     hover y active (solo cambia el color del bg + texto). */
  --tab-bg-color: var(--brass, #c85a29) !important;
  color: #FFFDF8 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.desk-light .settings-tab-btn.is-active .ti,
.desk-light .settings-tab-btn.is-active i {
  color: #FFFDF8 !important;
}


/* === Z. Floating panel header ===================================== */
.desk-light .floating-panel-header,
.desk-light .floating-panel-title,
.desk-light .floating-panel-subtitle {
  color: var(--sepia);
  border-bottom-color: rgba(92, 64, 51, 0.18) !important;
}

.desk-light .floating-panel-title {
  /* §22.6xx.outline-title — Contorno claro `#F4D58D` (gold = color del
     título en modo `--light-title`) para legibilidad del texto `--sepia`
     sobre el wood-texture en modo claro. El base en chrome.css usa
     `--sepia` (modo oscuro, contorno oscuro). El drop-shadow highlight
     original (offset y=1px) se reemplaza por el outline de 4 lados.
     Roberto pidió explícitamente `#F4D58D` en lugar de blanco (`--ivory`)
     para coherencia con el "modo claro" del workspace. */
  text-shadow:
    -1px -1px 0 #F4D58D,
     1px -1px 0 #F4D58D,
    -1px  1px 0 #F4D58D,
     1px  1px 0 #F4D58D;
  font-weight: 700;
}

.desk-light .floating-panel-subtitle {
  color: var(--sepia-soft-text, #6B4D33);
}

.desk-light .panel-body {
  color: var(--sepia);
}

/* === AA. Settings row hint text ==================================== */
/* §22.6xx.257 — DROP de .settings-row-hint (obsoleto; las theme-row usan */

/* === BB. Empty states ============================================= */
.desk-light .library-empty-state,
.desk-light .library-empty-state * {
  color: var(--sepia-soft-text, #6B4D33);
}

/* === CC. Logo y SVG inline ======================================== */
.desk-light .logo-mark {
  filter: drop-shadow(0 1px 0 rgba(255, 253, 248, 0.50)) drop-shadow(0 2px 4px rgba(60, 30, 10, 0.30));
}

/* === DD. Hover de filas ya migradas =============================== */
.desk-light .hover\:bg-sepia\/10:hover {
  background-color: color-mix(in srgb, var(--sepia) 10%, transparent);
}

.desk-light .border-sepia\/20 {
  border-color: color-mix(in srgb, var(--sepia) 20%, transparent);
}

.desk-light .border-sepia\/30 {
  border-color: color-mix(in srgb, var(--sepia) 30%, transparent);
}

.desk-light .text-sepia {
  color: var(--sepia);
}

.desk-light .text-sepia\/70 {
  color: color-mix(in srgb, var(--sepia) 70%, transparent);
}

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === EE. Tray base: redefiniciones consolidadas ==================== */
/* Las reglas .tray y .tray.floating se han consolidado en sus */

/* === FF. Toolbar pill: position absolute ya en .hud-toolbar-pill base === */

/* §22.6xx.656n — DROP del bloque GG completo (look Light Academia con
   textura/blend/shadow). La base de .floating-panel en chrome.css ya define
   el fondo plano var(--panel-cream). La border y border-radius también
   pasan a la base. */

/* Floating panel header: mantiene el look madera como title bar del panel. */
.desk-light .floating-panel-header {
  background-color: rgba(11, 29, 28, 0.92) !important;
  background-image: var(--ui-texture-interface, url('../resources/ui-textures/interface-texture.webp')) !important;
  /* §22.6xx.interface-texture-rotate-vertical.v3 — Tamaño nativo 1100×300. */
  background-size: 1100px 300px !important;
  background-repeat: no-repeat !important;
  background-position: center;
  border-bottom: none !important;
  color: var(--sepia) !important;
}
.dialog-panel > .floating-panel-header {
  /* sin border-top-left-radius / border-top-right-radius */
}

.desk-light .floating-panel-header:active {
  background-color: color-mix(in srgb, var(--brass) 16%, transparent) !important;
}

.desk-light .floating-panel-title {
  color: var(--sepia) !important;
  /* §22.6xx.outline-title — outline `#F4D58D` (4 lados) en modo claro. */
  text-shadow:
    -1px -1px 0 #F4D58D,
     1px -1px 0 #F4D58D,
    -1px  1px 0 #F4D58D,
     1px  1px 0 #F4D58D;
}

/* §22.6xx.outline-title — Override: cuando el header está en `.desk-light`
   PERO también tiene `--light-title` (texto gold), el outline debe seguir
   siendo oscuro (`--sepia`), no gold. Sin este override, la regla
   `.desk-light .floating-panel-title` gana por specificity y el gold
   desaparece contra el gold outline. Specificity (0,3,0) vs (0,2,0). */
.desk-light .floating-panel-header--light-title .floating-panel-title {
  text-shadow:
    -1px -1px 0 var(--sepia),
     1px -1px 0 var(--sepia),
    -1px  1px 0 var(--sepia),
     1px  1px 0 var(--sepia);
}

.desk-light .floating-panel-subtitle {
  color: var(--sepia-soft-text, #6B4D33) !important;
}

/* §22.119 (FIX): eliminado el override que forzaba sepia en los close */

/* Panel body: typography */
.desk-light .floating-panel .panel-body {
  color: var(--sepia) !important;
  background: transparent !important;
}

/* §22.6xx.656n — DROP del bloque HH (dialog-panel desk-light con textura).
   La base de .dialog-panel en chrome.css ya define el fondo plano
   var(--panel-cream). Solo preservamos position: relative que otros
   selectores asumen implícitamente. */
.desk-light .dialog-panel {
  position: relative !important;
}

/* El .dialog-overlay debe seguir siendo fixed full-screen y */
.desk-light .dialog-overlay {
  background: radial-gradient(circle at center, rgba(60, 30, 10, 0.45), rgba(20, 10, 5, 0.78)) !important;
  backdrop-filter: blur(2px);
}

.desk-light .library-overlay {
  background: radial-gradient(circle at center, rgba(60, 30, 10, 0.45), rgba(20, 10, 5, 0.78)) !important;
  backdrop-filter: blur(2px);
}

/* === II. Settings: colores sepia =================================== */
/* §22.6xx.257 — DROP masivo de CSS .settings-* obsoletas tras migración */

.desk-light .settings-tab-pane {
  background: transparent !important;
  color: var(--sepia);
}

/* §22.190c: los text inputs dentro de .settings-tab-pane heredan el */

/* === JJ. Brushed panels: brushes, palettes, layers, filters ======= */
.desk-light .brush-item {
  color: var(--sepia) !important;
  background: transparent;
  border-radius: 10px;
}

.desk-light .brush-item:hover {
  background: color-mix(in srgb, var(--brass) 16%, transparent) !important;
}

.desk-light .brush-item.is-active {
  background: color-mix(in srgb, var(--robin) 18%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.40),
    inset 0 -1px 0 var(--robin);
}

.desk-light .brush-item-meta {
  color: var(--sepia-soft-text, #6B4D33);
}

.desk-light .brush-card-thumb {
  border-color: var(--brass-dark);
  background: var(--panel-birch);
}

/* Layers panel */
.desk-light .layers-panel-row {
  background: transparent;
  color: var(--sepia);
}

.desk-light .layers-panel-row.is-active {
  background: color-mix(in srgb, var(--robin) 16%, transparent);
}

.desk-light .layers-panel-thumb {
  border-color: rgba(92, 64, 51, 0.30);
  background: var(--panel-birch);
}

.desk-light .layers-panel-name {
  color: var(--sepia);
}

/* === KK. Color picker (color wheel, triangle marker) ============== */
.desk-light .color-wheel-triangle {
  /* El canvas del color wheel: el aro y triángulo van sobre fondo claro */
  background: transparent;
}

.desk-light .color-marker {
  background-color: rgba(255, 255, 255, 0.80) !important;
  border-color: var(--sepia) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.30);
}

/* Pill de HEX input */
.desk-light .color-pill {
  background: transparent !important;
  border-color: var(--brass-dark) !important;
}

/* === LL. Toolbar inferior (page-nav-pill, undo-redo-pill) ========= */
.desk-light .page-nav-pill,
.desk-light .undo-redo-pill,
.desk-light .reference-toolbar {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%),
    var(--panel-cream) !important;
  background-size: cover, 240px 240px !important;
  background-blend-mode: normal, soft-light !important;
  border: 1px solid rgba(92, 64, 51, 0.20) !important;
  border-radius: 999px !important;
  color: var(--sepia) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1.5px 0 var(--brass),
    15px 25px 45px var(--desk-shadow) !important;
}

.desk-light .page-nav-pill .btn,
.desk-light .page-nav-pill .page-nav-btn,
.desk-light .undo-redo-pill .btn,
.desk-light .undo-redo-pill .undo-redo-btn,
.desk-light .reference-toolbar .btn {
  background: transparent !important;
  color: var(--sepia) !important;
}

.desk-light .page-nav-pill .btn:hover,
.desk-light .page-nav-pill .page-nav-btn:hover,
.desk-light .undo-redo-pill .btn:hover,
.desk-light .undo-redo-pill .undo-redo-btn:hover,
.desk-light .reference-toolbar .btn:hover {
  background: color-mix(in srgb, var(--brass) 22%, transparent) !important;
}

.desk-light .page-nav-pill-counter,
.desk-light .undo-redo-pill-label {
  color: var(--sepia);
}

/* === MM. Inline slider en navbar (size/opacity/flow) ============= */
.desk-light .navbar-inline-slider {
  background: rgba(255, 253, 248, 0.40);
  border: 1px solid rgba(92, 64, 51, 0.18);
  border-radius: 0.5rem;  /* 8px — menos redondeado que el wrapper (16px) */
  padding: 0.25rem 0.55rem;
  box-shadow:
    /* Drop shadow blanco SUTIL (highlight, abajo-derecha) */
    3px 3px 1.5px -0.5px rgba(255, 253, 253, 0.28),
    /* Drop shadow negro SUTIL (profundidad, arriba-izquierda) */
    -1px -1.5px 2px 0px rgba(0, 0, 0, 0.14),
    /* Inner shadow SUTIL (sombra interior del well) */
    inset 2px 2px 1.5px 2px rgba(0, 0, 0, 0.13);
}

.desk-light .navbar-inline-slider-icon {
  color: var(--sepia);
}

.desk-light .navbar-inline-slider-value {
  color: var(--sepia);
  font-variant-numeric: tabular-nums;
}

/* === NN. Brush dynamics inline satellite ========= */
.desk-light .brush-dynamics {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    var(--panel-cream) !important;
  border: 1px solid rgba(92, 64, 51, 0.20) !important;
  border-radius: 14px !important;
  color: var(--sepia) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1.5px 0 var(--brass),
    15px 25px 45px var(--desk-shadow) !important;
}

.desk-light .brush-dynamics-row {
  color: var(--sepia) !important;
  border-bottom-color: rgba(92, 64, 51, 0.10) !important;
}

.desk-light .brush-dynamics-label {
  color: var(--sepia) !important;
}

.desk-light .brush-dynamics-value {
  color: var(--sepia-soft-text, #6B4D33) !important;
}

/* === OO. Page-nav-pill counter & preview =========================== */
.desk-light .page-nav-pill-counter {
  background: var(--panel-birch);
  border: 1px solid var(--brass-dark);
}

/* === PP. Settings dialog tabs container ============================ */
/* §22.6xx.257 — DROP de .settings-tabs / .settings-dialog-header / */

/* === RR. Library dialog: header + footer + empty =================== */
.desk-light .library-header,
.desk-light .library-footer {
  background: transparent !important;
  border-color: rgba(92, 64, 51, 0.18) !important;
  color: var(--sepia);
}

.desk-light .library-pad-title,
.desk-light .library-card-title {
  color: var(--sepia) !important;
}

.desk-light .library-card-date,
.desk-light .library-pad-count {
  color: var(--sepia-soft-text, #6B4D33) !important;
}

.desk-light .library-card-ratio,
.desk-light .library-card-active-badge {
  background-color: var(--brass) !important;
  color: var(--ivory) !important;
}

.desk-light .library-card-active-badge {
  background-color: var(--robin) !important;
}

.desk-light .library-empty-state {
  color: var(--sepia-soft-text, #6B4D33) !important;
}
/* === UU. Reference dialog ========================================= */
.desk-light .reference-dialog {
  /* El dialog usa .dialog-panel ya cubierto */
}

.desk-light .reference-drop-zone {
  background: color-mix(in srgb, var(--brass) 8%, transparent) !important;
  border: 2px dashed rgba(92, 64, 51, 0.30) !important;
  color: var(--sepia-soft-text, #6B4D33) !important;
  border-radius: 12px;
}

.desk-light .reference-drop-zone:hover {
  background: color-mix(in srgb, var(--brass) 16%, transparent) !important;
  border-color: var(--brass-dark) !important;
}

/* === VV. Pinned color wheel sheet ================================== */
.desk-light .pinned-color-wheel-sheet {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 60%),
    var(--panel-cream) !important;
  background-size: cover, 240px 240px !important;
  background-blend-mode: normal, soft-light !important;
  border: 1px solid rgba(92, 64, 51, 0.20) !important;
  border-radius: 18px !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1.5px 0 var(--brass),
    15px 25px 45px var(--desk-shadow) !important;
  color: var(--sepia);
}

/* === WW. Coverflow / Preview ====================================== */
.desk-light .preview-modal {
  background:
    radial-gradient(circle at center, rgba(60, 30, 10, 0.65), rgba(20, 10, 5, 0.92)) !important;
  color: var(--ivory);
}

.desk-light .preview-leaf {
  background: var(--panel-cream);
  border: 1px solid var(--brass-dark);
  border-radius: 4px;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1.5px 0 var(--brass),
    0 8px 24px rgba(60, 30, 10, 0.50);
}

.desk-light .preview-leaf img {
  background: var(--panel-cream);
}

/* === XX. Hover para texto e iconos en zonas claras ================ */
.desk-light .text-base-content\/60,
.desk-light .text-base-content\/55,
.desk-light .text-base-content\/40 {
  color: var(--sepia-soft-text, #6B4D33) !important;
}

.desk-light .text-base-content\/30 {
  color: var(--brass-dark) !important;
}

/* === YY. Helpers finales: bordes y transparencias ================ */
.desk-light .border-white\/5,
.desk-light .border-white\/10,
.desk-light .border-white\/15 {
  border-color: rgba(92, 64, 51, 0.18) !important;
}

.desk-light .border-white\/20 {
  border-color: rgba(92, 64, 51, 0.25) !important;
}

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === AAA. Tray / paper-light / panels: textura visible =============== */
/* §22.6xx.656n — DROP de los bloques BBB, CCC, DDD, EEE (textura + blend).
   La base de .floating-panel y .dialog-panel en chrome.css ya define el
   fondo plano var(--panel-cream). .paper-light se define en widgets.css. */
.tray {
  background-color: var(--panel-cream);
}

/* §22.6xx.257 — DROP de CSS .settings-* (settings-rows + settings-row-title */

/* Floating panel title */
.desk-light .floating-panel-title {
  color: var(--sepia) !important;
  font-size: 1.15rem !important;
  font-weight: 700 !important;
  /* §22.6xx.outline-title — outline `#F4D58D` (4 lados) en modo claro. */
  text-shadow:
    -1px -1px 0 #F4D58D,
     1px -1px 0 #F4D58D,
    -1px  1px 0 #F4D58D,
     1px  1px 0 #F4D58D;
}

.desk-light .floating-panel-subtitle {
  color: var(--sepia-soft-text, #6B4D33) !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  margin-top: 0.10rem;
}

/* Label text: sepia fuerte, peso medio */
.desk-light .label-text {
  color: var(--sepia) !important;
  font-weight: 600;
}

/* Brush item text */
.desk-light .brush-item {
  color: var(--sepia) !important;
  font-weight: 600;
}

.desk-light .brush-item-meta {
  color: var(--sepia-soft-text, #6B4D33) !important;
  font-weight: 500;
}

/* Library card title */
.desk-light .library-card-title {
  color: var(--sepia) !important;
  font-size: 0.92rem !important;
  font-weight: 700;
  text-shadow: 0 1px 0 rgba(255, 253, 248, 0.40);
}

.desk-light .library-card-date {
  color: var(--sepia-soft-text, #6B4D33) !important;
  font-size: 0.72rem !important;
  font-weight: 500;
}

.desk-light .library-pad-title {
  color: var(--sepia) !important;
  font-weight: 700;
  font-size: 0.90rem;
}

.desk-light .library-pad-count {
  color: var(--sepia-soft-text, #6B4D33) !important;
  font-weight: 600;
}

/* === HHH. text-base-content utility → sepia =========================== */
/* Tailwind JIT genera estas utilities si aparecen en el HTML. Las */
.desk-light .text-base-content {
  color: var(--sepia) !important;
}

.desk-light .text-base-content\/96 {
  color: var(--sepia) !important;
}

.desk-light .text-base-content\/90 {
  color: var(--sepia) !important;
}

.desk-light .text-base-content\/80 {
  color: var(--sepia) !important;
}

.desk-light .text-base-content\/70 {
  color: var(--sepia-soft-text, #6B4D33) !important;
}

.desk-light .text-base-content\/60 {
  color: var(--sepia-soft-text, #6B4D33) !important;
}

.desk-light .text-base-content\/55 {
  color: var(--sepia-soft-text, #6B4D33) !important;
}

.desk-light .text-base-content\/45 {
  color: var(--sepia-soft-text, #6B4D33) !important;
}

.desk-light .text-base-content\/40 {
  color: #7A5D40 !important;
}

.desk-light .text-base-content\/30 {
  color: var(--brass-dark) !important;
}

.desk-light .text-base-content\/20 {
  color: var(--brass-dark) !important;
}

/* === III. Borders utility → sepia translúcido ====================== */
.desk-light .border-white\/5 {
  border-color: rgba(92, 64, 51, 0.12) !important;
}

.desk-light .border-white\/10 {
  border-color: rgba(92, 64, 51, 0.18) !important;
}

.desk-light .border-white\/15 {
  border-color: rgba(92, 64, 51, 0.22) !important;
}

.desk-light .border-white\/20 {
  border-color: rgba(92, 64, 51, 0.28) !important;
}

.desk-light .border-base-content\/10 {
  border-color: rgba(92, 64, 51, 0.18) !important;
}

/* === JJJ. Background utility con transparencia → paper-birch ======== */
.desk-light .bg-base-100\/30 {
  background-color: color-mix(in srgb, var(--panel-birch) 30%, transparent) !important;
}

.desk-light .bg-base-100\/55 {
  background-color: color-mix(in srgb, var(--panel-birch) 55%, transparent) !important;
}

.desk-light .bg-base-100\/65 {
  background-color: color-mix(in srgb, var(--panel-birch) 65%, transparent) !important;
}

.desk-light .bg-base-100\/70 {
  background-color: color-mix(in srgb, var(--panel-birch) 70%, transparent) !important;
}

.desk-light .bg-base-100\/80 {
  background-color: color-mix(in srgb, var(--panel-cream) 80%, transparent) !important;
}

.desk-light .bg-base-100\/90 {
  background-color: color-mix(in srgb, var(--panel-cream) 90%, transparent) !important;
}

.desk-light .bg-base-200\/30 {
  background-color: color-mix(in srgb, var(--panel-birch) 30%, transparent) !important;
}

.desk-light .bg-base-200\/40 {
  background-color: color-mix(in srgb, var(--panel-birch) 40%, transparent) !important;
}

.desk-light .bg-base-200\/55 {
  background-color: color-mix(in srgb, var(--panel-birch) 55%, transparent) !important;
}

.desk-light .bg-base-200\/60 {
  background-color: color-mix(in srgb, var(--panel-birch) 60%, transparent) !important;
}

.desk-light .bg-base-200\/65 {
  background-color: color-mix(in srgb, var(--panel-birch) 65%, transparent) !important;
}

.desk-light .bg-base-200\/70 {
  background-color: color-mix(in srgb, var(--panel-birch) 70%, transparent) !important;
}

.desk-light .bg-base-200\/90 {
  background-color: color-mix(in srgb, var(--panel-birch) 90%, transparent) !important;
}

.desk-light .bg-base-300\/10 {
  background-color: color-mix(in srgb, var(--panel-birch) 10%, transparent) !important;
}

.desk-light .bg-base-300\/30 {
  background-color: color-mix(in srgb, var(--panel-birch) 30%, transparent) !important;
}

.desk-light .bg-base-300\/70 {
  background-color: color-mix(in srgb, var(--panel-birch) 70%, transparent) !important;
}

.desk-light .bg-base-300 {
  background-color: var(--panel-birch) !important;
}

.desk-light .bg-base-200 {
  background-color: var(--panel-cream) !important;
}

.desk-light .bg-base-100 {
  background-color: var(--ivory) !important;
}

.desk-light .bg-base-content {
  background-color: var(--sepia) !important;
}

/* === KKK. Border utility específicas ================================ */
.desk-light .border-base-300\/70,
.desk-light .border-base-300 {
  border-color: rgba(92, 64, 51, 0.25) !important;
}

.desk-light .border-base-200 {
  border-color: rgba(92, 64, 51, 0.18) !important;
}

.desk-light .border-base-content\/30 {
  border-color: rgba(92, 64, 51, 0.40) !important;
}

/* === LLL. Hover utilities → sepia translúcido ======================== */
.desk-light .hover\:bg-base-200\/70:hover {
  background-color: color-mix(in srgb, var(--panel-birch) 70%, transparent) !important;
}

.desk-light .hover\:bg-base-content\/30:hover {
  background-color: color-mix(in srgb, var(--sepia) 30%, transparent) !important;
}

.desk-light .hover\:border-base-content\/30:hover {
  border-color: rgba(92, 64, 51, 0.40) !important;
}

/* === MMM. Primary (terracota) utility → robin ======================= */
.desk-light .bg-primary\/10 {
  background-color: color-mix(in srgb, var(--robin) 10%, transparent) !important;
}

.desk-light .text-primary {
  color: var(--robin) !important;
}

.desk-light .border-primary {
  border-color: var(--robin) !important;
}

.desk-light .text-primary-content {
  color: var(--ivory) !important;
}

.desk-light .bg-primary {
  background-color: var(--robin) !important;
}

.desk-light .bg-primary\/15 {
  background-color: color-mix(in srgb, var(--robin) 15%, transparent) !important;
}

.desk-light .bg-primary\/20 {
  background-color: color-mix(in srgb, var(--robin) 20%, transparent) !important;
}

.desk-light .ring-primary {
  --tw-ring-color: var(--robin) !important;
}

/* === NNN. Gradient utilities → sepia-tinted ========================= */

/* === OOO. Dialog overlay z-index fix ================================= */
/* .3: asegurar que los dialogs siguen cubriendo al viewport */
.desk-light .dialog-overlay,
.desk-light .library-overlay {
  z-index: 100;
}

/* === PPP. Body hereda .desk-light para chrome ======================== */
/* El body y app-shell llevan .desk-light. El viewport NO. Esta */
/* (No requiere cambios CSS — la cascada ya lo hace correctamente.) */

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === QQQ. Textura con multiply para veta visible ===================== */
/* §22.6xx.656n — DROP de .skeuo-wood-horizontal (clase muerta, sin HTML
   que la use; verificado con grep). El bloque RRR se conserva: aplica
   la textura multiply a la navbar y sidebar (chrome fijo de la app,
   no son ventanas ni dialogs). */

/* === RRR. Aplicar textura multiply a TODOS los chrome ================ */
/* Navbar (header .tray .tray-top) */
header.tray.tray-top,
.tray.tray-top {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 250, 235, 0.10), rgba(92, 64, 51, 0.06) 100%),
    var(--ui-texture-panel-alt, url('../resources/ui-textures/panel-cream.webp')) !important;
  background-size: cover, 240px 240px !important;
  background-blend-mode: normal, multiply !important;
}

/* Sidebar pill (.tray.tray-side) */
.tray.tray-side {
  background-color: var(--panel-birch) !important;
  background-image:
    linear-gradient(90deg, rgba(255, 250, 235, 0.10), rgba(92, 64, 51, 0.06) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 240px 240px !important;
  background-blend-mode: normal, multiply !important;
}

/* §22.6xx.656n — DROP de los overrides de .floating-panel, .dialog-panel,
   .paper-light y .library-card con multiply + 240px. Las bases en
   chrome.css y widgets.css ya definen el fondo plano. */

/* §22.6xx.257 — DROP de .settings-rows (segunda ubicación, obsoleto). */

/* Pills inferiores */
.desk-light .page-nav-pill,
.desk-light .undo-redo-pill,
.desk-light .reference-toolbar {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 250, 235, 0.10), rgba(92, 64, 51, 0.06) 100%),
    var(--ui-texture-panel-alt, url('../resources/ui-textures/panel-cream.webp')) !important;
  background-size: cover, 240px 240px !important;
  background-blend-mode: normal, multiply !important;
}

/* === SSS. Brush Settings panel: labels grandes y legibles ============ */
/* El panel de settings del pincel usa clases Tailwind inline: */
.desk-light .brush-view-settings {
  color: var(--sepia);
}

/* Labels y headers internos (sliders, toggles) */
.desk-light .brush-view-settings .mb-0\.5.flex.justify-between,
.desk-light .brush-view-settings span.text-\[10\.5px\] {
  font-size: 0.82rem !important;
  line-height: 1.35 !important;
  color: var(--sepia) !important;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(255, 253, 248, 0.55);
}

/* Toggles labels */
.desk-light .brush-view-settings label.flex.items-center.justify-between>span.text-xs {
  font-size: 0.85rem !important;
  line-height: 1.4 !important;
  color: var(--sepia) !important;
  font-weight: 600;
}

/* Hint inicial */
.desk-light .brush-view-settings p.text-\[9\.5px\] {
  font-size: 0.75rem !important;
  line-height: 1.45 !important;
  color: var(--sepia-soft-text, #6B4D33) !important;
}

/* Separadores entre grupos */
.desk-light .brush-view-settings .border-t {
  border-color: rgba(92, 64, 51, 0.18) !important;
}

/* Select interno */
.desk-light .brush-view-settings .select {
  margin-top: 0.20rem;
}

/* === TTT. Brushes panel: lista y cards de pinceles =================== */
.desk-light .brush-item {
  background-color: transparent;
}

.desk-light .brush-item:hover {
  background-color: color-mix(in srgb, var(--brass) 22%, transparent) !important;
}

.desk-light .brush-item.is-active {
  background-color: color-mix(in srgb, var(--robin) 20%, transparent) !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.40),
    inset 0 -1px 0 var(--robin);
}

.desk-light .brush-card-thumb {
  background-color: var(--panel-birch);
  background-image:
    linear-gradient(180deg, rgba(255, 250, 235, 0.15), rgba(92, 64, 51, 0.06) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp'));
  background-size: cover, 240px 240px;
  background-blend-mode: normal, multiply;
  border-color: var(--brass-dark);
}

/* === UUU. Navbar inline slider containers ============================= */
.desk-light .navbar-inline-slider {
  background-color: rgba(255, 250, 235, 0.55) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 250, 235, 0.15), rgba(92, 64, 51, 0.08) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 200px 200px !important;
  background-blend-mode: normal, multiply !important;
  border: 1px solid rgba(92, 64, 51, 0.22);
  border-radius: 999px;
  padding: 0.30rem 0.65rem;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.50),
    inset 0 -1px 0 var(--brass);
}

/* === VVV. Tabs, sub-paneles y zonas de transición =================== */
/* §22.6xx.257 — DROP de .settings-tabs (segunda ubicación, obsoleto). */

.desk-light .settings-tab-btn {
  background-color: transparent;
}

.desk-light .settings-tab-btn.is-active {
  /* §22.6xx.658-iter17 — Brass via --tab-bg-color. Se quitan border-radius
     y margin-left para que la silueta rasgada del ::before sea la misma
     forma en hover y active (solo cambia el color del bg + texto). */
  --tab-bg-color: var(--brass, #c85a29) !important;
  color: #FFFDF8 !important;
  border: 0 !important;
  box-shadow: none !important;
}

.desk-light .settings-tab-btn:hover {
  --tab-bg-color: color-mix(in srgb, var(--brass) 18%, transparent) !important;
  /* §22.6xx.658-iter10 — texto + icono en color de acento (brass) en hover,
     no sepia. Coherente con el active (texto blanco sobre fondo brass). */
  color: var(--brass-text, #93411c) !important;
}
.desk-light .settings-tab-btn:hover .ti,
.desk-light .settings-tab-btn:hover i {
  color: var(--brass-text, #93411c) !important;
}

/* === WWW. Body y app-shell: textura sutil de mesa ==================== */
body.desk-light,
.app-shell.desk-light {
  background-color: var(--desk-oak) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 240, 200, 0.06), rgba(60, 30, 10, 0.12)),
    url('../resources/ui-textures/desk-oak.webp') !important;
  background-size: cover, 480px 480px !important;
  background-blend-mode: normal, soft-light !important;
  background-attachment: fixed !important;
}

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === XXX. Reversión a soft-light + overlay cream generoso ============ */
/* Linear-gradient cream/blanco al 55% deja pasar sólo las vetas */
.tray,
.tray.tray-top {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 252, 244, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel-alt, url('../resources/ui-textures/panel-cream.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
}

/* === §22.6xx.656bl — Paper noise utility: textura de ruido sutil === */
/* Aplica la textura paper-noise.svg SOBRE el color --panel-cream con
   background-blend-mode: soft-light. NO modifica el color base — la
   textura es un noise sepia (RGB ≈ 92, 71, 51) con alpha 0.32 que se
   FUNDE con el cream. Sensación de "papel texturizado suave", como
   un cuaderno antiguo. Aplicar a dialogs/ventanas que usan
   --panel-cream para coherencia visual. */
.paper-noise-bg {
  background-color: var(--panel-cream) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: multiply !important;
}

/* §22.6xx.656bl iter 5 — Paper noise GLOBAL en TODOS los dialogs/ventanas.
   §22.6xx.656bl iter 6 — Cambio soft-light → multiply. Roberto:
   "lo que veo es que el grano que generas es de color blanco".
   Con soft-light, el sepia oscuro sobre cream produce un ACLARADO
   (no oscurecimiento como pensábamos). Multiply oscurece claramente.
   Color del PNG: (32, 22, 14) — casi negro con tinte sepia. */
.dialog-panel,
.dialog-panel-wrapper,
.floating-panel,
.paper-light,
.desk-light .library-card,
.confirm-dialog-panel,
.export-dialog-content,
.brush-creator-page,
.dialog-panel-light {
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: multiply !important;
}

.tray.tray-side {
  background-color: var(--panel-birch) !important;
  background-image:
    linear-gradient(90deg, rgba(255, 252, 244, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
}

/* §22.6xx.656n — DROP de los overrides de .floating-panel, .dialog-panel,
   .paper-light y .library-card con soft-light + 320px. Las bases en
   chrome.css y widgets.css ya definen el fondo plano. */

/* §22.6xx.257 — DROP de .settings-rows (tercera ubicación, obsoleto). */

.desk-light .page-nav-pill,
.desk-light .undo-redo-pill,
.desk-light .reference-toolbar {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 252, 244, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel-alt, url('../resources/ui-textures/panel-cream.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
}

.desk-light .navbar-inline-slider {
  background-color: rgba(255, 252, 244, 0.65) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 252, 244, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
  border-radius: 0.5rem;  /* 8px — menos redondeado que el wrapper (16px) */
  box-shadow:
    /* Drop shadow blanco SUTIL (highlight, abajo-derecha) */
    3px 3px 1.5px -0.5px rgba(255, 253, 253, 0.28),
    /* Drop shadow negro SUTIL (profundidad, arriba-izquierda) */
    -1px -1.5px 2px 0px rgba(0, 0, 0, 0.14),
    /* Inner shadow SUTIL (sombra interior del well) */
    inset 2px 2px 1.5px 2px rgba(0, 0, 0, 0.13);
}

.desk-light .brush-card-thumb {
  background-color: var(--panel-birch);
  background-image:
    linear-gradient(180deg, rgba(255, 252, 244, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp'));
  background-size: cover, 320px 320px;
  background-blend-mode: normal, soft-light;
}

/* === YYY. Body sigue con la textura de mesa (intacta de .4) == */
/* No se toca — la mesa sí debe verse con la veta oak más marcada. */
body.desk-light,
.app-shell.desk-light {
  background-color: var(--desk-oak) !important;
  background-image:
    linear-gradient(135deg, rgba(255, 240, 200, 0.06), rgba(60, 30, 10, 0.12)),
    url('../resources/ui-textures/desk-oak.webp') !important;
  background-size: cover, 480px 480px !important;
  background-blend-mode: normal, soft-light !important;
  background-attachment: fixed !important;
}

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === ZZZ. Navbar (header.tray.tray-top) — cream + veta ============== */
header.tray.tray-top,
.app-shell>header.tray.tray-top,
header[class*="tray"][class*="tray-top"] {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 246, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
}

/* === AAAA. Sidebar pill (.tray.tray-side) — cream + veta ============ */
.tray.tray-side,
nav.tray.tray-side,
nav[class*="tray"][class*="tray-side"] {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(90deg, rgba(255, 253, 246, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
}

/* === BBBB. .tray base genérico — cream + veta ======================= */
/* Cubre el caso .tray sin -top ni -side (bandejas genéricas). */
.tray:not(.tray-top):not(.tray-side):not(.floating) {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 246, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
}

/* === CCCC. Pero el .dialog-panel y .floating-panel sí conservan veta = */

/* === DDDD. Body sigue con la textura de mesa (intacta) ================ */
/* (No se toca — la mesa sí debe verse con la veta oak.) */

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === EEEE. Navbar (header.tray.tray-top) ============================ */
/* Sombra de contacto en la base (Y positivo, blur pequeño, opacidad alta). */
header.tray.tray-top,
.app-shell>header.tray.tray-top,
header[class*="tray"][class*="tray-top"] {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 246, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
  box-shadow:
    /* Drop shadow general (lejos, difusa) */
    0 22px 38px -8px rgba(60, 30, 10, 0.32),
    /* Sombra de contacto (cerca, oscura) — sale de la base del navbar */
    0 6px 10px -2px rgba(60, 30, 10, 0.45),
    /* Sombra de contacto en los costados (simula apoyo lateral) */
    6px 8px 14px -6px rgba(60, 30, 10, 0.22),
    -6px 8px 14px -6px rgba(60, 30, 10, 0.22),
    /* Ribete superior de marfil (highlight) */
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    /* Hilo de latón inferior (ribete) */
    inset 0 -1.5px 0 var(--brass) !important;
}

/* === FFFF. Toolbar pill (nav.tray.tray-side) ======================== */

/* === GGGG. Variantes según lado (cuando invertInterfacePosition) ==== */

/* === HHHH. .tray base genérico (bandejas sin variantes) =========== */
.tray:not(.tray-top):not(.tray-side):not(.floating) {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 246, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
  box-shadow:
    0 16px 28px -6px rgba(60, 30, 10, 0.30),
    0 4px 8px -2px rgba(60, 30, 10, 0.40),
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* === IIII. Body y app-shell (mesa) — sin cambios ===================== */

/* === JJJJ. Pulido: page-nav-pill, undo-redo-pill — sombras contacto = */
.desk-light .page-nav-pill,
.desk-light .undo-redo-pill,
.desk-light .reference-toolbar {
  box-shadow:
    /* Drop shadow general */
    0 16px 26px -6px rgba(60, 30, 10, 0.32),
    /* Sombra de contacto (cerca, oscura) */
    0 4px 8px -2px rgba(60, 30, 10, 0.40),
    /* Ribetes */
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */
* inset 0 -3px 0 sepia-dark,
/* línea de altura interna */
* inset 1.5px 0 0 sepia-dark,
/* lateral */
* inset -1.5px 0 0 sepia-dark,
/* lateral */
* 0 4px 0 desk-oak,
/* ALTURA: sombra dura de 4px */
* 0 6px 14px sepia-translúcido;
/* drop shadow difusa */
* * Apliquemos el MISMO patrón a los paneles: * 1. inset highlight superior (1px marfil) * 2. inset suelo inferior (-3px sepia oscuro) * 3. SOMBRA DURA INFERIOR (0 4-6px 0 color) ← ESTA ES LA ALTURA * 4. drop shadow difusa más alejada * * Para el toolbar-pill (vertical): la altura se manifiesta en los * lados (offset X en la sombra dura) Y en la base (offset Y). Si el * pill está a la izquierda,
la sombra dura va hacia la derecha * (-X) porque el lado opuesto al apoyo "cae" hacia la mesa. * * Si está a la derecha,
la sombra dura va hacia la izquierda (+X). * ════════════════════════════════════════════════════════════════════ 

/* === KKKK. Navbar: ALTURA física estilo botón ======================== */
/* Mismo patrón que btn-wood pero en un objeto horizontal grande. */
header.tray.tray-top,
.app-shell>header.tray.tray-top,
header[class*="tray"][class*="tray-top"] {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 246, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
  box-shadow:
    /* 1. Highlight superior (marfil dentro) */
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    /* 2. Suelo inferior (línea de altura dentro del navbar) */
    inset 0 -3px 0 rgba(60, 30, 10, 0.32),
    /* 3. SOMBRA DURA INFERIOR (ALTURA del navbar) — 4px de grosor */
    0 5px 0 rgba(60, 30, 10, 0.22),
    /* 4. Drop shadow difusa (peso sobre la mesa) */
    0 8px 18px -2px rgba(60, 30, 10, 0.28),
    /* 5. Hilo de latón inferior */
    inset 0 -1.5px 0 var(--brass) !important;
  /* El border-radius actual del navbar debe permitir que las sombras */
}

/* === LLLL. Toolbar pill: ALTURA física lateral + base ================ */

/* === MMMM. Toolbar pill IZQUIERDA: sombra dura hacia la derecha ==== */

/* === NNNN. Toolbar pill DERECHA: espejo ============================== */

/* === OOOO. Bandejas genéricas .tray ================================ */
.tray:not(.tray-top):not(.tray-side):not(.floating) {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 246, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -3px 0 rgba(60, 30, 10, 0.30),
    0 4px 0 rgba(60, 30, 10, 0.20),
    0 7px 14px -2px rgba(60, 30, 10, 0.28),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* === PPPP. Pills inferiores: ALTURA física =========================== */
.desk-light .page-nav-pill,
.desk-light .undo-redo-pill,
.desk-light .reference-toolbar {
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -3px 0 rgba(60, 30, 10, 0.30),
    0 4px 0 rgba(60, 30, 10, 0.20),
    0 7px 14px -2px rgba(60, 30, 10, 0.28),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* §22.6xx.656n — DROP de QQQQ: box-shadow con altura física para
   .floating-panel y .dialog-panel. Sin sombras. */

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === RRRR. Navbar: 5px → 9px de altura =============================== */
/* Sombra dura más profunda. Mantenemos el patrón completo. */
header.tray.tray-top,
.app-shell>header.tray.tray-top,
header[class*="tray"][class*="tray-top"] {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 246, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
  border-radius: 16px !important;
  box-shadow:
    /* 1. Highlight superior */
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    /* 2. Línea de altura base (más profunda) */
    inset 0 -5px 0 rgba(60, 30, 10, 0.40),
    /* 3. SOMBRA DURA — 9px de grosor (más visible) */
    0 9px 0 rgba(60, 30, 10, 0.28),
    /* 4. Drop shadow difusa */
    0 12px 22px -2px rgba(60, 30, 10, 0.32),
    /* 5. Hilo de latón inferior */
    inset 0 -1.5px 0 var(--brass) !important;
}

/* === SSSS. Toolbar pill: border-radius 999px → 14px + 9px altura === */

/* === TTTT. Bandejas genéricas: 4px → 7px de altura =================== */
.tray:not(.tray-top):not(.tray-side):not(.floating) {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, rgba(255, 253, 246, 0.55), rgba(255, 248, 232, 0.45) 100%),
    var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -4px 0 rgba(60, 30, 10, 0.38),
    0 7px 0 rgba(60, 30, 10, 0.26),
    0 10px 18px -2px rgba(60, 30, 10, 0.30),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* === UUUU. Pills inferiores: 4px → 7px ============================== */
.desk-light .page-nav-pill,
.desk-light .undo-redo-pill,
.desk-light .reference-toolbar {
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -4px 0 rgba(60, 30, 10, 0.38),
    0 7px 0 rgba(60, 30, 10, 0.26),
    0 10px 18px -2px rgba(60, 30, 10, 0.30),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* §22.6xx.656n — DROP de VVVV: box-shadow con altura visible más profunda. */

/* === WWWW. Botones internos del toolbar-pill: ajuste ================= */

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === XXXX. Navbar totalmente opaco =================================== */
header.tray.tray-top,
.app-shell>header.tray.tray-top,
header[class*="tray"][class*="tray-top"] {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, var(--ivory) 0%, var(--panel-cream) 100%) !important;
  background-size: cover !important;
  background-blend-mode: normal !important;
  border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.95),
    inset 0 -5px 0 rgba(60, 30, 10, 0.40),
    0 9px 0 rgba(60, 30, 10, 0.28),
    0 12px 22px -2px rgba(60, 30, 10, 0.32),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* === YYYY. Toolbar pill totalmente opaco ============================= */

/* === ZZZZ. Bandejas genéricas + pills inferiores ===================== */
.tray:not(.tray-top):not(.tray-side):not(.floating) {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, var(--ivory) 0%, var(--panel-cream) 100%) !important;
  background-size: cover !important;
  background-blend-mode: normal !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.95),
    inset 0 -4px 0 rgba(60, 30, 10, 0.38),
    0 7px 0 rgba(60, 30, 10, 0.26),
    0 10px 18px -2px rgba(60, 30, 10, 0.30),
    inset 0 -1.5px 0 var(--brass) !important;
}

.desk-light .page-nav-pill,
.desk-light .undo-redo-pill,
.desk-light .reference-toolbar {
  background-color: var(--panel-cream) !important;
  background-image:
    linear-gradient(180deg, var(--ivory) 0%, var(--panel-cream) 100%) !important;
  background-size: cover !important;
  background-blend-mode: normal !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.95),
    inset 0 -4px 0 rgba(60, 30, 10, 0.38),
    0 7px 0 rgba(60, 30, 10, 0.26),
    0 10px 18px -2px rgba(60, 30, 10, 0.30),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === AAAA. Toolbar pill pegado al borde ============================== */

/* Cuando pill está a la izquierda sin rounded a la izq, ajustamos la */

/* === BBBB. Main y viewport: zona del header "libre" ================== */
/* El header ahora ocupa el top completo. El <main> que viene después */
main.relative {
  margin-top: 0 !important;
}

/* Pero queremos un pequeño espacio visual entre el navbar y el viewport, */
main.relative {
  padding-top: 12px !important;
}

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === CCCC. Quitar reglas de .11 que pegaban al borde ======== */

/* === DDDD. Sombras restauradas a las variantes originales =========== */

/* Genérico (fallback sin variante) */

/* === EEEE. Quitar padding-top artificial del main ================== */
main.relative {
  padding-top: 0 !important;
}/* === GGGG. Sliders inline del navbar: también suben ================== */
header.tray.tray-top .navbar-inline-slider {
  transform: translateY(-1px);
}

/* === HHHH. Pills del navbar (sliders envueltos) ===================== */
/* Si los sliders tienen su propia pill .navbar-inline-slider, asegurar */
header.tray.tray-top .navbar-inline-slider-value {
  /* El valor numérico queda alineado con el centro de la pill */
  display: flex;
  align-items: center;
}

/* ════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════ */

/* === IIII. Navbar: 1 línea de background en vez de 4 ================= */
header.tray.tray-top,
.app-shell>header.tray.tray-top,
header[class*="tray"][class*="tray-top"] {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--panel-cream) 100%), var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
  background-color: transparent !important border-radius: 16px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.95),
    inset 0 -5px 0 rgba(60, 30, 10, 0.40),
    0 9px 0 rgba(60, 30, 10, 0.28),
    0 12px 22px -2px rgba(60, 30, 10, 0.32),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* === JJJJ. Toolbar pill: 1 línea de background ====================== */

/* === KKKK. Bandejas genéricas: 1 línea ============================== */
.tray:not(.tray-top):not(.tray-side):not(.floating) {
  background: linear-gradient(180deg, var(--ivory) 0%, var(--panel-cream) 100%), var(--ui-texture-panel, url('../resources/ui-textures/panel-birch.webp')) !important;
  background-size: cover, 320px 320px !important;
  background-blend-mode: normal, soft-light !important;
  background-color: transparent !important border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.95),
    inset 0 -4px 0 rgba(60, 30, 10, 0.38),
    0 7px 0 rgba(60, 30, 10, 0.26),
    0 10px 18px -2px rgba(60, 30, 10, 0.30),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* === LLLL. Pills inferiores: 1 línea ================================ */
.desk-light .page-nav-pill,
.desk-light .undo-redo-pill,
.desk-light .reference-toolbar {
  /* §22.6xx.658dr.18 — paper-noise como TERCERA capa: la tarjeta conserva
     su degradado ivory→cream y su panel-birch; encima, el noise repetido a
     240px como en los steppers de la navbar. Esta es la ÚLTIMA regla
     `.desk-light .undo-redo-pill` que fija fondo (dialogs.css:1614), así que
     es la que gana en cascada. */
  /* §22.6xx.658dr.19 — Cream SOLIDO + paper-noise, igual que
     `.navbar-stepper`. Antes era un degradado ivory→cream + panel-birch: el
     `--ivory` es #FFFDF8 (casi blanco), así que la parte alta de la tarjeta
     se leía BLANCA y no había textura. Ahora el fondo es el cream del token
     con el noise encima, sin capas extra. */
  background-color: var(--panel-cream) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
  border-radius: 14px !important;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.95),
    inset 0 -4px 0 rgba(60, 30, 10, 0.38),
    0 7px 0 rgba(60, 30, 10, 0.26),
    0 10px 18px -2px rgba(60, 30, 10, 0.30),
    inset 0 -1.5px 0 var(--brass) !important;
}

/* §22.6xx.656n — DROP de MMMM: combo de background gradient+texture+blend
   + box-shadow con altura visible. La base en chrome.css define el fondo
   plano var(--panel-cream) sin sombras. */

/* === NNNN. Body: simplificado ======================================== */
.desk-light {
  background: var(--panel-cream) !important;
  color: var(--sepia) !important;
}
.color-launcher-icon.ti,
.color-launcher-dot > .ti {
  font-size: 1rem;
  line-height: 1;
  /* El icono hereda el color del .color-launcher-dot (que lo recibe */
  color: inherit;
}

/* Cuando el botón Color está activo (panel color abierto), el dot */
.btn-wood.active .color-launcher-dot {
  box-shadow:
    inset 0 0 0 1.5px rgba(60, 30, 10, 0.40),
    inset 0 1px 1px rgba(255, 255, 255, 0.22),
    inset 0 -1px 1px rgba(0, 0, 0, 0.18),
    0 0 0 2px rgba(200, 90, 41, 0.18);
}

.navbar-stepper {
  display: inline-flex;
  flex-direction: column;
  gap: 0.25rem;
  /* .5 v5: look REESCRITO. Antes era paper-light */
  padding: 0.55rem 0.7rem;
  border-radius: 16px;
  /* §22.6xx.658 — Mismo color cream + paper-noise que los panels (coherencia visual). */
  background-color: var(--panel-cream, #f7e6c0);
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
  box-shadow:
    /* 1. Drop shadow BLANCO (highlight carved, abajo-derecha) */
    3px 3px 2px -1px rgba(255, 253, 253, 0.85),
    /* 2. Drop shadow NEGRO (profundidad carved, arriba-izquierda) */
    -2px -3px 4px 0px rgba(0, 0, 0, 0.28),
    /* 3. Inset ring NEGRO sutil (línea interior) */
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    /* 4. Inset NEGRO (inner shadow del well) */
    inset 2px 3px 2px 2px rgba(0, 0, 0, 0.18),
    /* 5. Drop shadow NEGRO exterior (elevación sobre la madera) */
    0 4px 10px rgba(0, 0, 0, 0.20);
  /* No seleccionable por defecto — el drag es interactivo, no */
  user-select: none;
  -webkit-user-select: none;
  min-width: 10rem;
}

/* §22.6xx.506c — Solo en touch mode: bloquea scroll/zoom en iOS
 * cuando el dedo arrastra sobre un stepper. Se activa con la clase
 * .touch-mode en el body (gestionada por app.js). Sin este toggle,
 * en algunos navegadores (Chrome hybrid) touch-action: none interfiere
 * con el drag del mouse. En modo desktop normal, el drag del mouse
 * funciona sin restricciones. */
body.touch-mode .navbar-stepper {
  touch-action: none;
}

.navbar-stepper-label {
  font-family: 'Cherry Swash', cursive;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(60, 35, 15, 0.78);
  line-height: 1;
  white-space: nowrap;
  padding-left: 0.05rem;
  user-select: none;
  -webkit-user-select: none;
}

/* §22.6xx.658dr.732/733 — Label + helper de info en la misma línea.
   `space-between`: el label a la izquierda, como los demás steppers, y el
   icono pegado al borde derecho de la fila. Con `flex-start` el icono quedaba
   justo detrás del texto; con `center` el label se iba al medio del wrapper. */
.navbar-stepper-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.15rem;
}
.navbar-stepper-label-row .stepper-help-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  color: rgba(60, 35, 15, 0.45);
  transition: color 0.15s ease;
}
.navbar-stepper-label-row .stepper-help-btn:hover {
  color: var(--brass, #c85a29);
}
.navbar-stepper-label-row .stepper-help-btn .rp-help {
  font-size: 0.5rem;
  line-height: 1;
}

.navbar-stepper-row {
  display: flex;
  align-items: center;
  /* gap pequeño entre flechas y cifra — Roberto pidió reducirlo */
  gap: 0.1rem;
  /* Altura fija para que las flechas tengan buen target de */
  height: 1.4rem;
}

.navbar-stepper-icon {
  font-size: 1.05rem;
  color: rgba(92, 51, 23, 0.65);
  flex: 0 0 auto;
}


.navbar-stepper-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.3rem;
  height: 1.4rem;
  border-radius: 0.5rem;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  color: rgba(92, 51, 23, 0.78);
  transition: background-color 120ms ease, color 120ms ease, transform 80ms ease;
  flex: 0 0 auto;
}

.navbar-stepper-arrow:hover {
  background: rgba(200, 90, 41, 0.18);
  color: rgba(60, 35, 15, 1);
}

.navbar-stepper-arrow:active {
  transform: scale(0.92);
  background: color-mix(in srgb, var(--brass) 30%, transparent);
}

.navbar-stepper-arrow:focus {
  outline: none;
  background: rgba(200, 90, 41, 0.10);
}

.navbar-stepper-arrow .ti {
  font-size: 1.0rem;
  line-height: 1;
}


/* Valor numérico: Cherry Swash bold, color sepia fuerte, */
.navbar-stepper-value {
  min-width: 3.5rem;
  padding: 0 0.15rem;
  text-align: center;
  font-family: 'Cherry Swash', cursive;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(60, 35, 15, 0.92);
  cursor: ew-resize;
  flex: 1 1 auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 120ms ease;
}

.navbar-stepper-value:active {
  transform: scale(0.98);
}

.navbar-stepper-meter {
  height: 3px;
  width: 100%;
  border-radius: 999px;
  /* Default (válido cuando no hay --meter-percent definido): */
  background:
    linear-gradient(to right,
      var(--brass) 0%,
      var(--brass) var(--meter-percent, 0%),
      #d9bb87 var(--meter-percent, 0%),
      #d9bb87 100%);
  /* user-select:none ya viene del wrapper; explícito aquí para */
  user-select: none;
  -webkit-user-select: none;
  /* Sombra inset sutil para que la barra tenga profundidad sobre */
  box-shadow: inset 0 0.5px 0.5px rgba(101, 67, 33, 0.12);
  /* Animación del percent cuando cambia — 120ms ease-out. La */
  transition: background 120ms ease-out;
}

/* Cuando el stepper está deshabilitado (no aplica aquí en */
.navbar-stepper.is-disabled,
.navbar-stepper[aria-disabled="true"] {
  opacity: 0.4;
  pointer-events: none;
}

.navbar-stepper--vertical {
  width: 4.5rem;
  min-width: 0;
  /* §22.6xx.506e — Reducido de 1.3rem a 0.55rem para que el groove
   * vertical (3 steppers apilados) quepa en tablets 768-1024px sin
   * solaparse con el island superior ni el island de undo/redo. */
  padding: 0.55rem 0.4rem;
  position: relative;
  align-items: center;
  cursor: ns-resize;
}

.navbar-stepper--vertical .navbar-stepper-row {
  flex-direction: column;
  height: auto;
  /* §22.6xx.506e — Reducido de 0.55rem a 0.25rem (compacto vertical). */
  gap: 0.25rem;
  width: 100%;
}

.navbar-stepper--vertical .navbar-stepper-arrow {
  /* §22.6xx.506e — Reducido de 1.6rem a 1.25rem. Sigue siendo tappable
   * (>20px) sin necesidad de expandir el touch target al padre. */
  width: 1.25rem;
  height: 1.25rem;
}

.navbar-stepper--vertical .navbar-stepper-icon,
.navbar-stepper--vertical .navbar-stepper-icon-svg {
  font-size: 1.1rem;
  width: 1.1rem;
  height: 1.1rem;
}

.navbar-stepper--vertical .navbar-stepper-value {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  padding: 0.15rem 0;
  cursor: ns-resize;
  line-height: 1;
  gap: 0.05rem;
}

.navbar-stepper--vertical .value-num {
  font-family: 'Cherry Swash', cursive;
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: rgba(60, 35, 15, 0.92);
  line-height: 1;
}

.navbar-stepper--vertical .value-unit {
  font-family: 'Cherry Swash', cursive;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(92, 51, 23, 0.65);
  line-height: 1;
}

.navbar-stepper--vertical .navbar-stepper-meter {
  position: absolute;
  /* §22.6xx.506e — Ajustado al nuevo padding (0.55rem) para que el
   * metro quede contenido dentro del pill sin salirse. */
  top: 0.55rem;
  bottom: 0.55rem;
  left: 0.4rem;
  width: 3px;
  height: auto;
  border-radius: 999px;
  background:
    linear-gradient(to top,
      var(--brass) 0%,
      var(--brass) var(--meter-percent, 0%),
      #D3C8B5 var(--meter-percent, 0%),
      #D3C8B5 100%);
}

.hud-toolbar-pill-left .navbar-stepper--vertical .navbar-stepper-meter {
  right: 0.4rem;
  left: auto;
}
.hud-toolbar-pill-right .navbar-stepper--vertical .navbar-stepper-meter {
  left: 0.4rem;
  right: auto;
}

.navbar-stepper--vertical .navbar-stepper-label {
  /* visually-hidden estándar: clip rect de 1px, posición absolute, */
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.touch-stepper-reset-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0.2rem 0;
}


.storage-quota {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  min-width: 0;
}
.storage-quota-bar {
  position: relative;
  height: 6px;
  width: 100%;
  border-radius: 999px;
  /* Track: sepia translucido para que se vea sobre el paper-light. */
  background: rgba(146, 113, 78, 0.20);
  box-shadow: inset 0 0.5px 0.5px rgba(101, 67, 33, 0.10);
  overflow: hidden;
  cursor: help;
}
.storage-quota-fill {
  height: 100%;
  width: var(--pct, 0%);
  background: linear-gradient(to right,
    var(--brass) 0%,
    #FF7A5C var(--pct, 0%));
  border-radius: 999px;
  /* Min-width 2px: garantiza que la barra sea visible incluso */
  min-width: 2px;
  /* Animación del fill cuando cambia el % (ej. al pulsar */
  transition: width 320ms ease-out;
}
.storage-quota-text {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  line-height: 1.2;
  color: var(--text-sepia, #6b5640);
  font-variant-numeric: tabular-nums;
  /* Un pelín menos de opacidad en el texto "de" y "(X%)" para */
}
.storage-quota-text-used,
.storage-quota-text-total {
  font-weight: 600;
  color: var(--text-sepia-strong, #4a3a28);
}


/* CAPA EXTERIOR: madera con textura, border-radius asimétrico, */
.desk-light .undo-redo-pill-wrap,
.undo-redo-pill-wrap {
  position: fixed !important;
  bottom: 0 !important;
  left: 0 !important;
  z-index: 80 !important;
  pointer-events: auto !important;
  user-select: none;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* (§22.97): padding generoso para que la */
  padding: 1.5rem 1rem 0.625rem 0.625rem;
  /* v18 (§22.104): wrap EXTERIOR TRANSPARENTE (igual que */
  background-color: transparent !important;
  background-image: none !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  background-position: 0 0 !important;
  background-blend-mode: normal !important;
  border: none !important;
  /* Border-radius asimétrico: SOLO top-right 15px (la única */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 15px !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-radius: 0 15px 0 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}


/* Capa 1 (.undo-redo-pill-top): madera clara. v15: inset.
   §22.6xx.interface-texture-rotate-vertical — Textura en pseudo rotado. */
.undo-redo-pill-top {
  position: absolute;
  inset: 8px 0 0 0;  /* (§22.109): shadow thickness FIJO 8px */
  z-index: 0;
  --bar-wood-color: #e7c89a;
  background-color: #e7c89a;
  border-top-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

/* Capa 2 (.X-pill-shadow): madera oscura 100% del wrap, detrás.
   §22.6xx.interface-texture-rotate-vertical — Textura en pseudo rotado. */
.undo-redo-pill-shadow {
  position: absolute;
  inset: 0;
  z-index: -1;
  --bar-wood-color: #a08250;
  background-color: #a08250;
  border-top-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset 0 3px 5px rgba(50, 25, 5, 0.6);
  pointer-events: none;
}

/* CAPA INTERIOR: look navbar-stepper. Linear gradient blanco→cream */
.desk-light .undo-redo-pill-wrap .undo-redo-pill,
.undo-redo-pill-wrap .undo-redo-pill {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.2rem;
  padding: 0.55rem 0.7rem !important;
  position: relative !important;
  z-index: 3 !important;
  /* §22.6xx.658dr.20 — Surface idéntico a `.navbar-stepper`: cream + paper-noise. */
  background-color: var(--panel-cream) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow:
    3px 3px 2px -1px rgba(255, 253, 253, 0.85),
    -2px -3px 4px 0px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 2px 3px 2px 2px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.20) !important;
  pointer-events: auto;
  user-select: none;
}

/* Botones COMPACTOS (28x28) con iconos 1.1rem BOLD. v15: */
.desk-light .undo-redo-pill .undo-redo-btn,
.undo-redo-pill .undo-redo-btn {
  position: relative;
  z-index: 1;
  color: rgba(40, 22, 8, 0.95) !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  width: 28px !important;
  height: 28px !important;
  background: transparent !important;
}
.desk-light .undo-redo-pill .undo-redo-btn:hover,
.undo-redo-pill .undo-redo-btn:hover {
  background: rgba(60, 30, 10, 0.08) !important;
}

/* Counter COMPACTO (1.1rem) bold, sin background. v15: z-index: 1. */
.desk-light .undo-redo-pill .undo-redo-count,
.undo-redo-pill .undo-redo-count {
  position: relative;
  z-index: 1;
  color: rgba(40, 22, 8, 1) !important;
  font-size: 1.1rem !important;
  font-weight: 800 !important;
  background: transparent !important;
  min-width: 28px !important;
  height: 22px !important;
}


/* CAPA EXTERIOR: madera con textura, pegado al bottom-right. */
.desk-light .page-nav-pill-wrap,
.page-nav-pill-wrap {
  position: fixed !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 80 !important;
  pointer-events: none;
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  padding: 0.75rem 0.4rem 0.4rem 0.75rem;
  /* v18 (§22.104): wrap EXTERIOR TRANSPARENTE. Mismo fix */
  background-color: transparent !important;
  background-image: none !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  background-position: 0 0 !important;
  background-blend-mode: normal !important;
  border: none !important;
  /* Border-radius asimétrico: SOLO top-LEFT 15px (la única */
  border-top-left-radius: 15px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-radius: 15px 0 0 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* §22.6xx.658 — Override del fondo del page-nav-pill y navbar-status-pill-content
   para que tengan el mismo color cream + paper-noise que los panels del dialog.
   Usa specificity (0,4,1) para ganar a .desk-light .page-nav-pill-wrap .page-nav-pill
   (specificity 0,3,0) que también define background. */
html body.desk-light .page-nav-pill-wrap .page-nav-pill,
html body .navbar-status-pill-content {
  background-color: var(--panel-cream, #f7e6c0) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
}


/* CAPA INTERIOR: look navbar-stepper (mismo que el undo-redo */
.desk-light .page-nav-pill-wrap .page-nav-pill,
.page-nav-pill-wrap .page-nav-pill {
  display: inline-flex !important;
  align-items: stretch !important;
  gap: 0.2rem;
  height: auto !important;
  position: relative !important;
  z-index: 3 !important;
  /* §22.142 — COMPACTADO: padding 0.55rem/0.7rem → 0.3rem/0.5rem */
  padding: 0.3rem 0.5rem !important;
  /* §22.6xx.658dr.20 — Surface idéntico a `.navbar-stepper`: cream + paper-noise. */
  background-color: var(--panel-cream) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
  border: none !important;
  border-radius: 16px !important;
  color: rgba(40, 22, 8, 0.95) !important;
  box-shadow:
    3px 3px 2px -1px rgba(255, 253, 253, 0.85),
    -2px -3px 4px 0px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 2px 3px 2px 2px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.20) !important;
  pointer-events: auto;
  user-select: none;
  width: fit-content !important;
}


/* Capa 1 (.page-nav-pill-top): madera clara. v15: inset.
   §22.6xx.interface-texture-rotate-vertical.v3 — Horizontal (‹ 1/15 ›),
   tamaño nativo 1100×300. */
.page-nav-pill-top {
  position: absolute;
  inset: 8px 0 0 0;  /* (§22.109): shadow thickness FIJO 8px (ver undo-redo) */
  z-index: 0;
  background-color: #e7c89a;
  background-image: var(--ui-texture-interface, url('../resources/ui-textures/interface-texture.webp'));
  background-size: 1100px 300px;
  background-repeat: no-repeat;
  background-position: center;
  border-top-left-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

/* Capa 2 (.page-nav-pill-shadow): madera oscura 100%.
   §22.6xx.interface-texture-rotate-vertical.v3 — Horizontal, tamaño nativo. */
.page-nav-pill-shadow {
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: #a08250;
  background-image: var(--ui-texture-interface, url('../resources/ui-textures/interface-texture.webp'));
  background-size: 1100px 300px;
  background-repeat: no-repeat;
  background-position: center;
  background-blend-mode: multiply;
  border-top-left-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  box-shadow: inset 0 3px 5px rgba(50, 25, 5, 0.6);
  pointer-events: none;
}

/* Botones de navegación (‹ ›): color sepia oscuro sobre cream. */
.desk-light .page-nav-pill-wrap .page-nav-btn,
.page-nav-pill-wrap .page-nav-btn {
  position: relative;
  z-index: 1;
  color: rgba(40, 22, 8, 0.95) !important;
  font-size: 0.95rem !important;
  width: 22px !important;
  height: 22px !important;
  background: transparent !important;
  border: none !important;
}
.desk-light .page-nav-pill-wrap .page-nav-btn:hover,
.page-nav-pill-wrap .page-nav-btn:hover {
  background: rgba(60, 30, 10, 0.08) !important;
}
.desk-light .page-nav-pill-wrap .page-nav-btn:disabled,
.page-nav-pill-wrap .page-nav-btn:disabled {
  color: rgba(60, 30, 10, 0.30) !important;
  cursor: not-allowed;
}

/* Counter "1 / 15" — sepia oscuro, compacto. v15: z-index: 1. */
.desk-light .page-nav-pill-wrap .page-nav-counter,
.page-nav-pill-wrap .page-nav-counter {
  position: relative;
  z-index: 1;
  color: rgba(40, 22, 8, 0.95) !important;
  font-size: 0.78rem !important;
  font-weight: 600;
  min-width: 2.4rem;
  background: transparent !important;
  letter-spacing: 0.02em;
}


/* CAPA EXTERIOR: madera con textura, pegado al lateral. */
.desk-light .recent-colors-pill-wrap,
.recent-colors-pill-wrap {
  position: fixed !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  z-index: 80 !important;
  pointer-events: none;
  display: flex;
  align-items: center;
  /* Padding generoso para que la zona de madera alrededor del */
  padding: 1rem 0.625rem;
  /* v18 (§22.104): wrap EXTERIOR TRANSPARENTE. Mismo fix */
  background-color: transparent !important;
  background-image: none !important;
  background-size: auto !important;
  background-repeat: repeat !important;
  /* background-position se sobreescribe en las variantes */
  background-blend-mode: normal !important;
  border: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

/* Variante LEFT: wrap pegado al left edge. Las 2 esquinas */
.desk-light .recent-colors-pill-wrap.recent-colors-pill-left,
.recent-colors-pill-wrap.recent-colors-pill-left {
  left: 0 !important;
  right: auto !important;
  background-position: top left !important;
  padding-right: 1.5rem !important;
  padding-left: 0.625rem !important;
  border-top-left-radius: 0 !important;
  border-top-right-radius: 15px !important;
  border-bottom-right-radius: 15px !important;
  border-bottom-left-radius: 0 !important;
  border-radius: 0 15px 15px 0 !important;
}

/* Variante RIGHT: wrap pegado al right edge. Las 2 esquinas */
.desk-light .recent-colors-pill-wrap.recent-colors-pill-right,
.recent-colors-pill-wrap.recent-colors-pill-right {
  right: 0 !important;
  left: auto !important;
  background-position: top right !important;
  padding-left: 1.5rem !important;
  padding-right: 0.625rem !important;
  border-top-left-radius: 15px !important;
  border-top-right-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
  border-bottom-left-radius: 15px !important;
  border-radius: 15px 0 0 15px !important;
}

/* CAPA INTERIOR: look navbar-stepper. v16: position: relative + */
.desk-light .recent-colors-pill-wrap .recent-colors-pill,
.recent-colors-pill-wrap .recent-colors-pill {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0.20rem;
  padding: 0.55rem 0.7rem !important;
  position: relative !important;
  z-index: 3 !important;
  /* §22.6xx.658dr.20 — Surface idéntico a `.navbar-stepper`: cream + paper-noise. */
  background-color: var(--panel-cream) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow:
    3px 3px 2px -1px rgba(255, 253, 253, 0.85),
    -2px -3px 4px 0px rgba(0, 0, 0, 0.28),
    inset 0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 2px 3px 2px 2px rgba(0, 0, 0, 0.18),
    0 4px 10px rgba(0, 0, 0, 0.20) !important;
  pointer-events: auto;
  user-select: none;
  min-height: 36px;
}

/* Chips: mantienen su estilo (círculos de color con border */
.desk-light .recent-colors-pill .recent-colors-chip,
.recent-colors-pill .recent-colors-chip {
  position: relative;
  z-index: 1;
  border-color: rgba(60, 30, 10, 0.30);
  background-clip: padding-box;
}


/* Capa 1 (.recent-colors-pill-top): madera clara. v15: inset.
   §22.6xx.interface-texture-rotate-vertical — Vertical (chips apilados),
   textura en pseudo rotado. */
.recent-colors-pill-top {
  position: absolute;
  inset: 0 10% 0 0;  /* top: 0, right: 10%, bottom: 0, left: 0 */
  z-index: 0;
  --bar-wood-color: #e7c89a;
  background-color: #e7c89a;
  border-top-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 0;
  box-shadow: inset 0 -2px 4px rgba(0, 0, 0, 0.1);
  pointer-events: none;
}

/* Capa 2 (.recent-colors-pill-shadow): madera oscura 100%.
   §22.6xx.interface-texture-rotate-vertical — Vertical, textura en pseudo. */
.recent-colors-pill-shadow {
  position: absolute;
  inset: 0;
  z-index: -1;
  --bar-wood-color: #a08250;
  background-color: #a08250;
  border-top-left-radius: 0;
  border-top-right-radius: 15px;
  border-bottom-right-radius: 15px;
  border-bottom-left-radius: 0;
  box-shadow: inset 0 3px 5px rgba(50, 25, 5, 0.6);
  pointer-events: none;
}

/* Variante RIGHT: el wrap está pegado al RIGHT edge del browser. */
.recent-colors-pill-wrap.recent-colors-pill-right .recent-colors-pill-top {
  inset: 0 0 0 10%;  /* top: 0, right: 0, bottom: 0, left: 10% (shadow visible a la izquierda) */
  background-position: top right;
  border-top-left-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 15px;
}
.recent-colors-pill-wrap.recent-colors-pill-right .recent-colors-pill-shadow {
  background-position: bottom right;
  border-top-left-radius: 15px;
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 15px;
}

/* ════════════════════════════════════════════════════════════════════ */
.grid-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;  /* oculto por defecto, se muestra con .is-visible */
  opacity: var(--grid-opacity, 0.3);
  /* Sin transition: el grid debe seguir el slider al instante */
  z-index: 5;  /* encima de la pintura, debajo de overlays interactivos */
}

/* Grid básico: líneas regulares verticales + horizontales vía */
.grid-overlay {
  background-image:
    /* Líneas verticales (cada --grid-size) */
    linear-gradient(to right, var(--grid-color, #5C4033) 1px, transparent 1px),
    /* Líneas horizontales (cada --grid-size) */
    linear-gradient(to bottom, var(--grid-color, #5C4033) 1px, transparent 1px);
  background-size:
    var(--grid-size, 50px) var(--grid-size, 50px),
    var(--grid-size, 50px) var(--grid-size, 50px);
  /* Offset X/Y para alinear el grid con una posición específica */
  background-position:
    var(--grid-x, 0px) var(--grid-y, 0px),
    var(--grid-x, 0px) var(--grid-y, 0px);
}

.grid-overlay.is-visible {
  display: block;
}

/* ════════════════════════════════════════════════════════════════════ */

/* §22.6xx.656n — DROP del bloque §22.221: la base de .dialog-panel en
   chrome.css ya no tiene border, box-shadow ni backdrop-filter. La regla
   "border: 0" se omite intencionalmente para que la base (con su border
   sepia 1px de chrome.css:514) aplique. Sin sombra, sin outline. */

/* §22.6xx.257 — DROP completo del marco "grimorio" (doble border brass + */

.toast-container {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  max-width: calc(100vw - 2rem);
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  flex-direction: row;  /* explícito: contenido siempre en una fila */
  gap: 0.5rem;
  width: fit-content;
  max-width: 100%;
  height: 2.5rem;
  padding: 0 0.75rem;
  background-color: var(--ivory, #FFFDF8);  /* cream */
  border: 1px solid rgba(92, 64, 51, 0.18);
  border-radius: 999px;
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.7) inset,
    0 6px 20px rgba(60, 40, 25, 0.14),
    0 2px 6px rgba(60, 40, 25, 0.08);
  font-size: 0.875rem;
  font-weight: 500;
  line-height: 1;
  color: var(--sepia, #5C4033);
  white-space: nowrap;
}

/* Icon: neutraliza vertical-align de tabler-icons (-0.125em) para */
.toast-icon {
  font-size: 1rem;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
  line-height: 1;
  vertical-align: middle;
  color: var(--brass-text, #93411c);
}
.toast--info    .toast-icon { color: var(--brass-text, #93411c); }
.toast--success .toast-icon { color: #4a7a4a; }
.toast--warning .toast-icon { color: #a07832; }
.toast--error   .toast-icon { color: var(--brass-text, #93411c); }

/* Message: solo crece hasta 60ch (suficiente para frases largas) */
.toast-message {
  flex: 0 1 auto;
  margin: 0;
  font-size: 0.875rem;
  line-height: 1;
  color: var(--sepia, #5C4033);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: min(60ch, calc(100vw - 8rem));
  min-width: 0;
}

.toast-close {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: 50%;
  color: rgba(92, 64, 51, 0.45);
  font-size: 0.875rem;
  line-height: 1;
  transition: background 120ms, color 120ms;
}
.toast-close:hover {
  background: rgba(92, 64, 51, 0.10);
  color: rgba(92, 64, 51, 0.85);
}

/* §22.6xx.658dr.32 — El toast "Saving…" se ha sustituido por el icono del
   robin en el paginador (`.page-nav-busy-icon` en `chrome.css`). Aquí solo
   queda la utilidad: cualquier icono de robinpad que rebote durante un
   proceso en curso puede usar `.loader-bounce`. El rebote da personalidad al
   feedback —el pájaro "salta" mientras se guarda— y es consistente con la
   marca: el robinpad ES el loader. */
/* §22.6xx.656aw — Utility class `.loader-bounce` para cualquier icono
   robinpad que rebota durante un proceso en curso. Mismo keyframe que
   el saving toast (translateY -3px) pero reutilizable para tamaños
   distintos (1.25rem en el botón Exportar, 5rem en el preview del
   scene dialog). El efecto "pájaro saltando" es consistente con la
   marca: el robinpad ES el loader. */
@keyframes loader-bounce {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.loader-bounce {
  animation: loader-bounce 0.7s ease-in-out infinite;
  display: inline-block;
}

/* §22.6xx.668 — Loader mientras se guarda antes de abrir el preview.
 *
 * §22.6xx.658dr.679 — Velo oscuro y logo blanco, a petición de Roberto: el
 * tono claro sobre el lienzo cream se leía como que no había nada ahí. El
 * fondo es el de `.loading-overlay` para que preview y splash de arranque
 * compartan el mismo "la app está ocupada", sin card y sin blur.
 *
 * El lienzo sigue detrás, atenuado: el velo comunica "está trabajando" en vez
 * de "se ha colgado". `pointer-events: none` para que no parezca que se puede
 * seguir pintando encima: la app SÍ está ocupada, solo que ocupada guardando.
 *
 * El logo usa `.loader-bounce` de arriba: ni animación ni imagen nuevas.
 * `brightness(0) invert(1)` lo fuerza a blanco, igual que `.scene-logo-preview`. */
.preview-saving-overlay {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  background: rgba(15, 10, 8, 0.72);
}
.preview-saving-overlay .loader-bounce {
  width: 4.5rem;
  height: 4.5rem;
  filter: brightness(0) invert(1) drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45));
}
/* §22.6xx.658dr.706 — El aviso de "nueva versión" reusa el chrome del
   confirm-dialog (panel + cabecera Cherry Swash + cuerpo + fila de botones), así
   que este bloque solo se ocupa de DÓNDE se coloca.

   `z-index` antes 60: por debajo del pill del navbar (z-80), que lo tapaba.
   Ahora 100, por encima de los paneles flotantes y por debajo de los dialogs
   (z-110), que es la capa en la que vive un aviso que no es modal.

   `bottom` antes 1.25rem: a la altura del pill, que está en el borde inferior.
   Ahora sube por encima de él. El pill es arrastrable y se posiciona con
   `top` en línea, así que esto resuelve la posición por defecto —la que se
   veía tapada—, no todos los casos en los que alguien lo mueva a mano. */
.sw-update-toast {
  position: fixed;
  bottom: 5.75rem;
  right: 1.25rem;
  z-index: 100;
  max-width: 28rem;
}
/* En pantallas estrechas el pill ocupa el ancho, así que el aviso también. */
@media (max-width: 540px) {
  .sw-update-toast {
    left: 0.75rem;
    right: 0.75rem;
    bottom: 5.25rem;
    max-width: none;
  }
}

/* §22.6xx.658-iter19 — El confirm-dialog hereda el efecto Tavern Keepers
   (cream + paper-noise + thick-torn-edge) de .dialog-panel via la clase
   añadida en confirm-dialog.html. Esta regla solo define el ancho del panel;
   el border-radius, box-shadow y overflow los pone .dialog-panel (radius 0
   porque el effect lo gestiona el ::before con el filter). */
.confirm-dialog-panel {
  width: 100%;
  max-width: 28rem;
  display: flex;
  flex-direction: column;
}
.confirm-dialog-header {
  padding: 1rem 1.25rem 0.5rem;
}
.confirm-dialog-title {
  font-family: 'Cherry Swash', cursive;
  font-weight: 700;
  font-size: 1.25rem;
  line-height: 1.15;
  color: rgba(92, 64, 51, 0.90);
  margin: 0;
  /* §22.6xx.outline-title — outline `#F4D58D` (4 lados) para coherencia
     con `.floating-panel-title` (cabecera de dialogs/windows). Sin esto,
     Roberto reportó que el efecto no se aplicaba a "todas las cabeceras".
     En el confirm dialog el bg es cream — el gold outline da un look
     vintage book typography. */
  text-shadow:
    -1px -1px 0 #F4D58D,
     1px -1px 0 #F4D58D,
    -1px  1px 0 #F4D58D,
     1px  1px 0 #F4D58D;
}
.confirm-dialog-body {
  padding: 1rem 1.25rem;
}
.confirm-dialog-message {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: rgba(60, 40, 25, 0.85);
  white-space: pre-line;
  word-wrap: break-word;
}
.confirm-dialog-actions {
  display: flex;
  gap: 0.5rem;
  justify-content: flex-end;
  padding: 0.75rem 1.25rem 1rem;
}

/* §22.503 — Header text color (LIGHT TITLE OVERRIDE). */
.floating-panel-header--light-title {
  color: #F4D58D !important;
}
.floating-panel-header--light-title .floating-panel-title,
.floating-panel-header--light-title i,
.floating-panel-header--light-title p {
  color: #F4D58D !important;
}

body.color-picker-active,
body.color-picker-active canvas,
body.color-picker-active [x-ref="viewport"] {
  cursor: crosshair !important;
}


.color-wheel-tabs {
  display: flex;
  gap: 2px;
  padding: 0 4px;
  margin-bottom: 0;
  position: relative;
}
.color-wheel-tab {
  position: relative;
  flex: 1;
  padding: 8px 10px 9px;
  /* §22.6xx.46g — Tab inactiva: SIN border top/left/right, totalmente plana. */
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(80, 60, 45, 0.18);
  border-radius: 8px 8px 0 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(58, 42, 30, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
  /* §22.6xx.46i — box-sizing: border-box para que el border de */
  box-sizing: border-box;
}
.color-wheel-tab:hover {
  color: rgba(58, 42, 30, 0.85);
}
.color-wheel-tab.is-active {
  background: transparent;
  color: var(--brass-text, #93411c);
  border-top: 1px solid var(--brass, #c85a29);
  border-left: 1px solid var(--brass, #c85a29);
  border-right: 1px solid var(--brass, #c85a29);
  border-bottom: none;
  z-index: 1;
}
.color-wheel-tab.is-active i {
  color: var(--brass-text, #93411c);
}
.color-wheel-tab i {
  font-size: 13px;
}

.color-floating-pill-tabs {
  display: flex;
  gap: 2px;
  padding: 0 4px;
  margin-bottom: 6px;
  position: relative;
}
.color-floating-pill-tab {
  flex: 1;
  padding: 4px 4px;
  background: transparent;
  border: none;
  /* §22.6xx.46k — RESTAURADO border-bottom en la tab inactiva. La activa */
  border-bottom: 1px solid rgba(80, 60, 45, 0.18);
  border-radius: 5px 5px 0 0;
  font-size: 13px;
  color: rgba(58, 42, 30, 0.5);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.15s, background 0.15s;
  font-family: inherit;
  /* §22.6xx.46i — box-sizing: border-box para que el border de */
  box-sizing: border-box;
}
.color-floating-pill-tab:hover {
  color: rgba(58, 42, 30, 0.85);
}
.color-floating-pill-tab.is-active {
  background: transparent;
  color: var(--brass-text, #93411c);
  border-top: 1px solid var(--brass, #c85a29);
  border-left: 1px solid var(--brass, #c85a29);
  border-right: 1px solid var(--brass, #c85a29);
  border-bottom: none;
  z-index: 1;
}

.color-wheel-tab-panel {
  display: flex;
  flex-direction: column;
  /* §22.6xx.658dr.119 — 8 → 6px, igual que el panel de Approximate. Con 8
     el contenido de Variations pasaba de la altura máxima del panel por
     7px y el scrollbar se quedaba visible a tamaño máximo. */
  gap: 6px;
}

.color-wheel-approximate-panel {
  padding-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* §22.6xx.658dr.118 — El bloque .color-wheel-approximate-grid estaba
   declarado dos veces en este fichero (aquí y más abajo, bajo el rótulo
   "legacy - kept per §22.6xx.656h"). El segundo ganaba por orden de cascada
   y el primero era código muerto. Se borra el primero; el que queda es el
   que realmente se aplica. */

.dirty-brush-pool-grid {
  display: grid;
  grid-template-columns: repeat(17, minmax(0, 1fr));
  gap: 2px;
  width: 100%;
}
.dirty-brush-pool-cell {
  aspect-ratio: 1;
  border-radius: 2px;
  min-width: 0;
  min-height: 0;
}


/* §22.6xx.658-iter12 — Pigment temp (cold-warm stepper) como theme-card
   (mismo patrón que .color-wheel-harmonics y .color-wheel-approximate-grid). */
.color-wheel-pigment-temp {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background-color: transparent !important;
  border: none !important;
  border-radius: 16px;
  padding: 8px 12px 6px;
  isolation: isolate;
  overflow: hidden;
}
.color-wheel-pigment-temp::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--panel-cream, #f7e6c0) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
  border-radius: inherit;
  pointer-events: none;
}
.color-wheel-pigment-temp::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 3px solid var(--ink-stroke, #c5a059);
  border-radius: inherit;
  filter: url(#hand-drawn-filter);
  pointer-events: none;
}
.desk-light .color-wheel-pigment-temp {
  border-radius: 8px !important;
}
.color-wheel-pigment-temp-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.color-wheel-pigment-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  cursor: help;  /* tooltip on hover */
  /* Halo sepia como el thumb del slider */
  border: 1px solid rgba(80, 60, 45, 0.3);
  box-shadow:
    inset 0 1px 2px rgba(255, 255, 255, 0.3),
    0 1px 1px rgba(0, 0, 0, 0.1);
}
.color-wheel-pigment-dot-cold {
  background: #5a6ad9;  /* cool blue, igual que shadow */
}
.color-wheel-pigment-dot-warm {
  background: #d97706;  /* warm orange, igual que lights */
}

/* §22.6xx.46 — Slider (input range) — reutiliza el estilo unificado */
.color-wheel-pigment-temp-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 22px;
  padding: 0;
  background: transparent !important;
  background-color: transparent !important;
  accent-color: var(--brass, #c85a29) !important;
  cursor: ew-resize;
  flex: 1;
}
.color-wheel-pigment-temp-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  /* Gradiente cold (azul) a la izquierda → warm (naranja) a la derecha. */
  background:
    linear-gradient(to right,
      var(--brass, #c85a29) 0%,
      var(--brass, #c85a29) var(--track-value, 50%),
      transparent var(--track-value, 50%),
      transparent 100%),
    linear-gradient(to right,
      #C5D9F2 0%,    /* cold light (powder blue) */
      rgba(255, 248, 232, 0.5) 50%,  /* neutral center */
      #FFE0A8 100%); /* warm light (cream ocre) */
  border: 1px solid rgba(80, 60, 45, 0.15);
}
.color-wheel-pigment-temp-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background:
    linear-gradient(to right,
      #C5D9F2 0%,
      rgba(255, 248, 232, 0.5) 50%,
      #FFE0A8 100%);
  border: 1px solid rgba(80, 60, 45, 0.15);
}
.color-wheel-pigment-temp-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--btn-bg, #5C3317);
  background-image: var(--ui-texture-panel,
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 60%));
  border: 1.5px solid #fffaee;
  box-shadow:
    0 0 0 1.5px #5c3317,
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  margin-top: -7px;
  cursor: ew-resize;
}
.color-wheel-pigment-temp-slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: var(--btn-bg, #5C3317);
  background-image: var(--ui-texture-panel,
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 60%));
  border: 1.5px solid #fffaee;
  box-shadow:
    0 0 0 1.5px #5c3317,
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  margin-top: -7px;
  cursor: ew-resize;
}

/* §22.6xx.658dr.115 — Wrapper de los sliders de luminosidad y saturación.
   §22.6xx.658dr.113 — Mismo lenguaje visual que el slider de temperatura
   de pigmento (track con gradiente, thumb con relieve hand-drawn), pero el
   track se tiñe con el propio color activo (--ls-h) para que se lea como
   "este color, aclarado/oscurecido" y no como un control genérico.
   §22.6xx.658dr.115 — El wrapper replica `.color-wheel-harmonics`
   (paper texture cream + border 3px brass-gold hand-drawn) para que el
   bloque se lea como el resto de módulos del panel. */
.color-wheel-ls {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
  /* §22.6xx.658dr.118 — Sus dos filas miden 62px sea cual sea la altura del
     panel. Sin esto el `overflow: hidden` las recortaba (medido: 62px → 11px
     al bajar el panel de 660 a 500px). */
  flex-shrink: 0;
  background-color: transparent !important;
  border: none !important;
  border-radius: 16px;
  padding: 6px 10px 5px;
  margin: 0;
  isolation: isolate;
}
.color-wheel-ls::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--panel-cream, #f7e6c0) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
  border-radius: inherit;
  pointer-events: none;
}
.color-wheel-ls::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 3px solid var(--ink-stroke, #c5a059);
  border-radius: inherit;
  filter: url(#hand-drawn-filter);
  pointer-events: none;
}
.desk-light .color-wheel-ls {
  border-radius: 8px !important;
}
.color-wheel-ls-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.color-wheel-ls-icon {
  font-size: 0.95em;
  color: var(--ink-soft, rgba(92, 64, 51, 0.75));
  flex-shrink: 0;
  width: 1.1em;
  text-align: center;
}
.color-wheel-ls-value {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.7rem;
  color: var(--ink-soft, rgba(92, 64, 51, 0.7));
  min-width: 3.2em;
  text-align: right;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.color-wheel-ls-slider {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  box-sizing: border-box;
  width: 100%;
  height: 22px;
  padding: 0;
  background: transparent !important;
  background-color: transparent !important;
  cursor: ew-resize;
  flex: 1;
  min-width: 0;
}
.color-wheel-ls-slider::-webkit-slider-runnable-track {
  height: 8px;
  border-radius: 999px;
  /* --ls-h es el color activo; la fila 1 va de negro→color→blanco
     (luminosidad) y la fila 2 de gris→color (saturación). El
     data-attr fija cuál de las dos rampas usa cada slider. */
  background: var(--ls-track, linear-gradient(to right, #000, #fff));
  border: 1px solid rgba(80, 60, 45, 0.15);
}
.color-wheel-ls-slider::-moz-range-track {
  height: 8px;
  border-radius: 999px;
  background: var(--ls-track, linear-gradient(to right, #000, #fff));
  border: 1px solid rgba(80, 60, 45, 0.15);
}
.color-wheel-ls-slider[data-ls="lightness"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #000, var(--ls-h, #808080) 50%, #fff);
}
.color-wheel-ls-slider[data-ls="lightness"]::-moz-range-track {
  background: linear-gradient(to right, #000, var(--ls-h, #808080) 50%, #fff);
}
.color-wheel-ls-slider[data-ls="saturation"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, #808080, var(--ls-h, #808080));
}
.color-wheel-ls-slider[data-ls="saturation"]::-moz-range-track {
  background: linear-gradient(to right, #808080, var(--ls-h, #808080));
}
.color-wheel-ls-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--btn-bg, #5C3317);
  background-image: var(--ui-texture-panel,
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 60%));
  border: 1.5px solid #fffaee;
  box-shadow:
    0 0 0 1.5px #5c3317,
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  margin-top: -5px;
  cursor: ew-resize;
}
.color-wheel-ls-slider::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: var(--btn-bg, #5C3317);
  background-image: var(--ui-texture-panel,
    radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.25), transparent 60%));
  border: 1.5px solid #fffaee;
  box-shadow:
    0 0 0 1.5px #5c3317,
    0 2px 4px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.18);
  cursor: ew-resize;
}

.color-floating-pill-tab-panel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.color-floating-pill-approximate {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 4px 6px;
}

.color-floating-pill-approximate-grid {
  width: 100%;
  grid-template-columns: repeat(11, 1fr);
  grid-template-rows: repeat(7, 1fr);
  aspect-ratio: 11 / 7;
}

/* §22.6xx.46f — Variante COMPACTA del pigment slider para el pill mode. */
.color-wheel-pigment-temp-compact {
  padding: 4px 4px;
  gap: 2px;
}
.color-wheel-pigment-temp-compact .color-wheel-pigment-temp-row {
  gap: 6px;
}
.color-wheel-pigment-temp-compact .color-wheel-pigment-dot {
  width: 14px;
  height: 14px;
}


/* ═══ HERO BLOCK ═══ */
.welcome-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}
.welcome-hero__logo-wrap {
  /* §22.6xx.658dr.693 — Era 1.5rem. Roberto: el icono debe quedar más bajo,
     más cerca del título. 0.75rem es el mismo separador que hay entre el
     título y el subtítulo, así que los tres bloques del hero respiran igual. */
  margin-bottom: 0.75rem;
}
.welcome-hero__logo {
  width: 96px;  /* era 72 — agrandado para coincidir con la referencia */
  height: auto;
  display: block;
}
/* §22.6xx.658dr.692 — El panel de Support usa el mismo hero, pero su icono
   principal es un icono rp y no el logo. `.rp-icon` mide 1.70rem, así que sin
   esto se vería diminuto al lado de un título de 2.4rem.
   Selector descendiente a propósito: gana contra `.rp-icon` (0,2,0 vs 0,1,0)
   sin depender del orden de carga de los CSS. */
.welcome-hero__logo-wrap .rp-icon {
  width: 96px;
  height: 96px;
  display: block;
  color: var(--brass, #c85a29);  /* el accent del proyecto (§8.5 de AGENTS.md) */
}
.welcome-hero__title {
  margin: 0 0 0.75rem;  /* 12px entre title y subtitle */
  font-family: 'Cherry Swash', cursive;
  font-weight: 700;
  font-size: 2.4rem;  /* era 1.95 — agrandado para coincidir con la referencia */
  line-height: 1.1;
  color: var(--sepia, #5C4033);
  max-width: 28rem;
  /* §22.6xx.outline-title — outline `#F4D58D` (4 lados) para coherencia
     con `.floating-panel-title` (cabecera de dialogs/windows). Bg cream
     del welcome dialog. */
  text-shadow:
    -1px -1px 0 #F4D58D,
     1px -1px 0 #F4D58D,
    -1px  1px 0 #F4D58D,
     1px  1px 0 #F4D58D;
}
.welcome-hero__subtitle {
  margin: 0;
  font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, monospace;
  font-size: 1rem;  /* era 0.9 — agrandado */
  font-weight: 500;
  line-height: 1.4;
  color: rgba(92, 64, 51, 0.85);
  max-width: 28rem;
}

/* ═══ BROWSER COMPAT: dark inverse + BRASS BORDER + 2 download links ═══ */
/* Links del disclaimer — color CORPORATE brass-light (no inventado) */
/* §22.6xx.wcag-aa — `.welcome-link--inverse` es dead code (no se usa en welcome-dialog.html
   desde el refactor del welcome footer). Conservada como utility con semántica "inverse"
   para futuros usos sobre dark bg. Si se reactiva, verificar bg del contenedor. */

/* ═══ FOOTER ═══ */
/* §22.6xx.658dr.743 — Zona baja compacta. Antes ocupaba 1.75rem arriba y 2rem
   abajo (más el botón), unos 105px: en pantallas bajas empujaba las flechas
   del carrusel fuera de la vista, porque el nav es el último elemento del
   cuerpo con scroll. Ahora la zona baja mide ~60px y las flechas se ven. */
.welcome-footer {
  padding: 0.7rem 1.5rem 0.8rem;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1rem;  /* §22.6xx.658dr.239 — separa Descargar de Empezar en escritorio */
  border-top: 1px solid rgba(92, 64, 51, 0.14);
  background: rgba(92, 64, 51, 0.04);
  border-bottom-left-radius: 24px;
  border-bottom-right-radius: 24px;
}
.welcome-cta {
  font-size: 1rem;
  font-weight: 700;
  min-width: 12rem;
  padding: 0.55rem 1.8rem;
}
.welcome-installed-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.9rem;
  background: rgba(74, 122, 74, 0.10);
  color: #4a7a4a;
  border: 1px solid rgba(74, 122, 74, 0.30);
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}
/* §22.6xx.544b — Modal de instrucciones de instalación (cuando el browser no soporta el prompt nativo). */
.welcome-help-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  padding: 2rem 1rem;
}
.welcome-help-panel {
  background: rgba(255, 248, 232, 0.98);
  border: 1px solid rgba(92, 64, 51, 0.20);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(43, 24, 12, 0.35);
  max-width: 32rem;
  width: 100%;
  padding: 1.5rem 1.5rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.welcome-help-header {
  display: flex;
  align-items: center;
  gap: 0.625rem;
}
.welcome-help-title {
  flex: 1 1 auto;
  font-family: 'Cherry Swash', cursive;
  font-size: 1.15rem;
  font-weight: bold;
  color: var(--brass-text, #93411c);
  margin: 0;
  line-height: 1.2;
}
.welcome-help-close {
  background: transparent;
  border: none;
  color: rgba(92, 64, 51, 0.55);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: background 120ms, color 120ms;
}
.welcome-help-close:hover {
  background: rgba(92, 64, 51, 0.10);
  color: rgba(92, 64, 51, 0.85);
}
.welcome-help-text {
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(43, 24, 12, 0.90);
  margin: 0;
}
.welcome-help-text strong {
  color: var(--brass-text, #93411c);
}
.welcome-help-hint {
  font-size: 0.78rem;
  line-height: 1.4;
  color: rgba(92, 64, 51, 0.70);
  font-style: italic;
  margin: 0;
  padding-top: 0.5rem;
  border-top: 1px dashed rgba(92, 64, 51, 0.18);
}
.welcome-help-panel .welcome-cta {
  align-self: center;
  margin-top: 0.25rem;
  min-width: 8rem;
}
/* §22.6xx.544b — Botón X pequeño del bloque de fallback inline (settings). */
.theme-row-close {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: rgba(92, 64, 51, 0.55);
  cursor: pointer;
  font-size: 0.9rem;
  transition: background 120ms, color 120ms;
}
.theme-row-close:hover {
  background: rgba(92, 64, 51, 0.10);
  color: rgba(92, 64, 51, 0.85);
}
@media (max-width: 540px) {
  .welcome-footer {
    flex-direction: column;
    gap: 0.6rem;
  }
}.welcome-hero--left .welcome-hero__title,
.welcome-hero--left .welcome-hero__subtitle {
  max-width: 32rem;  /* constrain el title/subtitle para que no se estiren al ancho de la column */
}.welcome-patreon--vertical .welcome-patreon__icon {
  font-size: 2.25rem;  /* un poco más grande para llenar el espacio vertical */
  align-self: center;
}

/* ═══ §22.6xx.422 — Welcome link-row: listado vertical de enlaces ═══ */

/* ═══ §22.6xx.424 — Welcome hero--centered (TOP full-width) ═══ */
.welcome-hero--centered {
  align-items: center;
  text-align: center;
}
.welcome-hero--centered .welcome-hero__title,
.welcome-hero--centered .welcome-hero__subtitle {
  max-width: 36rem;  /* un poco más ancho en full-width que en left-col (32rem) */
}

/* ═══ §22.6xx.424 — Welcome shop block (mismo estilo que .welcome-patreon) ═══ */

/* §22.6xx.424 — FIX: el icono de patreon ahora es un custom SVG (no */


/* ════════════════════════════════════════════════════════════════════ */

.theme-card {
  border-radius: 16px;
  /* §22.6xx.636 — box-shadow REMOVIDO. Era el "relieve" sutil del card
   * (drop-shadow + inset blanco arriba) que se sumaba al hand-drawn
   * border creando efecto 3D. Ahora completamente plano. */
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
/* §22.6xx.635 — border con hand-drawn SVG filter via ::before.
 * El filter solo se aplica al pseudo-elemento (no al card entero),
 * así el contenido interior (theme-row, texto, controles) NO se
 * distorsiona. Color brass-gold (#c5a059) como pide Roberto en
 * §22.6xx.585 (variable --ink-stroke con fallback). */
.theme-card::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  filter: url(#hand-drawn-filter);
  pointer-events: none;
  background-color: var(--brass-dark);
  opacity: 7%;
}

.theme-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 1.25rem;
  gap: 1rem;
}

/* §22.6xx.434 — Icono a la izquierda de cada .theme-row del settings */
.theme-row-icon {
  font-size: 1.4rem;
  color: var(--brass-text, #93411c);
  flex-shrink: 0;
  width: 1.5rem;
  text-align: center;
  line-height: 1;
}

/* §22.6xx.434 — Hint del .theme-row con ellipsis. Antes (sin esto) */
.theme-row .flex-col {
  min-width: 0;
}
.theme-row .flex-col > span:last-child {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}
.theme-row:last-child {
  border-bottom: none;
}
/* §22.6xx.364 — Export dialog usa separadores EXPLICITOS (1px divs */
.export-dialog-content .theme-row {
  border-bottom: none;
}
/* §22.6xx.365 — Reducir el espacio entre secciones del Export dialog. */
.export-dialog-content .theme-row {
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

/* §22.6xx.658dr.265 — Densidad del dialog de "Create New Pad".
   Este dialog encadena cuatro secciones de título (Orientation, Featured
   formats, Other formats, Import) más los dos campos de arriba. Con el
   `padding-top: 1.5rem` de `.is-section-title` (§656bm) se comía 24px por
   corte y la columna izquierda se estiraba más que el contenido que
   realmente tenía.

   Override scopeado, no cambio global: los dialogs de Settings y Theme
   editor usan los mismos títulos y no se han visto. Es el mismo patrón que
   lleva `.export-dialog-content` un dozen de líneas más arriba. Primero el
   general, luego el de los títulos, para no depender de la especificidad. */

/* Las filas de contenido (.theme-row normal, 1.1rem de padding) también
   contaban: entre la rejilla de formatos y el botón de crear quedaban dos
   líneas en blanco. */
#create-pad-dialog .theme-row {
  padding-top: 0.7rem;
  padding-bottom: 0.7rem;
}
#create-pad-dialog .theme-row.is-section-title {
  padding-top: 0.85rem;
  padding-bottom: 0.35rem;
}

/* §22.6xx.425 — Títulos de sección SIN border-bottom + padding reducido.
   §22.6xx.656bm — Invertido el padding: más espacio ARRIBA (separación
   de la sección previa) y menos espacio ABAJO (más pegado a su sección).
   Antes: padding-top 0.5rem, padding-bottom 0.25rem (header pegado a
   sección anterior, separado de su contenido).
   Ahora: padding-top 1.5rem (24px de aire con sección anterior),
   padding-bottom 0.5rem (8px al contenido, header "pertenece" a su sección). */
.theme-row.is-section-title {
  border-bottom: none;
  padding-top: 1.5rem;
  padding-bottom: 0.5rem;
}
/* §22.6xx.656bm iter 3 — Reset margin-top del <p> que sigue a un header
   con class="mt-6 mb-2 flex items-center gap-2" (mismo patrón de ratio 3:1
   que .theme-row.is-section-title). Sin este reset, el user-agent stylesheet
   añade 12px al <p>, dando 8+12=20px entre header y descripción (demasiado).
   Con el reset: 8px exactos (mb-2 del header) entre header y descripción.

   Aplicado a theme-editor-dialog (9 headers) y cualquier futuro dialog
   que use el mismo patrón <header class="mt-6 mb-2 ..."> + <p>. */
header.mt-6 + p {
  margin-top: 0;
}
.theme-row.is-stack {
  flex-direction: column;
  align-items: stretch;
}
.theme-row.is-grid {
  display: block;
  padding: 0.3rem 1.25rem;
}
/* §22.6xx.6-compact — Variante compacta del theme-row para panels densos */
.theme-row--compact {
  padding: 0.5rem 1.25rem;
  gap: 0.75rem;
}
.theme-row--compact .font-mono {
  font-size: 0.7rem;
}

/* §22.6xx.658dr.724 — Fila con slider: etiqueta y valor arriba, slider debajo
   a todo el ancho.
   §723 la había puesto en dos columnas fijas (etiqueta | valor) y el slider se
   quedaba en 88px, demasiado corto: el pulgar de 22px se comía la cuarta
   parte del recorrido. Con la etiqueta en su propia línea el slider ocupa el
   ancho entero de la fila y deja de depender de lo larga que sea la etiqueta.
   El valor va arriba a la derecha, en la línea de su etiqueta, para que no
   quede huérfano bajo el track. Como ya no comparte línea con el slider, su
   ancho puede ser el del texto: no hace falta fijarlo ni unificar w-10/w-12.
   §723 en su día arregló que el slider no variase con la etiqueta y que no se
   saliera del panel; esto es otra vuelta de tuerca sobre el mismo bloque. */
.theme-row--slider {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "label value"
    "track track";
  align-items: baseline;
  row-gap: 0.45rem;
}
.theme-row--slider > .theme-row-label {
  grid-area: label;
  min-width: 0;
}
.theme-row--slider > .theme-row-value {
  grid-area: value;
  text-align: right;
  white-space: nowrap;
}
.theme-row--slider > .theme-row-track {
  grid-area: track;
  min-width: 0;
}
.theme-row--slider .theme-row-track input[type="range"] {
  display: block;
  width: 100%;
  min-width: 0;
}

/* §22.6xx.656v — DROP del .theme-section-divider y sub-elementos. Reemplazado
   por .tiny-divider (CSS utilities.css:620) que es una línea ondulada SVG
   coherente con la identidad de papel antiguo. Migración completa: 28
   bloques en 9 HTML files (settings panes + theme-editor-dialog). */

/* §22.6xx.267 — DROP de .theme-input. Todos los inputs/textareas/selects */

/* §22.6xx.257 — Save theme: lista de items que se exportarán con el theme. */
.theme-include-summary {
  list-style: none;
  margin: 0.5rem 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.6rem;
}.theme-include-summary-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.8rem;
  color: #4a341c;
  padding: 0.2rem 0.55rem;
  background: rgba(92, 51, 23, 0.06);
  border: 1px solid rgba(197, 160, 89, 0.35);
  border-radius: 999px;
}
.theme-include-summary-item .ti {
  color: var(--brass-text, #93411c);
  font-size: 0.85rem;
}
.desk-light .theme-include-summary-item {
  color: #4a341c !important;
}
.desk-light .theme-include-summary-item .ti {
  color: var(--brass-text, #93411c) !important;
}

/* §22.6xx.257 — Status de export: texto pequeño bajo el botón de export. */
.theme-export-status {
  margin: 0;
  font-size: 0.78rem;
  min-height: 1.2em;
}
.theme-export-status.is-success {
  color: #3d5a20;
  font-weight: 600;
}
.theme-export-status.is-error {
  color: #b32d1f;
  font-weight: 600;
}

/* §22.6xx.502 — Loading dialog (modal fullscreen con logo robin como progress) */
/* §22.6xx.first-boot-defaults — Fondo negro con transparencia y blur
   para que el card hand-drawn destaque. Antes era radial-gradient cream. */
.loading-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 10, 8, 0.72);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  /* §22.6xx.658bf — visibility SIN transition (discreta, no interpola).
     Si se transiciona 400ms, el overlay mantiene visibility: visible
     durante el fade y puede capturar clicks/teclados hasta el final.
     Con transition: none, visibility: hidden se aplica al instante
     de añadir .is-hidden, dejando pasar interacciones al workspace
     desde el primer frame del fade. opacity sigue transicionando 400ms
     para la sensación visual suave. */
  transition: opacity 400ms ease;
}

.loading-overlay.is-hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}


/* §22.6xx.658ap — Loader simplificado. El contenedor define el tamaño
   del logo (180px de ancho; alto derivado del viewBox del SVG 224x162).
   El <img> se estira al 100% del contenedor. La animación stroke-draw +
   dot-appear vive DENTRO del propio SVG (img/logo-stroke.svg) — el archivo
   incluye su propio <style> con @keyframes. Cuando el SVG se carga como
   <img>, los scripts no se ejecutan pero las animaciones CSS sí.
   Sin máscara, sin SVG inline, sin JS, sin @keyframes duplicados. */


@keyframes loading-bounce {
  /* Rebote vertical suave del logo durante la carga. Oscila entre la
     posicion base (0) y -12px arriba. ease-in-out da sensacion organica
     (acelera al subir, desacelera al bajar). El 50% marca el punto mas
     alto; 0% y 100% son la posicion base para que el ciclo sea continuo. */
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-12px); }
}

.loading-text {
  font-family: 'Cherry Swash', cursive;
  color: var(--sepia, #5C4033);
  font-size: 1.35rem;
  font-weight: 700;
  margin: 0;
  text-align: center;
  min-height: 1.6em;
  transition: opacity 400ms cubic-bezier(0.4, 0, 0.2, 1);
}

.loading-text.is-fading {
  opacity: 0;
}


@media (max-width: 480px) {
  .loading-text { font-size: 1.1rem; }
}

/* === Color wheel approximate grid (legacy - kept per §22.6xx.656h) === */
/* §22.6xx.658-iter12 — Approximate grid como theme-card (mismo patrón que
   .color-wheel-harmonics). Display: grid se mantiene (necesario para el
   layout 17×9); solo añadimos las capas paper + border hand-drawn. */
.color-wheel-approximate-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  grid-template-rows: repeat(9, 1fr);
  gap: 2px;
  padding: 8px;
  background-color: transparent !important;
  border: none !important;
  border-radius: 16px;
  isolation: isolate;
  overflow: hidden;
  aspect-ratio: 13 / 9;
}
.color-wheel-approximate-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-color: var(--panel-cream, #f7e6c0) !important;
  background-image: var(--ui-texture-paper-noise) !important;
  background-repeat: repeat !important;
  background-size: 240px 240px !important;
  background-blend-mode: normal !important;
  border-radius: inherit;
  pointer-events: none;
}
.color-wheel-approximate-grid::after {
  content: "";
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  border: 3px solid var(--ink-stroke, #c5a059);
  border-radius: inherit;
  filter: url(#hand-drawn-filter);
  pointer-events: none;
}
.desk-light .color-wheel-approximate-grid {
  border-radius: 8px !important;
}
.color-wheel-approximate-cell {
  aspect-ratio: 1;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: pointer;
  padding: 0;
  background-clip: padding-box;
  transition: transform 0.08s ease-out, box-shadow 0.1s ease-out, border-color 0.1s;
  min-width: 0;
  min-height: 0;
}
.color-wheel-approximate-cell:hover {
  transform: scale(1.4);
  z-index: 2;
  border-color: #fffaee;
  box-shadow:
    0 0 0 1.5px #5c3317,
    0 4px 8px rgba(0, 0, 0, 0.3);
  border-radius: 3px;
}
.color-wheel-approximate-cell.is-selected {
  border: 2px solid #fffaee;
  outline: 1.5px solid #5c3317;
  outline-offset: 0;
  border-radius: 0;
  z-index: 1;
}
.color-wheel-approximate-cell.is-selected:hover {
  transform: scale(1.4);
}

/* §22.6xx.658dr.74 — Botón de borrar una textura importada por el usuario
 * (fondo, sombra, papel, patrón washi, cursor custom) dentro del theme editor.
 *
 * Antes cada sitio lo styling a su manera: `btn-wood-square` (clase que no
 * existe en ningún CSS), `background: #ffffff` en línea que pisaba la textura
 * de madera, un `#c0392b` hardcodeado y —en el caso de los washi— el hover en
 * JS con onmouseenter/onmouseleave. El resultado era un cuadrado blanco con un
 * icono rojo pegado encima de la tile, sin Language del tema.
 *
 * Se sigue el lenguaje visual de `.my-color-delete` (chrome.css): circulito,
 * borde claro, sombra suave y escala al hover. Los colores salen de tokens, sin
 * inventar ninguno (§8.5 de AGENTS.md): `--brass` es el acento corporativo y
 * `--brass-dark` el estado pulsado/destructivo.
 * El icono hereda con `currentColor` para que sirva igual con `.rp-icon`
 * (máscara) que con `.ti` (fuente). */
.theme-custom-delete {
  position: absolute;
  top: 2px;
  left: 2px;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.35rem;
  height: 1.35rem;
  padding: 0;
  border: 1.5px solid var(--ivory, #FFFDF8);
  border-radius: 999px;
  background: var(--brass, #c85a29);
  color: var(--ivory, #FFFDF8);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
  transition: transform 110ms ease, background 140ms ease;
}
.theme-custom-delete > i {
  display: block;
  width: 0.72rem;
  height: 0.72rem;
  font-size: 0.72rem;
  line-height: 1;
  background-color: currentColor;
}
.theme-custom-delete:hover,
.theme-custom-delete:focus-visible {
  transform: scale(1.12);
  background: var(--brass-dark, #93411c);
}
.theme-custom-delete:focus-visible {
  outline: 2px solid var(--brass, #c85a29);
  outline-offset: 2px;
}

/* ═══ §22.6xx.658dr.233 — Aviso de teclado + tableta ═══════════════════════
 * Sin caja roja: es una nota informativa, no un aviso de error. Filete coral
 * a la izquierda, fondo coral al 6%, icono `ti-keyboard`, título en Cherry
 * Swash y cuerpo en sepia pleno.
 *
 * NOTA: al borrar `.welcome-cta--secondary` (§658dr.235) este bloque se fue por
 * delante, porque estaba justo detrás. Va al final del fichero a propósito:
 * así un borrado automático de "lo que había entre dos reglas" no puede
 * llevárselo otra vez.
 */
.welcome-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-top: 0.9rem;
  padding: 0.75rem 0.9rem;
  border-left: 3px solid var(--brass, #c85a29);
  background: rgba(200, 90, 41, 0.06);
  border-radius: 0 10px 10px 0;
}
/* §22.6xx.658dr.696 — El disclaimer ahora es un <component :is>: <a> si trae
   url y <div> si no. Estas reglas cubren los dos casos.
   El icono es un <i class="rp-icon"> (sistema de máscaras) y no el `ti` de
   antes, para que el JSON lo pueda cambiar sin meterse en otro juego de
   clases. Selector descendiente: gana a `.welcome-notice` sin depender del
   orden de carga. */
.welcome-notice > .rp-icon {
  flex-shrink: 0;
  /* 1.60rem: el tamaño por defecto de `.rp-icon` es 1.70rem, que es lo que
     usan las tiles. Aquí va algo menor porque el disclaimer no lleva la caja
     de gradiente que las tiles sí llevan, y a 1.70rem se comía el aire. */
  width: 1.6rem;
  height: 1.6rem;
  color: var(--brass-dark, #93411c);
}
/* Centrado vertical, como los iconos de las tiles (`.tile--row` usa
   `align-items: center`). El bloque base es `flex-start`, pensado para cuando
   el aviso era un texto fijo con icono de Tabler; con el icono agrandado
   quedaba pegado a la primera línea y descentrado con respecto al texto.
   El margin-top se apaga porque el gap del contenedor ya separa los avisos: si
   no, el primero queda con doble aire. Descendiente a propósito (0,2,0) para
   que gane a `.welcome-notice` sin depender del orden de carga. */
.dialog-disclaimers .welcome-notice {
  align-items: center;
  margin-top: 0;
}
a.welcome-notice {
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease;
}
a.welcome-notice:hover,
a.welcome-notice:focus-visible {
  background: rgba(200, 90, 41, 0.12);
  border-left-color: var(--brass, #c85a29);
}
a.welcome-notice:hover .welcome-notice__title,
a.welcome-notice:focus-visible .welcome-notice__title {
  color: var(--brass, #c85a29);
}
/* El texto se pinta con <span>, no con <p>: un <span> dentro de un <a> es
   válido en HTML; un <p> anidado en un <a> no lo es. El display:block es para
   que el margin-bottom del título siga aplicando, que en un inline no vale. */
.dialog-disclaimers .welcome-notice__title,
.dialog-disclaimers .welcome-notice__body { display: block; }

.welcome-notice > .ti {
  flex-shrink: 0;
  font-size: 1.15rem;
  line-height: 1.3;
  color: var(--brass-dark, #93411c);
}
.welcome-notice__text { min-width: 0; }
.welcome-notice__title {
  margin: 0 0 0.15rem;
  font-family: 'Cherry Swash', cursive;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--sepia, #5C4033);
}
.welcome-notice__body {
  margin: 0;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--sepia, #5C4033);
}

/* ═══ §22.6xx.658dr.742 — Carrusel del tutorial del welcome dialog ═══
 *
 * Las cinco capturas de img/welcome-tutorial/ se pasan con las flechas y,
 * despues de la quinta, aparece la pantalla con los disclaimers y los
 * enlaces. La imagen va en un marco de papel con la sombra suave del
 * workspace, y la barra de navegacion usa los mismos botones de madera
 * (`btn-wood btn-wood-icon`) que el resto de la app.
 *
 * Va al final del fichero a proposito, como el bloque de `.welcome-notice`
 * (§22.6xx.658dr.233): asi un borrado automatico de "lo que habia entre dos
 * reglas" no puede llevarselo otra vez.
 */
.welcome-carousel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}
.welcome-carousel__frame {
  display: flex;
  justify-content: center;
  width: 100%;
  padding: 0.4rem;
  border-radius: 16px;
  background: var(--panel-cream, #f6efe2);
  border: 1px solid rgba(92, 64, 51, 0.16);
  box-shadow: 0 2px 12px rgba(92, 64, 51, 0.10);
}
.welcome-carousel__img {
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 46vh;
  border-radius: 10px;
}
/* La barra de navegacion: flecha, puntos, contador y flecha. */
.welcome-carousel__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
}
/* Descendente a proposito: gana a `.btn-wood-icon` (chrome.css) sin
 * depender del orden de carga de las hojas de estilo, y deja los botones
 * mas pequenos que los 3rem del navbar. El `padding` no se toca: `.btn-xs`
 * lo pone con `!important` y no se puede beatenear sin `!important` propio. */
.welcome-carousel__nav > .welcome-carousel__navbtn {
  min-height: 2.3rem;
  min-width: 2.3rem;
  font-size: 0.95rem !important;
}
.welcome-carousel__dots {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.welcome-carousel__dot {
  width: 0.62rem;
  height: 0.62rem;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(92, 64, 51, 0.38);
  background: transparent;
  cursor: pointer;
  transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.welcome-carousel__dot:hover {
  border-color: var(--brass, #c85a29);
}
.welcome-carousel__dot:focus-visible {
  outline: 2px solid var(--brass, #c85a29);
  outline-offset: 2px;
}
/* Punto ya visto: se pinta claro. El punto actual, a topo. */
.welcome-carousel__dot.is-done {
  background: rgba(200, 90, 41, 0.4);
  border-color: rgba(200, 90, 41, 0.55);
}
.welcome-carousel__dot.is-active {
  background: var(--brass, #c85a29);
  border-color: var(--brass, #c85a29);
  transform: scale(1.15);
}
/* Mismo `min-width` que el contador de paginacion (`.page-nav-counter`):
 * el hueco se reserva para que la barra no de un salto al cambiar de cifra.
 * §22.6xx.658dr.743 — El contador ya no se vacia en el ultimo paso (ahora
 * cuenta los 6), pero el `min-width` se queda: mantiene la barra estable. */
.welcome-carousel__counter {
  display: inline-block;
  min-width: 3.2rem;
  text-align: center;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(92, 64, 51, 0.75);
}