:root{
  /* Paleta base */
  --bg:#0b0b0d; --fg:#e9e9ef;
  --mut:#a4a4b0; /* legacy */
  --muted:#a6adbb; /* usado en pistas */
  --card:#15161d; --bd:#1f1f24; --btn:#1a1a20;

  /* Acentos UI */
  --border:#1f2330;
  --pill-bg:#1b1f2a;
  --pill-bg-2:#0f1320;
  --pill-border:#2a3143;
  --pill-hover:#262f44;
  --accent-1:#8B5CF6; /* violeta */
  --accent-2:#06B6D4; /* cian */
  --shadow: 0 8px 24px rgba(0,0,0,.35);
}

/* ===== Reset mínimo ===== */
*{ box-sizing:border-box; }
html, body{ height:100%; margin:0; }

/* ===== Base ===== */
body{
  display:flex; flex-direction:column; min-height:100vh;
  background: radial-gradient(circle at 25% 25%, #15161b 0%, #0b0b0d 70%);
  color:var(--fg);
  font-family:system-ui, Segoe UI, Inter, Roboto, Arial, sans-serif;
}

/* ===== Header / Footer ===== */
header, footer, section.controls{
  background: rgba(15,15,18,0.7);
  backdrop-filter: blur(6px);
}
header{
  position:sticky; top:0; z-index:20; padding:10px 14px;
  border-bottom:1px solid var(--bd);
}
header h1{ margin:0; font-size:16px; }
header h1 small{ font-size:.8em; font-weight:400; color:var(--mut); }
footer{ padding:10px 14px; border-top:1px solid var(--bd); }

/* ===== Barra superior ===== */
.bar{ display:flex; gap:8px; flex-wrap:wrap; margin-top:8px; }
.pill{
  display:inline-flex; align-items:center; justify-content:center;
  background: linear-gradient(180deg, var(--pill-bg), var(--pill-bg-2));
  border:1px solid var(--pill-border);
  border-radius:10px; padding:8px 14px; cursor:pointer; color:#e9edf8;
  min-height:36px; white-space:nowrap;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}
.pill:hover{ background: var(--pill-hover); transform: translateY(-1px); }
.pill:active{ transform: translateY(0); }
.pill:disabled{ opacity:.55; filter: grayscale(.2); cursor:not-allowed; }
input[type=file]{ display:none; }
#status{ font-size:13px; color:#8aa3ff; font-weight:500; text-shadow:0 0 4px rgba(58,123,255,.4); }

/* Acentos sutiles en botones de transform */
#pngModeTranslate, #videoModeTranslate{ box-shadow: 0 0 0 1px rgba(34,197,94,.35) inset; }
#pngModeRotate,    #videoModeRotate   { box-shadow: 0 0 0 1px rgba(250,204,21,.35) inset; }
#pngModeScale,     #videoModeScale    { box-shadow: 0 0 0 1px rgba(59,130,246,.35) inset; }

/* ===== Layout principal (stage + sidebar) ===== */
#layout{
  display:grid; gap:16px; padding:12px 14px; align-items:start;
  grid-template-columns: minmax(520px, 1fr) 420px;
}
@media (max-width: 1100px){
  #layout{ grid-template-columns: 1fr; }
  #sidebar{ max-height:none; overflow:visible; }
  #stage{ height:auto; min-height:480px; }
}

/* ===== Sidebar ===== */
#sidebar{
  max-height: calc(100vh - 110px);
  overflow:auto; padding-bottom:8px;
}

/* ===== Tarjetas / subtítulos / separadores ===== */
.card{
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00));
  border: 1px solid var(--border);
  border-radius: 14px;
  box-shadow: var(--shadow);
  padding: 12px;
  margin-bottom: 14px;
  overflow: hidden;
}
.subhead{
  position: relative; color:#e8eaf3; margin:0 0 .7rem;
}
.subhead::after{
  content:""; position:absolute; left:0; bottom:-6px;
  width:64px; height:3px; border-radius:3px;
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  opacity:.8;
}
.sep{
  border:0; height:1px; margin:18px 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.1), transparent);
}
.hint, .muted{ color: var(--muted); }

/* ===== Panel de controles superiores ===== */
section.controls{
  padding:10px 14px;
  display:grid; gap:10px;
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
  align-items:end; border-bottom:1px solid var(--bd);
}
section.controls > div{
  background:#111116; border:1px solid var(--bd);
  border-radius:12px; padding:10px;
}
label{ font-size:12px; color:var(--mut); }
select, input[type=text], input[type=number], input[type=color]{
  width:100%; background:#13131a; color:var(--fg);
  border:1px solid var(--bd); border-radius:8px; padding:6px 8px; margin-top:6px;
}

