/* Personalizador: pantalla de trabajo sin scroll de página. El panel desplaza por dentro y el modelo siempre queda a la vista. */

html, body.app { height: 100%; }
body.app { overflow: hidden; display: flex; flex-direction: column; height: 100dvh; overscroll-behavior: none; }

.p-barra { position: relative; z-index: var(--z-cabecera); flex: none; display: flex; align-items: center; gap: 4px; min-height: 54px; padding: 4px max(8px, env(safe-area-inset-left)); color: var(--blanco); }
.p-marca { display: none; }
.p-lineas { display: flex; gap: 2px; margin-inline: auto; }
.p-linea { position: relative; isolation: isolate; min-height: 44px; min-width: 50px; padding: 4px 10px; font-family: "Saira Display", sans-serif; font-style: italic; font-stretch: 60%; font-weight: 800; font-size: 1.1875rem; text-transform: uppercase; color: var(--blanco); transition: color 140ms ease, transform 160ms var(--ease-out); }
.p-linea::before { content: ""; position: absolute; inset: 5px 0; z-index: -1; background: transparent; -webkit-mask: var(--rasgado-b); mask: var(--rasgado-b); transition: background-color 140ms ease; }
.p-linea[aria-pressed="true"] { color: var(--tinta); }
.p-linea[aria-pressed="true"]::before { background: var(--cinta); }
.p-linea:active { transform: scale(0.96); }
.p-acciones { display: flex; align-items: center; }
.p-acciones .icono-boton { min-width: 42px; }
@media (max-width: 359px) {
  .p-barra { padding-inline: 2px; gap: 0; }
  .p-barra > .icono-boton { min-width: 36px; }
  .p-acciones .icono-boton { min-width: 36px; }
  .p-linea { min-width: 44px; padding-inline: 6px; font-size: 1.0625rem; }
  .p-vista { padding-inline: 5px; font-size: 0.75rem; }
}
.p-barra .bolsa-cuenta { background: var(--blanco); color: var(--tinta); }

