/* ═══════ Editor de DOCUMENTOS · Mi nube ═══════
   Lenguaje visual de la muestra aprobada de Mi nube: Inter / Inter Tight, íconos de línea,
   paneles blancos con sombra suave y acento azul cobalto.

   TODO va con clases propias `pb*` y variables `--doc-*`: la hoja global de la app (styles.css)
   le da estilo a `button`, `table`, `th`, `h3`, `.card`, `.btn`… y sin propiedades explícitas
   aquí esas reglas se colarían dentro del editor (p. ej. el punto azul de `h3::before` o los
   `th` en mayúsculas y pegajosos). Por eso cada bloque declara lo suyo.

   Se conservan las clases del CONTENIDO que usan los documentos guardados y el bundle de TipTap:
   `.pbEditor .ProseMirror …`, `.pbMencion`, `.pbMenPop/.pbMenIt`, tablas y listas de tareas. */

:root{
  --doc-surface:#FFFFFF; --doc-ink:#0F172A; --doc-muted:#5B6678; --doc-line:#DCE2EB; --doc-soft:#F4F6FA;
  --doc-accent:#1556C0; --doc-accent-soft:#E3ECFA; --doc-accent-ink:#0F3F8F; --doc-hover:#EEF3FB;
  --doc-pagebg:#E4E8EF; --doc-page:#FFFFFF;
  --doc-ok:#0B7D54; --doc-ok-soft:#E3F5EC; --doc-warn:#8A5A00; --doc-warn-soft:#FFF4DB;
  --doc-err:#C42A38; --doc-err-soft:#FDE8EA; --doc-gray-soft:#EEF1F5;
  --doc-doc:#1E64D6; --doc-folder:#E3A33B;
  --doc-shadow:0 12px 32px rgba(15,23,42,.14),0 2px 6px rgba(15,23,42,.06);
  --doc-shadow-sm:0 1px 2px rgba(15,23,42,.05),0 4px 14px rgba(15,23,42,.06);
  --doc-page-shadow:0 2px 10px rgba(15,23,42,.12);
  --doc-ff:var(--font-body,'Inter',system-ui,-apple-system,'Segoe UI',sans-serif);
  --doc-fd:var(--font-display,'Inter Tight','Inter',system-ui,sans-serif);
}
:root[data-theme="dark"]{
  --doc-surface:#0F1728; --doc-ink:#E6ECF5; --doc-muted:#95A2BA; --doc-line:#223049; --doc-soft:#131D33;
  --doc-accent:#7AA8FF; --doc-accent-soft:#16264A; --doc-accent-ink:#B9D0FF; --doc-hover:#15213A;
  --doc-pagebg:#0A1120; --doc-page:#141E33;
  --doc-ok:#34D399; --doc-ok-soft:#0F3325; --doc-warn:#E8AA42; --doc-warn-soft:#33260C;
  --doc-err:#FF6B72; --doc-err-soft:#3A1519; --doc-gray-soft:#1A2540;
  --doc-shadow:0 12px 32px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
  --doc-shadow-sm:0 1px 2px rgba(0,0,0,.3),0 4px 14px rgba(0,0,0,.25);
  --doc-page-shadow:0 2px 12px rgba(0,0,0,.45);
}

/* ═══════════════ contenedor ═══════════════ */
.pbDoc{
  --doc-top:0px; --doc-tbh:0px;
  font-family:var(--doc-ff); font-size:14px; line-height:1.45; color:var(--doc-ink);
  background:var(--doc-surface); border:1px solid var(--doc-line); border-radius:14px;
  box-shadow:var(--doc-shadow-sm); position:relative; min-width:0;
}
.pbDoc *, .pbPop *, .pbDlg *, .pbBurbuja *{ box-sizing:border-box; }
.pbDoc svg, .pbPop svg, .pbDlg svg, .pbBurbuja svg{ display:block; flex:0 0 auto; }
.pbDoc button, .pbPop button, .pbDlg button, .pbBurbuja button{
  font-family:inherit; color:inherit; letter-spacing:normal; text-transform:none; margin:0;
}
.pbDoc kbd, .pbPop kbd{
  font-family:inherit; font-size:10.5px; font-weight:600; color:var(--doc-muted);
  border:1px solid var(--doc-line); border-bottom-width:2px; border-radius:5px; padding:0 4px;
  background:var(--doc-surface);
}

/* ── encabezado del documento ── */
.pbDocTop{
  display:flex; align-items:center; gap:10px; padding:10px 14px;
  border-bottom:1px solid var(--doc-line); border-radius:14px 14px 0 0; background:var(--doc-surface);
}
.pbBack{
  display:inline-flex; align-items:center; gap:6px; border:0; background:none; cursor:pointer;
  padding:7px 10px; border-radius:9px; color:var(--doc-muted); font-weight:600; font-size:13px;
  white-space:nowrap;
}
.pbBack svg{ width:16px; height:16px; }
.pbBack:hover{ background:var(--doc-hover); color:var(--doc-ink); }
.pbDocIco{ width:26px; height:26px; flex:0 0 26px; }
.pbTitWrap{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1 1 auto; }
.pbTit{
  font-family:var(--doc-fd); font-size:17px; font-weight:700; letter-spacing:-.01em; line-height:1.25;
  color:var(--doc-ink); background:transparent; border:1px solid transparent; border-radius:8px;
  padding:3px 8px; margin:0 0 0 -8px; width:100%; max-width:560px; min-width:0; outline:none;
  box-shadow:none; height:auto;
}
.pbTit:hover:not([readonly]){ border-color:var(--doc-line); }
.pbTit:focus:not([readonly]){ border-color:transparent; box-shadow:0 0 0 2px var(--doc-accent); background:var(--doc-surface); }
.pbTit[readonly]{ cursor:default; }
.pbMeta{ display:flex; align-items:center; gap:10px; min-width:0; flex-wrap:wrap; font-size:12px; color:var(--doc-muted); }

