/* ==========================================================================
   TOPSA · Simulador de fachada
   Vive en páginas normales de WordPress (tema claro). Tokens propios para no
   depender del CSS del home.
   ========================================================================== */
.thf{
  --thf-ink:#111111; --thf-muted:#5D5954; --thf-rule:#DDD9D2; --thf-bg:#F7F5F1;
  --thf-orange:#FF6A00; --thf-orange-ink:#BF4700; --thf-white:#FFFFFF;
  --thf-sans:Inter,"Helvetica Neue",Arial,sans-serif;
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);grid-template-rows:auto 1fr;gap:28px;
  font-family:var(--thf-sans);color:var(--thf-ink);margin:24px 0 40px;
}
@media (max-width:860px){.thf{grid-template-columns:1fr;grid-template-rows:auto;gap:18px}}

/* ---- lienzo ---- */
.thf__lienzo{position:relative;background:#e9e6e0;border:1px solid var(--thf-rule);overflow:hidden;aspect-ratio:16/9}
.thf__canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:none}
.thf__canvas.is-arrastrando{cursor:grabbing}
.thf__vacio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:24px;background:rgba(247,245,241,.72);backdrop-filter:blur(2px);pointer-events:none}
.thf__vacio strong{font-size:17px;letter-spacing:-.01em}
.thf__vacio span{font-size:13px;color:var(--thf-muted);max-width:34ch}
.thf__vacio[hidden]{display:none}
.thf__noche{position:absolute;right:12px;bottom:12px;padding:9px 14px;border:1px solid rgba(255,255,255,.35);
  background:rgba(17,17,17,.78);color:#fff;font:600 13px var(--thf-sans);letter-spacing:.02em;cursor:pointer;
  backdrop-filter:blur(4px);border-radius:3px}
.thf__noche[aria-pressed="true"]{background:var(--thf-orange);border-color:var(--thf-orange)}
.thf__noche:focus-visible{outline:2px solid var(--thf-orange);outline-offset:2px}

/* ---- panel ---- */
/* El panel ocupa la columna derecha completa: lienzo y medida se apilan a la izquierda. */
.thf__panel{display:flex;flex-direction:column;gap:18px;grid-column:2;grid-row:1 / span 2}
@media (max-width:860px){.thf__panel{grid-column:1;grid-row:auto}}
.thf__grupo{display:flex;flex-direction:column;gap:8px}
.thf__fila{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:520px){.thf__fila{grid-template-columns:1fr}}
.thf__etq{font-size:11.5px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--thf-muted)}

.thf__subir{display:block;position:relative;border:1px dashed var(--thf-ink);padding:14px 16px;cursor:pointer;
  font-size:14px;background:var(--thf-white);transition:border-color .2s,background-color .2s}
