/* ============================================================
   Quantum Hosting — Editor en vivo (hoja compartida)
   Se inyecta automáticamente en TODO sitio multipágina desde
   routes/pages.js. No depende del CSS del sitio del cliente.
   ============================================================ */

/* ---------- Banner de modo edición ---------- */
.qh-edit-banner{
  position:sticky; top:0; z-index:99990; background:#D8231F; color:#fff; text-align:center;
  padding:8px 12px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:12px;
}
.qh-edit-banner-msg{margin-bottom:8px; opacity:.95;}
.qh-edit-nav{
  display:flex; align-items:center; justify-content:center; gap:5px; flex-wrap:wrap;
  background:rgba(0,0,0,.18); border-radius:100px; padding:5px; max-width:760px; margin:0 auto;
}
.qh-edit-nav-label{font-size:11.5px; font-weight:600; padding:0 8px; opacity:.85;}
.qh-edit-nav a{
  background:rgba(255,255,255,.14); color:#fff; border:none; border-radius:100px; padding:7px 15px;
  font-size:12.5px; font-weight:600; cursor:pointer; text-decoration:none; transition:background .2s ease;
}
.qh-edit-nav a:hover{background:rgba(255,255,255,.28);}
.qh-edit-nav a.active{background:#fff; color:#D8231F;}

/* ---------- Texto editable ---------- */
.qh-editable-text{
  outline:1.5px dashed transparent; outline-offset:4px; border-radius:2px; cursor:text;
  transition:outline-color .15s ease, background .15s ease;
}
.qh-editable-text:hover{outline-color:#E0A800; background:rgba(242,169,0,.08);}
.qh-editable-text:focus{outline:2px solid #D8231F; outline-offset:4px; background:rgba(216,35,31,.06);}

/* ---------- Barra flotante de formato ---------- */
.qh-text-toolbar{
  position:fixed; z-index:99999; display:none; align-items:center; gap:4px;
  background:#1A1A1A; border-radius:8px; padding:6px; box-shadow:0 10px 28px rgba(0,0,0,.35);
  transform:translate(-50%,-100%); margin-top:-10px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
.qh-text-toolbar.qh-open{display:flex;}
.qh-text-toolbar button{
  width:30px; height:30px; border-radius:5px; border:none; background:transparent; color:#fff;
  cursor:pointer; font-size:14px; display:flex; align-items:center; justify-content:center; padding:0;
}
.qh-text-toolbar button:hover{background:rgba(255,255,255,.12);}
.qh-text-toolbar .qh-sep{width:1px; height:20px; background:rgba(255,255,255,.2); margin:0 3px;}
.qh-text-toolbar input[type="color"]{
  width:26px; height:26px; border:none; border-radius:50%; padding:0; cursor:pointer; background:none;
}
.qh-text-toolbar input[type="color"]::-webkit-color-swatch-wrapper{padding:0; border-radius:50%;}
.qh-text-toolbar input[type="color"]::-webkit-color-swatch{border:2px solid rgba(255,255,255,.4); border-radius:50%;}
.qh-palette-panel{
  position:absolute; top:calc(100% + 8px); left:0; display:none; flex-wrap:wrap; gap:6px;
  width:168px; background:#1A1A1A; border-radius:8px; padding:10px; box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.qh-palette-panel.qh-open{display:flex;}
.qh-palette-panel .qh-swatch{width:22px; height:22px; border-radius:50%; border:2px solid rgba(255,255,255,.25); padding:0;}
.qh-palette-panel .qh-swatch:hover{transform:scale(1.15); border-color:#fff;}
.qh-size-panel{
  position:absolute; top:calc(100% + 8px); left:0; display:none; flex-direction:column; gap:2px;
  width:150px; background:#1A1A1A; border-radius:8px; padding:6px; box-shadow:0 10px 28px rgba(0,0,0,.35);
}
.qh-size-panel.qh-open{display:flex;}
.qh-size-panel button{width:100%; justify-content:flex-start; padding:8px 10px; font-weight:400; height:auto;}

/* ---------- Indicador de guardado + deshacer ---------- */
.qh-save-indicator{
  position:fixed; bottom:18px; left:18px; z-index:99998;
  background:#1A1A1A; color:#fff; border-radius:100px; padding:9px 10px 9px 16px;
  display:flex; align-items:center; gap:10px; box-shadow:0 8px 24px rgba(0,0,0,.3);
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:12.5px;
}
.qh-save-indicator button{
  background:rgba(255,255,255,.12); color:#fff; border:none; border-radius:100px;
  padding:6px 12px; font-size:12px; font-weight:600; cursor:pointer; font-family:inherit;
}
.qh-save-indicator button:hover:not(:disabled){background:rgba(255,255,255,.22);}
.qh-save-indicator button:disabled{opacity:.35; cursor:not-allowed;}

/* ---------- Portadas editables (imagen o video) ---------- */
[data-qh-cover]{position:relative;}
[data-qh-cover].qh-has-cover{background-size:cover; background-position:center;}
[data-qh-cover] .qh-cover-video{
  position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
}
[data-qh-cover].qh-has-cover::before{
  content:''; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(0,0,0,.10) 0%, rgba(0,0,0,.25) 55%, rgba(0,0,0,.62) 100%);
}
[data-qh-cover].qh-has-cover > *:not(.qh-cover-video):not(.qh-cover-btn){position:relative; z-index:2;}
.qh-cover-btn{
  display:none; position:absolute; top:16px; right:16px; z-index:5;
  background:rgba(255,255,255,.95); color:#1A1A1A; border:none; border-radius:8px;
  padding:9px 14px; font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
  font-size:12.5px; font-weight:700; cursor:pointer; box-shadow:0 4px 12px rgba(0,0,0,.25);
  align-items:center; gap:6px;
}
.qh-edit-mode .qh-cover-btn{display:inline-flex;}
.qh-cover-btn:hover{background:#fff;}

/* ---------- Mostrar / ocultar secciones ---------- */
.qh-section-toggle{
  display:none; position:absolute; top:14px; right:14px; z-index:20;
  background:#1A1A1A; color:#fff; border:none; border-radius:8px; padding:8px 12px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif; font-size:12px; font-weight:600;
  cursor:pointer; align-items:center; gap:6px; box-shadow:0 6px 16px rgba(0,0,0,.25);
}
.qh-edit-mode .qh-section-toggle{display:inline-flex;}
[data-qh-section]{position:relative;}
.qh-section-hidden-flag{
  display:none; text-align:center; padding:10px; font-family:monospace; font-size:11.5px; color:#666;
  background:repeating-linear-gradient(45deg,rgba(0,0,0,.03),rgba(0,0,0,.03) 10px,transparent 10px,transparent 20px);
}
.qh-edit-mode .qh-section-hidden .qh-section-hidden-flag{display:block;}
.qh-edit-mode .qh-section-hidden > *:not(.qh-section-hidden-flag):not(.qh-section-toggle){opacity:.25; pointer-events:none;}
body:not(.qh-edit-mode) .qh-section-hidden{display:none !important;}

/* ---------- Modal de recorte / zoom ---------- */
.qh-crop-modal{
  position:fixed; inset:0; z-index:100001; background:rgba(10,10,10,.92);
  display:none; align-items:center; justify-content:center; flex-direction:column; padding:24px;
  font-family:system-ui,-apple-system,"Segoe UI",sans-serif;
}
.qh-crop-modal.qh-open{display:flex;}
.qh-crop-title{color:#fff; font-size:13px; margin-bottom:14px; text-align:center;}
.qh-crop-frame{
  width:min(560px,88vw); aspect-ratio:16/9; overflow:hidden; position:relative; border-radius:8px;
  background:#000; touch-action:none; cursor:grab;
}
.qh-crop-frame:active{cursor:grabbing;}
.qh-crop-frame img{position:absolute; max-width:none; user-select:none; pointer-events:none;}
.qh-crop-controls{width:min(560px,88vw); margin-top:18px; display:flex; align-items:center; gap:14px;}
.qh-crop-controls input[type="range"]{flex:1;}
.qh-crop-actions{margin-top:20px; display:flex; gap:12px;}
.qh-crop-actions button{
  padding:11px 24px; border-radius:6px; border:none; cursor:pointer; font-size:13.5px; font-weight:700;
  font-family:inherit;
}
.qh-crop-cancel{background:rgba(255,255,255,.12); color:#fff;}
.qh-crop-confirm{background:#D8231F; color:#fff;}