#trons-publicador,#trons-inspector{box-sizing:border-box;color:#eaf6f2;background:#0a1513f5;border:1px solid #43605b;font:13px/1.45 Arial,sans-serif;box-shadow:0 8px 35px #0008;z-index:10000;text-shadow:none;letter-spacing:normal}
#trons-publicador *,#trons-inspector *{box-sizing:border-box}

/* ---- Barra de publicar (en el celular real, fuera del editor de diseño) ---- */
#trons-publicador{position:fixed;bottom:12px;left:12px;right:12px;display:flex;align-items:center;gap:8px;padding:10px;border-radius:10px;flex-wrap:wrap}
#trons-publicador .tp-grupo,#trons-publicador .tp-fila{display:contents}
#trons-publicador button,#trons-publicador a,#trons-inspector button{font:inherit;color:#eaf6f2;padding:9px 12px;border:1px solid #43605b;border-radius:5px;background:#142923;cursor:pointer;text-decoration:none}
#trons-publicador .tp-publicar{background:#b4e978;color:#132112;border-color:#b4e978;font-weight:700}
#trons-publicador .tp-interruptor[aria-pressed=true]{background:#1d5446;border-color:#3bebd4;color:#fff}
#trons-publicador button:disabled{opacity:.45;cursor:wait}
#trons-publicador p{margin:0;flex-basis:100%;font:12px/1.4 Arial,sans-serif;color:#b9d6cd}
#trons-publicador details{position:relative}#trons-publicador details[open]{display:flex;gap:8px;flex-wrap:wrap}#trons-publicador summary{cursor:pointer;padding:8px}

/* Estado de guardar/publicar: visible, no un texto gris que cambia sin que se note. */
#trons-publicador .tp-trabajando{color:#ffd27a}#trons-publicador .tp-exito{color:#0a100d;background:#b4e978;border-radius:6px;padding:8px 10px;font-weight:600}#trons-publicador .tp-error{color:#fff;background:#b3261e;border-radius:6px;padding:8px 10px}

/* ---- Panel del elemento ---- */
#trons-inspector{position:fixed;top:70px;right:14px;bottom:135px;width:320px;padding:16px;overflow:auto;border-radius:10px}
#trons-inspector[hidden],#trons-inspector [hidden]{display:none!important}
#trons-inspector .tp-titulo{display:flex;align-items:center;justify-content:space-between}#trons-inspector .tp-titulo strong{font-size:17px}
#trons-inspector p{font:12px/1.5 Arial,sans-serif;color:#b9d6cd;margin:10px 0}
#trons-inspector label{display:block;margin:9px 0;font-size:12px;color:#cfe3dc}
#trons-inspector input,#trons-inspector select,#trons-inspector textarea{width:100%;font:14px Arial,sans-serif;color:#ecf7f2;background:#07100e;border:1px solid #43605b;border-radius:4px;padding:7px;margin-top:5px}
#trons-inspector input[type=color]{padding:3px;height:36px}#trons-inspector input[type=range]{padding:0;border:0;background:none;accent-color:#b4e978}
#trons-inspector textarea{resize:vertical}
#trons-inspector .tp-rejilla{display:grid;grid-template-columns:1fr 1fr;gap:0 10px}
#trons-inspector .tp-vacio{display:grid;gap:6px;margin:14px 0;padding:16px;border:1px dashed #43605b;border-radius:8px;text-align:center}
#trons-inspector .tp-vacio b{font-size:15px;color:#b4e978}#trons-inspector .tp-vacio span{color:#b9d6cd;font-size:12.5px;line-height:1.5}
#trons-inspector .tp-elegido{margin:12px 0 4px;padding:9px 10px;background:#12302a;border-radius:6px;color:#b9d6cd}
#trons-inspector .tp-elegido strong{color:#fff;font-weight:600}
#trons-inspector fieldset{margin:14px 0 0;padding:10px 12px 4px;border:1px solid #2c4a43;border-radius:8px}
#trons-inspector legend{padding:0 6px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#3bebd4}

/* Flechas para mover: una cruz, como el mando de un control. */
#trons-inspector .tp-flechas{display:grid;grid-template-columns:repeat(3,48px);grid-template-rows:repeat(3,42px);gap:6px;justify-content:center;margin:6px 0 2px}
#trons-inspector .tp-flechas button{padding:0;font-size:20px;line-height:1;border-radius:8px}
#trons-inspector .tp-flechas button:hover{background:#1d5446;border-color:#3bebd4}
#trons-inspector .tp-arriba{grid-area:1/2}#trons-inspector .tp-izquierda{grid-area:2/1}#trons-inspector .tp-centro{grid-area:2/2;font-size:17px!important;color:#b9d6cd!important}#trons-inspector .tp-derecha{grid-area:2/3}#trons-inspector .tp-abajo{grid-area:3/2}
#trons-inspector .tp-posicion{text-align:center;color:#fff!important;font-weight:600}
#trons-inspector .tp-botones{display:grid;gap:8px;margin-top:14px}
#trons-inspector .tp-botones button{text-align:left}

.trons-elemento-elegido{outline:2px dashed #3bebd4!important;outline-offset:4px!important}.trons-seleccionando [data-trons-nodo]{cursor:crosshair}
html:not(.trons-propietario) .th-editor,html:not(.trons-propietario) #abrir-ajustes,html:not(.trons-propietario) #abrir-ajustes+*,html:not(.trons-propietario) #modo-edicion,html:not(.trons-propietario) #panel,html:not(.trons-propietario) #activar-edicion{display:none!important}

/* ---- Botón «Editar diseño» ----
   En pantallas de computadora la barra y el panel ya no se ponen encima de la
   página: un único botón, arriba a la derecha, abre el editor de diseño. */
#trons-lanzador{display:none}
#trons-lanzador [data-tp-pendiente]{margin-left:6px;color:#b0470d;font-weight:600}
@media(min-width:701px){
 html.trons-sin-anfitrion #trons-publicador,html.trons-sin-anfitrion #trons-inspector{display:none!important}
 html.trons-sin-anfitrion.trons-propietario #trons-lanzador{display:flex}
 html.trons-sin-anfitrion.trons-propietario #trons-lanzador.tp-flotante{position:fixed;right:18px;top:18px;z-index:10000;align-items:center;gap:6px;padding:9px 14px;border-radius:999px;background:#0a1513e8;color:#eaf6f2;border:1px solid #43605b;font:600 13px/1 Arial,sans-serif;box-shadow:0 6px 24px #0007;cursor:pointer;letter-spacing:normal;text-shadow:none}
 html.trons-sin-anfitrion.trons-propietario #trons-lanzador.tp-flotante [data-tp-pendiente]{color:#ffd27a}
 /* El editor antiguo de la portada («Ajustes» y «Editar») queda sustituido por el editor de diseño. */
 html.trons-sin-anfitrion.trons-propietario .herramientas:has(#modo-edicion) #abrir-ajustes,
 html.trons-sin-anfitrion.trons-propietario #modo-edicion{display:none!important}
}
/* Dentro del editor de diseño los ajustes de la portada viven en la columna de la derecha. */
html.trons-con-anfitrion .herramientas:has(#modo-edicion) #abrir-ajustes,
html.trons-con-anfitrion #modo-edicion,
html.trons-con-anfitrion body:has(#modo-edicion) #panel{display:none!important}
@media(max-width:700px){#trons-publicador{gap:5px;padding:8px;left:5px;right:5px;bottom:5px}#trons-publicador button{font-size:12px;padding:8px}#trons-inspector{width:min(320px,calc(100vw - 20px));top:55px;right:10px;bottom:180px}}