/* Imagen · estilos propios */
body { overflow: hidden; }
.shell {
  display: grid; height: 100dvh;
  grid-template-columns: 280px minmax(0, 1fr) 300px;
  grid-template-rows: 48px minmax(0, 1fr);
  grid-template-areas: "top top top" "list stage opts";
}
.topbar { grid-area: top; }
.top-info { margin: 0 auto; display: flex; align-items: center; gap: 4px; white-space: nowrap; }
.top-info b { color: var(--text); }
.topbar .top-actions { margin-left: 0; }

/* Lista */
.list { grid-area: list; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border); }
.list-h { display: flex; align-items: center; justify-content: space-between; padding: 10px 10px 8px 14px; }
.items { flex: 1; overflow: auto; padding: 0 6px; display: flex; flex-direction: column; gap: 2px; }
.item { position: relative; display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; padding: 7px 30px 7px 7px; border-radius: 8px; cursor: pointer; }
.item:hover { background: var(--hover); }
.item.sel { background: var(--accent-soft); }
.thumb { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; background: var(--sunken); }
.meta { display: flex; flex-direction: column; min-width: 0; font-size: 12px; }
.meta strong { font-weight: 500; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.meta span { color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.meta small { color: var(--text-3); font-size: 11px; font-variant-numeric: tabular-nums; }
.good { color: var(--ok); font-weight: 600; }
.bad { color: var(--danger); font-weight: 600; }
.rm { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); opacity: 0; }
.item:hover .rm, .rm:focus-visible { opacity: 1; }
.list-f { display: flex; flex-direction: column; gap: 8px; padding: 12px; border-top: 1px solid var(--border); }
.totals { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.totals:empty { display: none; }
.totals div { display: flex; flex-direction: column; padding: 6px 8px; background: var(--sunken); border-radius: 7px; }
.totals span { font-size: 10.5px; color: var(--text-3); }
.totals b { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }

/* Escenario */
.stage { grid-area: stage; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.stage-bar { display: flex; align-items: center; gap: 8px; height: 46px; padding: 0 12px; border-bottom: 1px solid var(--border); }
.stage-meta { font-size: 12px; color: var(--text-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stage-meta b { color: var(--text); font-weight: 600; }
.viewer { position: relative; flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: 16px; container-type: size; }
.drop { position: absolute; inset: 16px; display: grid; place-items: center; border: 1.5px dashed var(--border-2); border-radius: 14px; background: color-mix(in srgb, var(--bg) 85%, transparent); }
.drop-in { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text-2); }
.drop-in strong { font-size: 16px; color: var(--text); }
.drop-in .btn { margin-top: 8px; }
.drop-ic { display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px; background: var(--ok-soft); color: var(--ok); margin-bottom: 4px; }
.drop-ic .ic { width: 26px; height: 26px; }
body.dragging .drop { border-color: var(--ok); background: var(--ok-soft); }
body.dragging .viewer::after { content: "Suelta para añadir"; position: absolute; inset: 16px; display: grid; place-items: center; border: 2px dashed var(--ok); border-radius: 14px; background: color-mix(in srgb, var(--panel) 80%, transparent); color: var(--ok); font-weight: 600; font-size: 15px; }
:lang(en) body.dragging .viewer::after { content: "Drop to add"; }

.frame { position: relative; aspect-ratio: var(--ar); box-shadow: 0 0 0 1px var(--border), var(--shadow-md); user-select: none; touch-action: none; }
.frame.zoom-fit { width: min(calc(100cqw - 32px), calc((100cqh - 32px) * var(--arn))); }
.frame.zoom-1 { width: var(--w); margin: auto; }
.frame img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#imgIn { object-fit: cover; }
.frame.view-compare { cursor: ew-resize; }
.frame.view-compare #imgIn { clip-path: inset(0 calc(100% - var(--split)) 0 0); }
.frame.view-out #imgIn, .frame.view-in #imgOut { display: none; }
.handle { position: absolute; top: 0; bottom: 0; left: var(--split); width: 2px; margin-left: -1px; background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .25); pointer-events: none; }
.handle span { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .3); }
.handle span::before { content: "‹ ›"; position: absolute; inset: 0; display: grid; place-items: center; color: #333; font-size: 13px; font-weight: 600; letter-spacing: 1px; }
.frame:not(.view-compare) .handle, .frame:not(.view-compare) .lbl { display: none; }
.lbl { position: absolute; top: 10px; padding: 2px 8px; border-radius: 99px; background: rgba(0, 0, 0, .55); color: #fff; font-size: 11px; font-weight: 500; pointer-events: none; }
.lbl.l { left: 10px; } .lbl.r { right: 10px; }

/* Opciones */
.opts { grid-area: opts; overflow: auto; border-left: 1px solid var(--border); }
.o-sec { display: flex; flex-direction: column; gap: 12px; padding: 14px 16px 16px; border-bottom: 1px solid var(--border); }
.o-sec:last-child { border-bottom: 0; }
.sec-h { display: flex; align-items: center; justify-content: space-between; }
.seg.block button:disabled { opacity: .35; cursor: not-allowed; }
.field-l b { color: var(--text); font-variant-numeric: tabular-nums; margin-left: 4px; }
.dim { opacity: .4; pointer-events: none; }
.color-row { display: flex; align-items: center; gap: 10px; }
.color-row input[type="color"] { width: 40px; height: 28px; padding: 0; border: 1px solid var(--border-2); border-radius: 6px; background: none; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chipbtn { height: 24px; padding: 0 9px; border: 1px solid var(--border-2); border-radius: 99px; background: var(--panel); font-size: 11.5px; color: var(--text-2); }
.chipbtn:hover { background: var(--hover); color: var(--text); }
.orient { align-items: center; gap: 2px; }
.orient .muted { margin-left: 8px; }
.adj { display: grid; gap: 8px; }
.adj-row { display: grid; grid-template-columns: 80px minmax(0, 1fr) 48px; align-items: center; gap: 8px; font-size: 12px; color: var(--text-2); }
.adj-row b { text-align: right; font-weight: 500; color: var(--text); font-variant-numeric: tabular-nums; }
.tokens { margin: -4px 0 0; }
.tokens code { font-family: var(--mono); font-size: 11px; padding: 1px 4px; border-radius: 4px; background: var(--sunken); color: var(--text-2); }

@media (max-width: 1180px) {
  .shell { grid-template-columns: 240px minmax(0, 1fr) 270px; }
  .top-info { display: none; }
  .topbar .top-actions { margin-left: auto; }
}
@media (max-width: 860px) {
  body { overflow: auto; }
  .shell { height: auto; grid-template-columns: minmax(0, 1fr); grid-template-rows: 48px 60vh auto auto; grid-template-areas: "top" "stage" "list" "opts"; }
  .list, .opts { border: 0; border-top: 1px solid var(--border); }
  .items { max-height: 320px; }
  .stage-bar { flex-wrap: wrap; height: auto; padding: 8px 12px; }
}

/* ───────── Móvil: vista previa, luego los ajustes y al final la lista ───────── */
@media (max-width: 700px) {
  .shell { grid-template-rows: 48px 66vh auto auto; grid-template-areas: "top" "stage" "opts" "list"; }
  .list { border-bottom: 0; }
  .stage-bar .btn { flex: 1; justify-content: center; }
}
:root[data-input="touch"] .chipbtn { min-height: 36px; padding: 0 12px; font-size: 13px; }

/* ───────── Herramientas extra ───────── */
.row.wrap { flex-wrap: wrap; gap: 6px; }
.row.wrap .input { flex: 1; min-width: 120px; }
.sec-check { gap: 8px; }
.sec-check .sec-t { margin: 0; }
.o-body { display: flex; flex-direction: column; gap: 12px; }
.o-body[hidden] { display: none; }
.wm-pos { display: grid; grid-template-columns: repeat(3, 34px) auto; grid-template-rows: repeat(3, 26px); gap: 4px; }
.wm-pos button { border: 1px solid var(--border-2); border-radius: 6px; background: var(--panel); }
.wm-pos button[aria-pressed="true"] { background: var(--accent); border-color: var(--accent); }
.wm-pos .wm-tile { grid-column: 4; grid-row: 1 / 4; margin-left: 8px; padding: 0 12px; font-size: 12.5px; color: var(--text-2); }
.wm-pos .wm-tile[aria-pressed="true"] { color: var(--on-accent); }
.fv-prev { display: flex; align-items: flex-end; gap: 12px; min-height: 64px; }
.fv-p { display: block; border-radius: 4px; background-image: conic-gradient(#e6e6e2 25%, #fff 0 50%, #e6e6e2 0 75%, #fff 0); background-size: 8px 8px; box-shadow: 0 0 0 1px var(--border); overflow: hidden; }
.fv-p canvas { display: block; }
#exifBox .kv { display: grid; gap: 4px; }
#exifBox .kv div { display: flex; justify-content: space-between; gap: 10px; font-size: 12.5px; }
#exifBox .kv span { color: var(--text-2); }
.exif-gps { margin: 0 0 8px; padding: 8px 10px; border-radius: 8px; background: color-mix(in srgb, #f59e0b 14%, transparent); font-size: 12.5px; }
.exif-ok { margin: 8px 0 0; color: var(--ok); font-size: 12.5px; }
.gps { margin-right: 4px; }
/* Recortar a mano */
.frame.cropping { cursor: crosshair; overflow: hidden; }
.frame.cropping #imgIn { display: block; clip-path: none; }
#cropBox { position: absolute; z-index: 3; box-shadow: 0 0 0 9999px rgba(0, 0, 0, .55); outline: 2px solid #fff; cursor: move; touch-action: none; }
#cropBox .cgrid { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255, 255, 255, .45) 0 calc(66.66% + .5px), transparent 0), linear-gradient(transparent calc(33.33% - .5px), rgba(255, 255, 255, .45) 0 calc(33.33% + .5px), transparent 0 calc(66.66% - .5px), rgba(255, 255, 255, .45) 0 calc(66.66% + .5px), transparent 0); }
.ch { position: absolute; width: 16px; height: 16px; border: 3px solid #fff; background: var(--accent); border-radius: 50%; box-shadow: 0 1px 4px rgba(0, 0, 0, .5); touch-action: none; }
.ch.nw { left: -8px; top: -8px; cursor: nwse-resize; } .ch.ne { right: -8px; top: -8px; cursor: nesw-resize; }
.ch.sw { left: -8px; bottom: -8px; cursor: nesw-resize; } .ch.se { right: -8px; bottom: -8px; cursor: nwse-resize; }
.frame img#imgIn { object-fit: fill; }
.frame:not(.cropping) { overflow: hidden; }
:root[data-input="touch"] .ch { width: 26px; height: 26px; }
:root[data-input="touch"] .ch.nw { left: -13px; top: -13px; } :root[data-input="touch"] .ch.ne { right: -13px; top: -13px; }
:root[data-input="touch"] .ch.sw { left: -13px; bottom: -13px; } :root[data-input="touch"] .ch.se { right: -13px; bottom: -13px; }
:root[data-input="touch"] .wm-pos { grid-template-columns: repeat(3, 44px) auto; grid-template-rows: repeat(3, 34px); }