/* ===== STAGE (WebGL + overlays) ===== */
#stage{
  position:relative; width:100%;
  flex:1; height: calc(100vh - 140px); min-height:560px; margin:0 auto;
  background:
    radial-gradient(1200px 600px at 20% 10%, rgba(58,123,255,.08), transparent 60%),
    radial-gradient(800px 400px at 80% 85%, rgba(0,255,170,.06), transparent 60%),
    radial-gradient(circle at 50% 50%, #0e0f13 0%, #0b0b0d 70%);
  border-radius:12px; box-shadow:0 0 40px rgba(0,0,0,.6) inset;
}
#stage::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none; border-radius:12px;
  background-image: radial-gradient(rgba(255,255,255,.06) 1px, transparent 1px);
  background-size:22px 22px; opacity:.15;
}
#stage::after{
  content: attr(data-placeholder);
  white-space:pre-wrap;
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  padding:14px 16px; background:rgba(13,13,18,.55);
  border:1px dashed #2a2a33; border-radius:12px;
  color:#cfd3e0; font-size:14px; line-height:1.35; text-align:center; letter-spacing:.2px;
  z-index:4; pointer-events:none;
}
#stage.has-visual::after{ display:none; }
#stage canvas{ position:absolute; inset:0; display:block; z-index:1; }
#bgImage{ position:absolute; inset:0; z-index:0; pointer-events:none; object-fit:cover; display:none; }
#textCanvas{
  position:absolute; inset:0; z-index:5; pointer-events:none; touch-action:none; cursor:default;
}
#textCanvas.editing{ pointer-events:auto; cursor:grab; }
#textCanvas.editing:active{ cursor:grabbing; }
#aspectMask{ position:absolute; inset:0; pointer-events:none; z-index:6; display:none; }
#aspectMask .m-left, #aspectMask .m-right, #aspectMask .m-top, #aspectMask .m-bottom{
  position:absolute; background:rgba(0,0,0,.35);
}
#aspectMask .m-frame{
  position:absolute; border:2px solid rgba(255,255,255,.85);
  box-shadow:0 0 0 1px rgba(0,0,0,.25) inset;
}

/* ===== Panel de cámara simple ===== */
#cam-simple-panel{
  margin:12px 0 16px; padding:12px;
  border:1px solid #2a2a33; border-radius:10px;
  background:#111216; color:#e8e8ef;
}
#cam-simple-panel h3{ margin:0 0 8px; font-size:1.05rem; font-weight:600; color:#f0f0f5; }
#cam-simple-panel .row{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:center; margin:8px 0;
}
#cam-simple-panel label{
  display:grid; grid-template-columns:1fr 130px; gap:8px; align-items:center; color:#cfd3e0;
}
#cam-simple-panel input, #cam-simple-panel select{
  padding:6px 8px; background:#0e0f13; border:1px solid #2a2a33; border-radius:8px; color:#e8e8ef;
}
#cam-simple-panel .hint{ margin:6px 0 0; font-size:.88rem; color:#aab0c0; }
@media (max-width:800px){
  #cam-simple-panel .row{ grid-template-columns:1fr; }
  #cam-simple-panel label{ grid-template-columns:1fr 140px; }
}

/* ===== Panel de TEXTO ===== */
#textPanel .subhead{ margin-bottom:10px; }
#textPanel > label{ display:block; margin:8px 0; }
#textPanel > label > span{ display:block; margin-bottom:6px; opacity:.9; }
#textPanel input[type="text"],
#textPanel input[type="number"],
#textPanel input[type="color"],
#textPanel select,
#textPanel textarea{
  width:100%; max-width:100%; background:#15151b;
  color:#e8e8ee; border:1px solid #2a2a33; border-radius:8px; padding:8px 10px; outline:none;
}
#textPanel textarea{ resize:vertical; min-height:60px; }
#textPanel input[type="color"]{ padding:0; height:34px; }
#textPanel > label > label{
  display:inline-flex; align-items:center; gap:6px; margin-right:12px; margin-top:4px;
}
.text-toolbar{
  display:flex; gap:.75rem; align-items:center; flex-wrap:wrap; margin-top:8px;
}
#textItemsPanel{ margin-top:8px; }
#textList{
  list-style:none; margin:0; padding:0; max-height:180px; overflow:auto;
  border:1px dashed rgba(255,255,255,.12); border-radius:10px;
}
.text-item{
  display:flex; align-items:center; justify-content:space-between; gap:8px;
  padding:6px 10px; border-bottom:1px dashed rgba(255,255,255,.08);
}
.text-item:last-child{ border-bottom:none; }
.text-item .title{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.95; }
.text-item .actions button{
  background:#1a1a20; color:#fff; border:1px solid #2a2a33; border-radius:6px; padding:4px 8px; cursor:pointer; margin-left:6px;
}
.text-item.active{ outline:2px solid #3a7bff; box-shadow:0 0 0 1px rgba(0,0,0,.3) inset; }
#textPanel textarea::placeholder{ color:#9aa0ad; opacity:.9; }

/* ===== PNG / VIDEO / AUDIO: filas y no-encimado ===== */
#png3dCard .row,
#video3dCard .row,
#audioCard .row,
#textPanel .text-toolbar{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:10px; width:100%; box-sizing:border-box; justify-content:flex-start;
}
#png3dCard .row > *,
#video3dCard .row > *,
#audioCard .row > *,
#textPanel .text-toolbar > *{
  flex:0 0 auto; margin:0; box-sizing:border-box;
}
#png3dCard label.toggle,
#video3dCard label.toggle,
#audioCard label.toggle{ max-width:100%; }

