/* ════════════════════════════════════════════════════════════════════
   PROPUESTAS · Constructor de propuestas comerciales Finclever
   Reproduce fielmente el brochure (Newsreader / IBM Plex Sans / IBM Plex Mono,
   carbón #121316, crema #f4f2ec, dorado #9a7b4e) en hojas Carta 816×1056px
   con impresión calibrada (cada .pp-page = una página al imprimir).
   Todo scopeado bajo #s-propuestas para no filtrar al resto del panel.
   ════════════════════════════════════════════════════════════════════ */

#s-propuestas{ --pp-gold:#9a7b4e; --pp-gold-lt:#c8a978; --pp-ink:#15161a; --pp-line:#e6e3dc; --pp-gray-800:#2a2c31; --pp-gray-700:#34373d; --pp-gray-650:#3a3d44; --pp-gray-500:#4a4d54; --pp-gray-400:#73777e; --pp-line-soft:#ddd9d0; --pp-cream:#f4f2ec; --pp-cream-2:#f5f2ec; }
#s-propuestas{ background:#cbc8c0; min-height:calc(100vh - 110px); }

/* ── Toolbar (chrome del editor) ─────────────────────────────────── */
.pp-bar{
  position:sticky; top:0; z-index:30; display:flex; align-items:center; gap:14px;
  padding:12px 20px; background:#fbfaf7; border-bottom:1px solid var(--pp-line);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
.pp-bar .pp-bar-title{ font-family:'IBM Plex Sans',sans-serif; font-weight:600; font-size:15px; color:var(--pp-ink); }
.pp-bar .pp-bar-sub{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8a8a82; letter-spacing:.04em; }
.pp-bar .pp-spacer{ flex:1; }
.pp-saved{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#7a9a6a; opacity:0; transition:opacity .25s; }
.pp-saved.on{ opacity:1; }
.pp-saving{ color:#9a7b4e; }

.pp-btn{
  font-family:'IBM Plex Sans',sans-serif; font-size:13px; font-weight:500; cursor:pointer;
  border:1px solid var(--pp-line); background:#fff; color:var(--pp-ink);
  padding:8px 14px; border-radius:7px; display:inline-flex; align-items:center; gap:7px;
  transition:border-color .15s, background .15s;
}
.pp-btn:hover{ border-color:var(--pp-gold); }
.pp-btn-gold{ background:var(--pp-ink); color:#f4f2ec; border-color:var(--pp-ink); }
.pp-btn-gold:hover{ background:#000; border-color:#000; }
.pp-btn-ghost{ background:transparent; border-color:transparent; }
.pp-btn-ghost:hover{ background:#efece5; border-color:transparent; }
.pp-sel{ font-family:'IBM Plex Sans',sans-serif; font-size:13px; padding:7px 10px; border:1px solid var(--pp-line); border-radius:7px; background:#fff; color:var(--pp-ink); cursor:pointer; }

/* ── Vista lista de propuestas ───────────────────────────────────── */
.pp-list{ max-width:960px; margin:0 auto; padding:40px 24px 80px; }
.pp-list-hd{ display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:26px; }
.pp-list-hd h1{ margin:0; font-family:'Newsreader',serif; font-weight:500; font-size:34px; color:#1c1d20; letter-spacing:-.01em; }
.pp-list-hd p{ margin:6px 0 0; font-family:'IBM Plex Sans',sans-serif; font-size:13.5px; color:#5f5d57; }
.pp-cards{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; }
.pp-card{
  background:#fff; border:1px solid var(--pp-line); border-radius:10px; padding:20px 22px;
  cursor:pointer; transition:border-color .15s, box-shadow .15s, transform .1s; position:relative;
}
.pp-card:hover{ border-color:var(--pp-gold); box-shadow:0 8px 24px rgba(0,0,0,.08); transform:translateY(-1px); }
.pp-card .pp-card-cli{ font-family:'Newsreader',serif; font-weight:500; font-size:21px; color:var(--pp-ink); margin-bottom:4px; }
.pp-card .pp-card-meta{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8a8a82; letter-spacing:.03em; }
.pp-badge{ display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:3px 9px; border-radius:20px; margin-top:14px; }
.pp-badge.borrador{ background:#f0ede6; color:#7a766c; }
.pp-badge.enviada{ background:#eef2f8; color:#3d6aa8; }
.pp-badge.aceptada{ background:#eaf4ec; color:#3d8a52; }
.pp-badge.rechazada{ background:#f8edec; color:#a8463d; }
.pp-card-del{ position:absolute; top:14px; right:14px; opacity:0; border:none; background:transparent; cursor:pointer; color:#b04a3d; font-size:16px; transition:opacity .15s; }
.pp-card:hover .pp-card-del{ opacity:.7; }
.pp-card-del:hover{ opacity:1; }
.pp-empty{ text-align:center; padding:70px 20px; color:#6f6d66; font-family:'IBM Plex Sans',sans-serif; }
.pp-card-new{ display:flex; align-items:center; justify-content:center; gap:8px; border:1.5px dashed #b8b4aa; background:transparent; color:#6f6d66; min-height:118px; font-family:'IBM Plex Sans',sans-serif; font-size:14px; }
.pp-card-new:hover{ border-color:var(--pp-gold); color:var(--pp-gold); box-shadow:none; }

/* ── Stage (escritorio que sostiene las hojas) ───────────────────── */
.pp-stage{ display:flex; flex-direction:column; align-items:center; gap:30px; padding:34px 24px 80px; }

/* ── HOJA (816×1056 = Carta @96dpi) ──────────────────────────────── */
.pp-page{
  position:relative; width:816px; height:1056px; overflow:hidden; flex:0 0 auto;
  box-shadow:0 18px 50px rgba(0,0,0,.22); font-family:'IBM Plex Sans',sans-serif;
}
.pp-page * { box-sizing:border-box; }
.pp-dark{ background:#121316; color:#f4f2ec; }
.pp-white{ background:#ffffff; color:var(--pp-ink); }
.pp-cream{ background:#f5f2ec; color:var(--pp-ink); }
.pp-pad{ padding:76px 78px 70px; display:flex; flex-direction:column; height:100%; }
.pp-pad-cover{ padding:74px 78px; display:flex; flex-direction:column; justify-content:space-between; height:100%; }

/* Tipografía */
.pp-eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--pp-gold); }
.pp-dark .pp-eyebrow{ color:var(--pp-gold-lt); }
.pp-h1{ margin:0; font-family:'Newsreader',serif; font-weight:500; font-size:74px; line-height:1.02; letter-spacing:-.015em; }
.pp-h2{ margin:18px 0 0; font-family:'Newsreader',serif; font-weight:500; font-size:42px; line-height:1.12; letter-spacing:-.01em; }
.pp-h2.sm{ font-size:38px; }
.pp-lead{ margin:30px 0 0; font-family:'IBM Plex Sans',sans-serif; font-size:15.5px; line-height:1.72; color:#3a3d44; max-width:560px; }
.pp-dark .pp-lead{ color:#b9b6ac; }
.pp-foot{ position:absolute; left:78px; right:78px; bottom:34px; display:flex; justify-content:space-between; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color:#a7a49c; }
.pp-dark .pp-foot{ color:#76736c; }

/* ── Campos editables (portada cliente/fecha, tarifas) ───────────── */
.pp-edit{
  font:inherit; color:inherit; background:transparent; border:none; outline:none;
  border-bottom:1px dashed rgba(154,123,78,.55); padding:1px 2px; min-width:40px;
  transition:border-color .15s, background .15s;
}
.pp-edit:hover{ background:rgba(154,123,78,.07); }
.pp-edit:focus{ border-bottom-style:solid; border-bottom-color:var(--pp-gold); background:rgba(154,123,78,.10); }
.pp-edit::placeholder{ color:#b7b3a8; }
.pp-dark .pp-edit{ border-bottom-color:rgba(200,169,120,.6); }
.pp-dark .pp-edit:focus{ border-bottom-color:var(--pp-gold-lt); background:rgba(200,169,120,.12); }
.pp-edit-r{ text-align:right; }
.pp-tar-row .pp-rm{ opacity:0; border:none; background:transparent; color:#b04a3d; cursor:pointer; font-size:14px; transition:opacity .15s; }
.pp-tar-row:hover .pp-rm{ opacity:.65; }
.pp-tar-row .pp-rm:hover{ opacity:1; }
.pp-tar-add{ margin-top:16px; font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; color:var(--pp-gold); background:transparent; border:1px dashed rgba(154,123,78,.5); border-radius:6px; padding:8px 12px; cursor:pointer; }
.pp-tar-add:hover{ background:rgba(154,123,78,.07); }

/* Toggle de moneda por línea + bloque de totales del tarifado */
.pp-cur{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--pp-gold); cursor:pointer; padding:2px 5px; border-radius:4px; user-select:none; }
.pp-cur:hover{ background:rgba(154,123,78,.12); }
.pp-tar-total{ margin:22px 0 0 auto; width:340px; max-width:100%; }
.pp-tt-row{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:9px 0; border-bottom:1px solid #ececec; font-family:'IBM Plex Sans',sans-serif; font-size:14px; color:#34373d; }
.pp-tt-row > span:first-child{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:#73777e; display:flex; align-items:center; gap:5px; }
.pp-tt-row > span:last-child{ white-space:nowrap; font-variant-numeric:tabular-nums; }
.pp-tt-grand{ border-bottom:none; border-top:1.5px solid #15161a; margin-top:2px; padding-top:13px; }
.pp-tt-grand > span:last-child{ font-weight:600; color:var(--pp-ink); font-size:18px; }
.pp-tt-grand > span:first-child{ color:var(--pp-gold); }
.pp-tt-desc{ width:42px; text-align:center; }

/* ── Image slot (carga de imágenes) ──────────────────────────────── */
.pp-imgslot{ position:relative; display:block; background:#e4e0d7; overflow:hidden; cursor:pointer; }
.pp-imgslot.has-img{ cursor:default; }
.pp-imgslot img{ width:100%; height:100%; object-fit:cover; object-position:center 38%; display:block; cursor:grab; user-select:none; -webkit-user-drag:none; touch-action:none; }
.pp-imgslot img:active{ cursor:grabbing; }
.pp-imgslot-ctrl{ position:absolute; left:0; right:0; bottom:0; display:flex; align-items:center; justify-content:space-between; gap:8px; padding:8px 10px; background:linear-gradient(transparent, rgba(18,19,22,.6)); opacity:0; transition:opacity .15s; }
.pp-imgslot:hover .pp-imgslot-ctrl{ opacity:1; }
.pp-ic-hint{ font-family:'IBM Plex Mono',monospace; font-size:9px; letter-spacing:.04em; color:#fff; }
.pp-imgslot-ctrl button{ font-family:'IBM Plex Sans',sans-serif; font-size:11px; border:none; background:#fff; color:var(--pp-ink); padding:4px 10px; border-radius:5px; cursor:pointer; }
.pp-imgslot-ctrl button:hover{ background:var(--pp-gold); color:#fff; }

/* Imagen a sangre en la esquina superior derecha de una hoja (hero lateral) */
.pp-corner-img{ position:absolute; top:0; right:0; width:358px; z-index:1; }
.pp-imgslot-hint{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:#8c887e;
  background:#e4e0d7; transition:background .15s, color .15s; text-align:center; padding:14px;
}
.pp-imgslot:hover .pp-imgslot-hint{ background:#dcd7cc; color:var(--pp-gold); }
.pp-imgslot.has-img .pp-imgslot-hint{ opacity:0; }
.pp-imgslot.has-img:hover .pp-imgslot-hint{ opacity:1; background:rgba(20,21,24,.55); color:#fff; }
.pp-imgslot-hint svg{ width:22px; height:22px; }

/* ── Impresión: solo las hojas, cada una a página Carta ──────────── */
@page{ size:letter portrait; margin:0; }
@media print{
  html{ -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  html, body{ margin:0 !important; padding:0 !important; background:#fff !important; height:auto !important; }
  .topbar-row1, .topbar-row2, #nav-row, #nav-drawer-bg, .user-menu, .tb-ticker{ display:none !important; }
  .main{ margin:0 !important; padding:0 !important; }
  .main > .sec:not(#s-propuestas){ display:none !important; }
  #s-propuestas{ background:#fff !important; min-height:0 !important; }
  #s-propuestas .pp-bar, #s-propuestas .pp-list{ display:none !important; }
  #s-propuestas .pp-stage{ display:block !important; background:#fff !important; padding:0 !important; gap:0 !important; }
  #s-propuestas .pp-page{ box-shadow:none !important; margin:0 !important; transform:none !important; width:8.5in !important; height:11in !important; break-after:page; page-break-after:always; overflow:hidden; }
  #s-propuestas .pp-page:last-child{ break-after:auto; page-break-after:auto; }
  .pp-edit{ border-bottom-color:transparent !important; background:transparent !important; }
  .pp-imgslot{ cursor:default; }
  .pp-imgslot img{ cursor:default !important; }
  .pp-imgslot-ctrl{ display:none !important; }
  .pp-imgslot:not(.has-img) .pp-imgslot-hint{ color:#c8c3b8 !important; background:#e4e0d7 !important; }
  .pp-imgslot.has-img .pp-imgslot-hint{ display:none !important; }
  .pp-tar-row .pp-rm, .pp-tar-add{ display:none !important; }
}

/* ── Responsive: las hojas escalan en pantallas chicas (SOLO screen,
      nunca en impresión: el papel Carta mide 816px y dispararía estas reglas) ── */
@media screen and (max-width:880px){
  .pp-stage{ padding:18px 8px 60px; }
  .pp-page{ transform:scale(.62); transform-origin:top center; margin-bottom:-400px; }
}
@media screen and (max-width:560px){
  .pp-page{ transform:scale(.42); margin-bottom:-612px; }
}