/* ═══════════════════════════════════════════════════════════════════════════
   lista-distribucion.css
   ───────────────────────────────────────────────────────────────────────────
   Estilos del apartado. Estaban DENTRO de lista-distribucion.js, inyectados
   en un <style> desde JavaScript, y se movieron acá sin cambiar una línea.

   ⚠ El <link> va ÚLTIMO en el <head> de index.html, y no es un detalle: el
   <style> inyectado se agregaba en tiempo de ejecución, o sea después de todos
   los <link>. Moverlo antes cambiaría qué regla gana en los empates de
   especificidad, y eso no se ve en ningún error — se ve en la pantalla, torcida.

   ⚠ No se reformateó ni se reordenó nada a propósito. El objetivo del movimiento
   es que la pantalla NO se mueva; cualquier mejora de estilo va en un paso
   aparte, con su propia comparación.
   ═══════════════════════════════════════════════════════════════════════════ */
.mail-chipbox { display:flex; flex-wrap:wrap; gap:8px; align-items:center;
  min-height:46px; padding:10px 12px; background:var(--navy-4); border:1px solid var(--border-2);
  border-radius:10px; cursor:text; transition:border-color .15s; }
.mail-chipbox:focus-within { border-color:var(--blue-light); }
.mail-chip { display:inline-flex; align-items:center; gap:7px; padding:5px 9px 5px 8px;
  background:var(--blue-glow,rgba(59,130,246,.14)); border:1px solid var(--blue-light,#3b82f6);
  border-radius:8px; font-size:12.5px; color:var(--text); font-family:var(--font);
  transition:opacity .15s; }
.mail-chip.off { opacity:.45; background:var(--navy-3); border-color:var(--border-2); }
.mail-chip-dot { width:9px; height:9px; border-radius:50%; background:var(--green,#22c55e);
  cursor:pointer; flex-shrink:0; box-shadow:0 0 0 2px color-mix(in srgb, var(--green) 30%, transparent); }
.mail-chip.off .mail-chip-dot { background:var(--text-3); box-shadow:none; }
.mail-chip-email { line-height:1; }
.mail-chip-x { cursor:pointer; font-size:16px; line-height:1; color:var(--text-3);
  padding:0 2px; transition:color .15s; }
.mail-chip-x:hover { color:var(--red-txt, var(--red,#ef4444)); }
.mail-chip-input { flex:1; min-width:180px; border:none; background:transparent; outline:none;
  color:var(--text); font-size:13px; font-family:var(--font); padding:4px; }

/* ── Quill en tema oscuro ── */
#tplQuill .ql-toolbar.ql-snow,
#tplSimpleWrap .ql-toolbar.ql-snow {
  background:var(--navy-3); border-color:var(--border-2)!important;
  border-top-left-radius:8px; border-top-right-radius:8px; }
#tplQuill .ql-container.ql-snow,
#tplSimpleWrap .ql-container.ql-snow {
  background:var(--navy-4)!important; border-color:var(--border-2)!important;
  border-bottom-left-radius:8px; border-bottom-right-radius:8px; }
#tplQuill .ql-editor, #tplSimpleWrap .ql-editor {
  background:var(--navy-4)!important; color:var(--text)!important;
  min-height:200px; font-family:var(--font); font-size:14px; }
#tplQuill .ql-editor p, #tplQuill .ql-editor li,
#tplQuill .ql-editor span, #tplQuill .ql-editor strong {
  color:var(--text)!important; }
#tplQuill .ql-editor.ql-blank::before { color:var(--text-3)!important; font-style:normal; }
/* Iconos de la barra: trazo y relleno claros */
.ql-snow .ql-stroke { stroke:var(--text-2)!important; }
.ql-snow .ql-fill, .ql-snow .ql-stroke.ql-fill { fill:var(--text-2)!important; }
.ql-snow .ql-picker { color:var(--text-2)!important; }
.ql-snow .ql-picker-options { background:var(--navy-3)!important; border-color:var(--border-2)!important; }
.ql-snow .ql-picker-label { color:var(--text-2)!important; }
/* Hover / activo */
.ql-snow.ql-toolbar button:hover .ql-stroke,
.ql-snow.ql-toolbar button.ql-active .ql-stroke { stroke:var(--blue-light)!important; }
.ql-snow.ql-toolbar button:hover .ql-fill,
.ql-snow.ql-toolbar button.ql-active .ql-fill { fill:var(--blue-light)!important; }
.ql-snow.ql-toolbar button:hover,
.ql-snow.ql-toolbar button.ql-active { color:var(--blue-light-txt, var(--blue-light))!important; }

/* El punto del chip en SOLO LECTURA: sigue mostrando si el correo está activo
   —es el dato— y deja de ofrecer el clic que lo alterna. */
.mail-chip-dot[data-ro="1"] { cursor: default; }
