:root{
  /* Mapa sobre la ESCALA DE SUPERFICIES del kit de componentes HU (componentes-hu.css,
     modulo 08 v1.0.0): pozo < baja < media < alta < masalta < linea. Regla medida del kit:
     el coral solo sobre --hu-verde o sobre pozo; «activo» = ladrillo + crema. */
  --ms-fondo:           var(--hu-verde);
  --ms-pozo:            var(--hu-ui-pozo);
  --ms-panel:           var(--hu-ui-baja);
  --ms-seccion:         var(--hu-ui-baja);
  --ms-seccion-hover:   var(--hu-ui-media);
  --ms-tarjeta:         var(--hu-ui-media);
  --ms-panel-velo:      color-mix(in srgb, var(--hu-ui-baja) 96%, transparent);
  --ms-borde:           var(--hu-ui-linea);
  --ms-borde-control:   var(--hu-ui-linea);
  --ms-tinta:           var(--hu-crema);
  --ms-tinta-2:         var(--hu-ui-tinta-2);
  --ms-apagado:         var(--hu-ui-tinta-3);
  --ms-acento:          var(--hu-coral);          /* SOLO sobre verde o pozo */
  --ms-acento-velo:     color-mix(in srgb, var(--hu-coral) 22%, transparent);
  --ms-btn:             var(--hu-ui-alta);
  --ms-btn-hover:       var(--hu-ui-masalta);
  --ms-primario:        var(--hu-ladrillo);
  --ms-primario-hover:  var(--hu-ui-ladrillo-hover);
  --ms-sobre-primario:  var(--hu-crema);
  --ms-mono:            var(--hu-menta);
  --ms-chip-on:         var(--hu-ui-pozo);
  --ms-peligro:         var(--hu-coral);
}
* { box-sizing: border-box; }
:focus-visible { outline: 2px solid var(--hu-ladrillo); outline-offset: 2px; box-shadow: 0 0 0 3px rgba(232,146,122,.25); }
html, body { margin: 0; height: 100%; font-family: var(--hu-sans); background: var(--ms-fondo); color: var(--ms-tinta); }
#app { display: flex; height: 100vh; }

#panel {
  width: 340px; min-width: 340px; overflow-y: auto; padding: 14px;
  background: var(--ms-panel); border-right: 1px solid var(--ms-borde);
}
/* Cabecera de marca: logotipo HU a un color (hereda --ms-tinta via mask) + nombre de la herramienta */
#marca { display: flex; flex-direction: column; gap: 6px; margin: 0 0 12px; padding-bottom: 10px; border-bottom: 1px solid var(--ms-borde); }
#marca .hu-logo {
  display: block; width: 170px; aspect-ratio: 2560/683; color: var(--ms-tinta);
  background: currentColor;
  -webkit-mask: url("assets/identidad-hidalgougalde/logo/hidalgougalde-un-color.svg") no-repeat center / contain;
          mask: url("assets/identidad-hidalgougalde/logo/hidalgougalde-un-color.svg") no-repeat center / contain;
}
#marca .hu-logo:hover { opacity: .8; }
#panel h1 { font-family: var(--hu-serif-ui); font-size: 20px; font-weight: 600; margin: 0; color: var(--ms-tinta); }

details { margin-bottom: 8px; border: 1px solid var(--ms-borde); border-radius: var(--hu-ui-r-caja); background: var(--ms-seccion); overflow: hidden; }
summary { cursor: pointer; display: flex; align-items: center; gap: 8px; min-height: 40px; padding: 0 14px; font: 600 14px/1 var(--hu-sans); user-select: none; list-style: none; }
summary::-webkit-details-marker { display: none; }
summary::before { content: ''; width: 8px; height: 8px; border-right: 2px solid var(--ms-tinta-2); border-bottom: 2px solid var(--ms-tinta-2); transform: rotate(45deg) translate(-2px,-2px); transition: transform .14s var(--hu-ui-curva); }
details:not([open]) summary::before { transform: rotate(-45deg) translate(-1px,1px); }
summary:hover { background: var(--ms-seccion-hover); }

