/* ============================================================
   WOLF STUDIO — estudio de video con IA de la manada
   Reusa los tokens de styles.css (--gold, --green, --panel…)
   ============================================================ */
.ws-wrap{max-width:1180px;margin:0 auto;padding:24px 20px 80px}
.ws-hero{margin:8px 0 22px}
.ws-hero .os-kick{display:inline-flex;align-items:center;gap:8px}
.ws-hero h1{font-family:'Oswald',sans-serif;font-size:clamp(30px,5vw,46px);line-height:1.05;margin:6px 0 8px;letter-spacing:.5px}
.ws-hero h1 .accent{background:var(--grad-gold);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 0 18px rgba(232,183,58,.35))}
.ws-hero .os-sub{max-width:720px}

/* Barra de comando IA (editar todo por prompt) */
.ws-cmd{display:flex;align-items:center;gap:10px;margin:0 0 20px;padding:10px 14px;border-radius:14px;
  background:linear-gradient(135deg,rgba(232,183,58,.12),rgba(16,21,18,.92));border:1px solid var(--gold-deep);box-shadow:var(--shadow)}
.ws-cmd-ic{font-size:20px}
.ws-cmd input{flex:1;background:var(--black-2);border:1px solid var(--line);border-radius:10px;color:var(--text);
  font-family:inherit;font-size:14px;padding:11px 14px}
.ws-cmd input:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,183,58,.12)}
.ws-cmd .btn{white-space:nowrap}
@media(max-width:600px){.ws-cmd{flex-wrap:wrap}.ws-cmd input{order:2;width:100%}}

/* Layout principal */
.ws-grid{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
@media(max-width:900px){.ws-grid{grid-template-columns:1fr}}

/* Rail de capas */
.ws-rail{display:flex;flex-direction:column;gap:8px;position:sticky;top:16px}
@media(max-width:900px){.ws-rail{position:static;flex-direction:row;overflow-x:auto;padding-bottom:6px}}
.ws-tab{display:flex;align-items:flex-start;gap:11px;text-align:left;cursor:pointer;
  background:linear-gradient(160deg,rgba(26,34,29,.7),rgba(16,21,18,.85));border:1px solid var(--line);
  border-radius:14px;padding:13px 14px;color:var(--text);transition:.18s;min-width:230px}
.ws-tab:hover{border-color:var(--gold-deep);transform:translateY(-2px)}
.ws-tab.on{border-color:var(--gold);background:linear-gradient(160deg,rgba(232,183,58,.16),rgba(16,21,18,.9));box-shadow:0 10px 28px rgba(0,0,0,.4)}
.ws-tab-ic{font-size:22px;line-height:1.2;flex-shrink:0}
.ws-tab-tx{display:flex;flex-direction:column;gap:2px}
.ws-tab-tx b{font-size:14.5px;font-weight:700}
.ws-tab-tx i{font-size:11.5px;color:var(--text-faint);font-style:normal;line-height:1.35}
.ws-tab.on .ws-tab-tx b{color:var(--gold-bright)}

/* Panel del módulo */
.ws-panel{background:linear-gradient(160deg,rgba(20,26,22,.8),rgba(10,13,11,.9));border:1px solid var(--line);
  border-radius:18px;padding:22px;box-shadow:var(--shadow)}
.ws-head{display:flex;align-items:center;gap:14px;margin-bottom:18px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.ws-head-ic{font-size:34px;width:58px;height:58px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(232,183,58,.18),rgba(16,21,18,.9));border:1px solid var(--gold-deep);border-radius:14px}
.ws-head h2{font-family:'Oswald',sans-serif;font-size:24px;letter-spacing:.4px}
.ws-head p{color:var(--text-dim);font-size:13.5px}

.ws-lab{display:block;font-size:11.5px;letter-spacing:1.2px;text-transform:uppercase;color:var(--gold-deep);font-weight:700;margin:0 0 7px}
.ws-lab i{color:var(--text-faint);font-style:normal;letter-spacing:0;text-transform:none;font-weight:400}

/* Selector de proveedor */
.ws-provs{margin-bottom:18px}
.ws-prov-row{display:flex;flex-wrap:wrap;gap:9px}
.ws-prov{display:inline-flex;align-items:center;gap:8px;cursor:pointer;background:var(--black-2);border:1px solid var(--line);
  border-radius:11px;padding:9px 13px;color:var(--text);transition:.16s}
.ws-prov:hover{border-color:var(--gold-deep)}
.ws-prov.on{border-color:var(--gold);background:linear-gradient(135deg,rgba(232,183,58,.16),rgba(232,183,58,.05))}
.ws-prov b{font-size:13.5px}
.ws-prov-tag{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;padding:2px 7px;border-radius:20px;font-weight:700}
.ws-prov-tag.win{background:rgba(232,183,58,.18);color:var(--gold-bright)}
.ws-prov-tag.eco{background:rgba(31,122,61,.2);color:var(--green-bright)}
.ws-prov-tag.pro{background:var(--grad-gold);color:#1a1407;box-shadow:0 0 12px rgba(232,183,58,.4)}
.ws-prov-note{margin-top:8px;color:var(--text-faint);font-size:12.5px}

/* Formulario */
.ws-form{display:flex;flex-direction:column;gap:15px}
.ws-field{display:flex;flex-direction:column}
.ws-field input,.ws-field select,.ws-field textarea{background:var(--black-2);border:1px solid var(--line);border-radius:11px;
  color:var(--text);font-family:inherit;font-size:14.5px;padding:11px 13px;transition:.16s}
.ws-field textarea{resize:vertical;line-height:1.55}
.ws-field input:focus,.ws-field select:focus,.ws-field textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,183,58,.12)}
.ws-go{align-self:flex-start;margin-top:4px;font-size:15px;padding:13px 26px}

