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

/* === Display ===================================================== */
.block { display: block; }
.hidden { display: none; }
.inline-flex { display: inline-flex; }

/* === Position ==================================================== */
.absolute { position: absolute; }
.relative { position: relative; }
.fixed { position: fixed; }

/* === Z-index ===================================================== */
.z-10 { z-index: 10; }
.z-\[60\] { z-index: 60; }
.z-\[80\] { z-index: 80; }
.z-\[81\] { z-index: 81; }
.z-\[90\] { z-index: 90; }
.z-\[95\] { z-index: 95; }
.z-\[100\] { z-index: 100; }
.z-\[110\] { z-index: 110; }
.z-\[120\] { z-index: 120; }

/* === Flex / Grid containers ===================================== */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.flex-wrap { flex-wrap: wrap; }
.flex-1 { flex: 1 1 0%; }
.flex-shrink-0 { flex-shrink: 0; }
.shrink-0 { flex-shrink: 0; }
.grow { flex-grow: 1; }
.items-center { align-items: center; }
.items-start { align-items: flex-start; }
.justify-between { justify-content: space-between; }
.justify-center { justify-content: center; }
.justify-end { justify-content: flex-end; }
/* §22.6xx.251 — Square aspect ratio (usado en Interface textures). */
.aspect-square { aspect-ratio: 1 / 1; }

/* === Gap ========================================================= */
.gap-0 { gap: 0; }
.gap-0\.5 { gap: 0.125rem; }
.gap-1 { gap: 0.25rem; }
.gap-1\.5 { gap: 0.375rem; }
.gap-2 { gap: 0.5rem; }
.gap-2\.5 { gap: 0.625rem; }
.gap-3 { gap: 0.75rem; }
.gap-4 { gap: 1rem; }
.gap-5 { gap: 1.25rem; }
.gap-6 { gap: 1.5rem; }
.gap-8 { gap: 2rem; }
.gap-10 { gap: 2.5rem; }
.gap-12 { gap: 3rem; }
.gap-14 { gap: 3.5rem; }
.gap-16 { gap: 4rem; }
.gap-20 { gap: 5rem; }
.gap-x-6 { column-gap: 1.5rem; }
.gap-y-2 { row-gap: 0.5rem; }

/* === Space between (vertical stack) ============================== */
.space-y-1 > * + * { margin-top: 0.25rem; }
.space-y-1\.5 > * + * { margin-top: 0.375rem; }
.space-y-2 > * + * { margin-top: 0.5rem; }
.space-y-3 > * + * { margin-top: 0.75rem; }
.space-y-3\.5 > * + * { margin-top: 0.875rem; }
.space-y-4 > * + * { margin-top: 1rem; }
.space-y-5 > * + * { margin-top: 1.25rem; }

/* === Grid ======================================================== */
.grid { display: grid; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)); }
.grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.grid-cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.grid-cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.grid-cols-7 { grid-template-columns: repeat(7, minmax(0, 1fr)); }
.grid-cols-8 { grid-template-columns: repeat(8, minmax(0, 1fr)); }
.grid-cols-11 { grid-template-columns: repeat(11, minmax(0, 1fr)); }
.grid-cols-\[1fr_340px\] { grid-template-columns: 1fr 340px; }
.grid-cols-\[1fr_360px\] { grid-template-columns: 1fr 360px; }
.grid-cols-\[1fr_420px\] { grid-template-columns: 1fr 420px; }
.grid-cols-\[1fr_auto\] { grid-template-columns: 1fr auto; }
@media (min-width: 1024px) {
  .lg\:grid-cols-\[1fr_340px\] { grid-template-columns: 1fr 340px; }
  .lg\:grid-cols-\[1fr_360px\] { grid-template-columns: 1fr 360px; }
  .lg\:grid-cols-\[1fr_420px\] { grid-template-columns: 1fr 420px; }
}

/* === Inset / Positioning ========================================= */
.inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
.top-0 { top: 0; }
.top-1\.5 { top: 0.375rem; }
.top-full { top: 100%; }
.left-0 { left: 0; }
.left-1\/2 { left: 50%; }
.right-0 { right: 0; }
.right-1\.5 { right: 0.375rem; }
.right-2 { right: 0.5rem; }

/* === Transform =================================================== */
.-translate-x-1\/2 { transform: translateX(-50%); }
.-translate-y-1\/2 { transform: translateY(-50%); }
/* COMBO: el caso real del contour del brush usa ambas a la vez */
.-translate-x-1\/2.-translate-y-1\/2,
.translate-x-1\/2.translate-y-1\/2 {
  transform: translate(-50%, -50%);
}
.-translate-y-1 { transform: translateY(-0.25rem); }
.translate-x-0 { transform: translateX(0); }
.translate-x-4 { transform: translateX(1rem); }
.translate-y-0 { transform: translateY(0); }
.scale-95 { transform: scale(0.95); }
.scale-100 { transform: scale(1); }

