/* =====================================================================
   f5node.es - estudio de tatuajes
   Solo lo carga tatuajes.html. Depende de las variables de f5node.css.
   ===================================================================== */

.tat-editor{display:grid; grid-template-columns:minmax(0,1fr) 372px; gap:26px; align-items:start; margin-top:8px}

/* ── visor 3D ── */
.tat-visor{
  position:relative; aspect-ratio:4/5; min-height:420px;
  border:1px solid var(--line); background:linear-gradient(168deg,var(--panel) 0%,var(--void-2) 100%);
  overflow:hidden;
}
#visor3d{display:block; width:100%; height:100%; cursor:grab; touch-action:none}
#visor3d:active{cursor:grabbing}
.tat-visor-hud{
  position:absolute; left:16px; right:16px; bottom:13px;
  display:flex; justify-content:space-between; align-items:flex-end; gap:14px;
  pointer-events:none;
}
.tat-visor-hud .k{background:rgba(8,8,12,.72); padding:3px 7px; backdrop-filter:blur(4px)}

/* ── panel de control ── */
.tat-panel{display:flex; flex-direction:column; gap:0; border:1px solid var(--line); background:var(--void-2)}
.tat-grupo{padding:18px 20px; border-bottom:1px solid var(--line-soft)}
.tat-grupo:last-child{border-bottom:0}
.tat-grupo > .k{display:block; margin-bottom:11px}

/* ── origen de la imagen ── */
.tat-url{display:flex; gap:8px}
.tat-url input{
  flex:1; min-width:0; padding:10px 12px; background:var(--void); color:var(--ink);
  border:1px solid var(--line); font-family:var(--mono); font-size:12px; transition:border-color .18s;
}
.tat-url input::placeholder{color:var(--ink-faint)}
.tat-url input:focus{outline:none; border-color:var(--cyan)}
.tat-url button{
  flex:none; padding:0 15px; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line);
  transition:border-color .18s, color .18s, background .18s;
}
.tat-url button:hover:not(:disabled){border-color:var(--red); color:var(--red); background:rgba(var(--red-rgb),.06)}
.tat-url button:disabled{opacity:.45; cursor:default}

.tat-o{display:flex; align-items:center; gap:12px; margin-top:11px}
.tat-o::before,.tat-o::after{content:""; flex:1; height:1px; background:var(--line-soft)}
.tat-o span{font-family:var(--mono); font-size:9.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--ink-faint)}

.tat-archivo{
  display:block; margin-top:11px; padding:13px; text-align:center; cursor:pointer;
  border:1px dashed var(--line); color:var(--ink-dim);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.13em; text-transform:uppercase;
  transition:border-color .18s, color .18s;
}
.tat-archivo:hover{border-color:var(--cyan); color:var(--cyan)}
.tat-archivo input{position:absolute; width:1px; height:1px; opacity:0; pointer-events:none}
body.arrastrando .tat-archivo{border-color:var(--red); color:var(--red)}

.tat-aviso{margin-top:11px; padding:11px 13px; font-size:13px; line-height:1.55; border-left:2px solid var(--line); background:var(--panel); color:var(--ink-dim)}
.tat-aviso.is-error{border-left-color:var(--red)}
.tat-aviso.is-info{border-left-color:var(--cyan)}
.tat-aviso code{font-family:var(--mono); font-size:12px; color:var(--cyan)}
.tat-aviso b{color:var(--ink)}