.pbPill{
  display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:600;
  padding:2px 9px 2px 7px; border-radius:99px; line-height:1.5; white-space:nowrap;
  background:var(--doc-gray-soft); color:var(--doc-muted);
}
.pbPill::before{ content:""; width:6px; height:6px; border-radius:50%; background:currentColor; }
.pbPill.borrador{ background:var(--doc-warn-soft); color:var(--doc-warn); }
.pbPill.publicado{ background:var(--doc-ok-soft); color:var(--doc-ok); }

.pbSaveBtn{
  display:inline-flex; align-items:center; border:0; background:none; color:inherit; font:inherit; cursor:pointer;
  padding:2px 6px; margin:-2px -6px; border-radius:7px; min-width:0; box-shadow:none; height:auto;
}
.pbSaveBtn:hover{ background:var(--doc-hover); }
.pbSaveBtn:focus-visible{ outline:2px solid var(--doc-accent); outline-offset:1px; }
.pbMeta [data-tip]::after{ left:0; transform:none; }
.pbSave{ display:inline-flex; align-items:center; gap:5px; white-space:nowrap; min-width:0; }
.pbSave svg{ width:14px; height:14px; }
.pbSave .pbGira{ animation:pbGirar 1s linear infinite; }
.pbSave[data-st="guardado"]{ color:var(--doc-muted); }
.pbSave[data-st="guardado"] svg{ color:var(--doc-ok); }
.pbSave[data-st="sinred"]{ color:var(--doc-warn); font-weight:600; }
.pbSave[data-st="error"], .pbSave[data-st="bloqueado"]{ color:var(--doc-err); font-weight:600; }
.pbSave[data-st="lectura"]{ color:var(--doc-muted); }
@keyframes pbGirar{ to{ transform:rotate(360deg); } }

