/* === J. Iconografía: ajuste de color base para chrome ============== */
/* En el escritorio claro, los íconos Tabler deben ganar tono sepia */
.desk-light .ti {
  color: var(--sepia);
}

.desk-light .btn-wood .ti,
.desk-light .btn-wood i,
.desk-light .btn-wood-round .ti,
.desk-light .btn-wood-round i,
/* §22.190n: tools-btn-trigger usa la misma paleta (dorado claro */
.desk-light .tools-btn-trigger .ti,
.desk-light .tools-btn-trigger i {
  /* §22.6xx.658-iter26: auto-contraste por luminancia */
  color: var(--btn-text-color, #F4D58D);
}
.desk-light .tools-btn-trigger.is-open .ti,
.desk-light .tools-btn-trigger.is-open i {
  color: var(--ivory);
}
.engraved-sepia .ti,
.engraved-brass .ti {
  color: inherit;
}

/* === K. Barra de scroll ÚNICA de la app ============================
 *
 * §22.6xx.658dr.131 — Antes había CINCO definiciones repartidas en cuatro
 * ficheros, con dos mecanismos distintos, y por eso el mismo scrollbar salía
 * coral en unos paneles y gris en otros. Aquí queda UNA, y los valores viven en
 * tokens.css (--scrollbar-*).
 *
 * El detalle que causaba medio problema: `scrollbar-color` en un elemento tiene
 * PRIORIDAD sobre los pseudo-elementos `::-webkit-scrollbar` en Chromium, es
 * decir, los desactiva para ese subárbol. Por eso `.brushes-floating-grid`, que
 * declaraba `scrollbar-color` para Firefox, en Chrome se veía gris y todo lo
 * demás coral. Aquí los pseudo-elementos van SIN `scrollbar-color` en el
 * elemento, y el `scrollbar-color` va encerrado en un @supports que solo se
 * activa donde los pseudo-elementos no existen.
 *
 * `.desk-light` está en <body>, así que esto cubre toda la app: ventanas,
 * pills y diálogos incluidos. */
.desk-light *::-webkit-scrollbar {
  width: var(--scrollbar-size);
  height: var(--scrollbar-size);
}

.desk-light *::-webkit-scrollbar-track {
  background: var(--scrollbar-track);
  border-radius: var(--scrollbar-radius);
}

.desk-light *::-webkit-scrollbar-thumb {
  background: var(--scrollbar-thumb);
  border-radius: var(--scrollbar-radius);
}

.desk-light *::-webkit-scrollbar-thumb:hover {
  background: var(--scrollbar-thumb-hover);
}

.desk-light *::-webkit-scrollbar-corner {
  background: var(--scrollbar-track);
}

/* Firefox: no soporta los pseudo-elementos, así que aquí sí hace falta
   `scrollbar-color`. El `@supports not selector(...)` lo mantiene fuera de
   Chromium, donde los dos mecanismos se pisarían. */
@supports not selector(::-webkit-scrollbar) {
  .desk-light * {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track);
  }
}
/* ════════════════════════════════════════════════════════════════════ */

/* === M. Paper (filas pequeñas / cards intermedias) ================== */
/* §22.6xx.656n — Drop del gradient+texture+blend+box-shadow. Solo fondo
   plano + border sepia para separación visual cuando paper-light es
   sub-componente dentro de un dialog-panel. */
.paper-light {
  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;
  color: var(--sepia);
  border: 1px solid rgba(92, 64, 51, 0.20);
  border-radius: 10px;
}

.paper-light:hover {
  background-color: var(--panel-birch);
}

/* §22.6xx.656p — Override específico para el <nav class="paper-light">
   del vertical menu de Settings. La columna entera debe ser TRANSPARENTE
   (ni background-color ni border) para que se vea el --panel-cream del
   dialog-panel padre a través. El hover del <nav> (no de los items)
   tampoco aplica color de fondo — los items conservan su hover propio
   (settings-tab-btn:hover + is-active). */
nav.paper-light {
  background-color: transparent;
  border-color: transparent;
}
nav.paper-light:hover {
  background-color: transparent;
}

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