/* === Width ======================================================= */
.w-1 { width: 0.25rem; }
.w-1\.5 { width: 0.375rem; }
.w-5 { width: 1.25rem; }
.w-6 { width: 1.5rem; }
.w-7 { width: 1.75rem; }
.w-9 { width: 2.25rem; }
.w-12 { width: 3rem; }
.w-14 { width: 3.5rem; }
.w-16 { width: 4rem; }
.w-32 { width: 8rem; }
.w-40 { width: 10rem; }
.w-48 { width: 12rem; }
.h-20 { height: 5rem; }
.h-24 { height: 6rem; }
.h-32 { height: 8rem; }
.h-40 { height: 10rem; }
.h-48 { height: 12rem; }
.w-auto { width: auto; }
.w-full { width: 100%; }
.w-px { width: 1px; }
.w-screen { width: 100vw; }
.w-\[220px\] { width: 220px; }
.w-\[420px\] { width: 420px; }
.w-\[560px\] { width: 560px; }
.w-\[620px\] { width: 620px; }
.w-\[680px\] { width: 680px; }
.w-\[900px\] { width: 900px; }
.w-\[980px\] { width: 980px; }
.w-\[1100px\] { width: 1100px; }

/* === Min / Max width ============================================= */
.min-w-0 { min-width: 0; }
.min-w-\[14rem\] { min-width: 14rem; }
.min-w-\[180px\] { min-width: 180px; }
.max-w-\[14rem\] { max-width: 14rem; }
.max-w-\[94vw\] { max-width: 94vw; }
.max-w-\[1024px\] { max-width: 1024px; }
.max-w-\[1100px\] { max-width: 1100px; }

.w-\[620px\] { width: 620px; }
.w-\[880px\] { width: 880px; }
.w-\[900px\] { width: 900px; }
.w-\[980px\] { width: 980px; }

/* === Height ====================================================== */
.h-1 { height: 0.25rem; }
.h-1\.5 { height: 0.375rem; }
.h-5 { height: 1.25rem; }
.h-6 { height: 1.5rem; }
.h-7 { height: 1.75rem; }
.h-8 { height: 2rem; }
.h-9 { height: 2.25rem; }
.h-12 { height: 3rem; }
.h-14 { height: 3.5rem; }
.h-16 { height: 4rem; }
.h-full { height: 100%; }
.h-screen { height: 100vh; }
.h-\[85vh\] { height: 85vh; }
.h-\[90vh\] { height: 90vh; }
.h-\[92vh\] { height: 92vh; }

/* === Min / Max height ============================================ */
.min-h-0 { min-height: 0; }
.min-h-\[480px\] { min-height: 480px; }
.max-h-\[80vh\] { max-height: 80vh; }
.max-h-\[90vh\] { max-height: 90vh; }
.max-h-\[92vh\] { max-height: 92vh; }
.max-h-\[900px\] { max-height: 900px; }
.max-h-\[1100px\] { max-height: 1100px; }

