/* Estilos compartidos del motor de canvas (lienzo-motor.js) — BMC y VPC.
   DEBE enlazarse AL FINAL del <head>: los <style> embebidos de cada página
   definen .post-it con la misma especificidad y el que va después gana; si
   este archivo pierde la cascada, el sistema de letra (--fsg × --fsn) queda
   muerto en silencio y el layout mide distinto de lo que rinde. */

.post-it {
  font-size: calc(0.72rem * var(--fsg, 1) * var(--fsn, 1));
  overflow-wrap: break-word;
  word-break: normal; /* jamás partir palabras por la mitad */
  hyphens: none;
}

/* Los bloques dejan asomar las notas (post-it real que se sale del margen). */
.bmc-block, .bmc-block-content { overflow: visible; }

/* Barra de herramientas (el BMC la trae en su página; el VPC la construye el
   motor — estos estilos sirven a ambos). */
.color-toolbar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 12px auto 0; padding: 10px 12px; background: #ffffff; border: 1px solid #e2e8f0; border-radius: .75rem; max-width: 1100px; overflow: hidden; box-shadow: 0 1px 2px rgba(15,23,42,.05); }
.color-toolbar .pill { display: flex; align-items: center; gap: 8px; background: #f1f5f9; border: 1px solid #e2e8f0; padding: 6px 10px; border-radius: 999px; flex: 0 1 auto; }
.color-toolbar button.toggle { padding: 8px 12px; border-radius: 999px; font-weight: 700; border: 1px solid #99f6e4; background: #f0fdfa; color: #0f766e; white-space: nowrap; cursor: pointer; }
.color-toolbar button.toggle.active { background: #0f766e; border-color: #0f766e; color: #fff; }
.color-toolbar .swatch { width: 28px; height: 28px; border-radius: 8px; border: 1px solid #cbd5e1; box-shadow: inset 0 0 0 2px rgba(0,0,0,.08); }
.color-toolbar input[type=range].hue { -webkit-appearance: none; width: 160px; height: 12px; border-radius: 999px; outline: none; border: 1px solid #cbd5e1; background: linear-gradient(90deg,#f00 0%,#ff0 16%,#0f0 33%,#0ff 50%,#00f 66%,#f0f 83%,#f00 100%); box-shadow: inset 0 2px 6px rgba(0,0,0,.15); }
.color-toolbar input[type=range].sat, .color-toolbar input[type=range].light { -webkit-appearance: none; width: 120px; height: 12px; border-radius: 999px; outline: none; border: 1px solid #cbd5e1; box-shadow: inset 0 2px 6px rgba(0,0,0,.15); background: linear-gradient(90deg,#888,#fff); }
.color-toolbar input[type=range].hue::-webkit-slider-thumb, .color-toolbar input[type=range].sat::-webkit-slider-thumb, .color-toolbar input[type=range].light::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.color-toolbar input[type=range].hue::-moz-range-thumb, .color-toolbar input[type=range].sat::-moz-range-thumb, .color-toolbar input[type=range].light::-moz-range-thumb { width: 20px; height: 20px; border-radius: 50%; background: #fff; border: 2px solid rgba(0,0,0,.2); box-shadow: 0 1px 2px rgba(0,0,0,.25); }
.color-toolbar .mini-label { font-size: .7rem; color: #475569; }
.painting .bmc-block-content, .painting .segment-area, .painting .post-it { cursor: crosshair; }

/* Pista bajo la barra. */
#paint-hint { font-size: .75rem; color: #64748b; margin-top: 8px; text-align: center; }

/* Botones A− / A+ de letra global. */
.color-toolbar .btn-mini { padding: 6px 10px; border-radius: 999px; font-weight: 700; cursor: pointer; border: 1px solid #cbd5e1; background: #fff; color: #334155; line-height: 1; }
.color-toolbar .btn-mini:hover { border-color: #0f766e; color: #0f766e; }

/* Modo «Aa Ajustar texto» activo. */
.texting .post-it { cursor: text; }

/* Borrar con la ✕ (aparece al pasar el mouse; nunca sale en el PNG). */
.post-it .nota-x {
  position: absolute; top: -7px; left: -7px; width: 16px; height: 16px;
  border-radius: 50%; border: 1px solid #cbd5e1; background: #fff; color: #475569;
  font-size: 10px; line-height: 13px; text-align: center; cursor: pointer;
  padding: 0; display: none; z-index: 5;
}
.post-it:hover .nota-x { display: block; }
.post-it .nota-x:hover { border-color: #dc2626; color: #dc2626; }

/* Edición directa (doble clic). */
.post-it-content[contenteditable="true"] { outline: 1px dashed #0f766e; cursor: text; min-height: 12px; }
