.ql-placeholder {
    display: inline-block;
    background-color: #e0f2fe;
    color: #0369a1;
    border: 1px solid #7dd3fc;
    border-radius: 4px;
    padding: 0 6px;
    font-size: 0.875em;
    font-weight: 500;
    cursor: default;
    user-select: none;
    white-space: nowrap;
}

/* Valor de placeholder ya sustituido en el WYSIWYG — mismo verde que los chips
   de la barra de placeholders (var(--accent)), para distinguirlo del texto normal. */
.cf-ph-value {
    background-color: var(--accent-tint, rgba(14,159,110,.10));
    color: var(--accent, #0E9F6E);
    border-radius: 3px;
    padding: 0 2px;
}

/* Flash breve al guardar valores, para señalar qué cambió (ver quillInterop.flashPlaceholders). */
.cf-ph-value.cf-ph-flash {
    animation: cf-ph-flash-anim 1.4s ease-out;
}
@keyframes cf-ph-flash-anim {
    0%   { background-color: var(--accent, #0E9F6E); color: #fff; }
    100% { background-color: var(--accent-tint, rgba(14,159,110,.10)); color: var(--accent, #0E9F6E); }
}

/* Destello del texto que "Aplicar cambios" (panel de Análisis Legal IA) acaba de reemplazar —
   ver quillInterop.replaceText/AppliedChangeBlot. Mismo patrón que cf-ph-flash arriba, pero sin
   requerir que el rango sea un span .cf-ph-value existente (puede ser texto plano). Un poco más
   largo que el de placeholders (2.2s vs 1.4s) porque acompaña a un párrafo entero, no una sola
   palabra — necesita más tiempo para que el usuario alcance a leerlo antes de que se apague. */
.cf-applied-flash {
    animation: cf-applied-flash-anim 2.2s ease-out;
    border-radius: 3px;
}
@keyframes cf-applied-flash-anim {
    0%   { background-color: var(--accent, #0E9F6E); color: #fff; }
    15%  { background-color: var(--accent, #0E9F6E); color: #fff; }
    100% { background-color: var(--accent-tint, rgba(14,159,110,.10)); color: inherit; }
}

/* Activado por el botón "Mostrar nombres" — expone el tag detrás de cada valor capturado. */
.cf-show-ph-names .cf-ph-value::after {
    content: " {" attr(data-tag) "}";
    font-size: 0.72em;
    opacity: .65;
    font-family: 'Geist Mono', ui-monospace, monospace;
    margin-left: 2px;
}

/* Bloque de firmas (SignatureBlockBlot, quill-interop.js) — Isaac, 2026-07-16 (v2): se probó
   un slot editable con leyenda ámbar invitando a escribir el placeholder ahí mismo, pero
   contenteditable anidado dentro del embed (contenteditable="false") no resultó editable/
   copiable en el navegador real. Isaac pidió simplificar: sin placeholder, solo espacio en
   blanco arriba de la raya para firma manuscrita sobre el documento impreso. Ver
   SignatureBlockBlot.create — ya no genera ningún elemento .cf-sig-slot. */

/* Label del rol de firma (ej. "LA PARTE VENDEDORA") — clicable para renombrarlo (ej. a
   "ARRENDADOR", "EL TITULAR"), ver quillInterop.renameSignatureLabel. Solo un guiño visual de
   "esto se puede clickear"; la edición real pasa por un prompt(), no por escribir aquí mismo
   (ver comentario en SignatureBlockBlot.create sobre por qué no es contenteditable). */
.cf-sig-label {
    cursor: pointer;
    border-bottom: 1px dotted transparent;
}
.cf-sig-label:hover {
    border-bottom-color: var(--accent, #0E9F6E);
}