/* === Padding ===================================================== */
.p-1 { padding: 0.25rem; }
.p-3 { padding: 0.75rem; }
.p-3\.5 { padding: 0.875rem; }
.p-4 { padding: 1rem; }
.p-5 { padding: 1.25rem; }
.p-6 { padding: 1.5rem; }
.p-7 { padding: 1.75rem; }
.p-8 { padding: 2rem; }
.p-10 { padding: 2.5rem; }
.p-12 { padding: 3rem; }
.px-1 { padding-left: 0.25rem; padding-right: 0.25rem; }
.px-3 { padding-left: 0.75rem; padding-right: 0.75rem; }
.px-3\.5 { padding-left: 0.875rem; padding-right: 0.875rem; }
.px-5 { padding-left: 1.25rem; padding-right: 1.25rem; }
.px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.px-8 { padding-left: 2rem; padding-right: 2rem; }
.px-10 { padding-left: 2.5rem; padding-right: 2.5rem; }
.px-12 { padding-left: 3rem; padding-right: 3rem; }
.px-14 { padding-left: 3.5rem; padding-right: 3.5rem; }
.py-0\.5 { padding-top: 0.125rem; padding-bottom: 0.125rem; }
.py-1 { padding-top: 0.25rem; padding-bottom: 0.25rem; }
.py-1\.5 { padding-top: 0.375rem; padding-bottom: 0.375rem; }
.py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.py-2\.5 { padding-top: 0.625rem; padding-bottom: 0.625rem; }
.py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.py-3\.5 { padding-top: 0.875rem; padding-bottom: 0.875rem; }
.py-4 { padding-top: 1rem; padding-bottom: 1rem; }
.py-5 { padding-top: 1.25rem; padding-bottom: 1.25rem; }
.py-6 { padding-top: 1.5rem; padding-bottom: 1.5rem; }
.py-7 { padding-top: 1.75rem; padding-bottom: 1.75rem; }
.py-8 { padding-top: 2rem; padding-bottom: 2rem; }
.py-10 { padding-top: 2.5rem; padding-bottom: 2.5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.py-14 { padding-top: 3.5rem; padding-bottom: 3.5rem; }
.pt-1 { padding-top: 0.25rem; }
.pt-3 { padding-top: 0.75rem; }
.pb-3 { padding-bottom: 0.75rem; }

/* === Margin ====================================================== */
.mt-0\.5 { margin-top: 0.125rem; }
.mt-1 { margin-top: 0.25rem; }
.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 0.75rem; }
.mt-4 { margin-top: 1rem; }
.mt-6 { margin-top: 1.5rem; }
.mb-0 { margin-bottom: 0; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-1 { margin-bottom: 0.25rem; }
.mb-2 { margin-bottom: 0.5rem; }
.mb-3 { margin-bottom: 0.75rem; }
.mb-4 { margin-bottom: 1rem; }
.mt-auto { margin-top: auto; }
.ml-auto { margin-left: auto; }
.mr-2 { margin-right: 0.5rem; }
.mx-1 { margin-left: 0.25rem; margin-right: 0.25rem; }
.mx-auto { margin-left: auto; margin-right: auto; }
.my-1 { margin-top: 0.25rem; margin-bottom: 0.25rem; }

/* === Typography: font-size ======================================= */
.text-xs { font-size: 0.75rem; line-height: 1rem; }
.text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.text-base { font-size: 1rem; line-height: 1.5rem; }
.text-xl { font-size: 1.25rem; line-height: 1.75rem; }
.text-2xl { font-size: 1.5rem; line-height: 2rem; }
.text-\[0\.85rem\] { font-size: 0.85rem; }
.text-\[10px\] { font-size: 10px; }
.text-\[11px\] { font-size: 11px; }
.text-\[11\.5px\] { font-size: 11.5px; }
.text-\[12px\] { font-size: 12px; }
.text-\[12\.5px\] { font-size: 12.5px; }
.text-\[13px\] { font-size: 13px; }

/* === Typography: alignment + weight + family + style ============= */
.text-left { text-align: left; }
.text-center { text-align: center; }
.uppercase { text-transform: uppercase; }
/* §22.6xx.658dr.269 — Una etiqueta corta al lado de un input flexible se
   parte en dos líneas cuando el input se encoge ("Ancho" / "(px)"). Faltaba
   la de no partir; `.truncate` de abajo no sirve porque además recorta. */
.whitespace-nowrap { white-space: nowrap; }
.not-italic { font-style: normal; }
.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-mono { font-family: 'Source Code Pro', monospace; }
.font-medium { font-weight: 500; }
.font-semibold { font-weight: 600; }
.font-bold { font-weight: 700; }
.antialiased { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.leading-5 { line-height: 1.25rem; }
.leading-none { line-height: 1; }
.leading-tight { line-height: 1.25; }
.leading-snug { line-height: 1.375; }
.leading-relaxed { line-height: 1.625; }
.tracking-wider { letter-spacing: 0.05em; }
.tracking-\[0\.18em\] { letter-spacing: 0.18em; }
.tracking-\[0\.2em\] { letter-spacing: 0.2em; }

/* === Color: text (sepia variants — todas reusan --sepia) ========= */
.text-sepia { color: var(--sepia); }
/* §22.6xx.555zs — Alphas 40-65 subidos ~0.20 para mejorar contraste
   WCAG. Antes estos alphas producían texto ilegible sobre cream/sepia
   claro (e.g. "2 / 24", "Opacidad", "100%", "Blend" en panel-layers
   — fondo cream, font 10-12px, alpha 0.55-0.65 → ratio < 3:1, no
   accesible). Roberto: "no es accesible, no tiene contraste. Ese
   estilo de texto debe tener un color más oscuro". Ahora 0.55→0.75,
   0.65→0.85, etc. Los alphas 70+ se mantienen iguales para preservar
   la jerarquía visual (iconos y textos que YA eran legibles no se
   tocan). */
/* §22.6xx.658dr.674 — Escalera reconstruida: MONOTONA y con suelo AA.
   El §22.6xx.555zs subió los alphas 40-65 y dejó 70-85 en sus valores
   literales, lo que partió la escalera en dos y creó una INVERSIÓN: /70
   (0.70) quedaba MÁS CLARO que /65 (0.85). Además /40 seguía en 0.60,
   que sobre --panel-cream da 2.95:1, por debajo del 4.5:1 que pide
   WCAG AA. Roberto: "son demasiado tenues, no cumplen accesibilidad".
   Ahora la escalera es creciente y el mínimo es 0.85 = 5.24:1. */
.text-sepia\/40 { color: rgba(92, 64, 51, 0.90); }
.text-sepia\/50 { color: rgba(92, 64, 51, 0.92); }
.text-sepia\/55 { color: rgba(92, 64, 51, 0.93); }
.text-sepia\/60 { color: rgba(92, 64, 51, 0.94); }
.text-sepia\/65 { color: rgba(92, 64, 51, 0.95); }
.text-sepia\/70 { color: rgba(92, 64, 51, 0.96); }
.text-sepia\/75 { color: rgba(92, 64, 51, 0.97); }
.text-sepia\/80 { color: rgba(92, 64, 51, 0.98); }
.text-sepia\/85 { color: rgba(92, 64, 51, 1.00); }

/* === Color: background =========================================== */
.bg-sepia\/30 { background-color: rgba(92, 64, 51, 0.30); }
/* bg-primary, bg-base-100, bg-primary/10, etc. — provistos por */

/* === Border width / style ======================================== */
.border-2 { border-width: 2px; border-style: solid; }
.border-4 { border-width: 4px; border-style: solid; }
.border-b { border-bottom-width: 1px; border-bottom-style: solid; }
.border-t { border-top-width: 1px; border-top-style: solid; }
.border-r { border-right-width: 1px; border-right-style: solid; }
.border-l { border-left-width: 1px; border-left-style: solid; }
.border-dashed { border-style: dashed; }
/* §22.744 — Border color brass para conectar el item activo (notched) con el panel */
.border-brass { border-color: var(--brass); }

/* === Border color ================================================ */
.border-white { border-color: #fff; }
.border-black\/10 { border-color: rgba(0, 0, 0, 0.10); }
.border-sepia\/10 { border-color: rgba(92, 64, 51, 0.10); }
.border-sepia\/20 { border-color: rgba(92, 64, 51, 0.20); }
.border-sepia\/30 { border-color: rgba(92, 64, 51, 0.30); }
/* base-300/base-content no están en tailwind.config; mapeamos a sepia */
.border-base-300\/40 { border-color: rgba(92, 64, 51, 0.10); }
.border-base-300\/70 { border-color: rgba(92, 64, 51, 0.10); }
.border-base-content\/10 { border-color: rgba(92, 64, 51, 0.10); }

/* === Ring (box-shadow) =========================================== */
.ring-2 {
  box-shadow: 0 0 0 2px var(--tw-ring-color, rgba(0, 0, 0, 0.30));
}
.ring-black\/30 {
  box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.30);
}
/* ring-primary, ring-base-300 — provistos por daisyui. */

/* === Border radius =============================================== */
.rounded-md { border-radius: 0.2rem; }
.rounded-lg { border-radius: 0.3rem; }
.rounded-xl { border-radius: 0.4rem; }
.rounded-2xl { border-radius: 0.6rem; }
.rounded-3xl { border-radius: 1.5rem; }
.rounded-full { border-radius: 9999px; }
.rounded-\[1rem\] { border-radius: 1rem; }

/* === Box shadow ================================================== */
.shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10); }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10); }
.shadow-2xl { box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); }