/* Guionista IA */
.ws-ai-btn{align-self:flex-start;margin:-2px 0 7px;background:rgba(232,183,58,.12);border:1px solid var(--gold-deep);
  color:var(--gold-bright);font-family:inherit;font-size:12px;padding:5px 11px;border-radius:8px;cursor:pointer;transition:.15s}
.ws-ai-btn:hover{background:rgba(232,183,58,.26)}
.ws-gi-in{width:100%;background:var(--black-2);border:1px solid var(--line);border-radius:11px;color:var(--text);
  font-family:inherit;font-size:14px;padding:11px 13px;resize:vertical}
.ws-gi-in:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(232,183,58,.12)}
.ws-gi-alt{background:transparent;border:1px solid var(--line);color:var(--text-dim);font-family:inherit;font-size:13px;
  padding:9px 14px;border-radius:10px;cursor:pointer}
.ws-gi-alt:hover{border-color:var(--gold);color:var(--gold-bright)}
.ws-gi-out{margin-top:6px}
.ws-gi-load{color:var(--text-faint);font-size:13px}
.ws-gi-txt{background:var(--black-2);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:11px;
  padding:13px;color:var(--text);font-size:14px;line-height:1.6;margin-bottom:10px;white-space:pre-wrap}
.ws-mode{font-size:12.5px;color:var(--text-faint);margin-top:2px}
.ws-mode .ok{color:var(--green-bright)}.ws-mode .demo{color:var(--gold)}

/* Producción (cola + galería) */
.ws-prod{margin-top:30px}
.ws-prod-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ws-prod-head h3{font-family:'Oswald',sans-serif;font-size:19px;letter-spacing:.5px}
.ws-empty{color:var(--text-faint);font-size:14px;padding:26px;text-align:center;border:1px dashed var(--line);border-radius:14px}
.ws-jobs{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:13px}

.ws-job{display:flex;align-items:center;gap:13px;background:linear-gradient(160deg,rgba(20,26,22,.7),rgba(10,13,11,.85));
  border:1px solid var(--line);border-radius:14px;padding:11px;transition:.16s}