/* === N. Toggle (.toggle.toggle-primary) ============================ */
/* Los toggles DaisyUI tienen tamaño nativo 32x16. Para igualar a */
.desk-light .toggle {
  --handleoffset: 0.25rem;
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  cursor: pointer;
  width: 44px;
  height: 24px;
  border-radius: 999px;
  border: 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0) 50%),
    var(--desk-oak);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  transition: background-color 200ms ease, box-shadow 200ms ease;
}

.desk-light .toggle:focus-visible {
  outline: none;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 3px var(--brass-light);
}

/* Pseudo-handle (DaisyUI usa ::before) */
.desk-light .toggle::before {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 35% 30%, #fbe1cf 0%, var(--brass) 40%, var(--brass-dark) 95%);
  box-shadow:
    inset -1px -2px 2px rgba(0, 0, 0, 0.40),
    inset 1px 1px 1px rgba(255, 255, 255, 0.50),
    0 1px 2px rgba(0, 0, 0, 0.40);
  transition: transform 200ms ease, background 200ms ease;
}

/* Estado ON: el toggle gana tono terracota y el handle se desliza */
.desk-light .toggle:checked,
.desk-light .toggle.toggle-primary:checked {
  background:
    linear-gradient(180deg, rgba(120, 50, 30, 0.35), rgba(0, 0, 0, 0) 50%),
    var(--robin);
}

.desk-light .toggle:checked::before,
.desk-light .toggle.toggle-primary:checked::before {
  transform: translateX(20px);
  background:
    radial-gradient(circle at 35% 30%, #FFFFFF 0%, #FFE6D6 50%, var(--parchment) 100%);
}

/* Tamaños */
.desk-light .toggle.toggle-sm {
  width: 36px;
  height: 20px;
}

.desk-light .toggle.toggle-sm::before {
  width: 16px;
  height: 16px;
  top: 2px;
  left: 2px;
}

.desk-light .toggle.toggle-sm:checked::before,
.desk-light .toggle.toggle-sm.toggle-primary:checked::before {
  transform: translateX(16px);
}

.desk-light .toggle.toggle-lg {
  width: 56px;
  height: 28px;
}

.desk-light .toggle.toggle-lg::before {
  width: 24px;
  height: 24px;
}

.desk-light .toggle.toggle-lg:checked::before {
  transform: translateX(28px);
}

/* === O. Select (.select.select-bordered) ============================ */
.desk-light .select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  display: inline-block;
  position: relative;
  padding: 0.55rem 2rem 0.55rem 0.75rem;
  background-color: color-mix(in srgb, var(--brass-dark) 32%, var(--panel-cream));
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8' fill='%232A1810'><path d='M0 0l6 8 6-8z'/></svg>");
  background-size: 12px 8px;
  background-position: right 0.6rem center;
  background-repeat: no-repeat;
  color: #2A1810;
  font-size: 0.85rem;
  font-family: 'Source Code Pro', monospace;
  border-radius: 10px;
  border: none;
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.30),
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 -1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer;
}

.desk-light .select:focus {
  outline: none;
  background-color: color-mix(in srgb, var(--brass-dark) 42%, var(--panel-cream));
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.30),
    inset 0 0 0 2px var(--brass),
    inset 0 -1px 0 rgba(255, 255, 255, 0.10);
}

.desk-light .select option {
  background-color: var(--panel-cream);
  color: #2A1810;
}

.desk-light .select-bordered {
  /* .select-bordered ya no necesita borde porque tiene shadows */
  border: none !important;
}

.desk-light .select-sm {
  padding: 0.40rem 1.6rem 0.40rem 0.55rem;
  font-size: 0.75rem;
}

.desk-light .select-xs {
  padding: 0.30rem 1.4rem 0.30rem 0.45rem;
  font-size: 0.70rem;
}

.desk-light .select option {
  background-color: #5C4033;
  color: var(--ivory);
}

/* === P. Checkbox (.checkbox) ======================================== */
.desk-light .checkbox {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  position: relative;
  display: inline-block;
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.30), rgba(0, 0, 0, 0) 50%),
    var(--desk-oak);
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10);
  cursor: pointer;
  vertical-align: middle;
  border: none;
  transition: background 200ms ease, box-shadow 200ms ease;
}

