/* V111: estilos del editor visual de firmas dentro de Plantillas. */
.pe-zmodal { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: 14px; background: rgba(15,23,42,.58); }
.pe-zmodal.hidden { display: none; }
.pe-zbox { display: flex; flex-direction: column; width: min(1120px, 100%); max-height: 94vh; overflow: hidden; border: 1px solid #dbe3ef; border-radius: 16px; background: #fff; box-shadow: 0 22px 70px rgba(15,23,42,.25); }
.pe-zhead { display: flex; align-items: center; gap: 12px; padding: 13px 16px; border-bottom: 1px solid #e5eaf2; }
.pe-zhead > div:first-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.pe-zhead b { color: var(--fg-1); font-size: 16px; }
.pe-zsubtitle { color: var(--fg-3, #64748b); font-size: 12px; }
.pe-zpager { display: flex; align-items: center; gap: 8px; white-space: nowrap; }
.pe-zpager button { min-width: 34px; height: 32px; padding: 0 8px; border: 1px solid #dbe3ef; border-radius: 8px; background: #f7faff; color: var(--fg-1); cursor: pointer; }
.pe-zpager button:disabled { opacity: .4; cursor: default; }
.pe-zpager span { min-width: 92px; text-align: center; color: var(--fg-2); font-size: 12px; font-weight: 700; }
.pe-zclose { width: 32px; height: 32px; padding: 0; border: 1px solid #dbe3ef; border-radius: 8px; background: #f7faff; color: #64748b; cursor: pointer; }
.pe-zbody { display: flex; gap: 18px; min-height: 0; overflow: auto; padding: 16px; }
.pe-zcanvas-wrap { position: relative; flex: 1 1 600px; min-width: 300px; min-height: 360px; align-self: flex-start; overflow: auto; padding: 8px; border: 1px solid #e4eaf3; border-radius: 10px; background: #f6f8fc; text-align: center; }
.pe-zcanvas-wrap canvas { display: block; max-width: 100%; margin: 0 auto; border: 1px solid #d9e1ec; background: #fff; box-shadow: 0 2px 8px rgba(15,23,42,.08); }
#plantillaZonasOverlay { position: absolute; left: 50%; top: 8px; transform: translateX(-50%); pointer-events: none; }
.pe-zrect { position: absolute; box-sizing: border-box; border: 2px solid #2563eb; border-radius: 5px; background: rgba(37,99,235,.12); cursor: move; pointer-events: auto; touch-action: none; }
.pe-zrect.activa { background: rgba(37,99,235,.22); box-shadow: 0 0 0 2px rgba(37,99,235,.22); }
.pe-ztag { position: absolute; top: -22px; left: -2px; padding: 3px 6px; border-radius: 5px 5px 0 0; background: #2563eb; color: #fff; font-size: 10px; font-weight: 800; white-space: nowrap; }
.pe-zhandle { position: absolute; right: -7px; bottom: -7px; width: 14px; height: 14px; border-radius: 50%; background: #2563eb; cursor: nwse-resize; }
.pe-zside { flex: 0 1 330px; min-width: 260px; color: var(--fg-1); }
.pe-zside > label:not(.pe-zsample-label) { display: block; margin: 12px 0 6px; color: var(--fg-2); font-size: 12px; font-weight: 700; }
.pe-zhint, .pe-zmuted { color: var(--fg-3, #64748b); font-size: 12px; line-height: 1.45; }
.pe-zsample-label { display: inline-flex !important; margin: 10px 0 4px; cursor: pointer; }
.pe-zsample-label input { display: none; }
.pe-zside select, .pe-zside input { width: 100%; min-width: 0; box-sizing: border-box; }
.pe-zside hr { margin: 14px 0; border: 0; border-top: 1px solid #e5eaf2; }
.pe-zactions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pe-zactions-bottom { margin-top: 14px; }
.pe-zlist { display: flex; flex-direction: column; gap: 5px; max-height: 150px; overflow-y: auto; margin-top: 10px; }
.pe-zlist-item { width: 100%; padding: 7px 9px; border: 1px solid #dbe3ef; border-radius: 8px; background: #f8fbff; color: var(--fg-2); text-align: left; font-size: 12px; cursor: pointer; }
.pe-zlist-item.activa { border-color: #2563eb; background: #eef4ff; color: #1747af; font-weight: 800; }
.zona-firma-editor-legacy { display: none !important; }
@media (max-width: 820px) { .pe-zbody { flex-direction: column; } .pe-zcanvas-wrap { flex: 0 0 auto; width: 100%; box-sizing: border-box; } .pe-zside { flex: 0 0 auto; min-width: 0; } }
@media (max-width: 560px) { .pe-zmodal { padding: 0; } .pe-zbox { width: 100%; max-height: 100vh; border-radius: 0; } .pe-zhead { flex-wrap: wrap; } .pe-zpager { order: 3; width: 100%; justify-content: center; } .pe-zbody { padding: 10px; } .pe-zcanvas-wrap { min-width: 0; } }

/* V113: controles del editor unificado de firmas y campos rellenables. */
.pe-ztype-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 8px; }
.pe-ztype-switch button { flex: 1 1 130px; min-width: 0; }
.pe-ztype-switch button.active { border-color: #2563eb; background: #eef4ff; color: #1747af; }
.pe-zcampo-config { padding: 10px; border: 1px solid #dbe3ef; border-radius: 10px; background: #f8fbff; }
.pe-zcampo-config > label:not(.pe-zcheck) { display: block; margin: 8px 0 5px; color: var(--fg-2); font-size: 12px; font-weight: 700; }
.pe-zcampo-config > label:first-child { margin-top: 0; }
.pe-zcampo-config input, .pe-zcampo-config select { width: 100%; min-width: 0; box-sizing: border-box; }
.pe-zcheck { display: flex; align-items: center; gap: 8px; margin-top: 9px; color: var(--fg-2); font-size: 12px; font-weight: 700; }
.pe-zcheck input { width: 17px; height: 17px; accent-color: #2563eb; }
.pe-zrect-campo { border-style: dashed; }
.pe-zrect-campo-text { border-color: #2563eb; background: rgba(37,99,235,.12); }
.pe-zrect-campo-check { border-color: #c2410c; background: rgba(194,65,12,.14); }
.pe-zrect-campo-text .pe-ztag { background: #2563eb; }
.pe-zrect-campo-check .pe-ztag { background: #c2410c; }
.pe-zrect-campo .pe-zhandle { background: #334155; }

/* V120 */
.pe-zsample-label{display:inline-flex;align-items:center;justify-content:center;padding:10px 12px;min-height:40px;box-sizing:border-box;border:1px solid #dbe4f3;border-radius:10px;background:#f8fbff;color:#203553;cursor:pointer}.pe-zside input,.pe-zside select{min-width:0;max-width:100%;box-sizing:border-box}