/* Forja de Texturas — estilos (namespaced bajo .forja-app) */
.forja-app{--bg:#0c0c11; --panel:#15151f; --panel-2:#1d1d2b; --linea:#2c2c3d;
    --tinta:#f4f3ee; --tinta-suave:#9a99ad; --rojo:#e8392b; --amarillo:#ffcb2e;
    --cyan:#37e0ff; --radio:14px; --sombra:0 12px 40px rgba(0,0,0,.55);}
.forja-app *{box-sizing:border-box}
.forja-app{background:
      radial-gradient(1200px 600px at 80% -10%, rgba(232,57,43,.10), transparent 60%),
      radial-gradient(900px 500px at -5% 110%, rgba(55,224,255,.08), transparent 60%),
      var(--bg);
    color:var(--tinta); font-family:'Inter',system-ui,sans-serif; -webkit-font-smoothing:antialiased;}
.forja-app .marco{max-width:1320px;margin:0 auto;padding:22px 20px 60px}
.forja-app header.cap{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:18px}
.forja-app .logo{font-family:'Bangers',cursive;font-size:clamp(34px,5vw,52px);letter-spacing:1.5px;line-height:.9;margin:0;
    background:linear-gradient(180deg,var(--amarillo),var(--rojo));
    -webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 2px 0 rgba(0,0,0,.25);}
.forja-app .sub{color:var(--tinta-suave);font-size:13.5px;max-width:560px;line-height:1.5}
.forja-app .sub b{color:var(--tinta);font-weight:600}
.forja-app .tablero{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:20px;align-items:start}
.forja-app .lado-preview{position:sticky;top:16px;align-self:start;display:flex;flex-direction:column}
.forja-app .lado-controles{display:flex;flex-direction:column;gap:16px;min-width:0}
@media (max-width:920px){
.forja-app .tablero{grid-template-columns:1fr}
.forja-app .lado-preview{position:sticky;top:0;z-index:20;background:linear-gradient(var(--bg) 86%, transparent);padding:8px 0 6px;margin:-8px 0 0}
.forja-app .escena{min-height:0;max-height:46vh}
.forja-app .escena canvas{max-height:46vh;width:auto}
}
.forja-app .escena{position:relative;
    background:conic-gradient(from 0deg, #14141d 0 25%, #181822 0 50%) 0 0/28px 28px;
    border:1px solid var(--linea);border-radius:var(--radio);overflow:hidden;box-shadow:var(--sombra);
    display:flex;align-items:center;justify-content:center;min-height:340px;}
.forja-app .escena canvas{max-width:100%;height:auto;display:block}
.forja-app .barra-lienzo{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;align-items:center}
.forja-app .panel{background:var(--panel);border:1px solid var(--linea);border-radius:var(--radio);box-shadow:var(--sombra)}
.forja-app details.seccion{padding:0}
.forja-app details.seccion > summary{list-style:none;padding:16px;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none;margin:0}
.forja-app details.seccion > summary::-webkit-details-marker{display:none}
.forja-app details.seccion > summary::after{content:"›";margin-left:auto;font-size:18px;line-height:1;transform:rotate(90deg);transition:transform .2s;color:var(--tinta-suave)}
.forja-app details.seccion[open] > summary::after{transform:rotate(-90deg)}
.forja-app details.seccion > summary:focus-visible{outline:2px solid var(--cyan);outline-offset:-2px;border-radius:var(--radio)}
.forja-app .seccion-cuerpo{padding:0 16px 16px}
.forja-app .titulo-bloque{font-family:'Space Mono',monospace;font-size:11px;letter-spacing:2px;text-transform:uppercase;
    color:var(--tinta-suave);margin:0 0 12px;display:flex;align-items:center;gap:8px}
.forja-app .titulo-bloque::before{content:"";width:14px;height:2px;background:var(--rojo)}
.forja-app label.campo{display:block;margin-bottom:14px}
.forja-app label.campo > span{display:block;font-size:12px;color:var(--tinta-suave);margin-bottom:6px}
.forja-app textarea,.forja-app input[type=text]{width:100%;background:var(--panel-2);border:1px solid var(--linea);color:var(--tinta);
    border-radius:10px;padding:10px 12px;font-size:14px;font-family:inherit;resize:vertical}
.forja-app textarea{min-height:64px;line-height:1.25}
.forja-app textarea:focus,.forja-app input:focus,.forja-app select:focus{outline:2px solid var(--cyan);outline-offset:1px;border-color:transparent}
.forja-app select{width:100%;background:var(--panel-2);border:1px solid var(--linea);color:var(--tinta);
    border-radius:10px;padding:9px 12px;font-size:14px;font-family:inherit}
.forja-app .fila{display:flex;gap:10px}
.forja-app .fila > label.campo{flex:1;margin-bottom:14px}
.forja-app input[type=range]{width:100%;accent-color:var(--rojo);margin-top:2px}
.forja-app .val{font-family:'Space Mono',monospace;font-size:11px;color:var(--amarillo)}
.forja-app input[type=color]{width:40px;height:34px;padding:0;border:1px solid var(--linea);border-radius:8px;background:var(--panel-2);cursor:pointer}
.forja-app .buscador{position:relative;margin-bottom:12px}
.forja-app .buscador input{padding-left:34px}
.forja-app .buscador::before{content:"🔍";position:absolute;left:11px;top:50%;transform:translateY(-50%);font-size:13px;opacity:.7}
.forja-app .pestanas{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.forja-app .tab{font-size:11.5px;font-weight:600;padding:6px 11px;border-radius:999px;border:1px solid var(--linea);
    background:var(--panel-2);color:var(--tinta-suave);cursor:pointer;transition:.15s}
.forja-app .tab:hover{color:var(--tinta)}
.forja-app .tab[aria-selected=true]{background:var(--rojo);color:#fff;border-color:var(--rojo)}
.forja-app .tab:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.forja-app .galeria{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-height:420px;overflow:auto;padding-right:4px}
.forja-app .swatch{position:relative;aspect-ratio:1/.72;border-radius:10px;overflow:hidden;cursor:pointer;
    border:2px solid transparent;background:#000;padding:0}
.forja-app .swatch canvas{width:100%;height:100%;display:block}
.forja-app .swatch .et{position:absolute;left:0;right:0;bottom:0;font-size:9.5px;font-weight:600;padding:3px 4px;
    background:linear-gradient(transparent,rgba(0,0,0,.82));text-align:center;text-shadow:0 1px 2px #000;line-height:1.1}
.forja-app .swatch[aria-pressed=true]{border-color:var(--amarillo);box-shadow:0 0 0 2px rgba(255,203,46,.3)}
.forja-app .btn{border:none;border-radius:10px;padding:10px 16px;font-weight:700;font-size:13.5px;cursor:pointer;
    font-family:inherit;display:inline-flex;align-items:center;gap:7px;transition:.15s}
.forja-app .btn-primario{background:var(--rojo);color:#fff}
.forja-app .btn-primario:hover{background:#ff4d3e;transform:translateY(-1px)}
.forja-app .btn-fantasma{background:var(--panel-2);color:var(--tinta);border:1px solid var(--linea)}
.forja-app .btn-fantasma:hover{border-color:var(--cyan)}
.forja-app .btn:focus-visible{outline:2px solid var(--cyan);outline-offset:2px}
.forja-app .switch{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--tinta-suave);cursor:pointer;user-select:none}
.forja-app .switch input{width:0;height:0;position:absolute;opacity:0}
.forja-app .pista{width:38px;height:21px;border-radius:999px;background:var(--linea);position:relative;transition:.2s;flex:0 0 auto}
.forja-app .pista::after{content:"";position:absolute;width:15px;height:15px;border-radius:50%;background:#fff;top:3px;left:3px;transition:.2s}
.forja-app .switch input:checked + .pista{background:var(--rojo)}
.forja-app .switch input:checked + .pista::after{left:20px}
.forja-app .switch input:focus-visible + .pista{outline:2px solid var(--cyan);outline-offset:2px}
.forja-app .nota{font-size:11.5px;color:var(--tinta-suave);line-height:1.5;margin-top:4px}
.forja-app .oculto{display:none}
.forja-app /* panel IA */
  .ia-zona{display:flex;flex-direction:column;gap:10px}
.forja-app .ia-zona textarea{min-height:54px}
.forja-app .ia-fila{display:flex;gap:8px;align-items:flex-end}
.forja-app .ia-fila > *{flex:1}
.forja-app .ia-mini{font-size:11px;color:var(--tinta-suave);margin:0}
.forja-app .ia-mini a{color:var(--cyan);text-decoration:none}
.forja-app .ia-estado{font-size:12px;min-height:16px;color:var(--amarillo);font-family:'Space Mono',monospace}
.forja-app .ia-estado.err{color:var(--rojo)}
.forja-app .ia-spin{display:inline-block;width:12px;height:12px;border:2px solid var(--linea);border-top-color:var(--amarillo);border-radius:50%;animation:giro .7s linear infinite;vertical-align:-2px;margin-right:6px}
@keyframes giro{to{transform:rotate(360deg)}}
.forja-app .ia-hist{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.forja-app .ia-hist button{aspect-ratio:1;border-radius:8px;overflow:hidden;border:2px solid transparent;background:#000;cursor:pointer;padding:0}
.forja-app .ia-hist button[aria-pressed=true]{border-color:var(--amarillo)}
.forja-app .ia-hist img{width:100%;height:100%;object-fit:cover;display:block}
.forja-app .ia-tok-fila{display:flex;gap:6px;align-items:center}
.forja-app .ia-presets{display:flex;flex-wrap:wrap;gap:6px}
.forja-app .ia-chip{font-size:11px;padding:6px 10px;border-radius:999px;border:1px solid var(--linea);background:var(--panel-2);color:var(--tinta);cursor:pointer;transition:.15s}
.forja-app .ia-chip:hover{border-color:var(--amarillo);color:var(--amarillo)}
.forja-app .ia-tok-fila input{flex:1}
.forja-app .ia-mini-btn{font-size:11px;padding:7px 10px;border-radius:8px;border:1px solid var(--linea);background:var(--panel-2);color:var(--tinta);cursor:pointer;white-space:nowrap}
.forja-app .ia-mini-btn:hover{border-color:var(--cyan)}
@media (prefers-reduced-motion:reduce){
.forja-app *{animation:none !important}
}