/* Encuadre compartido de fotos (19-oct-2026, src/ui/encuadre.js). Todo va bajo dialog#enc con clases enc-* propias: nada de .mini/.oro/.pie de
   cada app. Los colores son variables que fija el tema:
   - .enc-claro = el de los paneles de Escencia (Mi tienda): toma las variables del panel (--dlg, --oro, --crema…) y, si faltan, las de su modo
     claro u oscuro (html[data-tema]). Así la tienda se ve como antes de mover el encuadre aquí (docs/ref/encuadre-2026-10-19/).
   - .enc-oscuro = neutro (#101010 / #F5F3EE / #2A2A2A, el acento es el texto): Book de DJs de Vivent.
   Reglas de docs/UX.md: botones de 44 px o más, control de zoom con etiqueta, el diálogo cabe a 390 px y se desplaza por dentro con la barra
   de botones pegada abajo; sin animaciones. */
dialog#enc.enc-claro{
  --enc-fondo:var(--dlg,#FFFFFF);--enc-texto:var(--crema,#17140F);--enc-tenue:var(--dim,#453E32);--enc-etiqueta:var(--tx3,#453E32);
  --enc-acento:var(--oro,#5E4608);--enc-acento-fondo:var(--oro-grad,linear-gradient(180deg,#6B5010,#584106));--enc-sobre-acento:var(--oro-t,#FFFFFF);
  --enc-borde:var(--oro2,#5E4608);--enc-linea:var(--linea,#A89D85);--enc-boton-linea:var(--mini-l,#6A6151);--enc-pri-linea:#E2C46A;
  --enc-campo:var(--campo,#FFFFFF);--enc-campo-linea:var(--campo-l,#6A6151);--enc-rango:#C9A84C;--enc-sombra-sel:0 2px 10px rgba(var(--oro-rgb,94,70,8),.25);
  --enc-letra:'Montserrat',system-ui,sans-serif;--enc-letra-titulo:'Cinzel',serif}
html[data-tema=oscuro] dialog#enc.enc-claro{
  --enc-fondo:var(--dlg,#100E08);--enc-texto:var(--crema,#EFE6D2);--enc-tenue:var(--dim,#A89F8B);--enc-etiqueta:var(--tx3,#C9BFA6);
  --enc-acento:var(--oro,#E2C46A);--enc-acento-fondo:var(--oro-grad,linear-gradient(180deg,#E2C46A,#C9A84C));--enc-sobre-acento:var(--oro-t,#1a1206);
  --enc-borde:var(--oro2,#C9A84C);--enc-linea:var(--linea,#2C2616);--enc-boton-linea:var(--mini-l,rgba(var(--oro-rgb,226,196,106),.55));
  --enc-campo:var(--campo,#0A0906);--enc-campo-linea:var(--campo-l,#3A3220);--enc-sombra-sel:0 2px 10px rgba(var(--oro-rgb,226,196,106),.25)}
dialog#enc.enc-oscuro{
  --enc-fondo:#101010;--enc-texto:#F5F3EE;--enc-tenue:#B4B0A8;--enc-etiqueta:#B4B0A8;--enc-acento:#F5F3EE;--enc-acento-fondo:#F5F3EE;--enc-sobre-acento:#101010;
  --enc-borde:#2A2A2A;--enc-linea:#2A2A2A;--enc-boton-linea:#4A4843;--enc-pri-linea:#F5F3EE;--enc-campo:#161616;--enc-campo-linea:#2A2A2A;--enc-rango:#F5F3EE;
  --enc-sombra-sel:none;--enc-letra:'Poppins',system-ui,sans-serif;--enc-letra-titulo:'Poppins',system-ui,sans-serif}

dialog#enc{position:fixed;inset:0;margin:auto;box-sizing:border-box;width:min(560px,calc(100% - 20px));max-width:calc(100% - 38px);max-height:calc(100dvh - 32px);
  padding:0;border:1px solid var(--enc-borde);border-radius:20px;background:var(--enc-fondo);color:var(--enc-texto);font:400 16px/1.5 var(--enc-letra);overflow:hidden;overscroll-behavior:none}
dialog#enc.enc-claro::backdrop{background:rgba(40,32,18,.45)}
html[data-tema=oscuro] dialog#enc.enc-claro::backdrop{background:rgba(0,0,0,.7)}
dialog#enc.enc-oscuro::backdrop{background:rgba(0,0,0,.72)}
#enc .enc-c{box-sizing:border-box;display:grid;gap:22px;min-width:0;max-height:calc(100dvh - 34px);padding:26px 24px 0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:none;scrollbar-gutter:stable}
#enc h2{margin:0;font:600 22px/1.2 var(--enc-letra-titulo);letter-spacing:.04em;color:var(--enc-acento);text-transform:none}
#enc.enc-oscuro h2{font-size:21px;letter-spacing:0}
#enc .enc-ayuda{margin:0;max-width:62ch;font:400 14.5px/1.55 var(--enc-letra);color:var(--enc-tenue)}
#enc .enc-campo{display:grid;gap:8px;min-width:0}
#enc .enc-eti,#enc .enc-z{font:600 11.5px/1.35 var(--enc-letra);letter-spacing:.09em;text-transform:uppercase;color:var(--enc-etiqueta)}
#enc .enc-seg{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:0;padding:4px;border:1px solid var(--enc-campo-linea);border-radius:13px;background:var(--enc-campo)}
#enc .enc-op{position:relative;display:grid;place-items:center;min-height:44px;padding:0 8px;border-radius:9px;font:500 14px/1.2 var(--enc-letra);letter-spacing:0;text-transform:none;color:var(--enc-tenue);text-align:center;cursor:pointer}
#enc .enc-op input{position:absolute;inset:0;width:100%;height:100%;margin:0;opacity:0;cursor:pointer}
#enc .enc-op:has(input:checked){background:var(--enc-acento-fondo);color:var(--enc-sobre-acento);font-weight:600;box-shadow:var(--enc-sombra-sel)}
#enc .enc-op:has(input:focus-visible){outline:2px solid var(--enc-acento);outline-offset:2px}
#enc .enc-m{display:grid;place-items:center;padding:6px 0}
#enc .enc-vp{position:relative;overflow:hidden;border-radius:14px;background:#000;cursor:grab;touch-action:none;box-shadow:0 0 0 1px var(--enc-borde)}
#enc .enc-vp.ag{cursor:grabbing}
#enc .enc-vp:focus{outline:none}
#enc .enc-vp:focus-visible{outline:2px solid var(--enc-acento);outline-offset:3px}
#enc .enc-fondo{position:absolute;inset:-24px;width:calc(100% + 48px);height:calc(100% + 48px);max-width:none;object-fit:cover;filter:blur(16px);opacity:.85;pointer-events:none}
#enc .enc-img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;user-select:none;-webkit-user-select:none}
#enc .enc-guia{position:absolute;inset:0;pointer-events:none;background:linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 33.33% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 66.66% 0/1px 100% no-repeat,linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 0 33.33%/100% 1px no-repeat,linear-gradient(rgba(255,255,255,.22),rgba(255,255,255,.22)) 0 66.66%/100% 1px no-repeat}
#enc .enc-z{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0}
#enc .enc-z input[type=range]{display:block;box-sizing:border-box;width:calc(100% - 4px);height:34px;min-height:34px;margin:2px;padding:0;border:0;background:none;box-shadow:none;accent-color:var(--enc-rango);font-size:16px;cursor:pointer}
#enc .enc-pie{position:sticky;bottom:0;z-index:1;display:flex;flex-wrap:wrap;gap:12px;justify-content:flex-end;margin:4px -24px 0;padding:16px 24px calc(16px + env(safe-area-inset-bottom));border-top:1px solid var(--enc-linea);background:var(--enc-fondo)}
#enc .enc-b{display:inline-flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:46px;margin:0;padding:0 20px;border:1px solid var(--enc-boton-linea);border-radius:999px;background:none;color:var(--enc-acento);font:600 11.5px/1 var(--enc-letra);letter-spacing:.1em;text-transform:uppercase;cursor:pointer}
#enc .enc-b.enc-pri{background:var(--enc-acento-fondo);color:var(--enc-sobre-acento);border-color:var(--enc-pri-linea)}
#enc .enc-b:focus-visible{outline:2px solid var(--enc-acento);outline-offset:2px}
#enc .enc-b[disabled]{opacity:.5;cursor:default}
#enc.enc-oscuro .enc-b{min-height:48px;font-size:16px;font-weight:500;letter-spacing:0;text-transform:none}
#enc.enc-oscuro .enc-b.enc-pri{font-weight:600}
@media (max-width:599px){#enc .enc-c{gap:20px;padding:22px 18px 0}#enc .enc-pie{margin:4px -18px 0;padding:14px 18px calc(14px + env(safe-area-inset-bottom))}}
@media (max-width:560px){#enc .enc-b{flex:1 1 auto}}