quill-clausula 0.1.0

package/dist/quill-clausula.css

@@ -0,0 +1,856 @@
+/* ── Toolbar enhancements ── */
+
+/* Group visual separator between legal tools and standard tools */
+.ql-snow .ql-toolbar .ql-formats:has(.ql-clausula, .ql-parte) {
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  padding-right: 8px;
+  margin-right: 4px;
+}
+
+.ql-snow .ql-toolbar .ql-formats:has(.ql-objeto, .ql-assinatura) {
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  padding-right: 8px;
+  margin-right: 4px;
+}
+
+/* Tooltip styling for toolbar buttons */
+.ql-snow .ql-toolbar button[title],
+.ql-snow .ql-toolbar .ql-picker[title] {
+  position: relative;
+}
+
+/* ── Container ── */
+.ql-clausula-container {
+  margin: 0;
+  padding: 0;
+}
+
+/* ── Item base ── */
+.ql-clausula-item {
+  position: relative;
+  list-style: none;
+}
+
+/*
+ * The .ql-ui span is set to position:absolute by Quill's core CSS.
+ * We position it at the left edge of each item's padding area,
+ * so it doesn't overlap the content text.
+ */
+.ql-clausula-item > .ql-ui {
+  left: 0;
+  font-weight: bold;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+}
+
+/* ── Per-type indentation + prefix space ── */
+
+/* Cláusula: prefix like "CLÁUSULA PRIMEIRA — " needs ~20em */
+.ql-clausula-item[data-clausula-type='clausula'] {
+  padding-left: 0;
+  margin-top: 1em;
+  margin-bottom: 0.3em;
+}
+.ql-clausula-item[data-clausula-type='clausula']:first-child {
+  margin-top: 0;
+}
+/* Cláusula prefix is inline, not absolutely positioned — it's too long and variable */
+.ql-clausula-item[data-clausula-type='clausula'] > .ql-ui {
+  position: relative;
+  left: auto;
+}
+
+/* Sub-cláusula: prefix like "1.2 " */
+.ql-clausula-item[data-clausula-type='subclausula'] {
+  padding-left: 5em;
+  margin-top: 0.25em;
+}
+.ql-clausula-item[data-clausula-type='subclausula'] > .ql-ui {
+  left: 2em;
+}
+
+/* Parágrafo: prefix like "Parágrafo Único. " */
+.ql-clausula-item[data-clausula-type='paragrafo'] {
+  padding-left: 2em;
+  margin-top: 0.4em;
+}
+.ql-clausula-item[data-clausula-type='paragrafo'] > .ql-ui {
+  position: relative;
+  left: auto;
+}
+
+/* Inciso: prefix like "III — " */
+.ql-clausula-item[data-clausula-type='inciso'] {
+  padding-left: 7em;
+  margin-top: 0.15em;
+}
+.ql-clausula-item[data-clausula-type='inciso'] > .ql-ui {
+  left: 4em;
+  font-weight: normal;
+}
+
+/* Alínea: prefix like "a) " */
+.ql-clausula-item[data-clausula-type='alinea'] {
+  padding-left: 9em;
+  margin-top: 0.15em;
+}
+.ql-clausula-item[data-clausula-type='alinea'] > .ql-ui {
+  left: 7em;
+  font-weight: normal;
+}
+
+/* ── Toolbar dropdown labels ── */
+.ql-snow .ql-picker.ql-clausula .ql-picker-label::before,
+.ql-snow .ql-picker.ql-clausula .ql-picker-item::before {
+  content: 'Cláusula \25BE';
+}
+
+.ql-snow .ql-picker.ql-clausula .ql-picker-item::before {
+  content: 'Sem formatação';
+}
+
+.ql-snow .ql-picker.ql-clausula .ql-picker-label[data-value='clausula']::before,
+.ql-snow .ql-picker.ql-clausula .ql-picker-item[data-value='clausula']::before {
+  content: 'Cláusula';
+}
+
+.ql-snow .ql-picker.ql-clausula .ql-picker-label[data-value='subclausula']::before,
+.ql-snow .ql-picker.ql-clausula .ql-picker-item[data-value='subclausula']::before {
+  content: 'Sub-cláusula';
+}
+
+.ql-snow .ql-picker.ql-clausula .ql-picker-label[data-value='paragrafo']::before,
+.ql-snow .ql-picker.ql-clausula .ql-picker-item[data-value='paragrafo']::before {
+  content: 'Parágrafo';
+}
+
+.ql-snow .ql-picker.ql-clausula .ql-picker-label[data-value='inciso']::before,
+.ql-snow .ql-picker.ql-clausula .ql-picker-item[data-value='inciso']::before {
+  content: 'Inciso';
+}
+
+.ql-snow .ql-picker.ql-clausula .ql-picker-label[data-value='alinea']::before,
+.ql-snow .ql-picker.ql-clausula .ql-picker-item[data-value='alinea']::before {
+  content: 'Alínea';
+}
+
+.ql-snow .ql-picker.ql-clausula {
+  width: 140px;
+}
+
+/* Hide the default SVG arrow on clausula picker since we use ▾ in content */
+.ql-snow .ql-picker.ql-clausula .ql-picker-label svg {
+  display: none;
+}
+
+/* Indent sub-items in the clausula dropdown to show hierarchy */
+.ql-snow .ql-picker.ql-clausula .ql-picker-item[data-value='subclausula']::before {
+  padding-left: 12px;
+}
+.ql-snow .ql-picker.ql-clausula .ql-picker-item[data-value='paragrafo']::before {
+  padding-left: 12px;
+}
+.ql-snow .ql-picker.ql-clausula .ql-picker-item[data-value='inciso']::before {
+  padding-left: 24px;
+}
+.ql-snow .ql-picker.ql-clausula .ql-picker-item[data-value='alinea']::before {
+  padding-left: 36px;
+}
+
+/* ── Action buttons ── */
+.ql-clausula-actions {
+  position: absolute;
+  top: 2px;
+  right: 4px;
+  display: flex;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s;
+  z-index: 1;
+}
+
+.ql-clausula-item:hover > .ql-clausula-actions {
+  opacity: 1;
+}
+
+/* Always visible when any button is active */
+.ql-clausula-actions:has(.active) {
+  opacity: 1;
+}
+
+.ql-clausula-btn {
+  width: 22px;
+  height: 22px;
+  padding: 3px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  background: none;
+  color: #888;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.12s;
+}
+
+.ql-clausula-btn:hover {
+  background: rgba(0, 0, 0, 0.06);
+  color: #555;
+}
+
+.ql-clausula-lock.active {
+  color: #c0392b;
+  background: rgba(192, 57, 43, 0.08);
+  border-color: rgba(192, 57, 43, 0.2);
+}
+
+.ql-clausula-agree.active {
+  color: #27ae60;
+  background: rgba(39, 174, 96, 0.08);
+  border-color: rgba(39, 174, 96, 0.2);
+}
+
+.ql-clausula-disagree.active {
+  color: #e67e22;
+  background: rgba(230, 126, 34, 0.08);
+  border-color: rgba(230, 126, 34, 0.2);
+}
+
+.ql-clausula-conversation:hover {
+  color: #2980b9;
+}
+
+.ql-clausula-conversation.active {
+  color: #2980b9;
+  background: rgba(41, 128, 185, 0.08);
+  border-color: rgba(41, 128, 185, 0.2);
+}
+
+.ql-clausula-btn:disabled {
+  opacity: 0.3;
+  cursor: not-allowed;
+}
+
+/* ── Locked state ── */
+.ql-clausula-item.ql-locked-true {
+  background: rgba(0, 0, 0, 0.03);
+  border-left: 3px solid #c0392b;
+}
+
+/* ── Agreed state ── */
+.ql-clausula-item.ql-agreed {
+  border-left: 3px solid #27ae60;
+}
+
+/* ── Disagreed state ── */
+.ql-clausula-item.ql-disagreed {
+  border-left: 3px solid #e67e22;
+}
+
+/* ══════════════════════════════════════════
+   Floating Action Bar
+   ══════════════════════════════════════════ */
+
+.ql-clausula-floating-bar {
+  position: sticky;
+  bottom: 16px;
+  left: 50%;
+  transform: translateX(-50%);
+  display: inline-flex;
+  gap: 4px;
+  padding: 10px 16px;
+  background: #fff;
+  border: 2px solid #222;
+  border-radius: 50px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
+  z-index: 100;
+  width: fit-content;
+  margin: 24px auto 0;
+  user-select: none;
+}
+
+.ql-floating-btn {
+  width: 40px;
+  height: 40px;
+  padding: 8px;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: #333;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.15s ease;
+  position: relative;
+}
+
+.ql-floating-btn:hover {
+  background: rgba(0, 0, 0, 0.07);
+  transform: scale(1.1);
+}
+
+.ql-floating-btn:active {
+  transform: scale(0.95);
+}
+
+.ql-floating-btn:disabled {
+  opacity: 0.25;
+  cursor: not-allowed;
+  transform: none;
+}
+
+.ql-floating-btn:disabled:hover {
+  background: none;
+  transform: none;
+}
+
+/* Individual button hover colors */
+.ql-floating-undo:hover {
+  color: #7f8c8d;
+}
+
+.ql-floating-agree-all:hover {
+  color: #27ae60;
+  background: rgba(39, 174, 96, 0.1);
+}
+
+.ql-floating-disagree-all:hover {
+  color: #e67e22;
+  background: rgba(230, 126, 34, 0.1);
+}
+
+.ql-floating-lock-all:hover {
+  color: #c0392b;
+  background: rgba(192, 57, 43, 0.1);
+}
+
+.ql-floating-judge:hover {
+  color: #8e44ad;
+  background: rgba(142, 68, 173, 0.1);
+}
+
+.ql-floating-share:hover {
+  color: #2980b9;
+  background: rgba(41, 128, 185, 0.1);
+}
+
+.ql-floating-sign:hover:not(:disabled) {
+  color: #2c3e50;
+  background: rgba(44, 62, 80, 0.1);
+}
+
+/* Sign button ready state (all parties agreed) */
+.ql-floating-sign.ready {
+  color: #27ae60;
+  animation: sign-pulse 2s ease-in-out infinite;
+}
+
+.ql-floating-sign.ready:hover {
+  color: #fff;
+  background: #27ae60;
+}
+
+@keyframes sign-pulse {
+  0%, 100% { box-shadow: 0 0 0 0 rgba(39, 174, 96, 0.3); }
+  50% { box-shadow: 0 0 0 6px rgba(39, 174, 96, 0); }
+}
+
+/* Dividers between button groups */
+.ql-floating-btn.ql-floating-lock-all::before,
+.ql-floating-btn.ql-floating-sign::before {
+  content: '';
+  position: absolute;
+  left: -4px;
+  top: 8px;
+  bottom: 8px;
+  width: 1px;
+  background: rgba(0, 0, 0, 0.15);
+}
+
+/* ══════════════════════════════════════════
+   Undo Warning Modal
+   ══════════════════════════════════════════ */
+
+.ql-clausula-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 10000;
+  animation: modal-fade-in 0.15s ease;
+}
+
+@keyframes modal-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+.ql-clausula-modal {
+  background: #fff;
+  border-radius: 12px;
+  padding: 28px 32px;
+  max-width: 420px;
+  width: 90%;
+  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
+  animation: modal-slide-in 0.2s ease;
+}
+
+@keyframes modal-slide-in {
+  from { transform: translateY(20px); opacity: 0; }
+  to { transform: translateY(0); opacity: 1; }
+}
+
+.ql-clausula-modal-title {
+  margin: 0 0 12px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #2c3e50;
+}
+
+.ql-clausula-modal-message {
+  margin: 0 0 24px;
+  font-size: 14px;
+  line-height: 1.5;
+  color: #555;
+}
+
+.ql-clausula-modal-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+
+.ql-clausula-modal-btn {
+  padding: 8px 20px;
+  border-radius: 6px;
+  border: none;
+  font-size: 14px;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.12s;
+}
+
+.ql-clausula-modal-cancel {
+  background: #eee;
+  color: #555;
+}
+
+.ql-clausula-modal-cancel:hover {
+  background: #ddd;
+}
+
+.ql-clausula-modal-confirm {
+  background: #c0392b;
+  color: #fff;
+}
+
+.ql-clausula-modal-confirm:hover {
+  background: #a93226;
+}
+
+/* ══════════════════════════════════════════
+   PARTE (Contract Parties)
+   ══════════════════════════════════════════ */
+
+.ql-parte-container {
+  margin: 0;
+  padding: 0;
+}
+
+.ql-parte-item {
+  position: relative;
+  list-style: none;
+  padding-left: 0;
+  margin-top: 0.5em;
+  line-height: 1.6;
+}
+
+.ql-parte-item:first-child {
+  margin-top: 0;
+}
+
+.ql-parte-item > .ql-ui {
+  position: relative;
+  left: auto;
+  font-weight: bold;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+  text-transform: uppercase;
+  color: #2c3e50;
+}
+
+/* ── Parte toolbar dropdown labels ── */
+.ql-snow .ql-picker.ql-parte .ql-picker-label::before,
+.ql-snow .ql-picker.ql-parte .ql-picker-item::before {
+  content: 'Partes \25BE';
+}
+
+.ql-snow .ql-picker.ql-parte .ql-picker-item::before {
+  content: 'Sem formatação';
+}
+
+.ql-snow .ql-picker.ql-parte .ql-picker-label[data-value='contratante']::before,
+.ql-snow .ql-picker.ql-parte .ql-picker-item[data-value='contratante']::before {
+  content: 'Contratante';
+}
+
+.ql-snow .ql-picker.ql-parte .ql-picker-label[data-value='contratado']::before,
+.ql-snow .ql-picker.ql-parte .ql-picker-item[data-value='contratado']::before {
+  content: 'Contratado';
+}
+
+.ql-snow .ql-picker.ql-parte {
+  width: 140px;
+}
+
+/* Hide the default SVG arrow on parte picker since we use ▾ in content */
+.ql-snow .ql-picker.ql-parte .ql-picker-label svg {
+  display: none;
+}
+
+/* ══════════════════════════════════════════
+   OBJETO (Contract Object)
+   ══════════════════════════════════════════ */
+
+.ql-objeto-container {
+  margin: 0;
+  padding: 0;
+}
+
+.ql-objeto-item {
+  position: relative;
+  list-style: none;
+  padding-left: 0;
+  margin-top: 1em;
+  margin-bottom: 0.5em;
+  text-align: center;
+  font-weight: bold;
+  text-transform: uppercase;
+  border-top: 2px solid #2c3e50;
+  border-bottom: 2px solid #2c3e50;
+  padding: 0.5em 1em;
+  background: rgba(44, 62, 80, 0.03);
+}
+
+.ql-objeto-item > .ql-ui {
+  position: relative;
+  left: auto;
+  font-weight: bold;
+  white-space: nowrap;
+  user-select: none;
+  pointer-events: none;
+  color: #2c3e50;
+}
+
+/* ── Objeto toolbar button ── */
+.ql-snow .ql-objeto {
+  width: auto !important;
+  display: inline-flex !important;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px !important;
+  border-radius: 3px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.ql-snow .ql-objeto::before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cline x1='12' y1='8' x2='12' y2='16'/%3E%3Cline x1='8' y1='12' x2='16' y2='12'/%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  flex-shrink: 0;
+}
+
+.ql-snow .ql-objeto::after {
+  content: 'Objeto';
+  font-size: 13px;
+}
+
+/* Active state when OBJETO exists in document */
+.ql-snow .ql-objeto.ql-active {
+  color: #2c3e50 !important;
+  background: rgba(44, 62, 80, 0.1);
+}
+
+.ql-snow .ql-objeto:hover {
+  background: rgba(44, 62, 80, 0.07);
+}
+
+/* ══════════════════════════════════════════
+   ASSINATURA (Signatures)
+   ══════════════════════════════════════════ */
+
+.ql-assinatura-block {
+  margin-top: 2em;
+  padding: 1.5em 2em;
+  border-top: 2px solid #2c3e50;
+  text-align: center;
+  user-select: none;
+}
+
+.ql-assinatura-header {
+  margin-bottom: 2em;
+  font-size: 0.95em;
+  color: #555;
+}
+
+.ql-assinatura-line {
+  display: inline-block;
+  width: 280px;
+  margin: 1em 2em;
+  text-align: center;
+  vertical-align: top;
+}
+
+.ql-assinatura-rule {
+  font-size: 0.9em;
+  color: #333;
+  margin-bottom: 0.3em;
+  letter-spacing: 0.02em;
+}
+
+.ql-assinatura-nome {
+  font-weight: bold;
+  font-size: 0.9em;
+  color: #2c3e50;
+}
+
+.ql-assinatura-role {
+  font-size: 0.75em;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #7a7062;
+  margin-top: 0.15em;
+}
+
+.ql-assinatura-testemunhas-header {
+  margin-top: 2em;
+  margin-bottom: 0.5em;
+  font-weight: bold;
+  font-size: 0.85em;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: #555;
+}
+
+/* ── Assinatura toolbar button ── */
+.ql-snow .ql-assinatura {
+  width: auto !important;
+  display: inline-flex !important;
+  align-items: center;
+  gap: 4px;
+  padding: 3px 8px !important;
+  border-radius: 3px;
+  transition: background 0.15s, color 0.15s;
+}
+
+.ql-snow .ql-assinatura::before {
+  content: '';
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  background: currentColor;
+  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.83 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5L17 3z'/%3E%3C/svg%3E");
+  -webkit-mask-size: contain;
+  mask-size: contain;
+  -webkit-mask-repeat: no-repeat;
+  mask-repeat: no-repeat;
+  flex-shrink: 0;
+}
+
+.ql-snow .ql-assinatura::after {
+  content: 'Assinatura';
+  font-size: 13px;
+}
+
+.ql-snow .ql-assinatura:hover {
+  background: rgba(44, 62, 80, 0.07);
+}
+
+/* ══════════════════════════════════════════════
+   Ghost Cut — faded, inert content awaiting paste
+   ══════════════════════════════════════════════ */
+
+.ql-ghost-true {
+  opacity: 0.35;
+  filter: grayscale(0.5);
+  text-decoration: none;
+  user-select: none;
+  transition: opacity 0.18s ease;
+}
+
+/* ══════════════════════════════════════════════
+   Clause organizer — floating drag handle
+   ══════════════════════════════════════════════ */
+
+.ql-container {
+  position: relative;
+}
+
+.ql-clausula-drag-handle {
+  position: absolute;
+  z-index: 20;
+  display: none;
+  padding: 4px 3px;
+  color: #9a9186;
+  background: rgba(255, 255, 255, 0.9);
+  border: 1px solid rgba(0, 0, 0, 0.08);
+  border-radius: 4px;
+  cursor: grab;
+  line-height: 0;
+  touch-action: none;
+  transition: color 0.15s, background 0.15s;
+}
+
+.ql-clausula-drag-handle.visible {
+  display: block;
+}
+
+.ql-clausula-drag-handle:hover {
+  color: #2c3e50;
+  background: #fff;
+}
+
+.ql-clausula-dragging,
+.ql-clausula-dragging .ql-clausula-drag-handle {
+  cursor: grabbing;
+}
+
+.ql-clausula-dragging .ql-editor {
+  user-select: none;
+}
+
+.ql-clausula-drop-indicator {
+  position: absolute;
+  z-index: 19;
+  left: 1.5rem;
+  right: 1.5rem;
+  height: 2px;
+  border-radius: 1px;
+  background: #2c7be5;
+  box-shadow: 0 0 0 1px rgba(44, 123, 229, 0.25);
+  display: none;
+  pointer-events: none;
+}
+
+.ql-clausula-drop-indicator.visible {
+  display: block;
+}
+
+.ql-drag-source {
+  opacity: 0.35;
+  transition: opacity 0.15s ease;
+}
+
+/* ══════════════════════════════════════════════
+   Word-style spacing pickers (toolbar)
+   ══════════════════════════════════════════════ */
+
+.ql-snow .ql-picker.ql-lineheight {
+  width: 62px;
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
+  content: '↕ —';
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-label[data-value]::before {
+  content: '↕ ' attr(data-value);
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item::before {
+  content: attr(data-value);
+}
+
+.ql-snow .ql-picker.ql-lineheight .ql-picker-item:not([data-value])::before {
+  content: 'Padrão';
+}
+
+.ql-snow .ql-picker.ql-spacing {
+  width: 68px;
+}
+
+.ql-snow .ql-picker.ql-spacing .ql-picker-label::before {
+  content: '¶ —';
+}
+
+.ql-snow .ql-picker.ql-spacing .ql-picker-label[data-value]::before {
+  content: '¶ ' attr(data-value);
+}
+
+.ql-snow .ql-picker.ql-spacing .ql-picker-item::before {
+  content: attr(data-value);
+}
+
+.ql-snow .ql-picker.ql-spacing .ql-picker-item:not([data-value])::before {
+  content: 'Padrão';
+}
+
+/* ══════════════════════════════════════════════
+   Table toolbar button + basic table styling
+   ══════════════════════════════════════════════ */
+
+.ql-snow .ql-table {
+  display: inline-flex !important;
+  align-items: center;
+  gap: 4px;
+  width: auto !important;
+  padding: 3px 8px !important;
+  border-radius: 4px;
+}
+
+.ql-snow .ql-table::after {
+  content: 'Tabela';
+  font-size: 13px;
+}
+
+.ql-snow .ql-table:hover {
+  background: rgba(44, 62, 80, 0.07);
+}
+
+.ql-editor table {
+  border-collapse: collapse;
+  width: 100%;
+  margin: 0.75em 0;
+}
+
+.ql-editor td {
+  border: 1px solid #c9c1b4;
+  padding: 0.35em 0.6em;
+  vertical-align: top;
+}
+
+/* Ghost Cut: fully-covered lines fade as a whole, label included */
+.ql-ghost-line {
+  opacity: 0.35;
+  filter: grayscale(0.5);
+  transition: opacity 0.18s ease;
+}
+
+.ql-ghost-line .ql-ghost-true {
+  opacity: 1;
+  filter: none;
+}
+
+/* Invisible extension of the drag handle's hit area (bridges the gap to the text) */
+.ql-clausula-drag-handle::before {
+  content: '';
+  position: absolute;
+  top: -10px;
+  right: -18px;
+  bottom: -10px;
+  left: -10px;
+}