/* === Opacity ===================================================== */
.opacity-0 { opacity: 0; }
.opacity-60 { opacity: 0.60; }
/* §22.6xx.658dr.674 — 85 y 90 para texto explicativo legible. Sobre
   --panel-cream (#f7e6c0), 0.85 = 5.24:1 y 0.90 = 5.89:1, los dos por
   encima del 4.5:1 de WCAG AA. Se añaden porque no había salto en la
   escalera y las utilities son estáticas (no hay JIT que las genere). */
.opacity-85 { opacity: 0.85; }
.opacity-90 { opacity: 0.90; }
.opacity-100 { opacity: 1; }

/* === Pointer events ============================================== */
.pointer-events-auto { pointer-events: auto; }
.pointer-events-none { pointer-events: none; }

/* === Cursor ====================================================== */
.cursor-pointer { cursor: pointer; }
.cursor-grab { cursor: grab; }

/* === User select ================================================= */
.select-none {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
}

/* === Object fit ================================================== */
.object-contain { object-fit: contain; }
.object-cover { object-fit: cover; }
.object-fill { object-fit: fill; }
.object-none { object-fit: none; }
.object-scale-down { object-fit: scale-down; }

/* === Max width / height (helpers para flex/grid items) ========== */
.max-w-full { max-width: 100%; }
.max-h-full { max-height: 100%; }

/* === Overflow ==================================================== */
.overflow-hidden { overflow: hidden; }
.overflow-y-auto { overflow-y: auto; }

/* === Transition (usado por Alpine x-transition) ================== */
.transition {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-colors {
  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.transition-transform {
  transition-property: transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 150ms;
}
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1); }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1); }
.duration-100 { transition-duration: 100ms; }
.duration-150 { transition-duration: 150ms; }
.duration-160 { transition-duration: 160ms; }
.duration-180 { transition-duration: 180ms; }
.duration-200 { transition-duration: 200ms; }
.duration-220 { transition-duration: 220ms; }

/* === Responsive: sm: ============================================= */
@media (min-width: 640px) {
  .sm\:h-9 { height: 2.25rem; }
}

/* === Responsive: md: ============================================= */
@media (min-width: 768px) {
  .md\:block { display: block; }
}

/* === Accessibility ================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ==================================================================
   FIX: ELIMINAR RELIEVE 3D + APLICAR HAND-DRAWN A SELECTORES DE FORMATO
   ================================================================== */

/* 1. Fondo plano sin degradado. SIN border en el elemento — el
 *   border va SOLO en el ::before para evitar el "doble border"
 *   (causa del relieve skeuomórfico). */
.desk-light .export-tab-tile {
  background: rgba(252, 247, 238, 0.8) !important;
  box-shadow: none !important;
  border: 0 !important;
}

/* 2. El ::before lleva el border con hand-drawn filter. Es la
 *   única fuente de border. El filter distorsionará solo el border
 *   (no el contenido) porque el interior del ::before es transparente. */