#accBtns { display: flex; gap: 6px; margin-bottom: 8px; }
#accBtns .minibtn { flex: 1; padding: 4px 6px; font-size: 11px; background: var(--ms-seccion); border: 1px solid var(--ms-borde); }
#accBtns .minibtn:hover { background: var(--ms-btn); }
.sec { padding: 4px 12px 12px; font-size: 12.5px; }
.row { margin: 6px 0; display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
label { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
hr { border: none; border-top: 1px solid var(--ms-borde); margin: 8px 0; }

input[type="number"] { width: 62px; }
input[type="text"], input[type="number"], select {
  background: var(--ms-pozo); color: var(--ms-tinta); border: 1px solid var(--ms-borde-control); border-radius: var(--hu-ui-r-ctl); padding: 5px 8px; min-height: 30px; font: 400 12.5px/1.3 var(--hu-sans);
}
input:focus-visible, select:focus-visible { outline: none; border-color: var(--hu-coral); box-shadow: 0 0 0 3px rgba(232,146,122,.25); }
input[type="checkbox"], input[type="radio"] { accent-color: var(--hu-ladrillo); width: 16px; height: 16px; }
input[type="range"] { accent-color: var(--hu-ladrillo); }
input[type="color"] { width: 34px; height: 26px; border: none; background: none; padding: 0; cursor: pointer; }
input[type="range"] { width: 130px; }

.filebtn {
  display: flex; align-items: center; justify-content: center; min-height: var(--hu-ui-alto-toque); padding: 0 16px; background: var(--ms-btn); border: 1px solid var(--ms-borde); border-radius: var(--hu-ui-r-ctl);
  cursor: pointer; font: 600 13px/1 var(--hu-sans); transition: background var(--hu-ui-rapido) var(--hu-ui-curva);
}
.filebtn:hover { background: var(--ms-btn-hover); }
.filebtn input { display: none; }

.hint { color: var(--ms-tinta-2); font-size: 11.5px; margin-top: 5px; line-height: 1.4; }
.hint.big { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--ms-pozo); border: 1px solid var(--ms-borde); font: 600 11px/14px var(--hu-sans); letter-spacing: .03em; color: var(--ms-acento); }
.hint.big:empty { display: none; }
.mono { font-family: var(--hu-mono); word-break: break-all; color: var(--ms-mono); }

#generateBtn {
  width: 100%; min-height: var(--hu-ui-alto-toque); padding: 0 16px; margin-top: 10px; font: 600 15px/1 var(--hu-sans);
  background: var(--ms-primario); color: var(--ms-sobre-primario); border: 1px solid transparent; border-radius: var(--hu-ui-r-ctl); cursor: pointer;
  transition: background var(--hu-ui-rapido) var(--hu-ui-curva), transform var(--hu-ui-rapido) var(--hu-ui-curva);
}
#generateBtn:active:not(:disabled) { transform: scale(.97); }
#generateBtn:hover:not(:disabled) { background: var(--ms-primario-hover); }
#generateBtn:disabled { background: var(--hu-ui-alta); color: var(--ms-apagado); cursor: not-allowed; }

#progress { margin-top: 10px; }
#progressBar { height: 8px; background: var(--ms-pozo); border: 1px solid var(--ms-borde); border-radius: 4px; overflow: hidden; }
#progressFill { height: 100%; width: 0; background: var(--ms-primario); transition: width .15s; }

.offbox { margin-top: 6px; }
.offrow { display: flex; gap: 5px; align-items: center; margin: 3px 0; font-size: 12px; }
.offrow .offlabel { width: 78px; color: var(--ms-tinta-2); font-family: var(--hu-mono); font-size: 11px; }
.offrow input { width: 52px; }
.row.indent { margin-left: 20px; }

/* Pestañas */
#tabs { display: flex; gap: 4px; margin: 10px 0; }
#tabs .tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: var(--hu-ui-alto-toque); padding: 0 14px;
  font: 600 13px/1 var(--hu-sans); cursor: pointer; background: var(--hu-ui-alta); color: var(--ms-tinta); border: 0; border-radius: var(--hu-ui-r-caja);
}
#tabs .tab.active { background: var(--ms-primario); color: var(--ms-sobre-primario); box-shadow: 0 2px 6px rgba(0,0,0,.3); }

/* Overlay de modos de transformación de luces */
#tcModes {
  position: absolute; top: 16px; left: 16px; z-index: 28;
  display: flex; gap: 5px; align-items: center; padding: 7px 10px;
  background: var(--ms-panel); border: 1px solid var(--ms-borde-control); border-radius: 8px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