.ws-job.done{border-color:rgba(52,199,89,.3)}
.ws-job.failed{border-color:rgba(192,57,43,.4)}
.ws-thumb{position:relative;width:88px;height:60px;border-radius:9px;flex-shrink:0;overflow:hidden;border:1px solid var(--line);
  background:#0a0d0b center/cover no-repeat;display:flex;align-items:center;justify-content:center;cursor:pointer}
.ws-thumb.wait{cursor:default;background:var(--black-2)}
.ws-thumb-ic{font-size:20px;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.6)}
.ws-bar{width:72%;height:6px;background:rgba(255,255,255,.08);border-radius:6px;overflow:hidden}
.ws-bar i{display:block;height:100%;background:var(--grad-gold);transition:width .5s}
.ws-job-meta{flex:1;min-width:0}
.ws-job-top{font-size:13.5px;display:flex;align-items:center;gap:6px}
.ws-job-top b{font-weight:700}
.ws-job-lab{font-size:12.5px;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ws-job-sub{font-size:11px;color:var(--text-faint);margin-top:1px}
.ws-st{font-size:10px;letter-spacing:.4px;text-transform:uppercase;padding:2px 7px;border-radius:20px;font-weight:700}
.ws-st.done{background:rgba(52,199,89,.18);color:var(--green-bright)}
.ws-st.proc{background:rgba(232,183,58,.18);color:var(--gold-bright)}
.ws-st.queue{background:rgba(255,255,255,.08);color:var(--text-dim)}
.ws-st.fail{background:rgba(192,57,43,.2);color:#ff8a7a}
.ws-job-act{display:flex;flex-direction:column;gap:6px;align-items:flex-end}
.ws-play{background:rgba(232,183,58,.14);border:1px solid var(--gold-deep);color:var(--gold-bright);font-family:inherit;
  font-size:12px;padding:6px 11px;border-radius:8px;cursor:pointer;transition:.15s}
.ws-play:hover{background:rgba(232,183,58,.25)}
.ws-del{background:transparent;border:0;color:var(--text-faint);font-size:13px;cursor:pointer;padding:2px 6px}
.ws-del:hover{color:var(--danger)}

/* Biblioteca de la manada */
.ws-side h3{font-family:'Oswald',sans-serif;font-size:16px;letter-spacing:.5px;margin:24px 0 12px}
.ws-roster{display:flex;flex-direction:column;gap:9px}
.ws-rost{display:flex;align-items:center;gap:11px;background:var(--black-2);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.ws-rost.ready{border-color:rgba(232,183,58,.45)}
.ws-rost-av{width:38px;height:38px;border-radius:50%;background:var(--grad-gold);color:#1a1407;display:flex;align-items:center;
  justify-content:center;font-weight:800;font-size:17px;flex-shrink:0;background-position:center;overflow:hidden}
.ws-clone-btn{background:rgba(232,183,58,.14);border:1px solid var(--gold-deep);color:var(--gold-bright);font-family:inherit;
  font-size:11.5px;padding:7px 11px;border-radius:9px;cursor:pointer;white-space:nowrap;transition:.15s}
.ws-clone-btn:hover{background:rgba(232,183,58,.26)}

/* Modal de clon */
.ws-clone-sec{margin:16px 0;padding:14px;border:1px solid var(--line);border-radius:13px;background:var(--black-2)}
.ws-clone-h{font-family:'Oswald',sans-serif;font-size:15px;letter-spacing:.4px;color:var(--gold-bright);margin-bottom:8px}
.ws-clone-h span{font-family:'Inter',sans-serif;font-size:11.5px;color:var(--text-faint);letter-spacing:0;font-weight:400}
.ws-clone-tabs{display:flex;gap:8px;margin-bottom:10px}
.ws-ct{background:var(--panel);border:1px solid var(--line);color:var(--text-dim);font-family:inherit;font-size:12.5px;
  padding:8px 13px;border-radius:9px;cursor:pointer;transition:.15s}
.ws-ct.on{border-color:var(--gold);color:var(--gold-bright);background:rgba(232,183,58,.1)}
.ws-hint{font-size:12px;color:var(--text-faint);margin-bottom:8px;line-height:1.45}
.ws-file{display:block;width:100%;font-size:12.5px;color:var(--text-dim);margin-bottom:8px}
.ws-file::file-selector-button{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:8px;
  padding:7px 12px;margin-right:10px;cursor:pointer;font-family:inherit}
.ws-rec{background:rgba(192,57,43,.12);border:1px solid rgba(192,57,43,.5);color:#ff9a8c;font-family:inherit;font-size:12.5px;
  padding:8px 13px;border-radius:9px;cursor:pointer;transition:.15s}
.ws-rec:hover{background:rgba(192,57,43,.22)}
.ws-rec.rec{animation:ctkPulse 1.2s ease-in-out infinite}
.ws-prev{margin-top:10px}
.ws-prev img,.ws-prev video{display:block}
.ws-rost-tx{flex:1;min-width:0}
.ws-rost-tx b{font-size:13.5px;display:block}
.ws-rost-tx i{font-size:11.5px;color:var(--text-faint);font-style:normal}
.ws-rost-chips{display:flex;flex-direction:column;gap:4px;align-items:flex-end}
.ws-chip{font-size:10px;padding:2px 8px;border-radius:20px;background:rgba(255,255,255,.06);color:var(--text-faint)}
.ws-chip.on{background:rgba(52,199,89,.16);color:var(--green-bright)}
.ws-add{margin-top:4px;background:transparent;border:1px dashed var(--line);color:var(--text-dim);font-family:inherit;
  font-size:12.5px;padding:10px;border-radius:11px;cursor:pointer;transition:.15s}
.ws-add:hover{border-color:var(--gold);color:var(--gold-bright)}

/* Modal visor */
.ws-modal{position:fixed;inset:0;z-index:300;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(4,6,5,.82);backdrop-filter:blur(6px)}
.ws-modal.open{display:flex}
.ws-modal-card{background:linear-gradient(160deg,rgba(20,26,22,.96),rgba(8,11,9,.98));border:1px solid var(--gold-deep);
  border-radius:18px;padding:22px;max-width:640px;width:100%;box-shadow:0 30px 80px rgba(0,0,0,.7);position:relative}
.ws-modal-close{position:absolute;top:12px;right:14px;background:transparent;border:0;color:var(--text-faint);font-size:22px;cursor:pointer}
.ws-modal-close:hover{color:var(--gold)}
.ws-view-video{aspect-ratio:16/9;border-radius:12px;background:#0a0d0b center/cover no-repeat;display:flex;align-items:center;justify-content:center;border:1px solid var(--line)}
.ws-view-play{font-size:48px;color:rgba(255,255,255,.85)}
.ws-view-note{margin:12px 0;color:var(--text-dim);font-size:13px}
.ws-view-audio{text-align:center;padding:14px 0}
.ws-wave{font-size:54px;margin-bottom:8px}
.ws-script{margin-top:14px;background:var(--black-2);border:1px solid var(--line);border-radius:11px;padding:13px;
  color:var(--text-dim);font-size:13.5px;line-height:1.6;text-align:left;max-height:220px;overflow:auto;white-space:pre-wrap}
.ws-view-live{text-align:center;padding:18px 0}
.ws-live-dot{width:14px;height:14px;border-radius:50%;background:var(--green-bright);margin:0 auto 12px;box-shadow:0 0 14px var(--green-bright);animation:ctkPulse 1.6s ease-in-out infinite}

/* Toast */
.ws-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);z-index:320;
  background:linear-gradient(135deg,rgba(20,26,22,.98),rgba(8,11,9,.98));border:1px solid var(--gold-deep);
  color:var(--text);padding:12px 20px;border-radius:30px;font-size:13.5px;box-shadow:0 16px 40px rgba(0,0,0,.5);
  opacity:0;pointer-events:none;transition:.28s}
.ws-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@keyframes ctkPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.3)}}
@media(prefers-reduced-motion:reduce){.ws-live-dot,.ws-toast{animation:none;transition:none}}