/* ════════════════════════════════════════════════════════════════════
   DISEÑADOR DE PLANTILLAS DE CORREO (31-10-2026)
   La lista /email/plantillas y el diseñador /email/plantillas/{codigo}.

   Es el diseñador de documentos impresos con otro lienzo: la página, la caja,
   las propiedades, la revisión, las versiones y la vista previa usan las
   MISMAS clases .dd-* de disenador-de-documentos.css (Arturo: «cuando hay una
   pantalla modelo se reutilizan sus mismos componentes, CSS y estructura»).
   Aquí va sólo lo que el correo tiene distinto, colgado de .dc-*: el correo
   apilado, el sobre con el asunto, la pestaña «HTML» y la vista previa.

   EL CORREO ES SIEMPRE FONDO BLANCO, en cualquier tema: se lee en Gmail,
   Outlook y el celular, también en modo oscuro (Arturo).
   ════════════════════════════════════════════════════════════════════ */

/* ── El lienzo: un correo, no una hoja ── */
.dc-hoja {
    line-height: normal; font-family: Arial, Helvetica, sans-serif; color: #1f2937;
    min-height: 240px; cursor: default;
}
.dc-sobre {
    padding: 12px 18px 10px; border-bottom: 1px solid #e3e8ee; background: #f8fafc; cursor: pointer;
    font: 13px/1.35 Arial, Helvetica, sans-serif; color: #111827;
}
.dc-sobre .asunto { font-weight: 700; font-size: 15px; overflow-wrap: anywhere; }
.dc-sobre .de { display: flex; align-items: center; gap: 5px; margin-top: 3px; color: #6b7280; font-size: 12px; }
.dc-sobre .de .dd-ico { width: 14px; height: 14px; }
.dc-sobre:hover { background: #f1f5f9; }
/* Como la celda de afuera del correo: 24 px arriba y abajo, 12 a los lados, en blanco. */
.dc-correo { padding: 24px 12px; background: #ffffff; }
.dc-contenedor {
    max-width: 600px; width: 100%; margin: 0 auto; background: #ffffff; border: 1px solid #e3e8ee; border-radius: 6px;
    box-sizing: border-box; overflow: hidden;
}
.dc-contenedor p { margin: 0; }
.dc-contenedor table { border-spacing: 0; }

/* Un bloque, con su marco al pasar y al elegirlo (el mismo azul de la selección del diseño de documentos). */
.dc-bl { position: relative; }
.dc-hoja:not(.solo-lectura) .dc-bl { cursor: grab; }
.dc-hoja:not(.solo-lectura) .dc-bl:hover { outline: calc(1px / var(--s, 1)) dashed rgba(47, 128, 237, .65); outline-offset: -1px; }
.dc-bl.sel, .dc-hoja .dc-bl.sel:hover { outline: calc(2px / var(--s, 1)) solid var(--dd-sel); outline-offset: -2px; z-index: 2; }
.dc-bl.prob-aviso:not(.sel) { outline: calc(1.4px / var(--s, 1)) dashed #e6a700; outline-offset: -2px; }
.dc-bl.prob-error:not(.sel) { outline: calc(1.6px / var(--s, 1)) dashed #d32f2f; outline-offset: -2px; }
.dc-bl.destino { outline: calc(2px / var(--s, 1)) dashed var(--dd-sel); outline-offset: -2px; background: rgba(47, 128, 237, .06); }
.dc-bl.arrastrando { opacity: .45; }
.dc-bl .dd-prob { top: calc(4px / var(--s, 1)); right: calc(4px / var(--s, 1)); }
.dc-bl.prob-error .dd-prob { background: #d32f2f; }
.dc-etiqueta {
    position: absolute; left: 0; top: 0; display: none; z-index: 3; pointer-events: none;
    font: 700 calc(10px / var(--s, 1)) / 1.4 Arial, sans-serif; color: #fff; background: var(--dd-sel);
    padding: 0 calc(6px / var(--s, 1)); border-radius: 0 0 calc(4px / var(--s, 1)) 0;
}
.dc-bl.sel .dc-etiqueta { display: block; }
.dc-insercion {
    position: absolute; left: 12px; right: 12px; height: calc(3px / var(--s, 1)); margin-top: calc(-1.5px / var(--s, 1));
    background: var(--dd-sel); border-radius: 2px; z-index: 6; pointer-events: none;
    box-shadow: 0 0 0 calc(2px / var(--s, 1)) rgba(47, 128, 237, .2);
}

/* Un dato en el lienzo: se ve con su ejemplo, subrayado; uno que no existe, en rojo. */
.dc-dato { text-decoration: underline dotted; text-decoration-thickness: 1px; text-underline-offset: 2px; }
.dc-dato.malo { text-decoration: none; background: #fdecea; color: #c62828; border-radius: 3px; padding: 0 2px; }
.dc-vacio-texto { color: #9aa5b1; font-style: italic; font-weight: 400; }
.dc-vacio-correo {
    display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 48px 24px; text-align: center;
    color: #7b8794; border: 1px dashed #b9c3cd; border-radius: 6px; margin: 12px; font-size: 13px;
}
.dc-vacio-correo .dd-ico { width: 28px; height: 28px; opacity: .6; }
.dc-desconocido { position: relative; height: 48px; }
.dc-logo-falta {
    display: flex; width: fit-content; max-width: 100%; align-items: center; gap: 6px; padding: 0 10px; box-sizing: border-box;
    border: 1px dashed currentColor; border-radius: 4px; opacity: .85; font-size: 12px; font-weight: 600;
}
.dc-logo-falta .dd-ico { width: 16px; height: 16px; }
/* Un bloque «Imagen» sin archivo todavía (31-10-2026): se ve el hueco y cómo llenarlo. */
.dc-img-vacia {
    display: flex; align-items: center; justify-content: center; gap: 8px; height: 88px; padding: 0 12px; box-sizing: border-box;
    color: #7b8794; border: 1px dashed #b9c3cd; border-radius: 6px; background: #f8fafc; font-size: 12.5px; text-align: center;
}
.dc-img-vacia .dd-ico { width: 22px; height: 22px; opacity: .7; flex-shrink: 0; }
/* La empresa sin logo cargado: el aviso de las propiedades lleva al lugar donde se carga. */
.dc-ayuda-falta { color: var(--dlg-ambar, #8a5a00); }
.dc-ayuda-falta a { color: inherit; font-weight: 600; }
.dc-iframe { display: block; width: 100%; height: 900px; border: 0; background: #ffffff; }

/* El correo de celular: más angosto, como lo lee un teléfono. */
.dc-hoja.celular .dc-correo { padding: 16px 8px; }

/* ── Las pestañas «Diseño» y «HTML» de la barra ── */
.dc-pestanas { padding: 1px; }
.dc-pestana {
    display: inline-flex; align-items: center; gap: 5px; height: 26px; padding: 0 10px; border: 1px solid transparent; border-radius: 6px;
    background: none; color: var(--dlg-txt); font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
}
.dc-pestana .dd-ico { width: 16px; height: 16px; }
.dc-pestana:hover { background: var(--fac-sel); color: var(--dlg-primary); }
.dc-pestana.on { background: var(--fac-sel); color: var(--dlg-primary); border-color: color-mix(in srgb, var(--dlg-primary) 30%, transparent); }
.dc-pestana:focus-visible { outline: 2px solid var(--dlg-primary); outline-offset: 1px; }

/* La franja que avisa que el cuerpo sale del HTML escrito a mano. */
.dc-aviso-html {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 12px; font-size: 12.5px;
    background: var(--fac-azul-bg); color: var(--fac-azul); border-bottom: 1px solid var(--dlg-lines);
}
.dc-aviso-html[hidden] { display: none; }
.dc-aviso-html > div { flex: 1 1 260px; }
.dc-aviso-html .dd-ico { width: 18px; height: 18px; }

/* ── La pestaña «HTML» ── */
.dc-codigo { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--dlg-surf); }
.dc-codigo[hidden] { display: none; }
.dc-codigo-cab { padding: 8px 12px; font-size: 12px; color: var(--dlg-dim); border-bottom: 1px solid var(--dlg-lines2); line-height: 1.4; }
.dc-codigo-cab b { color: var(--dlg-txt); }
.dc-codigo textarea {
    flex: 1; min-height: 0; width: 100%; box-sizing: border-box; resize: none; border: 0; outline: none; padding: 12px 14px;
    font-family: var(--dlg-mono); font-size: 12.5px; line-height: 1.55; tab-size: 2; white-space: pre; overflow: auto;
    background: var(--dlg-surf2); color: var(--dlg-txt);
}
.dc-codigo textarea:focus { box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--dlg-primary) 35%, transparent); }

/* ── La caja ──
   Tres por fila: «Encabezado» y «Vencimiento» no caben partidos en dos como en una grilla de cuatro. */
.dc-caja .dd-herrs { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.dc-caja .dd-herr span { overflow-wrap: normal; hyphens: auto; }
.dc-caja-nota {
    margin: 6px 0 4px; padding: 8px 10px; border-radius: 8px; font-size: 11.5px; line-height: 1.4;
    background: var(--fac-azul-bg); color: var(--fac-azul);
}
.dc-caja-nota[hidden] { display: none; }
.dc-herr-dato .dd-ico { color: var(--dlg-ambar); }

/* ── Las filas del resumen en las propiedades (como las columnas de la tabla del detalle) ── */
.dc-fila-res .fila1 input { flex: 1; min-width: 0; }
.dc-fila-res .fila2 { grid-template-columns: minmax(0, 1fr); }
.dd-props input[type="url"] {
    width: 100%; box-sizing: border-box; border: 1px solid var(--dlg-lines); border-radius: 6px; padding: 5px 7px;
    font: inherit; font-size: 12.5px; background: var(--dlg-surf); color: var(--dlg-txt); min-width: 0;
}
.dd-props input[type="url"]:focus { outline: none; border-color: var(--dlg-primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--dlg-primary) 18%, transparent); }

/* ── La vista previa: el correo como llega, en blanco ── */
.dc-vista-cuerpo { display: flex; flex-direction: column; overflow: auto; }
.dc-vista-sobre {
    background: #ffffff; color: #111827; border-bottom: 1px solid #e3e8ee; padding: 12px 18px;
    font: 13px/1.4 Arial, Helvetica, sans-serif;
}
.dc-vista-sobre .asunto { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.dc-vista-sobre .de { color: #6b7280; margin-top: 2px; }
.dc-vista-marco { flex: 1; min-height: 0; display: flex; justify-content: center; padding: 16px; }
.dc-vista-marco iframe { width: 100%; max-width: 760px; height: 100%; min-height: 560px; border: 1px solid var(--dlg-lines); border-radius: 8px; background: #ffffff; display: block; }
.dc-vista-marco.celular iframe { max-width: 375px; }
.dc-vista-cab .dd-seg .dd-b { width: auto; padding: 0 8px; gap: 5px; display: inline-flex; font: inherit; font-size: 12px; }

/* ── La lista: la miniatura de un correo ── */
.dd-miniatura.correo { width: 56px; height: 44px; margin-top: 6px; }
.dd-miniatura.correo::before { left: 0; top: 0; right: 0; width: auto; height: 9px; border-radius: 0; }
.dd-miniatura.correo::after { top: 14px; bottom: 9px; left: 6px; right: 6px; }
.dd-miniatura.correo > i { position: absolute; left: 6px; right: 6px; bottom: 3px; height: 3px; background: #cfd6de; border: 0; }
.dd-tarjeta .asunto-tarjeta { font-size: 12.5px; color: var(--dlg-txt); overflow-wrap: anywhere; }
.dd-tarjeta .asunto-tarjeta span { color: var(--dlg-dim); }