#tcModes #tcTitle { font-size: 11.5px; color: var(--ms-tinta-2); margin-right: 4px; }
#tcModes button {
  background: var(--ms-seccion); color: var(--ms-tinta); border: 1px solid var(--ms-borde-control); border-radius: 5px;
  padding: 4px 8px; font-size: 11.5px; cursor: pointer;
}
#tcModes button:hover { background: var(--ms-btn); }
#tcModes button.active { background: var(--ms-primario); border-color: transparent; }

/* Vista previa de hoja (composición) */
#sheetPreview {
  position: absolute; bottom: 16px; right: 16px; z-index: 25;
  width: 420px; min-width: 220px; min-height: 160px; max-width: 92%; max-height: 92%;
  resize: both; overflow: hidden; display: flex; flex-direction: column;
  background: var(--ms-panel); border: 1px solid var(--ms-borde-control); border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
#sheetPreview .head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 12px; font-family: var(--hu-mono); color: var(--ms-tinta); border-bottom: 1px solid var(--ms-borde); }
#sheetPreview .head button { background: none; border: none; color: var(--ms-tinta-2); cursor: pointer; font-size: 14px; }
#sheetImgWrap { flex: 1; position: relative; min-height: 0; }
#sheetPreview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: var(--ms-fondo); }
#sheetHotspots { position: absolute; inset: 0; }
#sheetHotspots .hs { position: absolute; border: 1px solid transparent; cursor: pointer; box-sizing: border-box; }
#sheetHotspots .hs:hover { border-color: var(--ms-acento); background: var(--ms-acento-velo); }
#cellPicker { position: absolute; z-index: 40; }
#cellPicker select { background: var(--ms-fondo); color: var(--ms-tinta); border: 1px solid var(--ms-acento); border-radius: 4px; font-size: 12px; padding: 3px; }

#compGenerate {
  width: 100%; min-height: var(--hu-ui-alto-toque); padding: 0 16px; margin-top: 6px; font: 600 15px/1 var(--hu-sans);
  background: var(--ms-primario); color: var(--ms-sobre-primario); border: 1px solid transparent; border-radius: var(--hu-ui-r-ctl); cursor: pointer;
}
#compGenerate:hover:not(:disabled) { background: var(--ms-primario-hover); }
#compGenerate:disabled { background: var(--hu-ui-alta); color: var(--ms-apagado); cursor: not-allowed; }

/* Selección propia de cámaras de hoja */
#compOwnList { margin: 6px 0; }
#compOwnList .cpRow { display: flex; gap: 6px; align-items: center; margin: 2px 0; font-size: 11.5px; flex-wrap: wrap; }
#compOwnList .cpRow .lvl { width: 40px; color: var(--ms-tinta-2); font-family: var(--hu-mono); font-size: 10.5px; }
#compOwnList label { gap: 3px; font-size: 10.5px; }

.minibtn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px;
  background: var(--ms-btn); color: var(--ms-tinta); border: 1px solid var(--ms-borde); border-radius: var(--hu-ui-r-ctl);
  padding: 0 12px; font: 600 12px/1 var(--hu-sans); cursor: pointer; transition: background var(--hu-ui-rapido) var(--hu-ui-curva);
}
.minibtn:active { transform: scale(.97); }
.minibtn:hover { background: var(--ms-btn-hover); }
.filebtn.small { display: inline-flex; min-height: 36px; padding: 0 12px; font-size: 12px; margin: 0; }

