.ipt-vars {
    max-height: min(60vh, 32rem);
    overflow-x: auto;
    overflow-y: auto;
}

.ipt-vars-hint {
    margin: 0 0 0.75rem;
    font-size: 0.8125rem;
    color: rgb(107 114 128);
}

.dark .ipt-vars-hint {
    color: rgb(156 163 175);
}

.ipt-vars-table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    font-family: var(--font-sans, ui-sans-serif, system-ui, sans-serif);
}

.ipt-vars-table th {
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: rgb(107 114 128);
    border-bottom: 2px solid rgb(0 0 0 / 0.1);
    background: rgb(0 0 0 / 0.03);
}

.dark .ipt-vars-table th {
    color: rgb(156 163 175);
    border-bottom-color: rgb(255 255 255 / 0.12);
    background: rgb(255 255 255 / 0.04);
}

.ipt-vars-table td {
    padding: 0.75rem;
    vertical-align: top;
    border-bottom: 1px solid rgb(0 0 0 / 0.08);
    line-height: 1.45;
}

.dark .ipt-vars-table td {
    border-bottom-color: rgb(255 255 255 / 0.08);
}

.ipt-vars-table tr:last-child td {
    border-bottom: none;
}

.ipt-vars-table col.ipt-col-var {
    width: 32%;
}

.ipt-vars-table col.ipt-col-desc {
    width: 40%;
}

.ipt-vars-table col.ipt-col-ej {
    width: 28%;
}

.ipt-var-code {
    display: inline-block;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0.35rem 0.55rem;
    border-radius: 0.375rem;
    border: 1px solid rgb(109 149 58 / 0.45);
    background: rgb(109 149 58 / 0.14);
    color: rgb(77 107 35);
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-size: 0.8125rem;
    font-weight: 700;
    line-height: 1.35;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}

.ipt-var-code:hover {
    background: rgb(109 149 58 / 0.24);
    border-color: rgb(109 149 58 / 0.65);
}

.ipt-var-code:active {
    transform: scale(0.98);
}

.ipt-var-code--copied {
    background: rgb(109 149 58 / 0.32);
    border-color: rgb(77 107 35 / 0.85);
}

.ipt-var-code--failed {
    background: rgb(220 38 38 / 0.18);
    border-color: rgb(220 38 38 / 0.55);
}

.dark .ipt-var-code {
    border-color: rgb(163 200 120 / 0.5);
    background: rgb(109 149 58 / 0.22);
    color: rgb(196 224 154);
}

.dark .ipt-var-code:hover {
    background: rgb(109 149 58 / 0.32);
    border-color: rgb(163 200 120 / 0.75);
}

.dark .ipt-var-code--copied {
    background: rgb(109 149 58 / 0.42);
    border-color: rgb(196 224 154 / 0.85);
}

.dark .ipt-var-code--failed {
    background: rgb(239 68 68 / 0.24);
    border-color: rgb(248 113 113 / 0.65);
}

.ipt-var-desc {
    margin: 0;
    font-size: 0.875rem;
    color: rgb(55 65 81);
}

.dark .ipt-var-desc {
    color: rgb(209 213 219);
}

.ipt-var-example {
    margin: 0;
    font-size: 0.8125rem;
    color: rgb(107 114 128);
    word-break: break-word;
}

.dark .ipt-var-example {
    color: rgb(156 163 175);
}

.ipt-var-example-label {
    display: block;
    margin-bottom: 0.2rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: rgb(109 149 58);
}

.dark .ipt-var-example-label {
    color: rgb(163 200 120);
}

/* Editor: resaltado de {{variables}} en asunto y cuerpo */
.ipt-hl-wrap {
    position: relative;
}

.ipt-hl-editor {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.ipt-hl-editor--input {
    min-height: 2.25rem;
}

.ipt-hl-backdrop {
    position: absolute;
    inset: 0;
    z-index: 0;
    margin: 0;
    padding: 0.375rem 0.75rem;
    overflow: auto;
    pointer-events: none;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    font-family: inherit;
    font-size: 0.875rem;
    line-height: 1.5rem;
    color: transparent;
    background: transparent;
    border: none;
}

.ipt-hl-backdrop--input {
    white-space: pre;
    overflow: hidden;
}

.ipt-hl-field {
    position: relative;
    z-index: 1;
    width: 100%;
    background: transparent !important;
    caret-color: auto;
}

.ipt-hl-wrap textarea.ipt-hl-field {
    display: block;
    min-height: 100%;
    border: none;
    resize: vertical;
}

.ipt-hl-wrap input.ipt-hl-field {
    border: none;
}

.ipt-hl-var {
    border-radius: 0.2em;
    color: transparent;
}

.ipt-hl-var--valid {
    background: rgb(109 149 58 / 0.32);
    box-shadow: inset 0 0 0 1px rgb(109 149 58 / 0.55);
}

.dark .ipt-hl-var--valid {
    background: rgb(109 149 58 / 0.38);
    box-shadow: inset 0 0 0 1px rgb(163 200 120 / 0.55);
}

.ipt-hl-var--invalid {
    background: rgb(220 38 38 / 0.28);
    box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.6);
}

.dark .ipt-hl-var--invalid {
    background: rgb(239 68 68 / 0.32);
    box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.65);
}

.ipt-hl-wrap:focus-within .ipt-hl-var--valid {
    background: rgb(109 149 58 / 0.42);
    box-shadow: inset 0 0 0 1px rgb(77 107 35 / 0.75);
}

.dark .ipt-hl-wrap:focus-within .ipt-hl-var--valid {
    background: rgb(109 149 58 / 0.48);
    box-shadow: inset 0 0 0 1px rgb(163 200 120 / 0.75);
}

.ipt-hl-wrap:focus-within .ipt-hl-var--invalid {
    background: rgb(220 38 38 / 0.38);
    box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.8);
}

.dark .ipt-hl-wrap:focus-within .ipt-hl-var--invalid {
    background: rgb(239 68 68 / 0.42);
    box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.85);
}

/* Previsualización: datos ya sustituidos (texto visible con fondo verde) */
.ipt-preview {
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    font-size: 0.875rem;
    line-height: 1.5rem;
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid rgb(0 0 0 / 0.1);
    background: rgb(0 0 0 / 0.02);
}

.dark .ipt-preview {
    border-color: rgb(255 255 255 / 0.12);
    background: rgb(255 255 255 / 0.04);
}

.ipt-preview .ipt-hl-var {
    color: inherit;
    border-radius: 0.2em;
    padding: 0 0.05em;
}

.ipt-preview .ipt-hl-var--valid {
    background: rgb(109 149 58 / 0.32);
    box-shadow: inset 0 0 0 1px rgb(109 149 58 / 0.55);
    color: rgb(55 65 81);
}

.dark .ipt-preview .ipt-hl-var--valid {
    background: rgb(109 149 58 / 0.38);
    box-shadow: inset 0 0 0 1px rgb(163 200 120 / 0.55);
    color: rgb(229 231 235);
}

.ipt-preview .ipt-hl-var--invalid {
    background: rgb(220 38 38 / 0.28);
    box-shadow: inset 0 0 0 1px rgb(220 38 38 / 0.6);
    color: rgb(55 65 81);
}

.dark .ipt-preview .ipt-hl-var--invalid {
    background: rgb(239 68 68 / 0.32);
    box-shadow: inset 0 0 0 1px rgb(248 113 113 / 0.65);
    color: rgb(229 231 235);
}