/* ===========================================================
   PPH · Admin — mismo lenguaje visual que el sitio
   =========================================================== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
:root{
  --bg:#fff; --ink:#111; --muted:#8a8a86; --line:#e6e6e3; --line2:#d8d8d4;
  --ok:#1d7a4d; --danger:#b23838; --accent:#111;
  --mono:"Cousine","Roboto Mono","Courier New",monospace;
  --sans:"Helvetica Neue",Helvetica,Arial,sans-serif;
}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}

/* ---------- Top bar ---------- */
.adm-top{
  position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:24px;
  padding:0 22px;height:58px;background:var(--bg);border-bottom:1px solid var(--line);
}
.adm-brand{font-family:var(--mono);font-weight:700;letter-spacing:4px;font-size:17px}
.adm-brand span{font-weight:400;letter-spacing:2px;font-size:11px;color:var(--muted);margin-left:6px}
.adm-nav{display:flex;gap:20px;margin-left:8px}
.adm-nav a,.adm-out{font-family:var(--mono);font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);padding:4px 0;border-bottom:1px solid transparent}
.adm-nav a:hover{color:var(--ink)}
.adm-nav a.on{color:var(--ink);border-bottom-color:var(--ink)}
.adm-user{margin-left:auto;display:flex;align-items:center;gap:16px;font-family:var(--mono);font-size:12px;color:var(--muted)}
.adm-out{color:var(--danger)}
.adm-out:hover{opacity:.7}

/* ---------- Layout ---------- */
.adm-main{max-width:1080px;margin:0 auto;padding:30px 22px 80px}
.adm-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:0 0 24px;flex-wrap:wrap}
.adm-head h1{font-family:var(--mono);font-weight:700;font-size:18px;letter-spacing:3px;text-transform:uppercase;margin:0}
.adm-sub{color:var(--muted);font-size:13px;margin:4px 0 0}
.adm-actions{display:flex;gap:10px;flex-wrap:wrap}
.adm-section{margin:34px 0 0}
.adm-section h2{font-family:var(--mono);font-size:12px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:8px;margin:0 0 16px}

/* ---------- Botones ---------- */
.btn{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:12px;letter-spacing:1.5px;text-transform:uppercase;
  background:var(--bg);color:var(--ink);border:1px solid var(--ink);padding:9px 16px;cursor:pointer;transition:.15s}
.btn:hover{background:var(--ink);color:#fff}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{opacity:.82}
.btn-ghost{border-color:var(--line2);color:var(--muted)}
.btn-ghost:hover{background:var(--line);color:var(--ink)}
.btn-danger{border-color:var(--danger);color:var(--danger)}
.btn-danger:hover{background:var(--danger);color:#fff}
.btn-sm{padding:6px 11px;font-size:11px}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ---------- Formularios ---------- */
.field{margin:0 0 18px}
.field label{display:block;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 6px}
.field .hint{font-size:12px;color:var(--muted);margin:5px 0 0}
input[type=text],input[type=email],input[type=password],input[type=url],input[type=number],input[type=search],select,textarea{
  width:100%;font-family:var(--sans);font-size:14px;color:var(--ink);background:var(--bg);
  border:1px solid var(--line2);padding:10px 12px;border-radius:0;transition:border-color .15s}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--ink)}
textarea{min-height:120px;resize:vertical;line-height:1.6}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.inline{display:flex;align-items:center;gap:10px}
.switch{display:inline-flex;align-items:center;gap:8px;font-family:var(--mono);font-size:12px;color:var(--muted);cursor:pointer}

/* ---------- Tarjetas de proyecto (grilla BENTO + reordenar) ---------- */
.proj-grid{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-flow:dense;gap:14px}
.proj-card{position:relative;overflow:hidden;border:1px solid var(--line);background:#eee;cursor:grab;user-select:none;min-height:120px;
  transition:box-shadow .2s ease,opacity .3s ease}