/* Lista de materiales del modelo */
.matItem { border: 1px solid color-mix(in srgb, var(--ms-borde) 60%, transparent); border-radius: var(--hu-ui-r-caja); padding: 8px 10px; margin: 6px 0; background: var(--ms-tarjeta); }
.matItem .mname { display: inline-block; font-family: var(--hu-mono); font-size: 11px; color: var(--ms-acento); background: var(--ms-pozo); border: 1px solid var(--ms-borde); border-radius: var(--hu-ui-r-ctl); padding: 2px 8px; margin-bottom: 6px; word-break: break-all; }
.matItem .row { margin: 3px 0; }
.matItem input[type="range"] { width: 70px; }
.matItem input[type="number"] { width: 54px; }
.matmaps { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }
.maptag { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--ms-borde); border-radius: 999px; padding: 2px 8px; font: 600 11px/14px var(--hu-sans); letter-spacing: .03em; background: var(--ms-pozo); color: var(--ms-tinta-2); }
.maptag.on { color: var(--hu-menta); }
.maptag label { cursor: pointer; }
.maptag input[type="file"] { display: none; }
.maptag .mi-texclear { background: none; border: none; color: var(--ms-peligro); cursor: pointer; font-size: 11px; padding: 0 1px; }
.matItem .mn { display: inline-block; width: 56px; color: var(--ms-tinta-2); }
.matItem .mn.scrubzone:hover { color: var(--ms-tinta); }

/* Preview hover de cámara */
#hoverPreview {
  position: absolute; display: none; pointer-events: none; z-index: 20;
  background: var(--ms-panel); border: 1px solid var(--ms-borde-control); border-radius: 8px; padding: 5px;
  box-shadow: 0 6px 20px rgba(0,0,0,.5);
}
#hoverPreview img { display: block; width: 220px; height: auto; border-radius: 4px; background: var(--ms-fondo); }
#hoverPreview .cap { font-size: 11px; color: var(--ms-tinta-2); margin-top: 4px; text-align: center; font-family: var(--hu-mono); }

/* Modal de cámara (escalable) */
#camModal {
  position: absolute; top: 16px; right: 16px; z-index: 30;
  width: 360px; min-width: 200px; min-height: 160px; max-width: 90%; max-height: 90%;
  resize: both; overflow: hidden; display: flex; flex-direction: column;
  background: var(--ms-panel); border: 1px solid var(--ms-borde-control); border-radius: 8px;
  box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
#camModal .head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 12px; font-family: var(--hu-mono); color: var(--ms-tinta); border-bottom: 1px solid var(--ms-borde); }
#camModal .head button { background: none; border: none; color: var(--ms-tinta-2); cursor: pointer; font-size: 14px; }
#camModal img { flex: 1; width: 100%; object-fit: contain; min-height: 0; background: var(--ms-fondo); }

/* Modal de cámara en vivo */
#liveCam, .liveCam {
  position: absolute; top: 16px; left: 16px; z-index: 26;
  width: 340px; min-width: 160px; max-width: 96%;
  resize: horizontal; overflow: hidden; display: flex; flex-direction: column;
  background: var(--ms-panel); border: 1px solid var(--ms-borde-control); border-radius: 8px; box-shadow: 0 8px 30px rgba(0,0,0,.6);
}
#liveCam .head, .liveCam .head { display: flex; gap: 6px; align-items: center; padding: 6px 8px; font-size: 12px; color: var(--ms-tinta); border-bottom: 1px solid var(--ms-borde); cursor: move; }
#liveCam .head select, .liveCam .head select { background: var(--ms-fondo); color: var(--ms-tinta); border: 1px solid var(--ms-borde-control); border-radius: 4px; font-size: 11px; padding: 1px 3px; }
#liveCam .head button, .liveCam .head button { background: none; border: none; color: var(--ms-tinta-2); cursor: pointer; font-size: 14px; }
#liveCam .head .cls, .liveCam .head .cls { margin-left: auto; }
#liveCam canvas, .liveCam canvas { flex: 1; width: 100%; min-height: 0; display: block; background: var(--ms-fondo); }

/* Scrubbing en campos numéricos */
label.scrubzone { cursor: ew-resize; }
label.scrubzone:hover { color: var(--ms-tinta); }
input.scrubzone:hover:not(:focus) { cursor: ew-resize; }
body.scrub-active, body.scrub-active * { cursor: ew-resize !important; user-select: none !important; }

/* Splitter panel ↔ viewport */
#splitter {
  width: 6px; min-width: 6px; align-self: stretch; cursor: col-resize;
  background: var(--ms-borde); border-left: 1px solid var(--ms-fondo); border-right: 1px solid var(--ms-fondo);
  transition: background .12s;
}
#splitter:hover, #splitter.dragging { background: var(--ms-acento); }
body.col-resizing, body.col-resizing * { cursor: col-resize !important; user-select: none !important; }