.thf__subir:hover{border-color:var(--thf-orange)}
.thf__subir input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}
.thf__subir:focus-within{outline:2px solid var(--thf-orange);outline-offset:2px}
.thf__subir.is-ok{border-style:solid;border-color:var(--thf-orange-ink)}
.thf__archivo{display:flex;gap:8px;align-items:stretch}
.thf__archivo .thf__subir{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.thf .thf__quitar,.thf .thf__quitar:hover,.thf .thf__quitar:focus{flex:0 0 auto;padding:0 14px;border:1px solid var(--thf-rule);background:var(--thf-white);
  color:var(--thf-muted);font:600 12.5px var(--thf-sans);letter-spacing:.02em;cursor:pointer;border-radius:3px}
.thf .thf__quitar:hover,.thf .thf__quitar:focus{border-color:var(--thf-ink);color:var(--thf-ink)}
.thf .thf__quitar[hidden]{display:none}

.thf__fachadas{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
@media (max-width:520px){.thf__fachadas{grid-template-columns:repeat(2,1fr)}}
.thf__fachada{position:relative;display:block;padding:0;border:2px solid transparent;background:none;cursor:pointer;overflow:hidden}
.thf__fachada img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
.thf__fachada span{display:block;font-size:11px;padding:5px 2px 0;color:var(--thf-muted);line-height:1.2}
.thf__fachada[aria-checked="true"]{border-color:var(--thf-orange)}
.thf__fachada[aria-checked="true"] span{color:var(--thf-ink);font-weight:600}
.thf__fachada:focus-visible{outline:2px solid var(--thf-orange);outline-offset:2px}

.thf__opciones{display:flex;flex-wrap:wrap;gap:8px}
.thf__opciones label{position:relative;cursor:pointer}
.thf__opciones input{position:absolute;opacity:0;width:0;height:0}
.thf__opciones span{display:inline-block;padding:8px 13px;border:1px solid var(--thf-rule);background:var(--thf-white);
  font-size:13.5px;transition:border-color .15s,background-color .15s,color .15s}
.thf__opciones--chica span{padding:6px 11px;font-size:12.5px}
.thf__opciones input:checked+span{border-color:var(--thf-ink);background:var(--thf-ink);color:#fff}
.thf__opciones input:focus-visible+span{outline:2px solid var(--thf-orange);outline-offset:2px}

input[type=range][data-thf-tam],input[type=range][data-thf-relieve]{width:100%;accent-color:var(--thf-orange);margin-top:6px}

/* Chip "Otro" con selector de color integrado. */
.thf__opciones .thf__color{display:inline-flex;align-items:stretch}
.thf__opciones .thf__color span{border-right:0}
.thf .thf__color input[type=color]{width:34px;height:auto;padding:2px;border:1px solid var(--thf-rule);border-left:0;
  background:var(--thf-white);cursor:pointer;border-radius:0}
.thf .thf__color input[type=color]::-webkit-color-swatch-wrapper{padding:0}
.thf .thf__color input[type=color]::-webkit-color-swatch{border:0;border-radius:1px}
.thf .thf__color input[type=radio]:checked+span{border-color:var(--thf-ink);background:var(--thf-ink);color:#fff}
.thf .thf__color input[type=radio]:checked~input[type=color]{border-color:var(--thf-ink)}
[data-thf-relieve-grupo][hidden]{display:none}

.thf__nota{margin:0;font-size:12.5px;color:var(--thf-muted)}

/* Medida estimada bajo el lienzo. Ocupa la primera columna, bajo la foto. */
.thf__medida{grid-column:1;align-self:start;margin:-16px 0 0;font-size:13.5px;line-height:1.5;color:var(--thf-ink)}
.thf__medida b{font-weight:700;font-variant-numeric:tabular-nums}
.thf__medida small{color:var(--thf-muted);font-size:12px}
.thf__medida[hidden]{display:none}
@media (max-width:860px){.thf__medida{margin-top:-8px}}
.thf__acciones{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px}
.thf__btn{display:inline-flex;align-items:center;justify-content:center;padding:12px 18px;font:600 14px var(--thf-sans);
  border:1px solid var(--thf-ink);border-radius:3px;text-decoration:none;cursor:pointer;transition:background-color .15s,color .15s,transform .15s}
.thf__btn--pri{background:var(--thf-orange);border-color:var(--thf-orange);color:#fff}
.thf__btn--pri:hover{background:#E65F00;border-color:#E65F00;color:#fff}
.thf__btn--sec{background:var(--thf-white);color:var(--thf-ink)}
.thf__btn--sec:hover:not(:disabled){background:var(--thf-ink);color:#fff}
.thf__btn:disabled{opacity:.45;cursor:not-allowed}
.thf__btn:focus-visible{outline:2px solid var(--thf-orange);outline-offset:2px}
.thf__aviso{margin:0;font-size:12px;line-height:1.5;color:var(--thf-muted);border-top:1px solid var(--thf-rule);padding-top:12px}

/* ---- Blindaje contra el tema -------------------------------------------
   Hello Elementor pinta enlaces y botones de #c36 (magenta) y sus reglas
   button:hover / a:hover (0,1,1) le ganan a una clase sola (0,1,0). Estas
   van con dos clases y cubren todos los estados, para que ningún botón de
   la herramienta salga rosa. */
.thf .thf__btn,.thf .thf__btn:visited{text-decoration:none;font-family:var(--thf-sans);border-radius:3px;line-height:1.2}
.thf .thf__btn--pri,.thf .thf__btn--pri:visited{background:var(--thf-orange);border-color:var(--thf-orange);color:#FFFFFF}
.thf .thf__btn--pri:hover,.thf .thf__btn--pri:focus,.thf .thf__btn--pri:active{background:#E65F00;border-color:#E65F00;color:#FFFFFF}
.thf .thf__btn--sec,.thf .thf__btn--sec:visited{background:var(--thf-white);border-color:var(--thf-ink);color:var(--thf-ink)}
.thf .thf__btn--sec:hover:not(:disabled),.thf .thf__btn--sec:focus:not(:disabled),.thf .thf__btn--sec:active:not(:disabled){background:var(--thf-ink);border-color:var(--thf-ink);color:#FFFFFF}
.thf .thf__btn--sec:disabled,.thf .thf__btn--sec:disabled:hover{background:var(--thf-white);color:var(--thf-ink);opacity:.45}
.thf .thf__noche,.thf .thf__noche:hover,.thf .thf__noche:focus,.thf .thf__noche:active{background:rgba(17,17,17,.78);border-color:rgba(255,255,255,.35);color:#FFFFFF;font-family:var(--thf-sans);border-radius:3px}
.thf .thf__noche[aria-pressed="true"],.thf .thf__noche[aria-pressed="true"]:hover,.thf .thf__noche[aria-pressed="true"]:focus{background:var(--thf-orange);border-color:var(--thf-orange);color:#FFFFFF}
.thf .thf__fachada,.thf .thf__fachada:hover,.thf .thf__fachada:focus,.thf .thf__fachada:active{background:none;color:inherit;padding:0;border-radius:0;box-shadow:none}
.thf .thf__subir,.thf .thf__subir:hover{color:var(--thf-ink)}

@media (prefers-reduced-motion:reduce){.thf *{transition:none!important}}