/* Botones transform con margen vertical suave */
#png3dCard .row button,
#video3dCard .row button {
  min-width:88px; margin-top:4px; margin-bottom:4px;
}

/* ===== Botón MP4 ===== */
#btnDownloadMP4{
  background:#333; color:#fff; border:none; border-radius:6px;
  padding:6px 10px; margin-left:8px; font-size:.9em; cursor:pointer;
}
#btnDownloadMP4:disabled{ opacity:.5; cursor:not-allowed; }

/* ===== Range genérico (volumen, etc.) ===== */
input[type=range]{ width:100%; appearance:none; height:4px; background:#24242b; border-radius:4px; }
input[type=range]::-webkit-slider-thumb{
  appearance:none; width:14px; height:14px; border-radius:50%;
  background:#3a7bff; border:1px solid #1e2755;
}

/* ===== Selector de idioma en header ===== */
header #langSel{ width:auto; min-width:140px; display:inline-block; }
header #langLabel{ margin-right:6px; }
@media (max-width:600px){ header #langSel{ min-width:120px; } }

/* ===== Switch .toggle (una sola definición) ===== */
.toggle{
  display:flex; align-items:center; gap:10px;
  padding:6px 10px; border:1px solid var(--pill-border);
  border-radius:10px; background: linear-gradient(180deg, var(--pill-bg), var(--pill-bg-2));
  width:auto;
}
.toggle input[type="checkbox"]{
  appearance:none; -webkit-appearance:none; width:0; height:0; position:absolute; opacity:0; pointer-events:none;
}
.toggle .tgl-track{
  position: relative; width:42px; height:22px; border-radius:999px;
  background:#2a3042; border:1px solid #38405a; flex:none;
  transition: background .2s ease, border-color .2s ease;
}
.toggle .tgl-track::after{
  content:""; position:absolute; top:2px; left:2px; width:18px; height:18px; border-radius:50%;
  background:#e9edf8; box-shadow: 0 1px 2px rgba(0,0,0,.4);
  transition: transform .2s ease;
}
.toggle input[type="checkbox"]:checked + .tgl-track{
  background: linear-gradient(90deg, var(--accent-1), var(--accent-2));
  border-color: transparent;
}
.toggle input[type="checkbox"]:checked + .tgl-track::after{
  transform: translateX(20px);
}
.toggle .tgl-label{ color:#e9edf8; opacity:.9; }
/* === Separación vertical entre controles tipo switch y select === */

/* Espacio entre toggles consecutivos o seguidos de otros inputs */
label.toggle + label.toggle,
label.toggle + select,
select + label.toggle,
label.toggle + .pill,
select + .pill {
  margin-top: 8px;
}

/* Dentro de tarjetas (PNG, Video, formato inicial, etc.) */
#png3dCard label.toggle,
#video3dCard label.toggle,
#audioCard label.toggle,
section.controls label.toggle {
  display: flex;
  margin-top: 8px;
  margin-bottom: 6px;
}

/* En los grupos dentro de .card o section.controls */
section.controls > div > *:not(:last-child) {
  margin-bottom: 10px;
}

/* Pequeño espacio adicional después de selects para respiración visual */
section.controls select {
  margin-bottom: 8px;
}
/* ==== Paleta vibrante (no rompe lo anterior) ==== */
:root{
  --v-primary-from:#7c3aed;  /* violeta */
  --v-primary-to:#06b6d4;    /* cian   */
  --v-green-from:#22c55e; --v-green-to:#10b981;    /* mover */
  --v-amber-from:#f59e0b; --v-amber-to:#f97316;    /* rotar */
  --v-blue-from:#60a5fa;  --v-blue-to:#3b82f6;     /* escalar */
  --v-red-from:#f43f5e;   --v-red-to:#ef4444;      /* borrar / detener */
  --v-grey-from:#2b2e3a;  --v-grey-to:#1d2030;     /* neutro elegante */
}

/* ==== Base .pill más “creadora de contenido” ==== */
.pill{
  position:relative;
  border:0;
  color:white;
  background: linear-gradient(135deg, var(--v-grey-from), var(--v-grey-to));
  box-shadow:
    0 6px 14px rgba(0,0,0,.35),
    inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .08s ease, filter .2s ease, box-shadow .2s ease;
}
.pill:hover{ transform: translateY(-1px); filter: brightness(1.08); }
.pill:active{ transform: translateY(0); filter: brightness(0.98); }
.pill:disabled{ opacity:.55; filter: grayscale(.15) brightness(.9); }

/* Brillo suave al borde (sin exagerar) */
.pill::after{
  content:"";
  position:absolute; inset:-1px; border-radius:inherit;
  pointer-events:none;
  box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 0 20px transparent;
  transition: box-shadow .25s ease;
}
.pill:hover::after{ box-shadow: 0 0 0 1px rgba(255,255,255,.20), 0 0 26px rgba(255,255,255,.08); }

/* “Sheen”/destello diagonal al pasar el mouse */
.pill::before{
  content:"";
  position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: linear-gradient(120deg, transparent 20%, rgba(255,255,255,.16) 40%, transparent 60%);
  transform: translateX(-120%);
  transition: transform .45s ease;
}
.pill:hover::before{ transform: translateX(120%); }

/* ==== Variantes por ID (no hay que tocar HTML) ==== */
/* Acciones globales */
#previewBtn{      background: linear-gradient(135deg, var(--v-primary-from), var(--v-primary-to)); }
#recordBtn{       background: linear-gradient(135deg, var(--v-red-from),     var(--v-red-to)); }
#stopPreviewBtn{  background: linear-gradient(135deg, #fb7185,               #f97316); } /* rosa→naranja */
#bgClearBtn,
#pngClearBtn,
#videoClearBtn,
#audioClearBtn{   background: linear-gradient(135deg, var(--v-red-from), var(--v-red-to)); }

/* Botón MP4 */
#btnDownloadMP4{ 
  background: linear-gradient(135deg, #22d3ee, #a78bfa); 
  color:#0b0b0d; font-weight:700;
}

/* PNG 3D: mover/rotar/escalar con color semántico */
#pngModeTranslate,
#videoModeTranslate{ background: linear-gradient(135deg, var(--v-green-from), var(--v-green-to)); }
#pngModeRotate,
#videoModeRotate{    background: linear-gradient(135deg, var(--v-amber-from), var(--v-amber-to)); }
#pngModeScale,
#videoModeScale{     background: linear-gradient(135deg, var(--v-blue-from),  var(--v-blue-to)); }

/* Labels de subida (son <label class="pill" for="...">) con look “cta” */
label[for="bgInput"],
label[for="pngInput"],
label[for="videoInput"],
label[for="audioInput"],
label[for="glbInput"]{
  background: linear-gradient(135deg, var(--v-primary-from), var(--v-primary-to));
  font-weight:600;
}

/* Switch bonito: realzar ligeramente el contenedor */
.toggle{
  background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02));
  border:1px solid rgba(255,255,255,.10);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.toggle .tgl-track{
  background:#232738; border-color:#374161;
}
.toggle input[type="checkbox"]:checked + .tgl-track{
  background: linear-gradient(90deg, var(--v-primary-from), var(--v-primary-to));
}

/* Deshabilitados mantienen color pero con “gafas de sol” */
#png3dCard .row button:disabled,
#video3dCard .row button:disabled{
  filter: grayscale(.35) brightness(.9);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
/* === Support Prompt (modal) === */
.sp-overlay {
  position: fixed; inset: 0;
  display: none;                /* oculto por defecto */
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(2px);
  z-index: 2147483647;          /* 🔺 gana cualquier stacking-context */
  pointer-events: auto;
}
.sp-overlay[aria-hidden="false"] { display: flex; }


.sp-modal {
  width: min(560px, 92vw);
  background: #121212; color: #f1f1f1;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px; padding: 20px 20px 16px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  position: relative;
}

.sp-title {
  margin: 0 0 8px 0; font-size: 1.25rem; line-height: 1.2;
}
.sp-text { margin: 0 0 16px 0; opacity: 0.95; }

.sp-actions { display: flex; gap: 12px; }
.sp-btn {
  appearance: none; border: 1px solid rgba(255,255,255,0.2);
  background: #1e1e1e; color: #fff; padding: 10px 14px;
  border-radius: 10px; cursor: pointer; font-weight: 600;
}
.sp-btn[disabled] { opacity: 0.6; cursor: not-allowed; }
.sp-btn-primary { border-color: #e3b341; background: #2a2109; }

.sp-close {
  position: absolute; top: 10px; right: 10px;
  border: 0; background: transparent; color: #ccc;
  font-size: 16px; cursor: not-allowed; opacity: 0.6;
}
.sp-close:not([disabled]) { cursor: pointer; opacity: 1; }

.sp-note { display: block; margin-top: 10px; opacity: 0.7; font-size: 12px; }