/* === Sistema .tile (BEM) ===========================================
 *
 * Sistema unificado de "tile clickeable con estado seleccionable".
 * Reemplaza las 11+ clases casi idénticas que existían (create-pad-tile,
 * export-tile, export-tab-tile, brush-item, btn-wood-round, settings-*-tile,
 * etc.) con una base `.tile` + modificadores BEM.
 *
 * Estructura HTML canónica:
 *
 *   <button class="tile tile--row tile--hand-drawn is-selected">
 *     <span class="tile__icon"><i class="ti ti-file-export"></i></span>
 *     <span class="tile__text">
 *       <p class="tile__title">PDF</p>
 *       <p class="tile__desc">Ideal para compartir e imprimir</p>
 *     </span>
 *   </button>
 *
 *   <button class="tile tile--circular tile--icon-only is-selected">
 *     <i class="ti ti-tool"></i>
 *   </button>
 *
 * Convenciones BEM:
 *   .tile                  base
 *   .tile--row             layout horizontal
 *   .tile--column          layout vertical
 *   .tile--hand-drawn      border via ::before con SVG filter
 *   .tile--solid-border    border directo 2px transparent→brass
 *   .tile--brass-border    border brass permanente
 *   .tile--compact         padding denso
 *   .tile--dense           padding muy denso
 *   .tile--circular        aspect-ratio 1:1 + border-radius 50%
 *   .tile--icon-only       solo icono, sin text container
 *   .tile__icon            contenedor del icono
 *   .tile__title           título Cherry Swash brass
 *   .tile__desc            descripción italic
 *   .tile__text            wrapper flex column
 *   .tile__shape           forma decorativa del pad
 *
 * Estados (no son modificadores BEM, son state classes):
 *   .tile.is-selected      estado seleccionado
 *   .tile.is-disabled      estado deshabilitado
 *   .tile:hover            estado hover
 *   .tile:focus-visible    estado focus accesible
 *
 * Regla de oro: SOLO aplicar el color de border en hover/active, NO
 * cambiar el border-width. Cambiar el width crea un "doble borde" visual.
 */

/* === Base .tile =================================================== */
.tile {
  position: relative;
  display: flex;
  border-radius: 0.85rem;
  /* §22.6xx.welcome-browser-warning-fix — Los tiles pueden ser `<a>` (links
     externos) o `<button>` (selects). Los `<a>` heredan text-decoration: underline
     del user-agent por defecto, lo cual rompe el visual hand-drawn del tile.
     Override a `none` para que el tile se vea como bloque, no como link. */
  text-decoration: none;
  /* §22.6xx.656r — REVERSIÓN de 656q. El base NO tiene border propio.
     El hand-drawn `::before` tiene `border: 1.5px solid var(--ink-stroke)`
     + filter `feDisplacementMap scale=2.5` que EXPANDE el área visible del
     border ~2.5px hacia afuera. Si el base también tiene border 1.5px,
     ambos se ven como DOS borders separados (el del base adentro, el del
     ::before ondulado afuera). Solución: solo el `::before` lleva el
     border ondulado; el base queda con `border: none` y deja que el
     modificador (hand-drawn via ::before, solid-border, brass-border)
     defina el border. Los tiles reales siempre tienen modificador, así
     que esta reversión no rompe el visual. */
  border: none;
  background: var(--panel-cream);
  cursor: pointer;
  transition:
    background 180ms cubic-bezier(0.2, 0, 0, 1),
    border-color 140ms ease,
    transform 140ms ease;
  outline: none;
  user-select: none;
  text-align: left;
  font-family: inherit;
  overflow: hidden;
  color: inherit;
}

/* === Layout: row (horizontal, icon + text) ======================== */
.tile--row {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 0.95rem;
  padding: 1.1rem 1.25rem;
  min-height: 3.2rem;
}

/* === Layout: column (vertical, icon arriba, text abajo) =========== */
.tile--column {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 0.7rem 0.5rem;
  min-height: 5.5rem;
  text-align: center;
}

/* === Layout: ancho completo dentro de la rejilla ================= */
/* `1 / -1` y no `span 2`: con una sola columna, `span 2` abriría una
   columna implícita y volvería a partir el contenido en dos. */
.tile--full {
  grid-column: 1 / -1;
}

