:root {
  --madera: #7a4b24; --madera-osc: #5c3818; --fondo: #f6f3ef; --tarjeta: #fff; --borde: #ddd5cb;
  --texto: #2b2622; --suave: #776d63; --rojo: #c0392b; --verde: #2a7a2a;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color: var(--texto);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
body { margin: 0; background: var(--fondo); min-height: 100dvh; display: flex; flex-direction: column; }
a { color: var(--madera); }
small, .detalle { color: var(--suave); }
.esp { flex: 1; }

header { display: flex; align-items: center; gap: 10px; padding: 10px 16px; background: var(--madera); color: #fff; position: sticky; top: 0; z-index: 5; }
header .sub { opacity: .75; font-size: .9em; }
header form { margin: 0; }
header button { background: rgba(255,255,255,.15); color: #fff; border-color: rgba(255,255,255,.3); }
footer { text-align: center; padding: 10px; font-size: .85em; color: var(--suave); }
footer a { color: var(--suave); }

button, .boton {
  font: inherit; padding: 9px 14px; border-radius: 8px; border: 1px solid var(--borde); background: var(--tarjeta);
  color: var(--texto); cursor: pointer; text-decoration: none; display: inline-block; text-align: center;
}
button:hover, .boton:hover { border-color: var(--madera); }
button:disabled { opacity: .5; cursor: default; }
button.primario { background: var(--madera); color: #fff; border-color: var(--madera); }
button.primario:hover { background: var(--madera-osc); }
button.grande { padding: 13px; font-weight: 600; font-size: 1.05em; }
button.chico { padding: 5px 10px; font-size: .9em; }
input, select, textarea { font: inherit; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; width: 100%; color: var(--texto); }
textarea { resize: vertical; }
input[type=range] { padding: 0; }
input[type=checkbox], input[type=radio] { width: auto; }
label { display: flex; flex-direction: column; gap: 4px; font-size: .92em; }
label.check { flex-direction: row; align-items: center; gap: 8px; }
.fila { display: flex; align-items: center; gap: 10px; }
.fila output { min-width: 2.5em; text-align: right; }
.grilla2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }

main { flex: 1; display: grid; grid-template-columns: 330px 1fr; gap: 16px; padding: 16px; max-width: 1500px; width: 100%; margin: 0 auto; }
#panel { display: flex; flex-direction: column; gap: 11px; }
#vista { min-width: 0; display: flex; flex-direction: column; gap: 12px; }

.zona { border: 2px dashed var(--borde); border-radius: 12px; padding: 16px; text-align: center; background: var(--tarjeta);
  display: flex; flex-direction: column; gap: 4px; cursor: pointer; transition: .15s; }
.zona:hover, .zona.encima { border-color: var(--madera); background: #fbf6f0; }
.zona .link { gap: 6px; margin-top: 6px; cursor: default; }
.zona .link input { padding: 5px 8px; font-size: .9em; }

#visor { position: relative; background: #e7e2dc; border-radius: 12px; height: min(62vh, 640px); display: flex; align-items: center; justify-content: center; overflow: hidden; }
#visorImg { max-width: 100%; max-height: 100%; object-fit: contain; display: none; }
#visorSvg { width: 100%; height: 100%; display: none; padding: 12px; }
#visorSvg svg { width: 100%; height: 100%; background: #fff; border-radius: 6px; }
#visorSvg path { vector-effect: non-scaling-stroke; stroke-width: 1.5px; }
#visorVacio { color: var(--suave); padding: 20px; text-align: center; }

.carga { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(246,243,239,.75); font-weight: 500; text-align: center; padding: 20px; z-index: 3; }
.rueda { width: 46px; height: 46px; border-radius: 50%; border: 5px solid #e2d6c8; border-top-color: var(--madera); animation: girar .8s linear infinite; }
@keyframes girar { to { transform: rotate(360deg); } }

#miniaturas { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.mini { flex: 0 0 auto; width: 112px; border: 2px solid transparent; border-radius: 10px; background: var(--tarjeta); padding: 4px; cursor: pointer; font-size: .78em; text-align: center; }
.mini.activa { border-color: var(--madera); }
.mini img, .mini .svgmini { width: 100%; height: 76px; object-fit: contain; background: #f0ece6; border-radius: 6px; display: block; }
.mini .svgmini { display: flex; align-items: center; justify-content: center; color: var(--rojo); font-weight: 700; font-size: 1.4em; background: #fff; }
.mini span { display: block; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

#resultado { background: var(--tarjeta); border-radius: 12px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
#resultado h3 { margin: 8px 0 0; }
.acciones { display: flex; flex-wrap: wrap; gap: 8px; }
#info { white-space: pre-wrap; font-size: .85em; margin: 0; background: var(--fondo); padding: 10px; border-radius: 8px; }
#cuenta.pasado { color: var(--rojo); font-weight: 600; }

dialog { border: none; border-radius: 14px; padding: 0; width: min(1100px, 96vw); max-height: 94dvh; box-shadow: 0 10px 40px rgba(0,0,0,.3); }
dialog[open] { display: flex; flex-direction: column; }
dialog::backdrop { background: rgba(30,20,10,.5); }
.dlg-cab, .dlg-pie, .modos { display: flex; align-items: center; gap: 10px; padding: 10px 14px; flex-wrap: wrap; }
.dlg-cab { border-bottom: 1px solid var(--borde); }
.dlg-pie label { width: auto; }
.dlg-pie input { width: 9em; }
.modos label { flex-direction: row; align-items: center; gap: 6px; width: auto; }
.modos select { width: auto; }
.cerrar { margin-left: auto; border: none; font-size: 1.1em; }
.msg { margin: 8px 14px 0; font-weight: 600; }
.ayuda { padding: 0 14px 6px; }
.ok { color: var(--verde); font-weight: 600; }
.lienzo { flex: 1; min-height: 0; overflow: auto; background: #333; display: flex; justify-content: center; align-items: center; }
.lienzo svg { display: block; flex: none; touch-action: pinch-zoom; user-select: none; -webkit-user-select: none; }
#svgAcomodar .pieza { cursor: grab; }
#svgAcomodar .pieza:active { cursor: grabbing; }

#finos { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 12px; }
#finos[open] { display: flex; flex-direction: column; gap: 10px; padding-bottom: 12px; }
#finos summary { cursor: pointer; font-weight: 600; font-size: .95em; }
#finosResumen { font-weight: 400; }

body.ocupado #panel, body.ocupado #miniaturas, body.ocupado #resultado .acciones { opacity: .55; pointer-events: none; }
body.ocupado #zonaImagen { cursor: progress; }

.zonas-cuerpo { display: flex; gap: 12px; padding: 0 14px; min-height: 0; flex: 1; }
.zonas-cuerpo .lienzo { flex: 1.4; border-radius: 8px; }
.zonas-lado { flex: 1; display: flex; flex-direction: column; gap: 10px; min-width: 240px; overflow: auto; }
.zonas-previa { position: relative; background: #e7e2dc; border-radius: 8px; min-height: 180px; display: flex; align-items: center; justify-content: center; }
.zonas-previa img { max-width: 100%; max-height: 32dvh; object-fit: contain; }
.zona-item { border: 2px solid var(--borde); border-radius: 10px; padding: 8px 10px; display: flex; flex-direction: column; gap: 6px; font-size: .9em; }
.zona-item.elegida { border-color: var(--madera); }
.zona-item .fila b { flex: 1; display: flex; align-items: center; gap: 6px; }
.zona-item .color { width: 14px; height: 14px; border-radius: 3px; display: inline-block; }

.alerta { background: #fff4e5; border: 1px solid #f0c27b; border-radius: 10px; padding: 10px 12px; font-size: .92em; }
.alerta.ok-caja { background: #eaf6ea; border-color: #9fd09f; }
.formu { padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; overflow: auto; flex: 1; min-height: 0; }
.formu > * { flex-shrink: 0; }
.grilla3 { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin: 8px 0; }
.checks { display: flex; flex-wrap: wrap; gap: 6px 14px; max-height: 140px; overflow: auto; padding: 8px; border: 1px solid var(--borde); border-radius: 8px; }
.checks label { flex-direction: row; align-items: center; gap: 6px; }
.radios { gap: 18px; flex-wrap: wrap; }
.pub-imgs { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; }
.pub-img { flex: 0 0 130px; border: 2px solid var(--borde); border-radius: 10px; padding: 4px; font-size: .8em; text-align: center; background: #fff; }
.pub-img.fuera { opacity: .45; }
.pub-img.principal { border-color: var(--madera); }
.pub-img img { width: 100%; height: 90px; object-fit: contain; background: #f0ece6; border-radius: 6px; }
.pub-img .fila { justify-content: center; gap: 4px; margin-top: 4px; }
.pub-img button { padding: 2px 7px; font-size: .95em; }
.lote { border-top: 1px solid var(--borde); background: var(--fondo); }
.lote .fila input { padding: 4px 6px; }
.tabla-caja { overflow: auto; flex: 1; min-height: 200px; padding: 0 14px; }
#tablaProductos { width: 100%; border-collapse: collapse; font-size: .9em; }
#tablaProductos th { text-align: left; position: sticky; top: 0; background: #fff; padding: 8px 6px; border-bottom: 2px solid var(--borde); }
#tablaProductos td { padding: 5px 6px; border-bottom: 1px solid #eee; }
#tablaProductos td img { width: 44px; height: 44px; object-fit: cover; border-radius: 6px; }
#tablaProductos input:not([type=checkbox]), #tablaProductos select { padding: 5px 7px; }
#tablaProductos .nom { min-width: 220px; }
#tablaProductos .num { width: 7em; }
#tablaProductos select { min-width: 8.5em; }
#tablaProductos tr.cambiado td { background: #fff8e8; }
.cat-drop { position: relative; min-width: 150px; }
.cat-drop summary { cursor: pointer; list-style: none; padding: 5px 8px; border: 1px solid var(--borde); border-radius: 8px; background: #fff;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 200px; }
.cat-drop summary::-webkit-details-marker { display: none; }
.cat-drop[open] .checks { position: absolute; z-index: 4; background: #fff; box-shadow: 0 6px 20px rgba(0,0,0,.15); min-width: 220px; max-height: 260px;
  flex-direction: column; flex-wrap: nowrap; margin-top: 4px; }
.grupo { display: grid; grid-template-columns: 2.2fr 1fr 1.2fr; gap: 8px; background: var(--fondo); border-radius: 10px; padding: 8px 10px; }
.grupo label { font-size: .85em; }
#grupos { display: flex; flex-direction: column; gap: 8px; }
#textosFijos { background: var(--fondo); border-radius: 10px; padding: 8px 12px; }
#textosFijos[open] { display: flex; flex-direction: column; gap: 8px; }
#textosFijos summary { cursor: pointer; font-weight: 600; }
@media (max-width: 860px) { .grupo { grid-template-columns: 1fr; } }
.campo { display: flex; flex-direction: column; gap: 4px; font-size: .92em; }
.editor { border: 1px solid var(--borde); border-radius: 8px; background: #fff; overflow: hidden; font-size: 1rem; }
.editor:focus-within { border-color: var(--madera); }
.editor-barra { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; border-bottom: 1px solid var(--borde); background: var(--fondo); }
.editor-barra button { padding: 4px 9px; font-size: .86em; min-width: 2.2em; }
.editor-barra button.activo { background: #ead9c6; border-color: var(--madera); }
.editor-barra .sep { width: 1px; background: var(--borde); margin: 2px 2px; }
.editor-area { min-height: 110px; max-height: 45dvh; overflow: auto; padding: 10px 12px; outline: none; line-height: 1.5; }
.editor-area:empty::before { content: "Escribí acá…"; color: var(--suave); }
.editor-area h2, .editor-area h3, .editor-area h4 { color: var(--madera); margin: .6em 0 .3em; }
.editor-area p { margin: 0 0 .6em; }
.editor-codigo { border: none; border-radius: 0; font-family: Consolas, monospace; font-size: .88em; min-height: 180px; }
.vista-html { width: 100%; height: 280px; border: 1px solid var(--borde); border-radius: 8px; background: #fff; margin-top: 8px; }
#prodLinks { gap: 12px; font-size: .9em; margin-left: 12px; }
.pub-img .quitar { color: var(--rojo); }

#dlgAmbientes .zona { margin: 14px; }
#listaElegirAmb { padding: 14px; }
.amb.elegible { cursor: pointer; border: 3px solid transparent; position: relative; }
.amb.elegible.elegido { border-color: var(--madera); background: #f1e4d4; }
.amb.elegible.elegido::after { content: "✓"; position: absolute; top: 8px; right: 10px; background: var(--madera); color: #fff;
  border-radius: 50%; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; font-weight: 700; }
.figs-opciones { flex-wrap: wrap; gap: 18px; }
.figs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.fig { background: var(--fondo); border-radius: 10px; padding: 8px; display: flex; flex-direction: column; gap: 6px; border: 2px solid transparent; }
.fig.no-entra { border-color: var(--rojo); }
.fig svg { width: 100%; height: 110px; background: #fff; border-radius: 6px; }
.fig .fila input { width: 100%; padding: 5px 7px; }
.fig small.aviso-fig { color: var(--rojo); }
.grilla-amb { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; padding: 0 14px 14px; overflow: auto; }
.amb { background: var(--fondo); border-radius: 10px; padding: 6px; display: flex; flex-direction: column; gap: 6px; font-size: .9em; }
.amb img { width: 100%; height: 120px; object-fit: cover; border-radius: 6px; }
.amb div { display: flex; align-items: center; gap: 6px; }
.amb div span { flex: 1; overflow: hidden; text-overflow: ellipsis; }

.aviso { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: #2b2622; color: #fff; padding: 10px 18px; border-radius: 10px; z-index: 50; max-width: 90vw; text-align: center; }
.aviso.error { background: var(--rojo); }

body.login { align-items: center; justify-content: center; }
.tarjeta { background: var(--tarjeta); padding: 28px; border-radius: 16px; width: min(360px, 92vw); display: flex; flex-direction: column; gap: 14px; box-shadow: 0 6px 30px rgba(0,0,0,.08); }
.tarjeta h1 { margin: 0; color: var(--madera); }
.tarjeta .sub { margin: -10px 0 0; color: var(--suave); }
.tarjeta .error { color: var(--rojo); margin: 0; }
.tarjeta .firma { font-size: .8em; color: var(--suave); text-align: center; margin: 0; }
.tarjeta .firma a { color: var(--suave); }

@media (max-width: 860px) {
  main { grid-template-columns: 1fr; padding: 10px; }
  #visor { height: 48vh; }
  header .sub { display: none; }
  dialog { width: 100vw; max-width: 100vw; max-height: 100dvh; height: 100dvh; border-radius: 0; margin: 0; }
  dialog[open] { display: block; overflow-y: auto; }          /* se desplaza la ventana entera; la foto no se recorta */
  .lienzo { overflow: visible; }
  .modos button, .dlg-pie button { user-select: none; -webkit-user-select: none; }
  .zonas-cuerpo { flex-direction: column; padding: 0; }
  .zonas-lado { padding: 0 14px; min-width: 0; }
  .dlg-pie input { width: 7em; }
}