.pbActs{ display:flex; align-items:center; gap:6px; margin-left:auto; flex:0 0 auto; }
.pbBtn{
  display:inline-flex; align-items:center; gap:6px; height:34px; padding:0 12px;
  border:1px solid var(--doc-line); background:var(--doc-surface); color:var(--doc-ink);
  border-radius:9px; font-size:12.5px; font-weight:600; cursor:pointer; white-space:nowrap;
  box-shadow:none; line-height:1; transition:background-color .15s ease,border-color .15s ease;
}
.pbBtn svg{ width:16px; height:16px; }
.pbBtn .pbChev{ width:13px; height:13px; margin-left:-2px; color:var(--doc-muted); }
.pbBtn:hover{ background:var(--doc-hover); }
.pbBtn:disabled{ opacity:.55; cursor:wait; }
.pbBtn.pri{
  border-color:transparent; color:#fff; background:linear-gradient(180deg,#1E64D6,#1350B8);
  box-shadow:0 6px 16px rgba(21,86,192,.25);
}
.pbBtn.pri:hover{ background:linear-gradient(180deg,#2470E4,#1556C0); }
.pbBtn.peligro{ border-color:transparent; color:#fff; background:#C42A38; }
.pbBtn.peligro:hover{ background:#AD2230; }
.pbBtn.sutil{ border-color:transparent; background:transparent; color:var(--doc-muted); }
.pbBtn.sutil:hover{ background:var(--doc-hover); color:var(--doc-ink); }
.pbBtn.chico{ height:28px; padding:0 9px; font-size:12px; border-radius:8px; }
.pbIb{
  display:inline-flex; align-items:center; justify-content:center; width:34px; height:34px; padding:0;
  border:1px solid transparent; background:transparent; color:var(--doc-muted); border-radius:9px; cursor:pointer;
}
.pbIb svg{ width:18px; height:18px; }
.pbIb:hover{ background:var(--doc-hover); color:var(--doc-ink); }
.pbIb[aria-pressed="true"], .pbIb[aria-expanded="true"]{ background:var(--doc-accent-soft); color:var(--doc-accent-ink); }
.pbBtn[aria-expanded="true"]{ background:var(--doc-accent-soft); border-color:transparent; color:var(--doc-accent-ink); }

/* ── avisos (solo lectura, error al guardar) ── */
.pbAviso{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:9px 14px; font-size:12.5px;
  border-bottom:1px solid var(--doc-line); background:var(--doc-accent-soft); color:var(--doc-accent-ink);
}
.pbAviso[hidden]{ display:none; }
.pbAviso > svg{ width:17px; height:17px; }
.pbAviso .pbAvisoTxt{ flex:1 1 260px; min-width:0; }
.pbAviso .pbAvisoTxt b{ font-weight:700; }
.pbAviso .pbAvisoActs{ display:flex; gap:6px; flex-wrap:wrap; }
.pbAviso.warn{ background:var(--doc-warn-soft); color:var(--doc-warn); }
.pbAviso.err{ background:var(--doc-err-soft); color:var(--doc-err); }
.pbAviso .pbBtn{ height:28px; padding:0 10px; font-size:12px; }

/* ═══════════════ barra de herramientas ═══════════════ */
.pbTbWrap{
  position:sticky; top:var(--doc-top); z-index:30;
  background:var(--doc-soft); border-bottom:1px solid var(--doc-line);
}
.pbDoc.sinBarra .pbTbWrap{ display:none; }
.pbTb{ display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:6px 10px; min-height:46px; }
.pbG{ display:flex; align-items:center; gap:2px; flex:0 0 auto; }
.pbSep{ width:1px; height:22px; background:var(--doc-line); margin:0 5px; flex:0 0 1px; }
.pbTbB{
  position:relative; display:inline-flex; align-items:center; justify-content:center; gap:4px;
  min-width:32px; height:32px; padding:0 6px; border:1px solid transparent; border-radius:8px;
  background:transparent; color:var(--doc-ink); cursor:pointer; font-size:12.5px; font-weight:600;
  line-height:1; box-shadow:none; transition:background-color .12s ease,color .12s ease;
}
.pbTbB svg{ width:18px; height:18px; }
.pbTbB .pbChev{ width:12px; height:12px; color:var(--doc-muted); }
.pbTbB:hover:not(:disabled){ background:var(--doc-surface); border-color:var(--doc-line); }
.pbTbB.on, .pbTbB[aria-expanded="true"]{ background:var(--doc-accent-soft); color:var(--doc-accent-ink); border-color:transparent; }
.pbTbB.on .pbChev{ color:var(--doc-accent-ink); }
.pbTbB:disabled{ opacity:.38; cursor:default; }
.pbTbB:focus-visible, .pbIb:focus-visible, .pbBtn:focus-visible, .pbBack:focus-visible,
.pbPopIt:focus-visible, .pbSideTab:focus-visible{ outline:2px solid var(--doc-accent); outline-offset:1px; }
.pbTbEstilo{ width:132px; justify-content:space-between; padding:0 8px 0 10px; border-color:var(--doc-line); background:var(--doc-surface); }
.pbTbEstilo.on{ border-color:transparent; }
.pbEstiloTxt{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbTbLbl{ font-size:12.5px; }
.pbResIco{ position:relative; display:inline-flex; flex-direction:column; align-items:center; }
.pbResIco i{ display:block; width:16px; height:3px; border-radius:2px; margin-top:1px; }
.pbTbHint{ margin-left:auto; padding:0 6px; font-size:11.5px; color:var(--doc-muted); white-space:nowrap; }

/* tooltips propios (el title nativo tarda y no muestra el atajo con claridad). Van con
   display:none mientras no hay hover: así un tooltip oculto nunca ensancha la página en móvil. */
.pbDoc [data-tip], .pbBurbuja [data-tip]{ position:relative; }
.pbDoc [data-tip]::after, .pbBurbuja [data-tip]::after{
  content:attr(data-tip); position:absolute; left:50%; top:calc(100% + 7px); transform:translateX(-50%);
  background:#0F172A; color:#fff; font:500 11.5px/1.3 var(--doc-ff); padding:5px 8px; border-radius:7px;
  white-space:nowrap; pointer-events:none; z-index:40; display:none; letter-spacing:normal; text-transform:none;
  box-shadow:0 4px 12px rgba(15,23,42,.25);
}
.pbDoc [data-tip]:hover::after, .pbBurbuja [data-tip]:hover::after{ display:block; animation:pbTip .12s ease .4s both; }
.pbDoc [data-tip][aria-expanded="true"]::after, .pbDoc [data-tip]:disabled::after{ display:none; }
.pbActs [data-tip]::after{ left:auto; right:0; transform:none; }
.pbBurbuja [data-tip]::after{ top:auto; bottom:calc(100% + 8px); }
:root[data-theme="dark"] .pbDoc [data-tip]::after, :root[data-theme="dark"] .pbBurbuja [data-tip]::after{ background:#E6ECF5; color:#0F172A; }
@keyframes pbTip{ from{ opacity:0; } to{ opacity:1; } }
@media (hover:none){ .pbDoc [data-tip]:hover::after, .pbBurbuja [data-tip]:hover::after{ display:none; } }

/* ── barra contextual de TABLA ── */
.pbTabla{
  display:flex; align-items:center; flex-wrap:wrap; gap:2px; padding:5px 10px;
  border-top:1px solid var(--doc-line); background:var(--doc-accent-soft);
  animation:pbAparece .14s ease-out;
}
.pbTabla[hidden]{ display:none; }
.pbTablaLbl{
  display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:800; letter-spacing:.08em;
  text-transform:uppercase; color:var(--doc-accent-ink); margin-right:6px; white-space:nowrap;
}
.pbTablaLbl svg{ width:16px; height:16px; }
.pbTabla .pbTbB{ padding:0 8px; gap:6px; font-size:12px; font-weight:600; color:var(--doc-accent-ink); }
.pbTabla .pbTbB svg{ width:17px; height:17px; }
.pbTabla .pbTbB:hover:not(:disabled){ background:var(--doc-surface); border-color:transparent; }
.pbTabla .pbTbB.peligro{ color:var(--doc-err); }
.pbTabla .pbSep{ background:color-mix(in srgb,var(--doc-accent) 25%,transparent); }
@keyframes pbAparece{ from{ opacity:0; transform:translateY(-3px); } to{ opacity:1; transform:none; } }

/* ═══════════════ cuerpo: hoja + panel lateral ═══════════════ */
.pbCuerpo{ display:grid; grid-template-columns:minmax(0,1fr) 300px; align-items:start; }
.pbDoc.sinPanel .pbCuerpo{ grid-template-columns:minmax(0,1fr); }
.pbCol{ min-width:0; background:var(--doc-pagebg); border-radius:0 0 0 14px; padding:26px 18px 20px; }
.pbDoc.sinPanel .pbCol{ border-radius:0 0 14px 14px; }
.pbPagina{
  max-width:816px; min-height:70vh; margin:0 auto; background:var(--doc-page); color:var(--doc-ink);
  border-radius:4px; box-shadow:var(--doc-page-shadow); padding:52px 64px 64px;
}
.pbPie{ max-width:816px; margin:12px auto 0; font-size:11.5px; color:var(--doc-muted); text-align:center; }

/* panel lateral */
.pbSide{
  position:sticky; top:calc(var(--doc-top) + var(--doc-tbh)); align-self:start;
  max-height:calc(100vh - var(--doc-top) - var(--doc-tbh)); display:flex; flex-direction:column;
  border-left:1px solid var(--doc-line); background:var(--doc-surface); border-radius:0 0 14px 0; min-width:0;
}
.pbDoc.sinPanel .pbSide{ display:none; }
.pbSideHead{ display:flex; align-items:center; gap:2px; padding:8px 8px 0; border-bottom:1px solid var(--doc-line); }
.pbSideTab{
  flex:1 1 0; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  border:0; background:none; cursor:pointer; padding:9px 6px 10px; font-size:12.5px; font-weight:600;
  color:var(--doc-muted); border-bottom:2px solid transparent; margin-bottom:-1px; border-radius:8px 8px 0 0;
}
.pbSideTab svg{ width:16px; height:16px; }
.pbSideTab:hover{ color:var(--doc-ink); background:var(--doc-hover); }
.pbSideTab[aria-selected="true"]{ color:var(--doc-accent-ink); border-bottom-color:var(--doc-accent); }
.pbSideX{ display:none; }
.pbSideBody{ flex:1 1 auto; overflow:auto; padding:12px; min-height:0; overscroll-behavior:contain; }
.pbSideVacio{ font-size:12.5px; color:var(--doc-muted); padding:10px 6px; line-height:1.5; }
.pbSideVacio b{ display:block; color:var(--doc-ink); font-size:13px; margin-bottom:3px; }

/* índice */
.pbIndice{ display:flex; flex-direction:column; gap:1px; }
.pbIndIt{
  display:block; width:100%; text-align:left; border:0; background:none; cursor:pointer; color:var(--doc-ink);
  font-size:12.5px; line-height:1.35; padding:6px 8px; border-radius:8px; overflow:hidden; text-overflow:ellipsis;
  white-space:nowrap; border-left:2px solid transparent;
}
.pbIndIt:hover{ background:var(--doc-hover); }
.pbIndIt.n1{ font-weight:700; }
.pbIndIt.n2{ padding-left:18px; }
.pbIndIt.n3{ padding-left:30px; color:var(--doc-muted); }
.pbIndIt.n4{ padding-left:42px; color:var(--doc-muted); font-size:12px; }
.pbIndIt.act{ background:var(--doc-accent-soft); color:var(--doc-accent-ink); border-left-color:var(--doc-accent); border-radius:0 8px 8px 0; }

/* versiones */
.pbVers{ display:flex; flex-direction:column; gap:6px; }
.pbVer{ border:1px solid var(--doc-line); border-radius:10px; padding:9px 10px; background:var(--doc-surface); }
.pbVer.actual{ background:var(--doc-accent-soft); border-color:transparent; }
.pbVerTop{ display:flex; align-items:baseline; gap:8px; }
.pbVerN{ font-family:var(--doc-fd); font-weight:700; font-size:13px; }
.pbVer.actual .pbVerN{ color:var(--doc-accent-ink); }
.pbVerTag{ font-size:10.5px; font-weight:700; color:var(--doc-accent-ink); text-transform:uppercase; letter-spacing:.06em; }
.pbVerMeta{ font-size:11.5px; color:var(--doc-muted); margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbVerActs{ display:flex; gap:6px; margin-top:7px; }
.pbVerNota{ font-size:11.5px; color:var(--doc-muted); line-height:1.45; padding:4px 2px 10px; }

/* info */
.pbInfo{ display:flex; flex-direction:column; }
.pbInfoFila{ display:flex; justify-content:space-between; gap:12px; padding:8px 2px; border-bottom:1px solid var(--doc-line); font-size:12.5px; }
.pbInfoFila:last-child{ border-bottom:0; }
.pbInfoFila span{ color:var(--doc-muted); flex:0 0 auto; }
.pbInfoFila b{ font-weight:600; text-align:right; min-width:0; overflow-wrap:anywhere; }
.pbInfoFila button{ border:0; background:none; color:var(--doc-accent); font-weight:600; cursor:pointer; padding:0; font-size:12.5px; }
.pbInfoFila button:hover{ text-decoration:underline; }

/* ═══════════════ menús flotantes (se cuelgan del <body>) ═══════════════ */
.pbPop{
  position:fixed; z-index:270; min-width:210px; max-width:min(320px,calc(100vw - 16px));
  max-height:min(420px,calc(100vh - 16px)); overflow:auto; padding:6px;
  font-family:var(--doc-ff); font-size:13px; color:var(--doc-ink);
  background:var(--doc-surface); border:1px solid var(--doc-line); border-radius:12px; box-shadow:var(--doc-shadow);
  animation:pbAparece .12s ease-out;
}
.pbPop[hidden]{ display:none; }
.pbPopTit{ font-size:10px; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--doc-muted); padding:8px 10px 4px; }
.pbPopIt{
  display:flex; align-items:center; gap:10px; width:100%; border:0; background:none; cursor:pointer;
  text-align:left; padding:8px 10px; border-radius:8px; font-size:13px; color:var(--doc-ink); line-height:1.25;
}
.pbPopIt svg{ width:18px; height:18px; color:var(--doc-muted); }
.pbPopIt:hover, .pbPopIt.act{ background:var(--doc-hover); }
.pbPopIt.act svg{ color:var(--doc-accent); }
.pbPopIt.on{ color:var(--doc-accent-ink); font-weight:600; }
.pbPopIt.on svg{ color:var(--doc-accent); }
.pbPopIt > span{ flex:1 1 auto; min-width:0; }
.pbPopIt small{ display:block; font-size:11.5px; color:var(--doc-muted); font-weight:400; margin-top:1px; }
.pbPopIt kbd{ margin-left:auto; }
.pbPopIt.peligro, .pbPopIt.peligro svg{ color:var(--doc-err); }
.pbPopIt:disabled{ opacity:.45; cursor:default; }
.pbPopMark{ width:16px; flex:0 0 16px; color:var(--doc-accent); }
.pbPopSep{ height:1px; background:var(--doc-line); margin:5px 6px; }
.pbPopVacio{ padding:10px; font-size:12.5px; color:var(--doc-muted); }
.pbEstP{ font-size:13.5px; }
.pbEstH1{ font-family:var(--doc-fd); font-size:20px; font-weight:800; }
.pbEstH2{ font-family:var(--doc-fd); font-size:17px; font-weight:700; }
.pbEstH3{ font-family:var(--doc-fd); font-size:15px; font-weight:700; }
.pbSwatches{ display:flex; gap:8px; padding:8px 10px 6px; }
.pbSw{
  width:30px; height:30px; border-radius:50%; border:2px solid var(--doc-surface); cursor:pointer; padding:0;
  box-shadow:0 0 0 1px var(--doc-line); display:inline-flex; align-items:center; justify-content:center; color:#0F172A;
}
.pbSw:hover{ box-shadow:0 0 0 2px var(--doc-accent); }
.pbSw.on{ box-shadow:0 0 0 2px var(--doc-accent); }
.pbSw svg{ width:15px; height:15px; }
.pbSlash{ min-width:260px; }
.pbSlash .pbPopIt{ padding:7px 10px; }
.pbSlashIco{
  width:32px; height:32px; flex:0 0 32px; border-radius:8px; border:1px solid var(--doc-line);
  background:var(--doc-surface); display:inline-flex; align-items:center; justify-content:center;
}
.pbSlash .pbPopIt.act .pbSlashIco{ border-color:var(--doc-accent); }

/* ── barra flotante sobre la selección (BubbleMenu) ── */
.pbBurbuja{
  display:flex; gap:1px; align-items:center; padding:4px;
  background:var(--doc-surface); border:1px solid var(--doc-line); border-radius:11px; box-shadow:var(--doc-shadow);
  font-family:var(--doc-ff);
}
.pbBurbuja button{
  position:relative; display:inline-flex; align-items:center; justify-content:center; width:32px; height:30px;
  border:0; background:transparent; color:var(--doc-ink); border-radius:7px; cursor:pointer; padding:0;
}
.pbBurbuja button svg{ width:17px; height:17px; }
.pbBurbuja button:hover{ background:var(--doc-hover); }
.pbBurbuja button.on{ background:var(--doc-accent-soft); color:var(--doc-accent-ink); }
.pbBurbuja .pbSep{ height:18px; margin:0 3px; }
body.pbDlgAbierto .pbBurbuja, body.pbDlgAbierto .pbMenPop{ visibility:hidden !important; }

/* ═══════════════ diálogos ═══════════════ */
.pbDlgBack{
  position:fixed; inset:0; z-index:280; background:rgba(15,23,42,.45);
  display:flex; align-items:center; justify-content:center; padding:16px; animation:pbFundido .15s ease-out;
}
@keyframes pbFundido{ from{ opacity:0; } to{ opacity:1; } }
.pbDlg{
  width:min(460px,100%); max-height:calc(100vh - 32px); display:flex; flex-direction:column;
  background:var(--doc-surface); color:var(--doc-ink); border-radius:16px; box-shadow:var(--doc-shadow);
  font-family:var(--doc-ff); font-size:13.5px; line-height:1.45; animation:pbAparece .16s ease-out;
}
.pbDlg.ancho{ width:min(880px,100%); }
.pbDlgHead{ display:flex; align-items:flex-start; gap:10px; padding:18px 20px 6px; }
.pbDlgTit{ font-family:var(--doc-fd); font-size:18px; font-weight:700; letter-spacing:-.01em; margin:0; flex:1; min-width:0; overflow-wrap:anywhere; }
.pbDlgSub{ font-size:12.5px; color:var(--doc-muted); margin-top:3px; font-family:var(--doc-ff); font-weight:400; letter-spacing:0; }
.pbDlgCuerpo{ padding:10px 20px; overflow:auto; min-height:0; }
.pbDlgPie{ display:flex; align-items:center; justify-content:flex-end; gap:8px; padding:12px 20px 18px; flex-wrap:wrap; }
.pbDlgPie .pbIzq{ margin-right:auto; }
.pbCampo{ display:block; margin-bottom:12px; }
.pbCampo > span{ display:block; font-size:12px; font-weight:600; color:var(--doc-muted); margin-bottom:5px; }
.pbInput, .pbSelect{
  width:100%; font:inherit; font-size:13.5px; padding:9px 12px; border-radius:10px; height:auto;
  border:1px solid var(--doc-line); background:var(--doc-soft); color:var(--doc-ink); outline:none; box-shadow:none;
}
.pbInput:focus, .pbSelect:focus{ border-color:transparent; box-shadow:0 0 0 2px var(--doc-accent); background:var(--doc-surface); }
.pbSelect{ width:auto; padding:6px 8px; font-size:12.5px; background:var(--doc-surface); cursor:pointer; }
:root[data-theme="dark"] .pbSelect, :root[data-theme="dark"] .pbInput, :root[data-theme="dark"] .pbTit{ color-scheme:dark; }
.pbPopIt svg[width="20"]{ width:20px; height:20px; }

/* compartir (misma cara que la muestra) */
.pbShareGen{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--doc-line); border-radius:12px; margin-bottom:12px; }
.pbShareGen .pbShareIco{ width:34px; height:34px; border-radius:50%; background:var(--doc-accent-soft); color:var(--doc-accent-ink); display:inline-flex; align-items:center; justify-content:center; flex:0 0 34px; }
.pbShareGen .pbShareIco svg{ width:18px; height:18px; }
.pbShareGen > span{ flex:1; min-width:0; }
.pbShareGen b{ display:block; font-size:13px; }
.pbShareGen small{ display:block; font-size:11.5px; color:var(--doc-muted); }
.pbBuscar{ position:relative; display:block; margin-bottom:8px; }
.pbBuscar svg{ position:absolute; left:11px; top:50%; transform:translateY(-50%); width:16px; height:16px; color:var(--doc-muted); }
.pbBuscar .pbInput{ padding-left:34px; }
.pbGente{ max-height:44vh; overflow:auto; margin:0 -4px; padding:0 4px; }
.pbPersona{ display:flex; align-items:center; gap:10px; padding:7px 0; }
.pbPersona[hidden]{ display:none; }
.pbAv{ width:32px; height:32px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:12px; font-weight:700; color:#fff; flex:0 0 32px; }
.pbPersona > span:nth-child(2){ flex:1; min-width:0; }
.pbPersona b{ display:block; font-size:13px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbPersona small{ display:block; font-size:11.5px; color:var(--doc-muted); }
.pbPersona .pbDueno{ font-size:12px; color:var(--doc-muted); }
.pbNota{ font-size:11.5px; color:var(--doc-muted); margin:10px 0 0; }

/* mover a carpeta */
.pbCarpetas{ display:flex; flex-direction:column; gap:2px; max-height:46vh; overflow:auto; margin:0 -4px; padding:2px 4px; }
.pbCarp{
  display:flex; align-items:center; gap:10px; width:100%; border:1px solid transparent; background:none; cursor:pointer;
  text-align:left; padding:8px 10px; border-radius:10px; font-size:13px; color:var(--doc-ink);
}
.pbCarp svg{ width:20px; height:20px; }
.pbCarp:hover{ background:var(--doc-hover); }
.pbCarp[aria-checked="true"]{ background:var(--doc-accent-soft); color:var(--doc-accent-ink); font-weight:600; }
.pbCarp > span{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pbCarp small{ font-size:11px; color:var(--doc-muted); font-weight:500; }
.pbCarpNueva{ display:flex; gap:8px; margin-top:10px; }
.pbCarpNueva[hidden]{ display:none; }

/* vista previa de versión */
.pbPrevia{ background:var(--doc-pagebg); border-radius:10px; padding:16px; }
.pbPrevia .pbPagina{ min-height:0; padding:36px 44px; box-shadow:var(--doc-page-shadow); }

/* ═══════════════ lienzo del documento (contenido guardado) ═══════════════ */
.pbEditor{ font-family:var(--doc-ff); color:var(--doc-ink); }
.pbEditor .ProseMirror{
  min-height:55vh; outline:none; padding:0; margin:0;
  font-family:var(--doc-ff); font-size:15px; line-height:1.65; color:var(--doc-ink);
  overflow-wrap:break-word; word-wrap:break-word; white-space:pre-wrap; -webkit-font-variant-ligatures:none; font-variant-ligatures:none;
}
.pbPrevia .pbEditor .ProseMirror{ min-height:0; }
.pbEditor.leyendo .ProseMirror{ cursor:default; }
.pbEditor .ProseMirror > * + *{ margin-top:.7em; }
.pbEditor .ProseMirror p{ margin:0; font-size:inherit; color:inherit; }
.pbEditor .ProseMirror > * + p{ margin-top:.7em; }
.pbEditor .ProseMirror h1, .pbEditor .ProseMirror h2, .pbEditor .ProseMirror h3, .pbEditor .ProseMirror h4{
  display:block; font-family:var(--doc-fd); color:var(--doc-ink); letter-spacing:-.015em; margin-bottom:0;
  text-transform:none; background:none; border:0; padding:0;
}
.pbEditor .ProseMirror h1::before, .pbEditor .ProseMirror h2::before,
.pbEditor .ProseMirror h3::before, .pbEditor .ProseMirror h4::before{ content:none; display:none; }
.pbEditor .ProseMirror h1{ font-size:28px; font-weight:800; line-height:1.22; margin-top:1.1em; }
.pbEditor .ProseMirror h2{ font-size:21px; font-weight:700; line-height:1.3;  margin-top:1.05em; }
.pbEditor .ProseMirror h3{ font-size:17px; font-weight:700; line-height:1.35; margin-top:.95em; }
.pbEditor .ProseMirror h4{ font-size:15px; font-weight:700; line-height:1.4;  margin-top:.9em; }
.pbEditor .ProseMirror > :first-child{ margin-top:0; }
.pbEditor .ProseMirror ul, .pbEditor .ProseMirror ol{ padding-left:1.5rem; margin-bottom:0; }
.pbEditor .ProseMirror ul{ list-style:disc; }
.pbEditor .ProseMirror ol{ list-style:decimal; }
.pbEditor .ProseMirror li{ margin:.15em 0; }
.pbEditor .ProseMirror li > p{ margin:0; }
.pbEditor .ProseMirror blockquote{
  border-left:3px solid var(--doc-accent); padding:2px 0 2px 14px; margin-left:0; margin-right:0;
  color:var(--doc-muted); font-style:italic;
}
.pbEditor .ProseMirror code{
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  background:var(--doc-gray-soft); color:inherit; padding:1px 5px; border-radius:5px; font-size:.88em;
}
.pbEditor .ProseMirror pre{ background:var(--doc-gray-soft); padding:10px 12px; border-radius:9px; overflow:auto; }
.pbEditor .ProseMirror pre code{ background:none; padding:0; }
.pbEditor .ProseMirror hr{ border:none; border-top:1px solid var(--doc-line); margin:1.4em 0; height:0; }
.pbEditor .ProseMirror hr.ProseMirror-selectednode{ border-top-color:var(--doc-accent); }
.pbEditor .ProseMirror a{ color:var(--doc-accent); text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
/* resaltado: el color de fondo lo trae el documento (multicolor); el texto va SIEMPRE oscuro para
   que se lea en tema oscuro (TipTap pone `color:inherit` en línea, de ahí el !important) */
.pbEditor .ProseMirror mark{ background:#fde68a; color:#0F172A !important; padding:0 2px; border-radius:3px; box-decoration-break:clone; -webkit-box-decoration-break:clone; }
.pbEditor .ProseMirror mark .pbMencion{ color:#0F3F8F; }

/* texto guía cuando el documento está vacío */
.pbEditor .ProseMirror p.is-editor-empty:first-child::before{
  content:attr(data-placeholder); float:left; height:0; pointer-events:none; color:var(--doc-muted);
}

/* ── tablas ── */
.pbEditor .ProseMirror .tableWrapper{ overflow-x:auto; margin:1em 0; }
.pbEditor .ProseMirror table{
  border-collapse:collapse; width:100%; margin:0; overflow:hidden; background:transparent;
  border:1px solid var(--doc-line); border-radius:8px; table-layout:fixed; font-size:14px; color:var(--doc-ink);
}
.pbEditor .ProseMirror th, .pbEditor .ProseMirror td{
  border:1px solid var(--doc-line); padding:7px 10px; vertical-align:top; position:relative; box-sizing:border-box;
  font-size:14px; line-height:1.5; color:var(--doc-ink); background:transparent; text-align:left;
  text-transform:none; letter-spacing:normal; white-space:normal; top:auto; z-index:auto; min-width:1em;
  transition:none; cursor:text;
}
.pbEditor .ProseMirror th{ background:var(--doc-soft); font-weight:700; }
.pbEditor .ProseMirror tbody tr:hover, .pbEditor .ProseMirror tr:hover td{ background:transparent; }
.pbEditor .ProseMirror tbody tr:hover th{ background:var(--doc-soft); }
.pbEditor .ProseMirror th > p, .pbEditor .ProseMirror td > p{ margin:0; }
.pbEditor .ProseMirror .selectedCell:after{
  content:''; position:absolute; inset:0; background:color-mix(in srgb,var(--doc-accent) 16%,transparent); pointer-events:none; z-index:2;
}
/* manija para estirar columnas */
.pbEditor .ProseMirror .column-resize-handle{
  position:absolute; right:-2px; top:0; bottom:-2px; width:4px; background:var(--doc-accent); pointer-events:none; z-index:3;
}
.pbEditor .ProseMirror.resize-cursor{ cursor:col-resize; }

/* ── listas de tareas ── */
.pbEditor .ProseMirror ul[data-type="taskList"]{ list-style:none; padding-left:.2rem; }
.pbEditor .ProseMirror ul[data-type="taskList"] li{ display:flex; gap:8px; align-items:flex-start; }
.pbEditor .ProseMirror ul[data-type="taskList"] li > label{ margin-top:.28em; flex:0 0 auto; user-select:none; }
.pbEditor .ProseMirror ul[data-type="taskList"] li > label input{ width:16px; height:16px; margin:0; accent-color:var(--doc-accent); cursor:pointer; }
.pbEditor .ProseMirror ul[data-type="taskList"] li > div{ flex:1; min-width:0; }
.pbEditor .ProseMirror ul[data-type="taskList"] li[data-checked="true"] > div{ color:var(--doc-muted); text-decoration:line-through; }

/* ── menciones ── */
.pbMencion{
  background:color-mix(in srgb,var(--doc-accent) 14%,transparent);
  color:var(--doc-accent-ink); font-weight:600; padding:1px 6px; border-radius:6px; white-space:nowrap;
  box-decoration-break:clone; -webkit-box-decoration-break:clone;
}
.pbMenPop{
  position:fixed; z-index:9999; min-width:230px; max-height:280px; overflow:auto;
  background:var(--doc-surface); color:var(--doc-ink); border:1px solid var(--doc-line); border-radius:12px; padding:6px;
  box-shadow:var(--doc-shadow); font-family:var(--doc-ff);
}
.pbMenIt{ padding:7px 10px; border-radius:8px; cursor:pointer; font-size:13px; display:flex; gap:7px; align-items:baseline; }
.pbMenIt b{ font-weight:600; }
.pbMenIt small{ color:var(--doc-muted); font-size:11.5px; }
.pbMenIt.act, .pbMenIt:hover{ background:var(--doc-accent-soft); color:var(--doc-accent-ink); }
.pbMenIt.vacio{ color:var(--doc-muted); cursor:default; background:none; }

/* ── cargando / error al abrir ── */
.pbDocMsg{ padding:48px 20px; text-align:center; color:var(--doc-muted); font-size:13.5px; }
.pbDocMsg b{ display:block; color:var(--doc-ink); font-size:15px; margin-bottom:6px; }
.pbDocMsg .pbBtn{ margin:14px auto 0; }

/* hoja inferior del panel en pantallas angostas */
.pbSheetBack{ display:none; }

/* ═══════════════ responsive ═══════════════ */
@media (max-width:1100px){
  .pbCuerpo{ grid-template-columns:minmax(0,1fr) 270px; }
  .pbTbHint{ display:none; }
}
@media (max-width:899px){
  .pbCuerpo, .pbDoc.sinPanel .pbCuerpo{ grid-template-columns:minmax(0,1fr); }
  .pbCol, .pbDoc.sinPanel .pbCol{ border-radius:0 0 14px 14px; }
  /* el panel pasa a ser una hoja que sube desde abajo */
  .pbSide{
    position:fixed; left:0; right:0; bottom:0; top:auto; z-index:275; max-height:72vh; height:72vh;
    border-left:0; border-radius:16px 16px 0 0; box-shadow:var(--doc-shadow); transform:translateY(105%);
    transition:transform .22s ease; visibility:hidden;
  }
  .pbDoc.sinPanel .pbSide{ display:flex; }
  .pbDoc.hojaAbierta .pbSide{ transform:none; visibility:visible; }
  .pbSideHead{ padding:6px 8px 0; }
  .pbSideHead::before{ content:""; position:absolute; top:6px; left:50%; width:38px; height:4px; margin-left:-19px; border-radius:2px; background:var(--doc-line); }
  .pbSideHead{ padding-top:16px; position:relative; }
  .pbSideX{ display:inline-flex; width:32px; height:32px; }
  .pbDoc.hojaAbierta .pbSheetBack{ display:block; position:fixed; inset:0; z-index:274; background:rgba(15,23,42,.4); animation:pbFundido .15s ease-out; }
}
@media (max-width:760px){
  .pbDoc{ border-radius:12px; }
  .pbDocTop{ flex-wrap:wrap; gap:6px 8px; padding:8px 10px; border-radius:12px 12px 0 0; }
  .pbBack{ padding:6px 8px; }
  .pbBack .pbBackTxt{ display:none; }
  .pbDoc .pbDocIco{ display:none; }
  .pbTitWrap{ flex:1 1 calc(100% - 60px); }
  /* en el teléfono la tabla conserva un ancho legible y se desliza de lado dentro de su marco
     (TipTap pone min-width en línea; de ahí el !important) */
  .pbEditor .ProseMirror table{ min-width:520px !important; }
  .pbEditor .ProseMirror th, .pbEditor .ProseMirror td{ padding:6px 8px; }
  .pbTit{ font-size:16px; }
  .pbActs{ width:100%; justify-content:flex-end; margin-left:0; }
  .pbBtn .pbBtnLbl{ display:none; }
  .pbBtn{ padding:0 10px; }
  .pbBtn.pri .pbBtnLbl{ display:inline; }
  /* barra: una sola fila que se desliza de lado */
  .pbTb, .pbTabla{ flex-wrap:nowrap; overflow-x:auto; overscroll-behavior-x:contain; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
  .pbTb::-webkit-scrollbar, .pbTabla::-webkit-scrollbar{ display:none; }
  .pbTb{ padding:5px 6px; }
  .pbTbEstilo{ width:112px; }
  .pbTbLbl{ display:none; }
  .pbTabla .pbTbB span{ display:none; }
  .pbCol, .pbDoc.sinPanel .pbCol{ padding:10px 8px 14px; border-radius:0 0 12px 12px; }
  .pbPagina{ padding:24px 18px 36px; min-height:60vh; }
  .pbPrevia{ padding:8px; }
  .pbPrevia .pbPagina{ padding:20px 16px; }
  .pbEditor .ProseMirror{ font-size:15px; }
  .pbEditor .ProseMirror h1{ font-size:24px; }
  .pbEditor .ProseMirror h2{ font-size:19px; }
  .pbDlgBack{ align-items:flex-end; padding:0; }
  .pbDlg, .pbDlg.ancho{ width:100%; border-radius:16px 16px 0 0; max-height:92vh; }
}
@media (prefers-reduced-motion:reduce){
  .pbPop, .pbDlg, .pbDlgBack, .pbTabla, .pbSide, .pbSave .pbGira{ animation:none; transition:none; }
}
@media print{
  .pbDocTop, .pbTbWrap, .pbAviso, .pbSide, .pbPie{ display:none !important; }
  .pbDoc{ border:0; box-shadow:none; }
  .pbCol{ background:none; padding:0; }
  .pbPagina{ box-shadow:none; padding:0; max-width:none; }
}