/* Stories Studio — estilos compartidos */
* { margin:0; padding:0; box-sizing:border-box }
:root {
  --fondo:#0e0e0e; --panel:#181818; --panel2:#1f1f1f; --borde:#2a2a2a;
  --texto:#e6e6e6; --apagado:#8a8a8a; --lima:#C1FD00; --azul:#0099FF;
  --radio:10px;
}
html,body { height:100% }
body {
  background:var(--fondo); color:var(--texto);
  font:13px/1.5 -apple-system, BlinkMacSystemFont, 'Segoe UI', Inter, sans-serif;
  -webkit-font-smoothing:antialiased;
}
button {
  font:inherit; color:var(--texto); background:var(--panel2);
  border:1px solid var(--borde); border-radius:8px; padding:7px 12px; cursor:pointer;
}
button:hover { background:#262626 }
button.primario { background:var(--lima); color:#111; border-color:var(--lima); font-weight:600 }
button.primario:hover { filter:brightness(1.06) }
button.peligro:hover { border-color:#a33; color:#f88 }
input[type=text], input[type=number], textarea, select {
  font:inherit; color:var(--texto); background:#121212;
  border:1px solid var(--borde); border-radius:7px; padding:6px 8px; width:100%;
}
input[type=color] { border:1px solid var(--borde); border-radius:6px; background:#121212;
  width:34px; height:28px; padding:2px; cursor:pointer }
textarea { resize:vertical; min-height:64px }
input:focus, textarea:focus, select:focus { outline:none; border-color:#3d3d3d }
::-webkit-scrollbar { width:10px; height:10px }
::-webkit-scrollbar-thumb { background:#2e2e2e; border-radius:5px }
::-webkit-scrollbar-track { background:transparent }

/* ---------- dashboard ---------- */
.tablero { max-width:1120px; margin:0 auto; padding:36px 28px }
.tablero header { display:flex; align-items:center; gap:14px; margin-bottom:6px }
.tablero h1 { font-size:22px; letter-spacing:-.02em }
.logo { width:30px; height:30px; border-radius:8px; background:var(--lima);
  display:flex; align-items:center; justify-content:center; color:#111; font-weight:800; font-size:15px }
.tablero .sub { color:var(--apagado); margin-bottom:26px }
.tablero header button { margin-left:auto }
.rejilla { display:grid; grid-template-columns:repeat(auto-fill, minmax(230px, 1fr)); gap:18px }
.tarjeta-p {
  background:var(--panel); border:1px solid var(--borde); border-radius:14px;
  overflow:hidden; cursor:pointer; transition:border-color .15s;
}
.tarjeta-p:hover { border-color:#3b3b3b }
.tarjeta-p .portada {
  height:150px; background:#151515; display:flex; align-items:center; justify-content:center;
  color:#333; font-size:44px; font-weight:800; overflow:hidden;
}
.tarjeta-p .portada img { width:100%; height:100%; object-fit:cover; object-position:top }
.tarjeta-p .datos { padding:12px 14px; display:flex; align-items:center; gap:8px }
.tarjeta-p .nombre { font-weight:600 }
.tarjeta-p .meta { color:var(--apagado); font-size:12px }
.tarjeta-p .acciones { margin-left:auto; display:flex; gap:4px; opacity:0; transition:opacity .15s }
.tarjeta-p:hover .acciones { opacity:1 }
.tarjeta-p .acciones button { padding:3px 8px; font-size:12px }
.vacio { color:var(--apagado); padding:60px 0; text-align:center }

/* ---------- editor ---------- */
.editor { display:grid; grid-template-rows:48px 1fr; grid-template-columns:264px 1fr 304px;
  grid-template-areas:"top top top" "izq lienzo der"; height:100vh; overflow:hidden }
#top { grid-area:top; display:flex; align-items:center; gap:12px; padding:0 14px;
  background:var(--panel); border-bottom:1px solid var(--borde) }
#top .logo { width:24px; height:24px; font-size:12px; border-radius:6px }
#top a { color:var(--apagado); text-decoration:none }
#top a:hover { color:var(--texto) }
#nombreProyecto { font-weight:600; background:none; border:1px solid transparent; width:auto; max-width:260px }
#nombreProyecto:hover, #nombreProyecto:focus { border-color:var(--borde); background:#121212 }
#estadoGuardado { color:var(--apagado); font-size:12px; min-width:80px }
#zoomCtrl { margin-left:auto; display:flex; align-items:center; gap:6px; color:var(--apagado) }
#zoomCtrl button { padding:3px 9px }

#izq { grid-area:izq; background:var(--panel); border-right:1px solid var(--borde);
  display:flex; flex-direction:column; overflow:hidden }
#izq .pestanas { display:flex; border-bottom:1px solid var(--borde) }
#izq .pestanas button { flex:1; border:0; border-radius:0; background:none; padding:10px; color:var(--apagado) }
#izq .pestanas button.activa { color:var(--texto); box-shadow:inset 0 -2px var(--lima) }
#izq .cuerpo { flex:1; overflow-y:auto; padding:10px }
.seccion { color:var(--apagado); font-size:11px; text-transform:uppercase; letter-spacing:.06em;
  margin:14px 4px 6px; display:flex; align-items:center }
.seccion:first-child { margin-top:2px }
.seccion button { margin-left:auto; padding:1px 8px; font-size:13px }
.fila-story { display:flex; align-items:center; gap:8px; padding:7px 8px; border-radius:8px;
  cursor:pointer; border:1px solid transparent }
.fila-story:hover { background:var(--panel2) }
.fila-story.activa { background:var(--panel2); border-color:#3b3b3b }
.fila-story .num { color:var(--apagado); font-size:11px; width:26px; font-weight:600 }
.fila-story .resumen { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:12px }
.fila-story.arrastrando { opacity:.4 }
.fila-capa { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px;
  cursor:pointer; font-size:12px; border:1px solid transparent }
.fila-capa:hover { background:var(--panel2) }
.fila-capa.activa { background:var(--panel2); border-color:#3b3b3b }
.fila-capa .tipo { color:var(--apagado); font-size:10px; width:44px; text-transform:uppercase }
.fila-capa .resumen { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.fila-capa .sube { opacity:0; display:flex; gap:2px }
.fila-capa:hover .sube { opacity:1 }
.fila-capa .sube button { padding:0 5px; font-size:11px; border:0; background:none; color:var(--apagado) }
.fila-capa .sube button:hover { color:var(--texto) }

#rejillaFotos { display:grid; grid-template-columns:repeat(3, 1fr); gap:6px }
#rejillaFotos .foto { position:relative; aspect-ratio:9/16; border-radius:7px; overflow:hidden;
  cursor:pointer; border:1px solid var(--borde) }
#rejillaFotos .foto img { width:100%; height:100%; object-fit:cover }
#rejillaFotos .foto:hover { border-color:#4a4a4a }
#rejillaFotos .foto .x { position:absolute; top:3px; right:3px; background:#000a; border:0;
  border-radius:5px; padding:0 5px; font-size:11px; opacity:0 }
#rejillaFotos .foto:hover .x { opacity:1 }
#zonaFotos { border:1.5px dashed var(--borde); border-radius:10px; padding:14px; text-align:center;
  color:var(--apagado); cursor:pointer; margin-bottom:10px; font-size:12px }
#zonaFotos.activa { border-color:var(--lima); color:var(--lima) }

#lienzo { grid-area:lienzo; overflow:auto; background:#0a0a0a;
  background-image:radial-gradient(#1c1c1c 1px, transparent 1px); background-size:26px 26px }
#fila { display:flex; gap:60px; padding:60px; align-items:flex-start; width:max-content }
.puesto { position:relative }
.puesto .etiqueta { position:absolute; top:-24px; left:0; color:var(--apagado); font-size:12px;
  display:flex; gap:8px; align-items:center }
.puesto.activa .etiqueta { color:var(--lima) }
.marco-escala { position:relative; overflow:hidden; border-radius:6px;
  outline:1px solid var(--borde) }
.puesto.activa .marco-escala { outline:2px solid var(--lima) }
.marco { position:relative; width:1080px; height:1920px; transform-origin:0 0; background:#000 }
.marco iframe { width:1080px; height:1920px; border:0; pointer-events:none; display:block }
.overlay { position:absolute; inset:0; }
.caja-hover, .caja-sel { position:absolute; pointer-events:none; border-radius:3px }
.caja-hover { outline:3px solid #ffffff55 }
.caja-sel { outline:4px solid var(--lima) }

#der { grid-area:der; background:var(--panel); border-left:1px solid var(--borde);
  overflow-y:auto; padding:14px }
#der h3 { font-size:12px; text-transform:uppercase; letter-spacing:.06em; color:var(--apagado);
  margin:16px 0 8px }
#der h3:first-child { margin-top:0 }
.campo { margin-bottom:10px }
.campo label { display:block; color:var(--apagado); font-size:11px; margin-bottom:4px }
.campo .linea { display:flex; gap:6px; align-items:center }
.campo .linea > * { flex:1 }
.campo .linea input[type=color] { flex:0 0 34px }
.campo .linea .mini { flex:0 0 64px }
.swatches { display:flex; gap:6px }
.swatch { width:26px; height:26px; border-radius:7px; cursor:pointer; border:2px solid transparent }
.swatch.activa { border-color:#fff }
.botonera { display:flex; gap:6px; flex-wrap:wrap; margin-top:8px }
.botonera button { flex:1; white-space:nowrap }
.item-edit { display:flex; gap:5px; margin-bottom:6px; align-items:flex-start }
.item-edit select { flex:0 0 74px }
.item-edit textarea { min-height:40px }
.item-edit button { padding:4px 8px }
#selectorFotos { display:grid; grid-template-columns:repeat(4,1fr); gap:5px; margin-top:6px }
#selectorFotos .op { aspect-ratio:9/16; border-radius:6px; overflow:hidden; cursor:pointer;
  border:2px solid transparent }
#selectorFotos .op img { width:100%; height:100%; object-fit:cover }
#selectorFotos .op.activa { border-color:var(--lima) }
#selectorFotos .op.color { display:flex; align-items:center; justify-content:center;
  background:#121212; color:var(--apagado); font-size:11px }
.aviso-exporta { font-size:12px; color:var(--apagado); margin-top:6px; word-break:break-all }
.aviso-exporta a { color:var(--lima) }

/* ---------- configuración ---------- */
.cfg { max-width:920px }
.cfg header a { text-decoration:none }
.cfg h2 { font-size:15px; margin-bottom:6px; letter-spacing:-.01em }
.cfg h3 { font-size:12px; color:var(--apagado); margin:16px 0 6px; font-weight:600 }
.bloque { background:var(--panel); border:1px solid var(--borde); border-radius:14px;
  padding:20px 22px; margin-bottom:18px }
.ayuda { color:var(--apagado); margin-bottom:14px; max-width:70ch }
.cfg code { background:#121212; border:1px solid var(--borde); border-radius:5px;
  padding:1px 5px; font-family:ui-monospace, SFMono-Regular, Menlo, monospace; font-size:12px }
.linea-crear { display:flex; gap:8px; margin-bottom:12px }
.linea-crear input { flex:1 }
.linea-crear button { flex:0 0 auto }
.copiable { position:relative; background:#121212; border:1px solid var(--borde);
  border-radius:9px; padding:12px 90px 12px 13px; margin-bottom:10px; overflow-x:auto }
.copiable code, .copiable pre { background:none; border:0; padding:0; font-size:12px;
  font-family:ui-monospace, SFMono-Regular, Menlo, monospace; white-space:pre; display:block;
  color:var(--texto) }
.copiable button { position:absolute; top:8px; right:8px; padding:4px 10px; font-size:12px }
.aviso-nuevo { background:#1a2410; border:1px solid #38520f; border-radius:10px;
  padding:12px 14px; margin-bottom:14px }
.aviso-nuevo .copiable { margin:10px 0 0; background:#0f0f0f }
.cfg table { width:100%; border-collapse:collapse; font-size:12.5px }
.cfg th { text-align:left; color:var(--apagado); font-weight:600; font-size:11px;
  text-transform:uppercase; letter-spacing:.05em; padding:0 10px 7px 0 }
.cfg td { padding:8px 10px 8px 0; border-top:1px solid var(--borde); vertical-align:middle }
.cfg td:last-child, .cfg th:last-child { padding-right:0 }
.cfg table.api td:first-child { width:44%; white-space:nowrap }
.cfg .meta { color:var(--apagado) }
.cfg .ok { color:var(--lima) }
.cfg .mal { color:#e0704f }
.vacio-mini { color:var(--apagado); padding:6px 0 }
#estado td:first-child { width:210px; color:var(--apagado) }
#secreto .copiable code { color:var(--lima); word-break:break-all; white-space:pre-wrap }

.menu-plantillas { position:fixed; background:var(--panel2); border:1px solid var(--borde);
  border-radius:10px; padding:6px; z-index:50; max-height:320px; overflow-y:auto; width:230px }
.menu-plantillas button { display:block; width:100%; text-align:left; border:0; background:none;
  padding:7px 9px; border-radius:6px }
.menu-plantillas button:hover { background:#2b2b2b }