#viewport { flex: 1; position: relative; min-width: 0; }

/* Galería de resultados */
#galleryToggle { position: absolute; bottom: 12px; left: 12px; z-index: 22; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; background: var(--ms-btn); color: var(--ms-tinta); border: 1px solid var(--ms-borde); border-radius: var(--hu-ui-r-ctl); padding: 0 12px; font: 600 12px/1 var(--hu-sans); cursor: pointer; }
#gallery { position: absolute; left: 0; right: 0; bottom: 0; z-index: 24; max-height: 42%; background: var(--ms-panel-velo); border-top: 1px solid var(--ms-borde-control); display: flex; flex-direction: column; }
#gallery .ghead { display: flex; align-items: center; gap: 8px; padding: 5px 10px; font-size: 12px; color: var(--ms-tinta); border-bottom: 1px solid var(--ms-borde); }
#gallery .ghead button { background: none; border: none; color: var(--ms-tinta-2); cursor: pointer; font-size: 13px; }
#gallery .ghead #galleryClose { margin-left: auto; }
#galleryGrid { overflow: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 6px; padding: 8px; }
#galleryGrid .git { position: relative; border: 1px solid var(--ms-borde); border-radius: 4px; overflow: hidden; background: var(--ms-fondo); }
#galleryGrid .git img { width: 100%; display: block; cursor: zoom-in; }
#galleryGrid .git .gname { font-size: 9px; color: var(--ms-tinta-2); padding: 2px 3px; font-family: var(--hu-mono); word-break: break-all; }
#galleryGrid .git .gdel { position: absolute; top: 2px; right: 2px; background: rgba(0,0,0,.6); color: var(--ms-peligro); border: none; border-radius: 3px; cursor: pointer; font-size: 11px; padding: 0 4px; }

/* Comparador A/B */
#abModal { position: absolute; inset: 20px; z-index: 40; background: var(--ms-panel); border: 1px solid var(--ms-borde-control); border-radius: 8px; display: flex; flex-direction: column; box-shadow: 0 8px 30px rgba(0,0,0,.6); }
#abModal .head { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; font-size: 12px; color: var(--ms-tinta); border-bottom: 1px solid var(--ms-borde); }
#abModal .head button { background: none; border: none; color: var(--ms-tinta-2); cursor: pointer; font-size: 14px; }
#abModal .abpair { flex: 1; display: flex; gap: 8px; padding: 10px; min-height: 0; }
#abModal figure { flex: 1; margin: 0; display: flex; flex-direction: column; min-height: 0; }
#abModal figcaption { text-align: center; color: var(--ms-tinta-2); font-size: 12px; margin-bottom: 4px; }
#abModal img { flex: 1; width: 100%; object-fit: contain; min-height: 0; background: var(--ms-fondo); border-radius: 4px; }
#canvas { width: 100%; height: 100%; display: block; }
#dropHint {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  pointer-events: none; text-align: center; gap: 0;
  padding-bottom: 72px; /* deja libre la franja del boton Galeria (abajo-izquierda) */
}
/* El aviso lleva su propia superficie (tarjeta del kit): asi se lee igual sobre crema, verde, chroma o HDRI,
   y el auditor mide el mismo fondo que ve la persona */
#dropHint > .tarjeta { background: var(--hu-ui-baja); border: 1px solid var(--hu-ui-linea); border-radius: var(--hu-ui-r-caja); padding: 20px 28px; font-size: 20px; color: var(--ms-tinta); box-shadow: 0 8px 24px rgba(0,0,0,.25); }
#dropHint .ico { width: 28px; height: 28px; display: block; margin: 0 auto 8px; color: var(--ms-tinta-2); }
#dropHint span { font-size: 14px; }
#viewport.dragover { outline: 3px dashed var(--ms-acento); outline-offset: -3px; }

/* Iconos de la interfaz: sprite SVG del index.html, un color, estilo del kit HU */
.ico { width: 1.1em; height: 1.1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.15em; margin-right: .4em; }
button > .ico:only-child, .head button > .ico, .gdel > .ico, .mi-texclear > .ico, .scApply > .ico, .scDel > .ico { margin-right: 0; }
#generateBtn .ico, #compGenerate .ico, #ungridRun .ico { width: 1.15em; height: 1.15em; margin-right: .5em; }