.p-obra { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.p-escenario { position: relative; flex: 1 1 44%; min-height: 200px; overflow: hidden; }
.p-escenario[data-fondo="azul"] { background-color: var(--azul); background-image: url("/img/textura/pliegues.webp?v=c9b6404cdc"), url("/img/textura/tela-azul.webp?v=e6d572b22d"); background-blend-mode: soft-light, normal; background-size: 1200px auto, 135px; }
.p-escenario[data-fondo="blanco"] { background: oklch(0.9513 0.0165 253); }
.p-escenario[data-fondo="negro"] { background: var(--tinta) url("/img/textura/tela-negra.webp?v=40f9b1271a") 0 0 / 135px; }
#lienzo-3d { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: grab; }
#lienzo-3d:active { cursor: grabbing; }
.p-cargando { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; }
.p-pista { position: absolute; left: 50%; top: 10px; translate: -50% 0; z-index: var(--z-escena); pointer-events: none; white-space: nowrap; font-size: 0.875rem; transition: opacity 180ms ease; }
.p-pista.oculta { opacity: 0; }

.p-controles { position: absolute; z-index: var(--z-escena); left: 8px; right: 8px; bottom: 8px; display: flex; justify-content: space-between; align-items: flex-end; gap: 8px; pointer-events: none; }
.p-vistas { display: flex; gap: 2px; pointer-events: auto; background: oklch(0.2 0.03 255 / 0.62); border-radius: 12px; padding: 3px; }
.p-vista { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; min-width: 44px; padding: 0 8px; border-radius: 9px; color: var(--blanco); font-size: 0.8125rem; font-weight: 600; transition: background-color 140ms ease, transform 160ms var(--ease-out); }
.p-vista:active { transform: scale(0.95); }
.p-vista[aria-pressed="true"] { background: var(--blanco); color: var(--tinta); }
.p-ajustes { display: flex; flex-direction: column; gap: 4px; pointer-events: auto; }
.p-zoom { display: flex; flex-direction: column; gap: 2px; background: oklch(0.2 0.03 255 / 0.62); border-radius: 12px; padding: 3px; color: var(--blanco); }
.p-zoom .icono-boton { min-width: 44px; min-height: 44px; }
.p-fondos { display: none; background: oklch(0.2 0.03 255 / 0.62); border-radius: 12px; padding: 3px; pointer-events: auto; flex-direction: column; }
.p-fondo { width: 44px; height: 44px; display: grid; place-items: center; transition: transform 160ms var(--ease-out); }
.p-fondo::before { content: ""; width: 26px; height: 26px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px oklch(1 0 0 / 0.5); }
.p-fondo:active { transform: scale(0.92); }
.p-fondo[data-fondo="azul"]::before { background: var(--azul); }
.p-fondo[data-fondo="blanco"]::before { background: var(--tinte); }
.p-fondo[data-fondo="negro"]::before { background: var(--tinta); }
.p-fondo[aria-pressed="true"]::before { box-shadow: inset 0 0 0 1.5px oklch(1 0 0 / 0.5), 0 0 0 2.5px var(--blanco); }

#p-plano { position: absolute; inset: 0; z-index: var(--z-escena); overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; padding-inline: 10px; background: inherit; background-blend-mode: inherit; }
.sin-webgl .p-plano-rotulo { top: auto; bottom: 66px; }
.p-plano-rotulo { position: absolute; left: 50%; top: 10px; translate: -50% 0; z-index: calc(var(--z-escena) + 1); pointer-events: none; white-space: nowrap; font-size: 0.9375rem; }
body.en-plano .p-ajustes { display: none; }
.p-vista.p-plano-boton[aria-pressed="true"] { background: var(--blanco); color: var(--tinta); }
#plano-lienzo { flex: none; touch-action: pan-x; max-width: none; }
#p-sin-webgl { position: absolute; left: 10px; right: 10px; top: 10px; z-index: calc(var(--z-escena) + 1); }

.p-panel { flex: 1 1 56%; min-height: 0; display: flex; flex-direction: column; background: var(--blanco); box-shadow: 0 -6px 18px oklch(0.2 0.06 255 / 0.16); position: relative; z-index: var(--z-contenido); }
.p-grande { display: flex; justify-content: center; align-items: center; min-height: 32px; margin-bottom: -6px; width: 100%; color: var(--tinta-2); }
.p-grande::before { content: ""; width: 44px; height: 4px; border-radius: 3px; background: var(--tinte-2); }
.p-pestanas { flex: none; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-bottom: 1px solid var(--linea); }
.p-pestana { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 50px; font-size: 0.75rem; font-weight: 600; color: var(--tinta-2); position: relative; transition: color 140ms ease; }
.p-pestana .ico { width: 20px; height: 20px; }
.p-pestana { isolation: isolate; }
.p-pestana::before { content: ""; position: absolute; inset: 5px 2px; z-index: -1; background: transparent; -webkit-mask: var(--rasgado-a); mask: var(--rasgado-a); transition: background-color 140ms ease; }
.p-pestana:nth-child(2n)::before { -webkit-mask: var(--rasgado-b); mask: var(--rasgado-b); }
.p-pestana[aria-selected="true"] { color: var(--blanco); }
.p-pestana[aria-selected="true"]::before { background: var(--azul); }
#p-inspector { flex: none; max-height: 42%; overflow-y: auto; background: var(--tinte); padding: 8px 12px 10px; overscroll-behavior: contain; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
#p-contenido { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; overscroll-behavior: contain; }
.p-panel-tab { display: grid; gap: 16px; }
.p-grupo { display: grid; gap: 8px; }
.p-titulo { font-size: var(--fs-sm); font-weight: 700; line-height: 1.25; display: block; }
.p-nota { font-size: var(--fs-xs); line-height: 1.4; color: var(--tinta-2); }
.p-error { color: var(--error); font-size: var(--fs-sm); font-weight: 500; }
.fila-campo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px; align-items: center; }
#campo-texto:not(:placeholder-shown) { padding-right: 46px; }
.campo-limpiar { position: absolute; right: 6px; top: 50%; translate: 0 -50%; display: grid; place-items: center; width: 40px; height: 44px; color: var(--tinta-2); transition: transform 140ms var(--ease-out); }
.campo-limpiar:active { transform: scale(0.9); }
.fila-campo .cinta { font-size: 1.125rem; min-height: 48px; padding-inline: 0.9em; white-space: nowrap; }

.muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); gap: 6px; }
.muestra { display: grid; justify-items: center; gap: 4px; padding: 6px 2px 4px; border-radius: 10px; font-size: 0.75rem; font-weight: 500; line-height: 1.15; text-align: center; transition: background-color 140ms ease, transform 160ms var(--ease-out); min-height: 74px; align-content: start; }
.muestra:active { transform: scale(0.95); }
.muestra-disco { width: 38px; height: 38px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.16), inset 0 -5px 8px oklch(0 0 0 / 0.14), inset 0 4px 6px oklch(1 0 0 / 0.26); }
.muestra-vidrio .muestra-disco { background: linear-gradient(135deg, oklch(1 0 0), oklch(0.86 0.02 240) 55%, oklch(0.97 0.01 240)); }
.muestra-metal .muestra-disco { background: linear-gradient(135deg, var(--c), oklch(1 0 0 / 0.75) 45%, var(--c)); background-color: var(--c); }
.muestra[aria-pressed="true"] { background: var(--tinte); }
.muestra[aria-pressed="true"] .muestra-disco { outline: 2.5px solid var(--azul); outline-offset: 2px; }
.p-explorar { border-top: 1px solid var(--linea); padding-top: 4px; }
.p-explorar summary { display: flex; justify-content: space-between; align-items: center; min-height: 44px; font-weight: 600; font-size: var(--fs-sm); cursor: pointer; list-style: none; }
.p-explorar summary::-webkit-details-marker { display: none; }
.p-explorar[open] summary .ico { transform: rotate(180deg); }
.p-explorar .ico { transition: transform 180ms var(--ease-out); }
.p-explorar .p-nota { margin-bottom: 8px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips-carril { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: -12px; padding-inline: 12px; scroll-snap-type: x proximity; }
.chips-carril::-webkit-scrollbar { display: none; }
.chip { position: relative; isolation: isolate; flex: none; min-height: 44px; padding: 6px 15px; font-size: var(--fs-sm); font-weight: 600; scroll-snap-align: center; transition: color 140ms ease, transform 160ms var(--ease-out); }
.chip::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--tinte); -webkit-mask: var(--rasgado-c); mask: var(--rasgado-c); transition: background-color 140ms ease; }
.chip:nth-child(2n)::before { -webkit-mask: var(--rasgado-a); mask: var(--rasgado-a); }
.chip:nth-child(3n)::before { -webkit-mask: var(--rasgado-b); mask: var(--rasgado-b); }
.chip:active { transform: scale(0.96); }
.chip[aria-pressed="true"] { color: var(--blanco); }
.chip[aria-pressed="true"]::before { background: var(--azul); }
#p-inspector .chip::before { background: var(--blanco); }
#p-inspector .chip[aria-pressed="true"]::before { background: var(--azul); }

.fuente-lista { display: grid; gap: 4px; }
.fuente-fila { display: grid; gap: 0; justify-items: start; padding: 8px 12px; border-radius: 2px; background: var(--tinte); text-align: left; min-height: 62px; transition: background-color 140ms ease, transform 160ms var(--ease-out); width: 100%; overflow: hidden; }
.fuente-fila:active { transform: scale(0.99); }
.fuente-muestra { font-size: 1.625rem; line-height: 1.2; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: clip; }
.fuente-nombre { font-size: var(--fs-xs); color: var(--tinta-2); }
.fuente-fila[aria-pressed="true"] { background: var(--azul); color: var(--blanco); }
.fuente-fila[aria-pressed="true"] .fuente-nombre { color: var(--sobre-azul); }

.deco-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 6px; }
.deco-boton { display: grid; justify-items: center; align-content: start; gap: 3px; padding: 8px 4px 6px; border-radius: 2px; background: var(--tinte); min-height: 92px; transition: background-color 140ms ease, transform 160ms var(--ease-out); }
.deco-boton:active { transform: scale(0.95); }
.deco-svg { width: 44px; height: 44px; display: block; }
.deco-svg svg { width: 100%; height: 100%; }
.deco-boton canvas { width: 72px; height: 44px; }
.deco-nombre { font-size: 0.75rem; line-height: 1.15; text-align: center; color: var(--tinta-2); }
@media (hover: hover) and (pointer: fine) {
  .deco-boton:hover, .fuente-fila:not([aria-pressed="true"]):hover { background: var(--tinte-2); }
  .chip:not([aria-pressed="true"]):hover::before, #p-inspector .chip:not([aria-pressed="true"]):hover::before { background: var(--tinte-2); }
  .muestra:not([aria-pressed="true"]):hover { background: var(--tinte); }
}

.imagenes-lista { display: flex; flex-wrap: wrap; gap: 6px; }
.imagen-mini { padding: 4px; border-radius: 10px; background: var(--tinte); }
.imagen-mini canvas { width: 96px; height: 67px; }
.imagen-mini[aria-pressed="true"] { outline: 2px solid var(--azul); outline-offset: -2px; }
.capas-lista { display: grid; gap: 4px; }
.capa { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px; background: var(--tinte); border-radius: 10px; padding-right: 2px; }
.capa.activa { outline: 2px solid var(--azul); outline-offset: -2px; }
.capa-nombre { display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px 10px; font-size: var(--fs-sm); font-weight: 600; text-align: left; overflow: hidden; }
.capa-nombre span:last-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.capa-acciones { display: flex; }
.capa-acciones .icono-boton { min-width: 36px; min-height: 44px; }
.capa-acciones .ico { width: 18px; height: 18px; }