.proj-card:hover{box-shadow:0 4px 18px rgba(0,0,0,.14);z-index:1}
.proj-card:active{cursor:grabbing}
/* --- arrastre natural --- */
.pc-ghost{background:#f4f4f2;outline:2px dashed var(--line2);outline-offset:-2px}
.pc-ghost>*{visibility:hidden}                 /* deja solo el hueco de destino */
.pc-chosen{cursor:grabbing;box-shadow:0 6px 18px rgba(0,0,0,.10)}
.pc-fallback{box-shadow:0 22px 46px rgba(0,0,0,.24);opacity:.97;cursor:grabbing;border-color:var(--ink)}
/* --- imagen (llena la tarjeta a cualquier tamaño) --- */
.proj-card .pc-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none;user-select:none;transition:filter .35s ease,opacity .35s ease}
.proj-card .pc-noimg{position:absolute;inset:0;background:#e6e6e3}
.proj-card.is-hidden .pc-img{filter:grayscale(1);opacity:.45}
/* --- badges --- */
.proj-card .pc-code{position:absolute;top:8px;left:8px;z-index:2;font-family:var(--mono);font-weight:700;font-size:12px;letter-spacing:2px;background:rgba(255,255,255,.9);padding:2px 7px}
.proj-card .pc-hidden{position:absolute;top:35px;left:8px;z-index:2;font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;background:var(--danger);color:#fff;padding:2px 6px;opacity:0;transform:translateY(-4px);transition:opacity .25s ease,transform .25s ease;pointer-events:none}
.proj-card.is-hidden .pc-hidden{opacity:1;transform:translateY(0)}

/* botón de forma (bento) */
.pc-shape{position:absolute;top:8px;right:8px;z-index:3;display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.92);border:1px solid var(--line2);padding:4px 8px;cursor:pointer;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:var(--ink);transition:.15s}
.pc-shape:hover{background:#fff;border-color:var(--ink)}
.pcs-ico{display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,1fr);gap:1.5px;width:13px;height:13px}
.pcs-ico i{background:var(--muted);border-radius:1px}
.pc-shape:hover .pcs-ico i{background:var(--ink)}
.pcs-size{font-weight:700}

/* selector de forma 3×3 (popover animado) */
.shape-picker{position:absolute;z-index:60;background:var(--bg);border:1px solid var(--ink);padding:11px;box-shadow:0 14px 34px rgba(0,0,0,.2);opacity:0;visibility:hidden;transform:translateY(-6px) scale(.95);transform-origin:top right;transition:opacity .18s ease,transform .2s cubic-bezier(.2,.8,.2,1),visibility .2s}
.shape-picker.open{opacity:1;visibility:visible;transform:translateY(0) scale(1)}
.sp-grid{display:grid;grid-template-columns:repeat(4,26px);grid-template-rows:repeat(4,26px);gap:4px}
.sp-cell{border:1px solid var(--line2);background:#fff;padding:0;cursor:pointer;border-radius:2px;transition:background .12s ease,border-color .12s ease,transform .1s ease}
.sp-cell:hover{border-color:var(--muted)}
.sp-cell.hot{background:var(--ink);border-color:var(--ink);transform:scale(1.06)}
.sp-label{text-align:center;font-family:var(--mono);font-size:12px;letter-spacing:2px;color:var(--ink);margin-top:10px}
.sp-actions{display:flex;gap:8px;margin-top:12px}
.sp-actions button{flex:1;font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;padding:9px 8px;cursor:pointer;border:1px solid var(--ink);background:var(--bg);color:var(--ink);transition:.15s;border-radius:2px}
.sp-apply{background:var(--ink);color:#fff}
.sp-apply:hover{opacity:.85}
.sp-cancel{border-color:var(--line2);color:var(--muted)}
.sp-cancel:hover{background:var(--line);color:var(--ink)}
.shape-picker.sp-centered{position:fixed;left:50%;top:50%;transform:translate(-50%,-46%) scale(.95);transform-origin:center}
.shape-picker.sp-centered.open{transform:translate(-50%,-50%) scale(1)}

/* overlay inferior: nombre + categoría + acciones, sobre la imagen */
.proj-card .pc-overlay{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:26px 11px 9px;background:linear-gradient(transparent,rgba(0,0,0,.5) 40%,rgba(0,0,0,.82));color:#fff}
.proj-card .pc-name{font-size:13px;line-height:1.25;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.45);max-height:2.5em;overflow:hidden}
.proj-card .pc-cat{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:rgba(255,255,255,.72);margin-top:2px}
.proj-card .pc-actions{display:flex;align-items:center;gap:12px;margin-top:7px}
.proj-card .pc-actions a,.proj-card .pc-actions button{font-family:var(--mono);font-size:10px;letter-spacing:.5px;text-transform:uppercase;color:rgba(255,255,255,.85);background:none;border:0;cursor:pointer;padding:0;white-space:nowrap}
.proj-card .pc-actions a:hover,.proj-card .pc-actions .js-vis:hover{color:#fff}
.proj-card .pc-actions .del{margin-left:auto}
.proj-card .pc-actions .del:hover{color:#ff7a7a}
.drag-hint{font-family:var(--mono);font-size:11px;letter-spacing:1px;color:var(--muted);margin:0 0 16px}

/* ---------- Gestor de imágenes ---------- */
.dropzone{border:2px dashed var(--line2);padding:26px;text-align:center;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:1px;cursor:pointer;transition:.15s}
.dropzone.hover{border-color:var(--ink);color:var(--ink);background:#fafafa}
.img-grid{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}
.img-cell{position:relative;flex:0 0 120px;width:120px;border:1px solid var(--line);aspect-ratio:1/1;overflow:hidden;cursor:grab;background:#f4f4f2}
.img-cell img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.img-cell .noposter{position:absolute;inset:0;background:#222}
.mc-ghost{outline:2px dashed var(--ink);opacity:.5}
.mc-ghost>*{visibility:hidden}
.mc-fallback{box-shadow:0 14px 30px rgba(0,0,0,.25);opacity:.97;cursor:grabbing}
.img-cell.is-video .vbadge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.9);pointer-events:none;z-index:1}
.img-cell.is-video .vbadge::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #111}
.img-cell .rm{position:absolute;top:5px;right:5px;width:22px;height:22px;border:0;border-radius:50%;background:rgba(17,17,17,.78);color:#fff;font-size:13px;line-height:22px;text-align:center;cursor:pointer;padding:0;z-index:2}
.img-cell .rm:hover{background:var(--danger)}
.img-cell .cover{position:absolute;bottom:5px;left:5px;font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;background:rgba(255,255,255,.9);padding:1px 6px}

/* cola de subida */
.up-queue{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.uq-row{display:grid;grid-template-columns:auto 1fr auto;grid-template-areas:"ic name stage" "ic bar bar";column-gap:10px;row-gap:4px;align-items:center;font-family:var(--mono);font-size:11px;color:var(--muted);border:1px solid var(--line);padding:9px 12px;transition:opacity .4s ease}
.uq-ic{grid-area:ic;font-size:12px;color:var(--ink)}
.uq-name{grid-area:name;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.uq-stage{grid-area:stage;letter-spacing:1px;white-space:nowrap}
.uq-bar{grid-area:bar;height:3px;background:var(--line);overflow:hidden}
.uq-bar i{display:block;height:100%;width:0;background:var(--ink);transition:width .3s ease}
.uq-row.done{color:var(--ok)} .uq-row.done .uq-bar i{background:var(--ok)} .uq-row.done .uq-stage{color:var(--ok)}
.uq-row.error{border-color:var(--danger)} .uq-row.error .uq-stage{color:var(--danger)}

/* meta rows */
.meta-rows{display:flex;flex-direction:column;gap:8px}
.meta-row{display:grid;grid-template-columns:230px 1fr auto;gap:8px;align-items:center}
.meta-row input{padding:8px 10px}
.meta-row .mr-del{font-family:var(--mono);background:none;border:0;color:var(--muted);cursor:pointer;font-size:16px}
.meta-row .mr-del:hover{color:var(--danger)}

/* ---------- Toast ---------- */
#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--ink);color:#fff;font-family:var(--mono);font-size:12px;letter-spacing:1px;padding:11px 20px;transition:.25s;z-index:100;pointer-events:none}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast.err{background:var(--danger)}

/* ---------- Barra de guardado fija ---------- */
.savebar{position:sticky;bottom:0;background:var(--bg);border-top:1px solid var(--line);padding:14px 0;margin-top:30px;display:flex;gap:12px;align-items:center}
.savebar .spacer{margin-left:auto}

/* ---------- Editor PDF ---------- */
.pdf-editor{display:grid;grid-template-columns:240px 1fr;gap:22px;align-items:start}
.pdf-palette{position:sticky;top:74px;border:1px solid var(--line);padding:14px;background:#fcfcfb;max-height:calc(100vh - 96px);overflow:auto}
.pdf-palette h2{font-family:var(--mono);font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin:0 0 12px}
.pal-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pal-item{position:relative;aspect-ratio:1/1;border:1px solid var(--line);overflow:hidden;cursor:grab;background:#f4f4f2}
.pal-item img{width:100%;height:100%;object-fit:cover;pointer-events:none;-webkit-user-drag:none}
.pal-item.selected{outline:2px solid var(--ink);outline-offset:-2px}
.pal-item.dragging{opacity:.4}
.pal-item .vbadge{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:26px;height:26px;border-radius:50%;background:rgba(255,255,255,.9);pointer-events:none}
.pal-item .vbadge::after{content:"";position:absolute;top:50%;left:54%;transform:translate(-50%,-50%);border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent #111}
.pdf-pages{display:flex;flex-direction:column;gap:24px}
.pdf-page{position:relative;width:100%;height:0;box-shadow:0 1px 12px rgba(0,0,0,.10);background:#fff;overflow:hidden}
.pdf-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;user-select:none}
.pdf-panel{position:absolute;z-index:0;pointer-events:none}
/* barra de plantillas */
.pdf-tplbar{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px;padding-bottom:14px;border-bottom:1px solid var(--line)}
.pdf-tplbar-label{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-right:4px}
.pdf-tpl{font-family:var(--mono);font-size:11px;letter-spacing:.5px;color:var(--muted);border:1px solid var(--line2);padding:5px 11px;cursor:pointer;transition:.15s;white-space:nowrap}
.pdf-tpl:hover{border-color:var(--ink);color:var(--ink)}
.pdf-tpl.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.pdf-slot{position:absolute;border:1px dashed rgba(17,17,17,.35);background:rgba(17,17,17,.03);cursor:pointer;overflow:hidden;transition:background .15s,border-color .15s}
.pdf-slot .slot-hint{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--mono);font-size:10px;letter-spacing:1px;color:rgba(17,17,17,.5);text-transform:uppercase;text-align:center}
.pdf-slot.filled{border-style:solid;border-color:transparent}
.pdf-slot.filled .slot-hint{display:none}
.pdf-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.pdf-slot.filled{cursor:grab}
.pdf-slot.filled img{-webkit-user-drag:none;user-select:none}
.pdf-slot.panning{cursor:grabbing}
.pdf-slot.filled::after{content:"✥ arrastra para encuadrar";position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font-family:var(--mono);font-size:9px;letter-spacing:.3px;color:#fff;background:rgba(0,0,0,.6);padding:2px 7px;border-radius:3px;opacity:0;transition:opacity .2s ease;pointer-events:none;z-index:3;white-space:nowrap}
.pdf-slot.filled:hover::after{opacity:1}
.pdf-slot.panning::after{opacity:0}
.pdf-slot.dropok{background:rgba(29,122,77,.18);border-color:var(--ok)}
.pdf-slot .slot-rm{position:absolute;top:4px;right:4px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(17,17,17,.8);color:#fff;font-size:12px;line-height:20px;text-align:center;cursor:pointer;padding:0;display:none;z-index:2}
.pdf-slot.filled:hover .slot-rm{display:block}
.pdf-pagenum{position:absolute;bottom:6px;left:8px;font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);background:rgba(255,255,255,.7);padding:1px 5px;z-index:1}
/* textos editables sobre la plantilla */
.pdf-text{position:absolute;z-index:4;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;line-height:1.25;outline:none;cursor:text;box-sizing:border-box;transition:box-shadow .15s ease}
.pdf-text:hover{box-shadow:0 0 0 1px rgba(29,122,77,.55)}
.pdf-text:focus{box-shadow:0 0 0 2px var(--ok);z-index:7}
@media(max-width:760px){.pdf-editor{grid-template-columns:1fr}.pdf-palette{position:static;max-height:none}}

/* ---------- Usuarios ---------- */
.utbl{width:100%;border-collapse:collapse;font-size:13px;margin-top:6px}
.utbl th{text-align:left;font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);border-bottom:1px solid var(--line);padding:8px 10px}
.utbl td{border-bottom:1px solid var(--line);padding:11px 10px;vertical-align:middle}
.utbl td.mono{font-family:var(--mono);font-size:12px}
.utbl .you{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;background:var(--line);color:var(--muted);padding:1px 6px;margin-left:6px}
.utbl .uactions{text-align:right;white-space:nowrap}
.utbl .uactions button{font-family:var(--mono);font-size:11px;letter-spacing:.5px;text-transform:uppercase;background:none;border:0;color:var(--muted);cursor:pointer;padding:2px 6px}
.utbl .uactions button:hover{color:var(--ink)}
.utbl .uactions .del:hover{color:var(--danger)}
.user-form{border:1px solid var(--line);padding:20px 22px;margin:0 0 24px;background:#fcfcfb}
.user-form h2{font-family:var(--mono);font-size:13px;letter-spacing:2px;text-transform:uppercase;margin:0 0 16px}

/* ---------- Botón Google (login) ---------- */
.btn-google{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:14px;
  font-family:var(--sans);font-size:14px;letter-spacing:0;text-transform:none;color:#3c4043;background:#fff;border:1px solid var(--line2);padding:10px 16px;cursor:pointer;transition:.15s}
.btn-google:hover{background:#f7f7f5;border-color:var(--muted)}
.btn-google svg{width:18px;height:18px;flex:0 0 auto}
.login-sep{display:flex;align-items:center;gap:12px;margin:20px 0 4px;color:var(--muted);font-family:var(--mono);font-size:10px;letter-spacing:2px}
.login-sep::before,.login-sep::after{content:"";flex:1;height:1px;background:var(--line)}

/* ---------- Login ---------- */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{width:100%;max-width:340px;text-align:center}
.login-box .logo{font-family:var(--mono);font-weight:700;font-size:30px;letter-spacing:10px;padding-left:10px;margin:0 0 4px}
.login-box .sub{font-family:var(--mono);font-size:10px;letter-spacing:3px;text-transform:uppercase;color:var(--muted);margin:0 0 30px}
.login-box .field{text-align:left}
.login-box input{text-align:center;font-family:var(--mono);letter-spacing:1px}
.login-error{color:var(--danger);font-family:var(--mono);font-size:12px;margin:0 0 16px;min-height:16px}
.login-box .btn{width:100%;justify-content:center;margin-top:6px}

/* móvil: 2 columnas (el bento funciona — caben 2 por fila, rectangulares h/v) */
@media(max-width:820px){ .proj-grid{grid-template-columns:repeat(2,1fr);gap:10px} }
@media(max-width:380px){ .proj-grid{grid-template-columns:1fr} }
/* selector de forma más grande al tacto */
@media(max-width:820px){
  .sp-grid{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,46px);gap:6px}
  .shape-picker{padding:16px}
  .sp-label{font-size:14px;margin-top:12px}
  .sp-actions button{padding:13px 8px;font-size:12px}
  .proj-card .pc-actions{gap:14px}
  .pc-shape{padding:5px 9px}
}
@media(max-width:680px){
  .adm-top{gap:12px;padding:0 14px;height:auto;min-height:54px;flex-wrap:wrap}
  .adm-nav{margin-left:0;gap:14px}
  .row2{grid-template-columns:1fr}
  .meta-row{grid-template-columns:1fr 1fr auto}
}

/* ---------- Cotizaciones ---------- */
.q-search{margin:0 0 16px}
.q-search input{max-width:440px}
.q-badge{font-family:var(--mono);font-size:9px;letter-spacing:1px;text-transform:uppercase;padding:2px 8px;border-radius:2px}
.q-badge.draft{background:var(--line);color:var(--muted)}
.q-badge.sent{background:#e4f3ea;color:var(--ok)}
.empty-q{color:var(--muted);font-family:var(--mono);font-size:13px;padding:30px 0}

/* nombre del cliente sobre la previsualización de la cotización */
.q-nameov{position:absolute;z-index:3;font-weight:700;font-size:13px;line-height:1.1;color:#1a1a1a;background:rgba(255,255,255,.82);padding:1px 3px;pointer-events:none}

/* textos editables del presupuesto */
.q-text{position:absolute;z-index:3;overflow:hidden;line-height:1.45;white-space:pre-wrap;font-family:var(--sans);background:rgba(255,255,255,.5);outline:1px dashed transparent;cursor:text;transition:background .15s}
.q-text:hover{background:rgba(255,255,255,.9);outline-color:rgba(17,17,17,.25)}
.q-text:focus{background:#fff;outline:1px solid var(--ink)}

/* textos editables del presupuesto (opacos, con negrita) */
.q-text{background:#fff !important}
.q-text b,.q-text strong{font-weight:700}
.q-bold{font-family:var(--mono);font-weight:700;font-size:13px;width:28px;height:26px;border:1px solid var(--ink);background:var(--ink);color:#fff;cursor:pointer;border-radius:3px;box-shadow:0 4px 12px rgba(0,0,0,.25)}

/* nombre del cliente: opaco para cubrir el original (sin doble visión) */
.q-nameov{background:#fff !important;overflow:hidden;white-space:nowrap}

/* ---------- Relato / storytelling ---------- */
.btn-xs{padding:4px 9px;font-size:10px;letter-spacing:1px}
.badge-new{display:inline-block;font-family:var(--mono);font-size:9px;letter-spacing:1.5px;text-transform:uppercase;color:#fff;background:var(--ok);padding:2px 7px;border-radius:3px;vertical-align:middle;margin-left:8px}

#storyBlocks{display:flex;flex-direction:column;gap:14px}
.story-block{position:relative;display:grid;grid-template-columns:24px 220px 1fr;gap:16px;align-items:start;
  border:1px solid var(--line);border-radius:10px;padding:16px 40px 16px 12px;background:#fcfcfb}
.sb-handle{cursor:grab;color:var(--muted);font-size:18px;line-height:1;padding-top:6px;user-select:none;text-align:center}
.sb-handle:active{cursor:grabbing}
.sb-img{display:flex;flex-direction:column;gap:8px}
.sb-thumb{width:100%;aspect-ratio:4/3;border:1px solid var(--line);border-radius:8px;overflow:hidden;background:#f3f3f1;display:flex;align-items:center;justify-content:center}
.sb-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.sb-thumb.empty span{font-family:var(--mono);font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)}
.sb-img-btns{display:flex;gap:6px;flex-wrap:wrap}
.sb-body{min-width:0}
.sb-rte{min-height:96px;border:1px solid var(--line2);border-radius:8px;padding:10px 13px;background:#fff;
  font-family:var(--sans);font-size:15px;line-height:1.65;color:#222}
.sb-rte:focus{outline:0;border-color:var(--ink)}
.sb-rte:empty::before{content:"Escribe el relato de este bloque…";color:var(--muted)}
.sb-rte h2{font-size:18px;font-weight:700;margin:.2em 0 .35em}
.sb-rte h3{font-size:15px;font-weight:700;margin:.2em 0 .3em}
.sb-rte p{margin:0 0 .6em}
.sb-del{position:absolute;top:8px;right:10px;width:24px;height:24px;border:0;border-radius:50%;background:none;color:var(--muted);font-size:18px;line-height:1;cursor:pointer}
.sb-del:hover{background:var(--danger);color:#fff}
@media(max-width:680px){
  .story-block{grid-template-columns:1fr;gap:12px}
  .sb-handle{display:none}
  .sb-thumb{aspect-ratio:16/9;max-width:280px}
}

/* ---------- Modal genérico (selector de imagen del relato) ---------- */
.qmodal{position:fixed;inset:0;z-index:200;background:rgba(20,20,20,.55);display:flex;align-items:center;justify-content:center;padding:24px}
.qmodal[hidden]{display:none}
.qmodal-box{background:var(--bg);border-radius:12px;width:min(640px,100%);max-height:84vh;display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(0,0,0,.35);overflow:hidden}
.qmodal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;border-bottom:1px solid var(--line)}
.qmodal-head h3{margin:0;font-family:var(--mono);font-size:13px;letter-spacing:2px;text-transform:uppercase}
.qmodal-x{border:0;background:none;font-size:18px;color:var(--muted);cursor:pointer;line-height:1}
.qmodal-x:hover{color:var(--ink)}
.qmodal-body{padding:18px 20px;overflow:auto}
.sp-thumbs{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:10px}
.sp-thumb{padding:0;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;background:#f3f3f1;aspect-ratio:1/1}
.sp-thumb img{width:100%;height:100%;object-fit:cover;display:block;transition:.15s}
.sp-thumb:hover{border-color:var(--ink)}
.sp-thumb:hover img{transform:scale(1.04)}

/* ---------- Gestor de categorías ---------- */
#catRows{display:flex;flex-direction:column;gap:10px}
.cat-row{display:grid;grid-template-columns:22px 1fr auto auto;gap:12px;align-items:center;
  border:1px solid var(--line);border-radius:9px;padding:10px 12px;background:#fcfcfb}
.cat-handle{cursor:grab;color:var(--muted);font-size:16px;line-height:1;user-select:none;text-align:center}
.cat-handle:active{cursor:grabbing}
.cat-fields{display:grid;grid-template-columns:minmax(150px,1fr) minmax(190px,2fr);gap:8px;min-width:0}
.cat-fields input{width:100%}
.cr-title{font-weight:600}
.cat-meta{display:flex;flex-direction:column;align-items:flex-end;gap:2px;font-family:var(--mono);font-size:10px;letter-spacing:.5px;color:var(--muted);white-space:nowrap}
.cat-slug-new{color:var(--ok)}
.cat-count{opacity:.8}
.cat-del{width:26px;height:26px;border:1px solid var(--line2);border-radius:6px;background:none;color:var(--muted);font-size:16px;line-height:1;cursor:pointer;flex:none}
.cat-del:hover{background:var(--danger);color:#fff;border-color:var(--danger)}
@media(max-width:680px){
  .cat-row{display:flex;flex-wrap:wrap;align-items:center}
  .cat-handle{display:none}
  .cat-fields{order:1;flex:1 1 100%;grid-template-columns:1fr;gap:6px}
  .cat-meta{order:2;flex-direction:row;gap:10px;margin-top:6px}
  .cat-del{order:3;margin-left:auto;margin-top:6px}
}

/* ===========================================================
   RESPONSIVO GENERAL DEL ADMIN (móvil / tablet)
   =========================================================== */
@media(max-width:820px){
  .adm-main{padding:20px 14px 70px}
  /* Tablas → scroll horizontal sin romper el layout */
  .utbl{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
  .utbl thead th{position:sticky;top:0;background:var(--bg)}
  .adm-head{flex-direction:column;align-items:flex-start;gap:12px}
  .adm-head>div:last-child,.adm-head .btn{width:auto}
  .adm-head{display:flex}
}
@media(max-width:680px){
  /* Barra superior: marca + usuario en una fila, menú deslizable debajo */
  .adm-top{flex-wrap:wrap;row-gap:0;padding:8px 12px}
  .adm-brand{order:1}
  .adm-user{order:2;margin-left:auto;gap:10px}
  .adm-nav{order:3;flex:1 1 100%;overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:16px;padding:8px 2px 10px;scrollbar-width:none;white-space:nowrap}
  .adm-nav::-webkit-scrollbar{display:none}
  .adm-nav a{flex:none}
  h1{font-size:22px}
  .adm-section{padding:16px 14px}
  .savebar{position:sticky;bottom:0;background:var(--bg);padding:12px 0;border-top:1px solid var(--line);z-index:20}
  .savebar .btn{width:100%}
  .q-search input{max-width:none;width:100%}
  .qmodal{padding:10px}
  .inline{flex-wrap:wrap}
  input[type=text],input[type=password],input[type=url],textarea,select{font-size:16px} /* evita zoom iOS */
}

/* ---------- Modal bonito (reemplaza prompt/confirm del navegador) ---------- */
.pmodal{position:fixed;inset:0;z-index:300;background:rgba(17,17,17,0);display:flex;align-items:center;
  justify-content:center;padding:20px;transition:background .22s ease;visibility:hidden}
.pmodal.on{background:rgba(17,17,17,.45);visibility:visible}
.pm-card{background:#fff;border-radius:14px;width:min(430px,94vw);padding:24px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,.28);transform:translateY(18px) scale(.96);opacity:0;
  transition:transform .26s cubic-bezier(.2,.9,.3,1.15),opacity .2s ease}
.pmodal.on .pm-card{transform:none;opacity:1}
.pm-card h3{margin:0 0 14px;font-family:var(--mono);font-size:12px;letter-spacing:2px;text-transform:uppercase}
.pm-card p{margin:0 0 6px;font-size:14px;color:#555;line-height:1.55}
.pm-card input{width:100%;font-size:16px;padding:11px 12px;border:1px solid var(--line2);border-radius:8px}
.pm-card input:focus{outline:none;border-color:var(--ink)}
.pm-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}