:root{
  --fondo:#eef0f4;--tinta:#1c2230;--tenue:#5d6678;--acento:#2f6fed;--acento-h:#2359c9;--acento-t:#fff;
  --panel:#fff;--linea:#e1e5ec;--vista:#262a33;--suave:#f1f3f7;--campo:#fff;
  --activo:#e6eeff;--activo-borde:#9db8f5;--activo-tinta:#1646b5;
  --sombra:0 1px 2px rgba(20,30,50,.06),0 4px 16px rgba(20,30,50,.06);
  /* Lo que queda de pantalla debajo de la barra de HIOX; lo mide editor.js. */
  --alto:calc(100dvh - 3rem);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --fondo:#0f1318;--tinta:#e6eaf1;--tenue:#98a2b3;--acento:#4b83f5;--acento-h:#6395f7;
  --panel:#171c23;--linea:#2a313b;--vista:#0b0e12;--suave:#212833;--campo:#10151b;
  --activo:#1c2d4f;--activo-borde:#3b5ea8;--activo-tinta:#bcd0ff;
  --sombra:0 1px 2px rgba(0,0,0,.3),0 4px 16px rgba(0,0,0,.25);
  color-scheme:dark;
}}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--fondo);color:var(--tinta);font:16px/1.55 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif}
button,input,select{font:inherit;color:inherit}
[hidden]{display:none!important}

/* ── Armado ─────────────────────────────────────────────────────────────
   El editor ocupa justo el alto que queda visible: sin scroll para trabajar.
   El anuncio de arriba no va entre la barra y el editor (lo empujaba fuera de
   la pantalla) sino en `.pub-panel`, al pie de la columna de herramientas. */
.editor{
  display:grid;grid-template-columns:21rem 1fr;grid-template-rows:auto 1fr auto;
  grid-template-areas:"herr herr" "panel lienzo" "pub lienzo";
  height:var(--alto);min-height:480px;
  background:var(--panel);border-bottom:1px solid var(--linea)
}
.herr{grid-area:herr;display:flex;align-items:center;gap:.15rem;padding:.4rem .6rem;border-bottom:1px solid var(--linea);background:var(--panel);overflow-x:auto;scrollbar-width:none}
.herr::-webkit-scrollbar{display:none}
.panel{grid-area:panel;border-right:1px solid var(--linea);overflow-y:auto;padding:1.1rem 1.1rem 1.2rem;min-height:0;scrollbar-width:thin}
.lienzo{grid-area:lienzo;position:relative;background:var(--vista);overflow:hidden;min-height:0}
.pub-panel{grid-area:pub;border-right:1px solid var(--linea);border-top:1px solid var(--linea);background:var(--suave);padding:.5rem 0 .6rem;min-height:0}
.pub-abajo{max-width:980px;margin:0 auto}
.pub:empty{display:none}
.pub::before{content:"Publicidad";display:block;text-align:center;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--tenue);margin-bottom:.25rem}
.pub .hx-ad{margin:0 auto!important}
.pub-abajo .hx-ad{margin:1rem auto!important}

/* Pantallas medianas: sólo íconos (el nombre queda en el title), salvo Guardar. */
@media (max-width:1240px) and (min-width:761px){
  .herr button span{display:none}
  .herr button.guardar span{display:inline}
}
@media (max-width:760px){
  .editor{grid-template-columns:1fr;grid-template-rows:auto 1fr auto;grid-template-areas:"herr" "lienzo" "panel";min-height:520px}
  .panel{border-right:0;border-top:1px solid var(--linea);max-height:38vh;max-height:38dvh;padding:.8rem 1rem}
  .pub-panel{display:none}
  /* Dos renglones: en uno no entran las once herramientas y «Guardar» quedaba afuera. */
  .herr{flex-wrap:wrap;overflow:visible;row-gap:.2rem;padding:.3rem .4rem}
  .herr .sep{display:none}
  .herr button span{display:none}
  .herr button.guardar span{display:inline}
  .herr button{padding:.45rem .55rem}
  /* La barra de HIOX en el teléfono ocupaba cuatro renglones: una sola línea que se desliza. */
  body .hx-barra .hx-fila{display:flex;flex-wrap:nowrap;align-items:center;gap:14px;min-height:40px}
  body .hx-barra nav{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;gap:16px;-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent)}
  body .hx-barra nav::-webkit-scrollbar{display:none}
}