.insp-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.insp-cabeza .p-titulo { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.insp-acciones { display: flex; flex: none; }
.insp-acciones .icono-boton { min-width: 44px; min-height: 44px; }
.insp-acciones .ico { width: 19px; height: 19px; }
.insp-acciones .icono-boton[aria-pressed="true"] { background: var(--azul); color: var(--blanco); }
.insp-fila { display: flex; flex-wrap: wrap; gap: 6px; }
.insp-detalle { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.insp-ajustar { font-size: 0.8125rem; min-height: 44px; padding-inline: 12px; margin-right: 2px; }
@media (max-width: 899px) {
  #p-inspector:not(.abierto) .insp-detalle { display: none; }
  #p-inspector:not(.abierto) { padding-block: 2px; }
}
@media (min-width: 900px) { .insp-ajustar { display: none; } }
.rangos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 14px; }
.rango { display: grid; grid-template-columns: 1fr auto; align-items: baseline; }
.rango label { font-size: 0.75rem; font-weight: 600; }
.rango output { font-size: 0.75rem; color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.rango input { grid-column: 1 / -1; width: 100%; height: 28px; margin: 0; accent-color: var(--azul); touch-action: pan-y; }
.tintas { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 3px 2px; }
.tintas::-webkit-scrollbar { display: none; }
.tinta { position: relative; flex: none; width: 30px; height: 30px; border-radius: 50%; background: var(--c); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.2); transition: transform 160ms var(--ease-out); }
.tinta::after { content: ""; position: absolute; inset: -6px -3px; }
.tinta:active { transform: scale(0.9); }
.tinta[aria-pressed="true"] { outline: 2.5px solid var(--azul); outline-offset: 2px; }
.tinta-libre { background: conic-gradient(oklch(0.65 0.25 27), oklch(0.85 0.18 90), oklch(0.75 0.2 145), oklch(0.7 0.15 230), oklch(0.55 0.25 300), oklch(0.65 0.25 27)); overflow: hidden; cursor: pointer; }
.tinta-libre input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; }

.p-resumen { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 10px; align-items: center; padding: 8px 12px calc(8px + env(safe-area-inset-bottom)); border-top: 1px solid var(--linea); background: var(--blanco); }
.p-resumen-texto { min-width: 0; }
#res-titulo { font-weight: 700; font-size: var(--fs-sm); line-height: 1.2; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
#res-detalle { font-size: 0.75rem; color: var(--tinta-2); line-height: 1.25; }
.p-resumen .cinta { font-size: 1.125rem; min-height: 46px; padding: 0.4em 1em; }
.p-extra { grid-column: 1 / -1; display: none; gap: 14px; }
#p-aviso-tono { grid-column: 1 / -1; font-size: var(--fs-xs); color: var(--error); font-weight: 500; line-height: 1.3; }

body.panel-min .p-escenario { flex-basis: 76%; }
body.panel-min .p-panel { flex: 0 0 auto; }
body.panel-min #p-contenido, body.panel-min #p-inspector { display: none; }

@media (max-height: 620px) and (max-width: 899px) {
  .p-pestana { min-height: 42px; }
  .p-pestana span:last-child { display: none; }
  .p-vista { padding-inline: 7px; }
}

@media (min-width: 900px) {
  .p-marca { display: inline-flex; margin-left: 8px; }
  .p-lineas { margin-inline: 24px auto; }
  .p-linea { min-width: 76px; font-size: 1.375rem; }
  .p-obra { flex-direction: row; }
  .p-escenario { flex: 1 1 auto; min-height: 0; }
  .p-panel { flex: 0 0 min(440px, 38vw); box-shadow: -6px 0 18px oklch(0.2 0.06 255 / 0.14); }
  .p-grande { display: none; }
  .p-pestana { flex-direction: row; gap: 6px; min-height: 52px; font-size: 0.875rem; }
  #p-inspector { max-height: 50%; padding: 12px 16px; }
  #p-contenido { padding: 16px; }
  .chips-carril { margin-inline: -16px; padding-inline: 16px; flex-wrap: wrap; overflow: visible; }
  .p-resumen { padding: 12px 16px; }
  .p-extra { display: flex; }
  .p-fondos { display: flex; }
  .p-controles { left: 14px; right: 14px; bottom: 14px; }
  .p-vista { font-size: 0.875rem; padding-inline: 12px; }
  .fila-campo { grid-template-columns: minmax(0, 1fr) auto; }
  .p-pista { top: 16px; font-size: 1.0625rem; }
}