/* === Border style: hand-drawn (con SVG filter) =================== */
.tile--hand-drawn::before {
  content: "";
  position: absolute;
  inset: 0;
  /* §22.6xx.656s — Width 2.5px (más cuerpo, coherente con el scale=2.5 del
     feDisplacementMap que "expande" el border visible ~2.5px en cada
     dirección). Color en reposo: var(--ink-stroke) — token canónico.
     El filter wavy se aplica al border del ::before, dando el efecto
     hand-drawn. */
  border: 2.5px solid var(--ink-stroke);
  border-radius: inherit;
  filter: url(#hand-drawn-filter);
  pointer-events: none;
  transition: border-color 180ms cubic-bezier(0.2, 0, 0, 1);
}
.tile--hand-drawn:hover::before {
  border-color: rgba(92, 64, 51, 0.45);
}
.tile--hand-drawn:focus-visible::before {
  border-color: rgba(200, 90, 41, 0.55);
}
/* §22.6xx.658ay — El input type="color" dentro del swatch está con
   opacity: 0 (sin chrome nativo). Para que el foco del teclado sea
   visible al tabular, propagamos el focus del input al borde del
   label vía :focus-within. */
.tile--hand-drawn:focus-within::before {
  border-color: rgba(200, 90, 41, 0.55);
}
.tile--hand-drawn.is-selected::before {
  border-color: var(--brass, #c85a29);
}

/* === Border style: solid (border directo 2.5px) ===================== */
.tile--solid-border.is-selected {
  border-color: var(--brass, #c85a29);
  background-color: rgba(200, 90, 41, 0.10);
  color: var(--brass-text, #93411c);
}

/* === Border style: brass permanente (casos especiales) =========== */

/* === Density: compact (padding denso) ============================ */
.tile--compact {
  padding: 0.6rem 0.75rem;
  gap: 0.55rem;
  border-radius: 0.65rem;
  /* §22.6xx.656al — Override min-height del .tile--column (5.5rem).
     Sin este override, los tiles compactos son 88px de alto (gigante
     para tiles pequeños como PNG, 1x, 16:9, etc.). */
  min-height: 0;
}
.tile--compact.tile--column {
  padding: 0.7rem 0.5rem;
  min-height: 0;
}

/* === Density: dense (padding muy denso) =========================== */
.tile--dense.is-selected {
  background-color: color-mix(in srgb, var(--brass) 12%, transparent);
}

/* === Shape: circular (44px aspect-ratio 1:1) ===================== */
.tile--circular {
  /* §22.6xx.656ad — width/height explícitos (2.75rem = 44px). Sin esto, el
     label colapsa a 0×0 cuando el único hijo (el <input type="color">) es
     invisible (position absolute + opacity 0). El input absolute saca el
     contenido del flujo y el label sin contenido visible + aspect-ratio
     sin width/height base = 0 dimensiones. Con width/height fijos, el
     label siempre se renderiza. */
  width: 2.75rem;
  height: 2.75rem;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  padding: 0;
  justify-content: center;
  align-items: center;
  flex-shrink: 0;
  position: relative;
}
.tile--circular.is-selected {
  /* §22.6xx.656s — Width 2.5px para consistencia con el resto de tiles. */
  border: 2.5px solid var(--brass, #c85a29);
}
/* §22.6xx.656ad — input type="color" invisible pero en el flujo (no absolute).
   El input absolute (656aa) hacía que el label colapsara porque el input
   sacaba el contenido del flujo. Ahora el input está en el flujo pero
   invisible: appearance:none quita el chrome nativo, background:transparent
   + color:transparent lo dejan invisible, width/height 100% lo hacen
   ocupar todo el label. El label mantiene su background-color (pageColor /
   workspaceBackgroundColor / frameStrokeColor) sin nada encima tapándolo. */
.tile--circular input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  cursor: pointer;
}
/* §22.6xx.658ax — Input type="color" invisible pero en flujo, dentro de
   un tile cuadrado (paper color swatch). Misma técnica que
   .tile--circular pero sin el width/height explícito del circular (el
   tamaño del cuadrado viene de aspect-ratio:1/1 + w-9 del padre).
   §22.6xx.658ay — `opacity: 0` en vez de `background: transparent;
   color: transparent` para esconder completamente el chrome nativo del
   color picker. Con background/color transparent algunos navegadores
   (Chrome/Safari) siguen mostrando un pequeño indicador de color
   dentro de un marco oscuro — `opacity: 0` lo elimina por completo.
   El input sigue siendo clickeable (la asociación label↔input propaga
   el click). El focus visual se delega al label vía :focus-within. */
.tile--square-fill input[type="color"] {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  color: transparent;
  opacity: 0;
  cursor: pointer;
}

/* === Shape: icon-only (sin text container) ======================== */

/* === Variante: format tile (column denso para el grid de formatos) = */
.tile--format {
  min-height: 5.5rem;
  padding: 0.7rem 0.5rem;
}

/* === Variante: quality tile (column con más altura para DPI) ====== */
.tile--quality {
  min-height: 6.5rem;
  padding: 0.7rem 0.5rem;
}

/* === Estados ===================================================== */
.tile:hover {
  /* §22.6xx.656o — Reemplazo del hex hardcoded #C2B38A por la variable
     canónica var(--ink-stroke) (= #C2B38A) para coherencia. */
  border-color: var(--ink-stroke);
  background: #FBF6D6;
}
.tile:focus-visible {
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brass) 32%, transparent);
}
.tile.is-selected {
  background: #FBF6D6;
}
.tile.is-disabled {
  opacity: 0.35;
  cursor: not-allowed;
  filter: grayscale(0.7);
}
.tile.is-disabled:hover {
  border-color: rgba(92, 51, 23, 0.15);
  background: var(--paper-light, #faf5e8);
}

/* === Elemento: __icon (contenedor del icono) ====================== */
.tile__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.7rem;
  color: var(--brass-text, #93411c);
  background: linear-gradient(135deg, rgba(200, 90, 41, 0.18) 0%, color-mix(in srgb, var(--brass) 12%, transparent) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  transition: background 180ms cubic-bezier(0.2, 0, 0, 1), color 180ms cubic-bezier(0.2, 0, 0, 1);
}
.tile.is-selected .tile__icon {
  background: linear-gradient(135deg, rgba(200, 90, 41, 0.30) 0%, color-mix(in srgb, var(--brass) 22%, transparent) 100%);
  color: var(--brass-text, #93411c);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 1px 3px rgba(200, 90, 41, 0.20);
}
.tile--compact .tile__icon {
  width: 1.85rem;
  height: 1.85rem;
  border-radius: 0.45rem;
}
.tile--dense .tile__icon {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.35rem;
}

/* === Elemento: __text (wrapper flex column del contenido) ========= */
.tile__text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  min-width: 0;
  flex: 1 1 0;
}

/* === Elemento: __title (Cherry Swash brass) ======================= */
.tile__title {
  font-family: 'Cherry Swash', cursive;
  font-size: 1rem;
  font-weight: 700;
  color: var(--brass-text, #93411c);
  line-height: 1.1;
  margin: 0;
  letter-spacing: 0.005em;
}
.tile.is-selected .tile__title {
  color: var(--brass-text, #93411c);
}

/* === Elemento: __desc (italic sepia) ============================= */
.tile__desc {
  font-size: 0.72rem;
  font-weight: 400;
  font-style: italic;
/* §22.6xx.658dr.235 — Contraste. Era rgba(92,64,51,0.65), que sobre el crema del
   panel (#f4ecdc) da 3.37:1 — por debajo del 4.5:1 de WCAG AA para texto normal,
   y la descripción es justo el texto que explica para qué sirve el enlace. A
   0.88 el mismo sepia da 5.86:1. Sigue leyéndose como texto secundario porque
   el peso y la cursiva lo separan del título, no la opacidad. */
  color: rgba(92, 64, 51, 0.88);
  line-height: 1.3;
  margin: 0;
  letter-spacing: 0.01em;
}
.tile.is-selected .tile__desc {
  color: rgba(92, 64, 51, 0.85);
}

/* === Elemento: __img (imagen del tile, e.g. thumbnail) ============ */
.tile__img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.4rem;
  pointer-events: none;
}

/* === Shape: square-fill (1:1 aspect + image fill, sin label) ====== */
/* §22.6xx.658ai — Tile cuadrado perfecto con la imagen rellenando
   (object-fit: fill, estira sin preservar aspect). Sin label visible.
   Patrón compartido entre el paper panel (tools/paper-texture) y el
   theme editor (components/dialogs/theme-editor-dialog) — por eso
   vive en el CSS global de tiles, NO en un scope scoped. */
.tile--square-fill {
  aspect-ratio: 1 / 1;
  padding: 0;
  min-height: 0;
  overflow: hidden;
}
.tile--square-fill .tile__label {
  display: none;
}
.tile--square-fill .tile__img {
  width: 100%;
  height: 100%;
  object-fit: fill;
  border-radius: 0.4rem;
}

/* §22.6xx.658au — Wrapper del icono "X" para tiles "none" (no texture,
   no shadow). El span position:absolute + inset:0 lo saca del flujo flex
   del button, y su propio grid layout (place-items:center) centra el icono
   tanto horizontal como verticalmente. Reemplaza los estilos inline
   position:absolute/inset:0/display:flex/align-items/justify-content que
   estaban duplicados en 2 sitios (textures + shadows) — centralizando
   aqui garantizamos que ambos tiles "none" se comporten IDENTICAMENTE.
   El background se bindea via x-bind:style desde el HTML (workspace color),
   asi cada tile puede tener un fondo distinto sin tocar la clase. */
.tile__none-icon {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}

/* === Elemento: __label (texto del tile, e.g. nombre de theme) ===== */
.tile__label {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--sepia, #5C4033);
  line-height: 1.2;
  text-align: center;
  margin: 0;
  letter-spacing: 0.01em;
}
.tile.is-selected .tile__label {
  color: var(--brass-text, #93411c);
  font-weight: 600;
}

/* === Elemento: __shape (forma decorativa del pad) ================= */