.desk-light .export-tab-tile::before {
  display: block !important;
  border: 2px solid rgba(92, 64, 51, 0.25) !important;
  filter: url(#hand-drawn-filter) !important;
}

/* 3. Limpiar la caja del icono (fuera línea blanca superior y degradado) */
.desk-light .export-tab-tile .export-tab-tile-icon {
  background: rgba(200, 90, 41, 0.10) !important;
  box-shadow: none !important;
}

/* Hover plano (sin border-color porque el border está en ::before) */
.desk-light .export-tab-tile:hover {
  background: rgba(255, 255, 255, 0.9) !important;
}
.desk-light .export-tab-tile:hover::before {
  border-color: rgba(92, 64, 51, 0.45) !important;
}

/* Seleccionado plano. SOLO cambia el color del border (sin cambiar
 * el grosor), si no aparece un "borde extra" por el crecimiento de 1.5px
 * a 2.5px al seleccionar. */
.desk-light .export-tab-tile.is-selected {
  background: rgba(200, 90, 41, 0.08) !important;
}
.desk-light .export-tab-tile.is-selected::before {
  border-color: var(--brass, #c85a29) !important;
}

/* ==================================================================
   MISMO PATRÓN para .create-pad-format-row (Otros formatos: DIN A,
   Carta, Foto Clásica, Póster, etc.) — Roberto pidió hand-drawn
   también en estos.
   ================================================================== */
.desk-light .create-pad-format-row {
  background: rgba(252, 247, 238, 0.8) !important;
  box-shadow: none !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
}
.desk-light .create-pad-format-row::before {
  content: "";
  position: absolute !important;
  inset: 0 !important;
  border: 2px solid rgba(92, 64, 51, 0.25) !important;
  border-radius: inherit !important;
  filter: url(#hand-drawn-filter) !important;
  pointer-events: none !important;
}
.desk-light .create-pad-format-row:hover {
  background: rgba(255, 255, 255, 0.9) !important;
}
.desk-light .create-pad-format-row:hover::before {
  border-color: rgba(92, 64, 51, 0.45) !important;
}
.desk-light .create-pad-format-row.is-selected {
  background: rgba(200, 90, 41, 0.08) !important;
  color: var(--brass-text, #93411c) !important;
}
.desk-light .create-pad-format-row.is-selected::before {
  border-color: var(--brass, #c85a29) !important;
}

/* ==================================================================
   §22.6xx.641 — MISMO PATRÓN para .export-tile.format-tile y
   .export-tile.quality-tile del Export dialog (Formato: Png/Jpg/Webp/Psd
   y Calidad: 72/150/300 DPI). Roberto pidió hand-drawn también en estos.
   ================================================================== */
.desk-light .export-tile.format-tile,
.desk-light .export-tile.quality-tile {
  background: rgba(252, 247, 238, 0.8) !important;
  box-shadow: none !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
}
.desk-light .export-tile.format-tile::before,
.desk-light .export-tile.quality-tile::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 2px solid rgba(92, 64, 51, 0.25) !important;
  border-radius: inherit !important;
  filter: url(#hand-drawn-filter) !important;
  pointer-events: none !important;
  transition: border-color 180ms cubic-bezier(0.2, 0, 0, 1) !important;
}
.desk-light .export-tile.format-tile:hover,
.desk-light .export-tile.quality-tile:hover {
  background: rgba(255, 255, 255, 0.9) !important;
}
.desk-light .export-tile.format-tile:hover::before,
.desk-light .export-tile.quality-tile:hover::before {
  border-color: rgba(92, 64, 51, 0.45) !important;
}
.desk-light .export-tile.format-tile.is-selected,
.desk-light .export-tile.quality-tile.is-selected {
  background: rgba(200, 90, 41, 0.08) !important;
}
.desk-light .export-tile.format-tile.is-selected::before,
.desk-light .export-tile.quality-tile.is-selected::before {
  border-color: var(--brass, #c85a29) !important;
}

/* ==================================================================
   §22.6xx.644 — Quitar TEXTURA de panel-birch del .dialog-panel con
   paper-light. La textura se ve COMPLETAMENTE a través de los
   .theme-card transparentes (problema reportado tras §22.6xx.643).
   Mantenemos un fondo cream plano sin textura.
   ================================================================== */
.desk-light .dialog-panel.paper-light,
.desk-light .confirm-dialog-panel.paper-light {
  background-image: none !important;
  background-color: var(--panel-cream);
  background-blend-mode: normal !important;
  box-shadow: none !important;
}

/* ==================================================================
   §22.6xx.655 — Disclaimer card con cinta adhesiva rasgada (3-sep-2026)
   Roberto pidió: "el disclaimer de 'cómo funcionan los tamaños y
   formatos' que sea una 'card' con cinta adhesiva con textura
   rasgada en los extremos con un pseudo-elemento y backdrop-filter".
   Tras review del ejemplo de Gemini, el look final se ajustó a:
   - Card con sombra estratificada (diorama), border-radius 4px
   - Cinta adhesiva de ancho fijo 110x24px, color beige translucido
     rgba(224, 197, 146, 0.65), backdrop-filter: blur(1px) en la
     CINTA (no en la card), clip-path de 8 puntos con forma de
     "lente" (lados cóncavos sutiles), centrada con rotate(-1.5deg).
   ================================================================== */
.desk-light .disclaimer-card {
  position: relative;
  margin-top: 10px;
  /* §22.6xx.656y — clip-path MOVIDO al .disclaimer-card-content. El card
     ya no recorta su propio pseudo-elemento ::before (la cinta adhesiva),
     que ahora sobresale por arriba del card (top:-10px). El card es solo
     un contexto de posicionamiento + margin-top; el contenido visible con
     los bordes ondulados vive en .disclaimer-card-content. */
}

.desk-light .disclaimer-card::before {
  content: "";
  position: absolute;
  /* §22.6xx.656y — Top -10px (antes 4px en §22.6xx.656u, antes -12px original).
     La cinta adhesiva ahora SOBRESALE por arriba del card, como una cinta
     real pegada en el borde superior. Requisitos para que esto funcione:
     1. El card NO tiene clip-path (sino recorta la parte que sobresale).
     2. El abuelo <div class="overflow-y-visible flex flex-col"> (en
        create-pad-dialog.html:229) tiene overflow-y visible (no auto) para
        que la parte superior de la cinta no se recorte por el scroll
        container. */
  top: -10px;
  left: 50%;
  transform: translateX(-50%) rotate(-1.5deg);
  width: 110px;
  height: 24px;
  background-color: rgba(214, 178, 110, 0.95);
  backdrop-filter: blur(1px);
  -webkit-backdrop-filter: blur(1px);
  box-shadow: 0 1px 4px rgba(84, 51, 23, 0.25);
  clip-path: polygon(
    5% 0%, 95% 0%, 100% 30%, 96% 70%, 100% 100%,
    5% 100%, 0% 70%, 4% 30%
  );
  pointer-events: none;
  /* §22.6xx.656ac — z-index 3 (antes 1). La cinta adhesiva debe estar
     ENCIMA del .disclaimer-card-content (z-index 2) para que la parte
     que se solapa con el card se vea como "encima del papel", no
     tapada por el content wrapper. Con z-index 1, el content wrapper
     tapaba visualmente la mitad inferior de la cinta (la que entra
     dentro del card), haciéndola parecer gris/translúcida. */
  z-index: 3;
}

.desk-light .disclaimer-card-content {
  position: relative;
  z-index: 2;
  padding: 1.5rem 1rem 1rem;
  background: #f7de90;
  border-radius: 0;
  /* §22.6xx.656y — clip-path MOVIDO del card al content wrapper. Ahora el
     content wrapper tiene los bordes ondulados (era el card antes) y el
     pseudo-elemento ::before del card puede sobresalir por arriba sin ser
     recortado. El contenido del card (icono + título + texto) sigue
     dentro de los bordes ondulados del wrapper. */
  clip-path: polygon(
    /* top ondulado: 6 puntos con variación 0-3px */
    0% 2px, 20% 0px, 40% 3px, 60% 1px, 80% 3px, 100% 0px,
    /* right vertical recto */
    100% calc(100% - 2px),
    /* bottom ondulado: 5 puntos (se cierra con el primer punto) */
    80% 100%, 60% calc(100% - 3px), 40% 100%, 20% calc(100% - 2px), 0% 100%
  );
}

/* ==================================================================
   §22.6xx.655f — Línea divisoria orgánica (estilo Gemini "tiny-divider")
   Roberto pidió: "el separador entre cómo funcionan los tamaños y
   formatos y el importar cuaderno que sea de estilo 'línea
   divisoria orgánica' de los ejemplos del html de gemini".

   Reproduce el patrón del ejemplo de Gemini:
   - .effect-handdrawn-line: contenedor opcional (border-radius)
   - .tiny-divider: línea horizontal SVG con curva Bézier dorada
     que se repite horizontalmente. Stroke dorado #b38a43
     (idéntico al brass-gold de Robinpad pero un poco más cálido).
   - Stroke-opacity 0.85 + stroke-linecap round = look "tinta
     a mano" coherente con la identidad de papel antiguo.
   ================================================================== */
.tiny-divider {
  margin: 12px auto;
  height: 4px;
  width: 50%;
  max-width: 180px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 4' preserveAspectRatio='none'%3E%3Cpath d='M0,2 Q40,0.2 80,2.6 T160,1.8' fill='none' stroke='%23b38a43' stroke-width='1.8' stroke-linecap='round' stroke-opacity='0.85'/%3E%3C/svg%3E");
  background-repeat: repeat-x;
  background-size: 60px 4px;
}

/* §22.6xx.658-iter28 — Variante vertical de .tiny-divider. Misma
   curva Bézier dorada (#b38a43) pero orientada 90° para separar
   elementos en línea horizontal (e.g. botón "Custom" vs colores
   predefinidos del theme editor). La curva se repite verticalmente
   con background-size 4×60, manteniendo el look "tinta a mano" del
   divider horizontal. */
.tiny-divider-vertical {
  align-self: stretch;
  width: 4px;
  min-height: 28px;
  margin: 0 6px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 160' preserveAspectRatio='none'%3E%3Cpath d='M2,0 Q4,40 2,80 T0,120 T2,160' fill='none' stroke='%23b38a43' stroke-width='1.8' stroke-linecap='round' stroke-opacity='0.85'/%3E%3C/svg%3E");
  background-repeat: repeat-y;
  background-size: 4px 60px;
  flex-shrink: 0;
}

/* ==================================================================
   §22.6xx.645 — Mismo patrón flat + hand-drawn border para
   .brush-item (grid y list) y .brush-preview-tile del Brushes panel.
   Roberto pidió: "el mismo estilo flat, y border hand drawn, deben
   tener los items del grid de Pinceles".
   ================================================================== */
.desk-light .brush-item {
  background: rgba(252, 247, 238, 0.8) !important;
  box-shadow: none !important;
  border: 0 !important;
  position: relative;
  overflow: hidden;
}
.desk-light .brush-item::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  border: 2px solid rgba(92, 64, 51, 0.25) !important;
  border-radius: inherit !important;
  filter: url(#hand-drawn-filter) !important;
  pointer-events: none !important;
  transition: border-color 180ms cubic-bezier(0.2, 0, 0, 1) !important;
}
.desk-light .brush-item:hover {
  background: rgba(255, 255, 255, 0.9) !important;
}
.desk-light .brush-item:hover::before {
  border-color: rgba(92, 64, 51, 0.45) !important;
}
/* Selected: SOLO cambia el color del border (sin border-width ni
 * linear-gradient ni box-shadow glow). Mantiene el border-width 2px
 * constante. */
.desk-light .brush-item.is-selected {
  background: rgba(200, 90, 41, 0.08) !important;
  border: 0 !important;
  border-width: 0 !important;
  box-shadow: none !important;
}
.desk-light .brush-item.is-selected::before {
  border-color: var(--brass, #c85a29) !important;
}
/* Thumbnail del brush: fondo plano sin linear-gradient ni box-shadow. */
.desk-light .brush-preview-tile {
  background: rgba(252, 247, 238, 0.8) !important;
  border: 1px solid rgba(92, 64, 51, 0.18) !important;
  box-shadow: none !important;
}
.desk-light .brush-item.is-selected .brush-preview-tile {
  background: rgba(200, 90, 41, 0.12) !important;
  box-shadow: none !important;
  border: 1px solid rgba(200, 90, 41, 0.25) !important;
}

/* ==================================================================
   §22.6xx.647 — PROBAR efecto "Borde Rasgado" (torn edge) en dialogs y
   ventanas flotantes. Roberto pidió: "en su lugar aplica el efecto
   borde rasgado".
   Técnica: clip-path: polygon() con micro-variaciones en los bordes
   superior e inferior (2-3px) que simula papel ligeramente rasgado.
   Inspirado en el efecto 4 de la galería de Gemini. El hand-drawn
   border del ::before (de §22.6xx.635) se adapta al clip-path
   automáticamente porque está dentro del padre.
   ================================================================== */
.desk-light .dialog-panel,
.desk-light .floating-panel {
  /* Solo el TOP rasgado. El clip-path tiene 9 puntos: 7 ondulaciones en
   * el borde superior + 2 puntos en las esquinas inferiores (que
   * permanecen planas). El bottom NO se recorta, así que el
   * border-bottom-radius puede aplicarse normalmente. */
  clip-path: polygon(
    0% 4px, 15% 0px, 30% 3px, 50% 1px, 70% 3.5px, 85% 0px, 100% 2px,
    100% 100%, 0 100%
  );
  /* Top: SIN border-radius (las ondulaciones del clip-path hacen el trabajo).
   * Bottom: border-radius en las esquinas inferiores (esquinas suaves
   * redondeadas). Override a 0 con !important para ganar la batalla
   * frente a chrome.css:753 (1.35rem) y chrome.css:1039 (22px). */
  border-top-left-radius: 0 !important;
  border-top-right-radius: 0 !important;
  border-bottom-left-radius: 0.8rem !important;
  border-bottom-right-radius: 0.8rem !important;
}

/* ==================================================================
   §22.6xx.649 — Reducir border-radius de selectores con hand-drawn.
   Roberto pidió: "reduce el border radius de theme-card,
   export-tab-tile, create-pad-format-row".
   Reducción ~50%:
   - .theme-card: 16px → 8px (dialogs.css:3914)
   - .export-tab-tile: 0.85rem → 0.4rem (chrome.css:5247)
   - .export-tab-tile--compact: 0.65rem → 0.3rem (chrome.css:5308)
   - .create-pad-format-row: 0.5rem → 0.25rem (chrome.css:60)
   El ::before con hand-drawn filter hereda border-radius via inherit,
   así que el ondulado del border se adapta a la nueva forma más
   cuadrada (más coherente con el efecto rasgado del §22.6xx.646).
   ================================================================== */
.desk-light .theme-card {
  border-radius: 8px !important;
}
.desk-light .export-tab-tile {
  border-radius: 0.4rem !important;
}
.desk-light .export-tab-tile--compact {
  border-radius: 0.3rem !important;
}
.desk-light .create-pad-format-row {
  border-radius: 0.25rem !important;
}

/* ==================================================================
   §22.6xx.39o-range-v4 — Input range estilo FLAT con líneas hand-drawn.
   §22.6xx.39o-range-v4-iter2 — display: block + padding: 0 para soportar
     auto-wrap (slider-track-fill.js envuelve cada <input type="range">
     en <div class="range-hand-drawn"> sin tocar el HTML de los 14+
     archivos que contienen inputs range).

   El track nativo se hace TRANSPARENTE. Las 2 líneas (fill + unfill)
   se renderizan via ::before/::after del wrapper con filter SVG strong
   (#hand-drawn-filter-strong, scale=5, ondas amplias). Thumb preserva
   el estilo sistema [A] (chrome.css:791-812) con relieves y textura.

   PATRÓN DE USO HTML (manual, opcional — el helper ya auto-wrap):
     <div class="range-hand-drawn" style="--track-value: 60%;">
       <input type="range" min="0" max="100" value="60"
         x-on:input="$el.parentElement.style.setProperty('--track-value', $event.target.value + '%')">
     </div>

   Líneas de 6px, thumb 22x22, margin-top: -8px (centrado en track 6px).
   El wrapper es block + width 100% + position: relative. ::before = línea
   unfill (ancho completo, sepia soft), ::after = línea fill (ancho =
   --track-value, brass). Ambas con filter: url(#hand-drawn-filter-strong).

   --track-value: el helper slider-track-fill.js lo actualiza
   automáticamente en el wrapper. Si el consumer quiere control manual
   (e.g. demo standalone), puede usar el x-on:input de arriba.
   ================================================================== */
.range-hand-drawn {
  display: block;
  position: relative;
  width: 100%;
  padding: 0;
  --track-value: 0%;
  --track-color-fill: var(--brass, #c85a29);
  --track-color-unfill: rgba(92, 64, 51, 0.30);
}
.range-hand-drawn::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  height: 6px;
  transform: translateY(-50%);
  background: var(--track-color-unfill);
  border-radius: 999px;
  filter: url(#hand-drawn-filter-medium);
  pointer-events: none;
  z-index: 0;
}
.range-hand-drawn::after {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: var(--track-value);
  height: 6px;
  transform: translateY(-50%);
  background: var(--track-color-fill);
  border-radius: 999px;
  filter: url(#hand-drawn-filter-medium);
  pointer-events: none;
  z-index: 1;
}
.range-hand-drawn > input[type="range"] {
  position: relative;
  z-index: 2;
  width: 100%;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: transparent;
  margin: 0;
  cursor: pointer;
}
.range-hand-drawn > input[type="range"]::-webkit-slider-runnable-track {
  background: transparent;
  height: 6px;
  border: none;
}
.range-hand-drawn > input[type="range"]::-moz-range-track {
  background: transparent;
  height: 6px;
  border: none;
}
.range-hand-drawn > input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -8px;
  border-radius: 50%;
  background-color: var(--btn-bg, #5C3317);
  background-image: var(--ui-texture-panel, url('../resources/chrome/panel-birch.webp'));
  background-size: 240px 240px;
  background-blend-mode: soft-light;
  border: 1px solid rgba(255, 253, 248, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.45),
    inset 4px 4px 6px rgba(255, 255, 255, 0.30),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    inset 1.5px 0 0 rgba(0, 0, 0, 0.20),
    inset -1.5px 0 0 rgba(0, 0, 0, 0.20);
  cursor: pointer;
}
.range-hand-drawn > input[type="range"]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  margin-top: -8px;
  background-color: var(--btn-bg, #5C3317);
  background-image: var(--ui-texture-panel, url('../resources/chrome/panel-birch.webp'));
  background-size: 240px 240px;
  background-blend-mode: soft-light;
  border: 1px solid rgba(255, 253, 248, 0.35);
  box-shadow:
    inset 0 1px 0 rgba(255, 253, 248, 0.45),
    inset 4px 4px 6px rgba(255, 255, 255, 0.30),
    inset 0 -3px 0 rgba(0, 0, 0, 0.35),
    inset 1.5px 0 0 rgba(0, 0, 0, 0.20),
    inset -1.5px 0 0 rgba(0, 0, 0, 0.20);
  cursor: pointer;
}

/* ==================================================================
   §22.6xx.651 — Quitar bordes separadores entre .theme-row dentro
   de .theme-card. Roberto pidió: "quita los bordes separadores entre
   las secciones de los dialogs de crear nuevo cuaderno".
   Aplica también a Settings y otros dialogs que usen .theme-card.
   Si Roberto quiere preservarlos en Settings, podemos añadir un
   selector más específico con .settings-pane-content o similar.
   ================================================================== */
.desk-light .theme-card .theme-row {
  border-bottom: none !important;
}

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

/* === Utilities ausentes (§22.6xx.audit-utilities) ======================
   Clases usadas en components/ e index.html que NO existían en esta
   hoja. utilities.css es estático (sin JIT), así que cada clase
   ausente se ignoraba en SILENCIO: el elemento salía sin esa
   propiedad y el layout se rompía sin error visible.

   Solo se añaden las utilities con semántica Tailwind unívoca. Las
   clases de componente sin estilo (btn-sm, kbd, toggle-sm, handle-*,
   cursor-tile, badge-wood...) NO se inventan aquí: requieren diseño.
   ==================================================================== */

/* — Tipografía — */
.text-lg { font-size: 1.125rem; line-height: 1.75rem; }
.text-5xl { font-size: 3rem; line-height: 1; }
.text-\[9px\] { font-size: 9px; }
.text-\[0\.7rem\] { font-size: 0.7rem; }
.text-\[0\.65rem\] { font-size: 0.65rem; }
.italic { font-style: italic; }
.tabular-nums { font-variant-numeric: tabular-nums; }
.text-right { text-align: right; }
.underline { text-decoration: underline; }
.underline-offset-2 { text-underline-offset: 0.25rem; }
.tracking-wide { letter-spacing: 0.025em; }
.leading-normal { line-height: 1.5; }

/* — Color de texto (error usa el rojo oscuro del workspace, no un
     color nuevo: --brass-dark ya es el tono de error del tema) — */
.text-error { color: var(--brass-dark, #93411c); }
.bg-error\/15 { background-color: rgba(147, 65, 28, 0.15); }
.bg-black\/5 { background-color: rgba(0, 0, 0, 0.05); }

/* — Opacidad — */
.opacity-70 { opacity: 0.7; }
.opacity-80 { opacity: 0.8; }

/* — Bordes y radios — */
.border { border-width: 1px; border-style: solid; }
.rounded { border-radius: 0.25rem; }

/* — Sizing — */
.w-10 { width: 2.5rem; }
.h-10 { height: 2.5rem; }
.h-1\.5 { height: 0.375rem; }
.max-w-\[18rem\] { max-width: 18rem; }

/* — Spacing — */
.m-0 { margin: 0; }
.m-4 { margin: 1rem; }
.ml-0\.5 { margin-left: 0.125rem; }
.ml-4 { margin-left: 1rem; }
.mr-1 { margin-right: 0.25rem; }
.mt-0 { margin-top: 0; }
.mb-0\.5 { margin-bottom: 0.125rem; }
.mb-5 { margin-bottom: 1.25rem; }
.px-1\.5 { padding-left: 0.375rem; padding-right: 0.375rem; }
.px-4 { padding-left: 1rem; padding-right: 1rem; }
.pb-2 { padding-bottom: 0.5rem; }
.pl-5 { padding-left: 1.25rem; }
.pl-7 { padding-left: 1.75rem; }
.pr-0 { padding-right: 0; }

/* — Flex / overflow / transiciones — */
.items-stretch { align-items: stretch; }
.overflow-y-visible { overflow-y: visible; }
.transition-opacity { transition-property: opacity; }
.hover\:opacity-80:hover { opacity: 0.8; }

/* — Responsive — */
@media (min-width: 640px) {
  .sm\:h-14 { height: 3.5rem; }
  .sm\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

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