/* Estilos del bloque img (imágenes y diseño) */
.img-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.img-grid2 .field { min-width: 0; }
.img-card { border: 1px solid var(--line); border-radius: var(--radius-s); padding: 12px; background: var(--sheet); min-width: 0; }
.img-code { font: 13px/1.45 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: pre-wrap; word-break: break-all; background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--radius-s); padding: 10px 12px; margin: 8px 0 0; max-height: 260px; overflow: auto; width: 100%; box-sizing: border-box; resize: vertical; color: var(--ink); }
textarea.img-code { min-height: 90px; }

/* Collage */
.img-layouts { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; }
.img-layout { aspect-ratio: 1; border: 2px solid var(--line); border-radius: var(--radius-s); background: #fff; padding: 6px; cursor: pointer; }
.img-layout[aria-checked="true"] { border-color: var(--accent); background: var(--accent-soft); }
.img-layout-mini { position: relative; display: block; width: 100%; height: 100%; }
.img-layout-mini i { position: absolute; box-sizing: border-box; border: 1.5px solid #fff; background: var(--ink-3); border-radius: 2px; }
.img-layout[aria-checked="true"] .img-layout-mini i { background: var(--accent); }

/* EXIF */
.img-exif-row { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; border-bottom: 1px solid var(--line-2); padding-bottom: 14px; }
.img-exif-row:last-child { border-bottom: none; }
.img-exif-thumb { width: 96px; height: 96px; border-radius: var(--radius-s); overflow: hidden; background: var(--paper); display: grid; place-items: center; }
.img-exif-thumb img { max-width: 100%; max-height: 100%; object-fit: contain; }
.img-exif-row .img-card { margin-top: 8px; }
.img-ok, .img-warn { display: flex; gap: 8px; align-items: flex-start; padding: 8px 10px; border-radius: var(--radius-s); font-size: 14.5px; }
.img-ok { background: #e3f4ec; color: #145c3c; }
.img-warn { background: #fdecea; color: #8a221d; margin-bottom: 6px; }
.img-ok svg, .img-warn svg { flex: none; margin-top: 2px; }
.img-table { width: 100%; border-collapse: collapse; font-size: 14px; margin-top: 6px; table-layout: fixed; }
.img-table th { text-align: left; font-weight: 600; color: var(--ink-2); padding: 4px 8px 4px 0; width: 42%; vertical-align: top; word-break: break-word; }
.img-table td { padding: 4px 0; word-break: break-word; }
.img-table tr + tr { border-top: 1px solid var(--line-2); }
@media (max-width: 520px) { .img-exif-row { grid-template-columns: 64px minmax(0, 1fr); } .img-exif-thumb { width: 64px; height: 64px; } }

/* Favicon */
.img-fav-previews { display: flex; flex-wrap: wrap; gap: 18px; align-items: flex-end; justify-content: center; padding: 18px; background: var(--paper); border-radius: var(--radius-s); margin-top: 12px; }
.img-fav-previews figure { margin: 0; text-align: center; font-size: 12.5px; color: var(--ink-2); display: grid; justify-items: center; gap: 6px; }
.img-fav-previews canvas { box-shadow: 0 0 0 1px var(--line); }
.img-fav-tabbar { display: flex; gap: 2px; background: #dfe2ea; padding: 8px 8px 0; border-radius: 10px 10px 0 0; overflow: hidden; }
.img-fav-tabitem { display: flex; align-items: center; gap: 8px; background: #fff; padding: 8px 14px; border-radius: 8px 8px 0 0; font-size: 13px; min-width: 0; max-width: 220px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.img-fav-tabitem.off { background: transparent; color: var(--ink-2); }
.img-fav-tabitem.off i { width: 16px; height: 16px; border-radius: 4px; background: #c4c8d2; flex: none; }
.img-fav-tabitem canvas { flex: none; }

/* Muestras de color */
.img-swatch { border: none; border-radius: var(--radius-s); min-height: 44px; padding: 8px 10px; font: 600 13.5px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.08); }
.img-swatch.big { min-height: 120px; font-size: 15px; }
.img-swatch:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }

/* Paletas */
.img-palette { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); min-height: 340px; border-radius: var(--radius-m); overflow: hidden; box-shadow: 0 0 0 1px var(--line); }
.img-pcol { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 6px; padding: 14px 6px; min-width: 0; }
.img-pcol .hex { font: 700 16px/1.2 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; letter-spacing: .02em; background: none; border: none; color: inherit; cursor: pointer; padding: 4px 6px; border-radius: 6px; }
.img-pcol .nm { font-size: 12.5px; opacity: .85; text-align: center; }
.img-pcol .tools { display: flex; gap: 2px; }
.img-pcol .tools button { background: none; border: none; color: inherit; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; display: grid; place-items: center; opacity: .8; }
.img-pcol .tools button:hover, .img-pcol .tools button[aria-pressed="true"] { opacity: 1; background: rgba(127,127,127,.22); }
.img-pcol input[type=color] { width: 34px; height: 34px; border: none; padding: 0; background: none; cursor: pointer; }
@media (max-width: 640px) {
  .img-palette { grid-template-columns: 1fr; min-height: 0; }
  .img-pcol { flex-direction: row; justify-content: space-between; min-height: 64px; padding: 8px 10px; }
  .img-pcol .nm { display: none; }
}

/* Selector de color */
.img-sv { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-s); touch-action: none; cursor: crosshair; background-image: linear-gradient(to top, #000, transparent), linear-gradient(to right, #fff, transparent); }
.img-sv .knob, .img-hue .knob { position: absolute; width: 18px; height: 18px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.35), 0 1px 4px rgba(0,0,0,.4); transform: translate(-50%, -50%); pointer-events: none; }
.img-hue { position: relative; height: 18px; border-radius: 9px; margin-top: 14px; touch-action: none; cursor: pointer; background: linear-gradient(to right, #f00, #ff0, #0f0, #0ff, #00f, #f0f, #f00); }
.img-hue .knob { top: 50%; }
.img-hue:focus-visible, .img-sv:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.img-conv { display: grid; gap: 8px; }
.img-conv .r { display: grid; grid-template-columns: 64px minmax(0, 1fr) auto; gap: 8px; align-items: center; }
.img-conv .r label { font-weight: 700; font-size: 13.5px; color: var(--ink-2); }
.img-conv .r .input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 14px; min-width: 0; }
.img-pick-canvas { max-width: 100%; max-height: 52vh; cursor: crosshair; display: block; margin: 0 auto; touch-action: none; }
.img-loupe { position: fixed; width: 96px; height: 96px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 2px 10px rgba(0,0,0,.35); pointer-events: none; z-index: 50; image-rendering: pixelated; }
.img-history { display: flex; flex-wrap: wrap; gap: 6px; }
.img-history .img-swatch { min-height: 30px; width: 30px; padding: 0; font-size: 0; }

/* Degradados */
.img-grad-preview { width: 100%; aspect-ratio: 16 / 9; border-radius: var(--radius-m); box-shadow: 0 0 0 1px var(--line); }
.img-grad-bar { position: relative; height: 34px; border-radius: 8px; margin: 18px 10px 26px; box-shadow: 0 0 0 1px var(--line); cursor: copy; touch-action: none; }
.img-grad-stop { position: absolute; top: 100%; width: 22px; height: 22px; transform: translate(-50%, 4px); border-radius: 6px; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(0,0,0,.4); cursor: grab; padding: 0; }
.img-grad-stop::before { content: ""; position: absolute; left: 50%; top: -9px; border: 5px solid transparent; border-bottom-color: #fff; transform: translateX(-50%); }
.img-grad-stop[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
.img-presets { display: grid; grid-template-columns: repeat(auto-fill, minmax(44px, 1fr)); gap: 6px; }
.img-presets button { aspect-ratio: 1; border-radius: 8px; border: none; cursor: pointer; box-shadow: inset 0 0 0 1px rgba(0,0,0,.1); }

/* Contraste */
.img-contrast-preview { border-radius: var(--radius-m); padding: 26px; box-shadow: 0 0 0 1px var(--line); }
.img-contrast-preview h3 { margin: 0 0 8px; font: 700 26px/1.2 var(--display); }
.img-contrast-preview p { margin: 0 0 10px; font-size: 16px; line-height: 1.5; }
.img-contrast-preview .small { font-size: 13px; }
.img-ratio { font: 800 46px/1 var(--display); }
.img-checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.img-check { border-radius: var(--radius-s); padding: 10px 12px; font-size: 14px; display: flex; justify-content: space-between; gap: 8px; align-items: center; }
.img-check.pass { background: #e3f4ec; color: #145c3c; }
.img-check.fail { background: #fdecea; color: #8a221d; }
.img-check strong { font-size: 13px; letter-spacing: .03em; }

/* Tipografías */
.img-pair { border: 1px solid var(--line); border-radius: var(--radius-m); padding: 22px; background: #fff; color: #1c2540; min-width: 0; overflow-wrap: anywhere; }
.img-pair h3 { margin: 0 0 10px; line-height: 1.15; font-weight: 700; }
.img-pair p { margin: 0 0 10px; line-height: 1.6; }
.img-pair .meta { font: 600 12.5px/1.3 var(--body); color: var(--ink-3); margin-top: 12px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.img-pairs { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.img-pairs .img-pair { cursor: pointer; padding: 16px; }
.img-pairs .img-pair[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent); }