.desk-light .checkbox:checked {
  background:
    linear-gradient(180deg, rgba(120, 50, 30, 0.35), rgba(0, 0, 0, 0) 50%),
    var(--robin);
}

.desk-light .checkbox:focus-visible {
  outline: none;
  box-shadow:
    inset 0 2px 3px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 0 0 3px var(--brass-light);
}

.desk-light .checkbox:checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid var(--ivory);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* === Q. Label text (.label-text) ==================================== */
/* DaisyUI: span con texto dentro de .label. Por defecto hereda el */
.desk-light .label-text {
  color: var(--sepia);
  font-size: inherit;
  font-weight: 500;
}

.desk-light .label-text-alt {
  color: var(--sepia-soft-text, #6B4D33);
  font-size: 0.7rem;
}

/* === R. Alert-like: save indicator + storage error banner =========== */
/* Estas clases son custom (.save-indicator, .storage-error-banner), */
.desk-light .save-indicator {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0) 50%),
    var(--panel-cream);
  color: var(--sepia);
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1px 0 var(--brass),
    0 8px 24px rgba(80, 40, 15, 0.30);
  border: none;
}

.desk-light .save-indicator--error {
  background:
    linear-gradient(180deg, rgba(255, 200, 180, 0.5), rgba(255, 255, 255, 0) 50%),
    #F5C8A8;
  color: #6B2818;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1.5px 0 #A0573C,
    0 8px 24px rgba(160, 87, 60, 0.40);
}

.desk-light .save-indicator--offline {
  background:
    linear-gradient(180deg, rgba(180, 180, 200, 0.5), rgba(255, 255, 255, 0) 50%),
    #E0DCD0;
  color: #3A2F2A;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1.5px 0 var(--brass-dark),
    0 8px 24px rgba(80, 40, 15, 0.30);
}

.desk-light .save-indicator--pending {
  background:
    linear-gradient(180deg, rgba(255, 230, 200, 0.5), rgba(255, 255, 255, 0) 50%),
    #F8E8C8;
  color: #5C4033;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1.5px 0 var(--brass-dark),
    0 8px 24px rgba(197, 160, 89, 0.40);
}

.desk-light .save-indicator-icon i {
  color: inherit;
}

.desk-light .save-indicator-dismiss {
  background-color: transparent;
  color: inherit;
  border-radius: 8px;
  padding: 4px 8px;
}

.desk-light .save-indicator-dismiss:hover {
  background-color: rgba(60, 30, 10, 0.10);
}

/* === S. Storage error banner ======================================= */
.desk-light .storage-error-banner {
  background:
    linear-gradient(180deg, rgba(255, 200, 180, 0.5), rgba(255, 255, 255, 0) 50%),
    #F5C8A8;
  color: #6B2818;
  border-radius: 14px;
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.85),
    inset 0 -1.5px 0 #A0573C,
    0 12px 32px rgba(160, 87, 60, 0.40);
  border: none;
}

.desk-light .storage-error-banner * {
  color: inherit;
}

/* === T. Status pill (navbar) ====================================== */
.desk-light .navbar-status-pill-color-swatch {
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.50),
    0 0 0 1px var(--brass-dark);
}

/* === U. Toolbar pill (sidebar) ===================================== */
.desk-light .hud-toolbar-pill .btn.is-active,
.desk-light .hud-toolbar-pill .btn.is-active i {
  color: var(--robin) !important;
}


/* === X. Action btn (icono pequeño en library cards / panels) ====== */
.desk-light .library-action-btn,
.desk-light .library-action-btn * {
  color: var(--sepia-soft-text, #6B4D33);
  background-color: transparent;
  border-radius: 8px;
  transition: background 140ms ease, color 140ms ease;
}

.desk-light .library-action-btn:hover {
  background-color: color-mix(in srgb, var(--brass) 22%, transparent);
  color: var(--sepia);
}

.desk-light .library-action-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
}

/* === Y. Reference image (la foto importada sobre el workspace) ===== */
.desk-light .reference-image {
  border-radius: 6px;
  box-shadow:
    0 6px 18px rgba(60, 30, 10, 0.40),
    inset 0 0 0 1px rgba(255, 253, 248, 0.30);
}