.tat-preview{display:flex; align-items:center; gap:13px; margin-top:12px; padding:11px; border:1px solid var(--line); background:var(--panel)}
.tat-preview img{
  width:56px; height:56px; flex:none; object-fit:contain; background:
    repeating-conic-gradient(#1b1b22 0% 25%, #14141a 0% 50%) 50%/12px 12px;
}
.tat-preview div{flex:1; min-width:0}
.tat-preview .nom{display:block; font-size:13px; color:var(--ink); word-break:break-word}
.tat-preview .src{display:block; margin-top:3px; font-family:var(--mono); font-size:10.5px; color:var(--ink-faint); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* ── conmutadores y selector ── */
.tat-toggle{display:flex; gap:7px}
.tat-toggle button{
  flex:1; padding:9px; font-family:var(--mono); font-size:10.5px; letter-spacing:.13em;
  text-transform:uppercase; color:var(--ink-dim); border:1px solid var(--line);
  transition:border-color .18s, color .18s, background .18s;
}
.tat-toggle button:hover{border-color:var(--cyan); color:var(--cyan)}
.tat-toggle button[aria-pressed="true"]{background:var(--red); border-color:var(--red); color:#0b0b10}

.tat-select{
  width:100%; padding:10px 12px; background:var(--void); color:var(--ink);
  border:1px solid var(--line); font-family:var(--mono); font-size:12px;
}
.tat-select:focus{outline:none; border-color:var(--cyan)}

/* ── deslizadores ── */
.tat-fila{display:grid; grid-template-columns:58px minmax(0,1fr) 74px; gap:11px; align-items:center; margin-bottom:9px}
.tat-fila:last-child{margin-bottom:0}
.tat-fila > .k{margin:0}
.tat-fila input[type="number"]{
  width:100%; padding:6px 8px; background:var(--void); color:var(--ink);
  border:1px solid var(--line); font-family:var(--mono); font-size:11.5px;
  font-variant-numeric:tabular-nums;
}
.tat-fila input[type="number"]:focus{outline:none; border-color:var(--cyan)}

input[type="range"]{
  -webkit-appearance:none; appearance:none; width:100%; height:2px;
  background:var(--line); cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none; width:13px; height:13px;
  background:var(--red); border:0; cursor:grab;
}
input[type="range"]::-moz-range-thumb{
  width:13px; height:13px; background:var(--red); border:0; border-radius:0; cursor:grab;
}
input[type="range"]:focus-visible{outline:2px solid var(--cyan); outline-offset:4px}

.tat-acciones{display:flex; flex-direction:column; gap:8px; margin-top:12px}
.tat-acciones .cbtn{width:100%; text-align:center}
.cbtn[aria-pressed="false"]{opacity:.7}

/* ── nombre y generar ── */
.tat-input{
  width:100%; padding:10px 12px; background:var(--void); color:var(--ink);
  border:1px solid var(--line); font-family:var(--mono); font-size:12px;
}
.tat-input:focus{outline:none; border-color:var(--cyan)}
.tat-pista{margin:8px 0 0; font-size:12px; color:var(--ink-faint); line-height:1.5}

#btnExportar{width:100%; justify-content:center; margin-top:13px}
#btnExportar:disabled{opacity:.4; cursor:default; background:var(--red)}

.tat-hecho{margin-top:12px; padding:12px 14px; border:1px solid var(--ok); border-left-width:3px; background:rgba(32,201,109,.07); font-size:13px; color:var(--ink-dim)}
.tat-hecho b{color:var(--ok); font-family:var(--mono); font-size:12px}

/* ── los valores ajustados ── */
.tat-valores{display:flex; flex-direction:column; gap:9px}
.tat-valores > div{display:flex; flex-direction:column; gap:3px}
.tat-valores .v{font-size:11.5px; color:var(--ink-dim); word-spacing:.1em}

@media (max-width:1080px){
  .tat-editor{grid-template-columns:1fr; gap:20px}
  .tat-visor{aspect-ratio:1/1; min-height:340px}
}
@media (max-width:760px){
  /* Las dos etiquetas del visor no caben en una linea y se pisan encima del
     modelo. La de la izquierda dice que cuerpo hay cargado, que es la util;
     la pista de manejo sobra en tactil, donde ademas no hay rueda. */
  .tat-visor-hud > .k:last-child{display:none}
  .tat-fila{grid-template-columns:48px minmax(0,1fr) 66px; gap:8px}
  .tat-url{flex-direction:column}
  .tat-url button{padding:11px}
}

/* El cursor avisa de donde se puede agarrar el tatuaje para moverlo */
#visor3d.encima{cursor:grab}
#visor3d.agarrando,#visor3d.agarrando:active{cursor:grabbing}

/* Aviso que ocupa el visor cuando no se puede dibujar nada: sin servidor,
   sin WebGL2 o sin los archivos del cuerpo. Va encima del canvas porque es
   justo lo que el usuario esta mirando y esperando que aparezca. */
.tat-fallo{
  position:absolute; inset:0; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:9px;
  padding:28px; text-align:center;
  background:linear-gradient(170deg,var(--panel),var(--void-2));
}
.tat-fallo b{
  font-family:var(--display); font-weight:800; font-size:19px;
  text-transform:uppercase; color:var(--red);
}
.tat-fallo p{margin:0; max-width:44ch; font-size:13.5px; color:var(--ink-dim); line-height:1.6}
.tat-fallo code{font-family:var(--mono); font-size:12.5px; color:var(--cyan); background:rgba(var(--cyan-rgb),.08); padding:2px 7px}