/* ── Barra de herramientas ─────────────────────────────────────────────── */
.herr button{display:flex;align-items:center;gap:.4rem;flex:none;background:none;border:1px solid transparent;border-radius:9px;padding:.42rem .62rem;cursor:pointer;font-size:.9rem;white-space:nowrap;color:var(--tinta)}
.herr button:hover:not(:disabled){background:var(--suave)}
.herr button.activo{background:var(--activo);border-color:var(--activo-borde);color:var(--activo-tinta)}
.herr button:disabled{opacity:.35;cursor:default}
.herr svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.herr .sep{width:1px;align-self:stretch;background:var(--linea);margin:.25rem .35rem;flex:none}
.herr .relleno{flex:1 0 .5rem}
.herr .guardar{background:var(--acento);color:var(--acento-t)}
.herr .guardar:hover:not(:disabled){background:var(--acento-h)}
.herr .guardar.activo{background:var(--acento-h);color:#fff;border-color:transparent;box-shadow:0 0 0 3px var(--activo)}

/* ── Vista ─────────────────────────────────────────────────────────────── */
#vista{display:block;width:100%;height:100%;touch-action:none}
.lienzo.arrastrando{outline:3px dashed #7fa6ff;outline-offset:-10px}
.vacio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.3rem;color:#e7eaf0;text-align:center;padding:1.2rem;
  background:radial-gradient(ellipse at center,rgba(255,255,255,.05),transparent 70%)}
.vacio svg{width:64px;height:64px;fill:none;stroke:#7f889a;stroke-width:1.2;stroke-linejoin:round;margin-bottom:.3rem}
.vacio .titulo{font-size:1.25rem;font-weight:600;margin:.1rem 0 .6rem}
.vacio .caminos{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center}
.vacio .claro{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#eef1f6;border-radius:9px;padding:.5rem 1rem;cursor:pointer;font-weight:500}
.vacio .claro:hover{background:rgba(255,255,255,.14)}
.vacio p{margin:.3rem 0;text-align:center}
.vacio .tenue{color:#a2abbb;font-size:.85rem;max-width:26rem;margin-top:.9rem}
.info{position:absolute;left:.6rem;bottom:.6rem;background:rgba(0,0,0,.55);color:#e8ebf1;font-size:.76rem;padding:.2rem .55rem;border-radius:6px;pointer-events:none}
.zoom{position:absolute;right:.6rem;bottom:.6rem;display:flex;background:rgba(18,20,26,.82);border-radius:9px;overflow:hidden;backdrop-filter:blur(4px)}
.zoom button{background:none;border:0;color:#eef1f6;padding:.3rem .65rem;cursor:pointer;min-width:2.2rem;font-size:.88rem}
.zoom button:hover{background:rgba(255,255,255,.12)}
.zoom .fondovista{width:2.2rem;background-clip:content-box;padding:.45rem}
.zoom .fondovista.cuadros{background-image:conic-gradient(#bbb 25%,#fff 0 50%,#bbb 0 75%,#fff 0);background-size:8px 8px}
.zoom .fondovista.blanco{background-color:#fff}
.zoom .fondovista.negro{background-color:#000;box-shadow:inset 0 0 0 1px #666}
.aviso{position:absolute;left:50%;top:.8rem;transform:translateX(-50%);background:rgba(15,17,22,.92);color:#fff;padding:.45rem .9rem;border-radius:9px;font-size:.88rem;max-width:90%;text-align:center;pointer-events:none;box-shadow:0 4px 18px rgba(0,0,0,.35)}
.cursor{position:absolute;left:0;top:0;border-radius:50%;border:1px solid #fff;box-shadow:0 0 0 1px rgba(0,0,0,.7);pointer-events:none;transform:translate(-50%,-50%)}

/* ── Panel ─────────────────────────────────────────────────────────────── */
.panel h2{font-size:1.05rem;margin:0 0 .6rem;letter-spacing:-.01em}
.panel h3{font-size:.8rem;text-transform:uppercase;letter-spacing:.06em;color:var(--tenue);margin:1.2rem 0 .35rem;padding-top:.9rem;border-top:1px solid var(--linea)}
.panel p{margin:.4rem 0;font-size:.92rem;text-align:justify;hyphens:auto}
.tenue{color:var(--tenue);font-size:.86rem}
.panel .tenue{font-size:.83rem}
.fila{display:flex;flex-wrap:wrap;gap:.4rem;margin:.5rem 0}
.panel button:not(.boton),dialog button:not(.boton){background:var(--suave);border:1px solid var(--linea);border-radius:8px;padding:.35rem .65rem;cursor:pointer;font-size:.88rem;color:var(--tinta)}
.panel button:not(.boton):hover,dialog button:not(.boton):hover{border-color:var(--activo-borde)}
.chips button.activo{background:var(--activo)!important;border-color:var(--activo-borde)!important;color:var(--activo-tinta);font-weight:600}
.boton{background:var(--acento);color:var(--acento-t);border:0;border-radius:9px;padding:.52rem 1.05rem;font-weight:600;cursor:pointer}
.boton:hover{background:var(--acento-h)}
.boton:disabled{opacity:.5;cursor:default}
.boton.ancho{width:100%;margin:.4rem 0}
.secundario{background:none!important}
.acciones{display:flex;gap:.5rem;justify-content:flex-end;margin:.9rem 0 .4rem}
.campo{display:block;margin:.8rem 0 .2rem;font-size:.9rem}
.campo b{float:right;font-weight:600;color:var(--tenue);font-variant-numeric:tabular-nums}
.campo input[type=range]{display:block;width:100%;margin-top:.25rem;accent-color:var(--acento)}
.campo input[type=text]{display:block;width:100%;margin-top:.25rem;padding:.42rem .55rem;border:1px solid var(--linea);border-radius:8px;background:var(--campo)}
.en-linea{display:flex;align-items:center;justify-content:space-between;gap:.6rem}
input[type=number]{padding:.32rem .45rem;border:1px solid var(--linea);border-radius:8px;background:var(--campo)}
.en-linea input[type=number]{width:6.5rem}
.en-linea input[type=color]{width:3rem;height:2rem;border:1px solid var(--linea);border-radius:6px;padding:0;background:none}
.deslizador{display:flex;align-items:center;gap:.4rem;margin-top:.25rem}
.deslizador input{flex:1;margin:0!important}
.deslizador button{padding:.15rem .6rem!important}
.check{display:flex;gap:.5rem;align-items:center;margin:.55rem 0;font-size:.9rem;cursor:pointer}
.check input{accent-color:var(--acento);width:1rem;height:1rem}
.medidas{align-items:end;font-size:.85rem}
.medidas label{display:flex;flex-direction:column;gap:.1rem}
.medidas input{width:5.8rem}
.progreso{height:6px;background:var(--suave);border-radius:3px;overflow:hidden;margin:.3rem 0}
.progreso div{height:100%;width:0;background:var(--acento);transition:width .2s}

.etiqueta{margin:1rem 0 .1rem;font-size:.9rem;font-weight:600}
.muestras{display:flex;align-items:center;gap:.5rem;margin:.6rem 0}
.muestra{width:2.4rem;height:2.4rem;border-radius:8px;border:1px solid var(--linea);box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.muestra.vacia{background-image:conic-gradient(#ccc 25%,#fff 0 50%,#ccc 0 75%,#fff 0);background-size:10px 10px}
.muestras .flecha{color:var(--tenue)}
#col-destinos button{display:inline-flex;align-items:center;gap:.35rem}
#col-destinos i{width:.9rem;height:.9rem;border-radius:50%;border:1px solid rgba(128,128,128,.5);display:inline-block}

/* ── Diálogo de imagen nueva ───────────────────────────────────────────── */
dialog{background:var(--panel);color:var(--tinta);border:1px solid var(--linea);border-radius:14px;width:min(31rem,94vw);padding:1.3rem 1.3rem 1rem;box-shadow:0 20px 60px rgba(0,0,0,.35)}
dialog::backdrop{background:rgba(10,14,20,.55);backdrop-filter:blur(2px)}
dialog h2{margin:0 0 .8rem;font-size:1.2rem}
dialog .etiqueta{margin:1rem 0 .1rem;font-size:.9rem;font-weight:600}
#nueva-medidas button{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25;padding:.45rem .7rem}
#nueva-medidas small{font-size:.74rem;color:var(--tenue);font-variant-numeric:tabular-nums}
.color-libre{display:inline-flex;align-items:center;border:1px solid var(--linea);border-radius:8px;padding:.15rem .3rem;background:var(--suave);cursor:pointer}
.color-libre.activo{background:var(--activo);border-color:var(--activo-borde)}
.color-libre input{width:2rem;height:1.6rem;border:0;padding:0;background:none;cursor:pointer}

/* ── Texto de abajo ────────────────────────────────────────────────────── */
main{max-width:46rem;margin:0 auto;padding:2.2rem 1rem 3rem}
main h1{font-size:1.6rem;line-height:1.25;margin:0 0 .8rem;letter-spacing:-.01em}
main h2{font-size:1.2rem;margin:1.8rem 0 .4rem}
main p,main li{text-align:justify;hyphens:auto}
main ol{padding-left:1.3rem}
main li{margin:.4rem 0}
/* AdSense marca los bloques sin anuncio: que no quede el rótulo con un hueco. */
.pub:has(ins[data-ad-status="unfilled"]){display:none}