/* ═══════════════════════════════════════════════════════════════════════════
   ezeQ OS — «La sala y el folio» (v6)
   Un único CSS cacheable. Antes, ~110 líneas inline repetidas en cada página
   y duplicadas en el login. La propuesta completa vive en el artefacto
   «La sala y el folio»; los tokens de aquí son su copia operativa.
   ═══════════════════════════════════════════════════════════════════════════ */

@font-face{font-family:'Archivo';font-style:normal;font-weight:100 900;font-stretch:62% 125%;
  font-display:swap;src:url('../fonts/archivo-var.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;
  font-display:swap;src:url('../fonts/plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;
  font-display:swap;src:url('../fonts/plex-mono-500.woff2') format('woff2')}

:root{
  /* La sala: grafito con sesgo verde. El folio: papel cálido, solo documentos. */
  --ink:#0F1211;--surface:#151918;--raised:#1B201E;--line:#262C2A;--line-soft:#1E2422;
  --text:#E9EDEB;--text-2:#98A39E;--text-3:#828E88;
  --menta:#3ADAB8;--menta-hover:#4BE5C5;--menta-ink:#062A22;
  --paper:#F2EEE4;--paper-ink:#26241D;--paper-soft:#6B6657;--paper-line:#DDD6C4;
  /* Estados (validados para daltonismo sobre la sala; siempre punto + etiqueta) */
  --st-pend:#C08A20;--st-pend-texto:#E8C989;
  --st-ok:#2EA98E;--st-ok-texto:#8FD9C7;
  --st-no:#DC5A50;--st-no-texto:#F0A29B;
  --st-info:#5B8BD8;--st-info-texto:#A8C4EE;
  /* Terracota del lead «en propuesta»: la única tinta fuera de la menta y los estados.
     Estaba escrita a pelo en dos reglas y sin aparecer en la guía; ahora es un token y
     está documentada (guia-estilo.md §2, tabla de estados del lead). */
  --st-prop:#C97B3D;--st-prop-texto:#E3A987;
  /* Rampa secuencial del embudo: una magnitud, una tinta */
  --emb-1:#8FE8D2;--emb-2:#5FDBBD;--emb-3:#3ACBAD;--emb-4:#2EAE93;--emb-5:#26957E;--emb-6:#1E7D69;
  /* Compat: nombres que las vistas ya usan */
  --bg:var(--ink);--bg2:var(--surface);--card:var(--surface);
  --accent:var(--menta);--accent2:var(--menta);--gold:var(--st-pend);--red:var(--st-no);--muted:var(--text-2);
  --disp:'Archivo',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'SF Mono',Menlo,monospace;
}

*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--disp);background:var(--ink);color:var(--text);line-height:1.55;
  font-size:15px;-webkit-font-smoothing:antialiased}
::selection{background:rgba(58,218,184,.25)}
a{color:var(--menta);text-decoration:none}
:focus-visible{outline:2px solid var(--menta);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion: reduce){*{transition:none!important;animation:none!important}}

kbd{font-family:var(--mono);font-size:11px;color:var(--text-2);border:1px solid var(--line);
  border-bottom-width:2px;border-radius:5px;padding:1px 6px;background:var(--raised)}

/* ── Esqueleto ─────────────────────────────────────────────────────────────── */
.layout{display:flex;min-height:100vh}
.side{width:208px;background:var(--ink);border-right:1px solid var(--line-soft);
  padding:20px 10px;flex:none;display:flex;flex-direction:column;gap:2px}
.side .logo{font-weight:800;font-size:17px;font-stretch:122%;letter-spacing:-.01em;padding:0 12px 18px}
.side .logo span{color:var(--menta)}
.side a{display:flex;align-items:center;gap:10px;color:var(--text-2);padding:8px 12px;
  border-radius:8px;margin-bottom:2px;font-size:13.5px;font-weight:500;border-left:2px solid transparent}
.side a svg{flex:none;opacity:.75}
.side a:hover{color:var(--text)}
.side a.active{background:var(--surface);color:var(--text);border-left-color:var(--menta)}
.side .cnt-rail{margin-left:auto;font-family:var(--mono);font-size:11px;color:var(--st-pend-texto)}
/* El aviso de la contraseña inicial: como el contador, pero NO se oculta en móvil. */
.side .aviso-perfil{margin-left:auto;display:inline-flex;align-items:center;color:var(--st-pend)}
.side form{margin-top:auto;padding:12px 8px 0}
.main{flex:1;padding:28px;max-width:1100px;min-width:0}

.top{display:flex;justify-content:space-between;align-items:center;margin-bottom:22px;gap:12px;flex-wrap:wrap}
.top>div{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
h1{font-size:21px;font-weight:700;font-stretch:112%;letter-spacing:-.01em;display:flex;gap:10px;align-items:center}
h1 svg{color:var(--text-3)}
h3{font-size:15px;font-weight:650}

/* ── Superficies ───────────────────────────────────────────────────────────── */
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:20px;margin-bottom:16px}
/* El aviso ámbar de la casa: «esto pide algo de una persona». Nació como `aviso-huecos`
   en el folio; `aviso` es el mismo trazo con nombre genérico, para no ir clonando la
   regla cada vez que otra pantalla necesita decir lo mismo. */
.card.aviso-huecos,.card.aviso{border-color:rgba(192,138,32,.45);background:rgba(192,138,32,.06)}
.card.aviso{padding:14px 18px;margin-bottom:14px}
/* Un formulario de una columna no se lee a 1.100 px de ancho. */
.card.estrecha{max-width:520px}

/* v11 — patrones que estaban copiados a mano como style="" en media docena de vistas.
   La v6 mató los <style> por página; esto es la misma deriva por la otra puerta. */
h3.h-bloque{margin-bottom:12px}
h3.h-icono{margin-bottom:10px;display:flex;gap:8px;align-items:center}
.fila-lista{padding:8px 0;border-bottom:1px dashed var(--line)}
.fila-lista:last-child{border-bottom:none}
.meta{font-family:var(--mono);font-size:12px}

/* KPIs: regleta de cifras, no seis cajas */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:0;margin-bottom:22px;
  background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden}
.kpi{padding:16px 18px;text-align:left;border-right:1px solid var(--line-soft)}
.kpi:last-child{border-right:none}
.kpi .v{font-size:27px;font-weight:750;font-stretch:112%;letter-spacing:-.02em;
  font-variant-numeric:tabular-nums;color:var(--text)}
.kpi .l{font-family:var(--mono);font-size:10.5px;color:var(--text-3);margin-top:2px;
  letter-spacing:.04em;text-transform:uppercase}

/* ── Tablas → filas ────────────────────────────────────────────────────────── */
table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-family:var(--mono);font-weight:500;color:var(--text-3);font-size:10.5px;
  text-transform:uppercase;letter-spacing:.08em;padding:10px;border-bottom:1px solid var(--line)}
td{padding:11px 10px;border-bottom:1px solid var(--line-soft);color:var(--text-2);vertical-align:top}
tr:hover td{background:var(--surface)}
tr:last-child td{border-bottom:none}
td:first-child{color:var(--text)}
td b{font-weight:600;letter-spacing:-.005em}

/* ── Chips de estado: punto + etiqueta, nunca color a secas ───────────────── */
.badge{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px;
  font-weight:500;border:1px solid var(--line);border-radius:999px;padding:2px 10px 2px 8px;
  white-space:nowrap;color:var(--text-2);background:var(--raised)}
.badge::before{content:'';width:6px;height:6px;border-radius:50%;background:var(--text-3);flex:none}
.b-pendiente{color:var(--st-pend-texto);border-color:rgba(192,138,32,.4)}.b-pendiente::before{background:var(--st-pend)}
.b-aprobado{color:var(--st-ok-texto);border-color:rgba(46,169,142,.4)}.b-aprobado::before{background:var(--st-ok)}
.b-rechazado{color:var(--st-no-texto);border-color:rgba(220,90,80,.4)}.b-rechazado::before{background:var(--st-no)}
.b-informativo{color:var(--st-info-texto);border-color:rgba(91,139,216,.4)}.b-informativo::before{background:var(--st-info)}
/* Estados del lead: mismos colores en listado, ficha y embudo */
.b-nuevo{color:var(--text-2)}.b-nuevo::before{background:var(--text-3)}
.b-contactado{color:var(--emb-2);border-color:rgba(95,219,189,.35)}.b-contactado::before{background:var(--emb-2)}
.b-respondio{color:var(--st-info-texto);border-color:rgba(91,139,216,.4)}.b-respondio::before{background:var(--st-info)}
.b-reunion{color:var(--st-pend-texto);border-color:rgba(192,138,32,.4)}.b-reunion::before{background:var(--st-pend)}
.b-propuesta{color:var(--st-prop-texto);border-color:rgba(201,123,61,.45)}.b-propuesta::before{background:var(--st-prop)}
.b-ganado{color:var(--st-ok-texto);border-color:rgba(46,169,142,.4)}.b-ganado::before{background:var(--st-ok)}
.b-perdido{color:var(--st-no-texto);border-color:rgba(220,90,80,.4)}.b-perdido::before{background:var(--st-no)}

/* Prioridad del lead (v8): alta llama la atención sin confundirse con los estados;
   punto + etiqueta, nunca solo color (guía de estilo, accesibilidad) */
.b-prio-alta{color:var(--menta);border-color:rgba(58,218,184,.45)}.b-prio-alta::before{background:var(--menta)}
.b-prio-media{color:var(--st-pend-texto)}.b-prio-media::before{background:var(--st-pend)}
.b-prio-baja{color:var(--text-3)}.b-prio-baja::before{background:var(--text-3)}

/* ── Botones ───────────────────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;gap:8px;background:var(--menta);color:var(--menta-ink);
  border:1px solid transparent;border-radius:9px;padding:8px 15px;font-size:13.5px;font-weight:600;
  font-family:var(--disp);cursor:pointer}
.btn:hover{background:var(--menta-hover)}
.btn kbd{background:transparent;color:inherit;border-color:rgba(6,42,34,.35)}
.btn.ok{background:var(--menta);color:var(--menta-ink)}
.btn.no{background:transparent;border-color:rgba(220,90,80,.55);color:var(--st-no-texto)}
.btn.no:hover{background:rgba(220,90,80,.08)}
.btn.no kbd,.btn.ghost kbd{border-color:var(--line);color:inherit}
.btn.ghost{background:transparent;border-color:var(--line);color:var(--text-2)}
.btn.ghost:hover{background:var(--surface);color:var(--text)}
/* Un botón apagado tiene que VERSE apagado, y su porqué va escrito al lado. */
.btn.disabled,.btn:disabled{background:var(--raised);color:var(--text-3);cursor:not-allowed;border-color:var(--line-soft)}

/* ── Formularios ───────────────────────────────────────────────────────────── */
input,select,textarea{width:100%;background:var(--raised);border:1px solid var(--line);border-radius:9px;
  color:var(--text);padding:9px 12px;font-size:14px;font-family:inherit}
input::placeholder,textarea::placeholder{color:var(--text-3)}
textarea{min-height:110px;resize:vertical}
label{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--text-3);margin:14px 0 6px}
label .muted{text-transform:none;letter-spacing:0}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px;align-items:center}
.filters select,.filters input{width:auto;min-width:150px}
.flash{background:rgba(58,218,184,.08);border:1px solid rgba(58,218,184,.4);color:#8FE8D2;
  border-radius:10px;padding:10px 16px;margin-bottom:16px;font-size:14px}
/* v12 — un error que hay que leer entero (el de «puede que el correo haya salido»)
   no cabe en la línea fina de `.err`, que está pensada para un campo de formulario. */
.err.grande{font-size:14px;line-height:1.5;border:1px solid rgba(220,90,80,.45);
  background:rgba(220,90,80,.08);border-radius:10px;padding:10px 14px}
.muted{color:var(--text-2);font-size:14px}
.err{color:var(--st-no-texto);font-size:13px;margin-top:6px}

/* Pestañas de estado de la bandeja */
.seg{display:inline-flex;border:1px solid var(--line);border-radius:10px;overflow:hidden;margin-bottom:16px}
.seg a{font-size:13px;font-weight:550;color:var(--text-2);padding:8px 14px;border-right:1px solid var(--line);
  display:flex;gap:8px;align-items:center;border-radius:0;margin:0}
.seg a:last-child{border-right:none}
.seg a:hover{color:var(--text);background:var(--surface)}
.seg a.on{background:var(--surface);color:var(--text)}
.seg .cnt{font-family:var(--mono);font-size:10.5px;background:rgba(192,138,32,.15);
  color:var(--st-pend-texto);border-radius:99px;padding:1px 7px}

/* ── Dashboard ─────────────────────────────────────────────────────────────── */
.atencion{padding:0;overflow:hidden}
.atencion h3{padding:14px 18px;border-bottom:1px solid var(--line)}
.atencion .atencion-fila{display:flex;align-items:center;gap:12px;padding:11px 18px 11px 15px;
  border-bottom:1px solid var(--line-soft);border-left:3px solid transparent;
  color:var(--text);font-size:14px;border-radius:0;margin:0}
.atencion .atencion-fila:last-child{border-bottom:none}
.atencion .atencion-fila:hover{background:var(--surface);text-decoration:none}
.atencion .atencion-fila.urgente{border-left-color:var(--st-pend)}
.atencion .ico{margin-right:0;flex:none}
.vencida{color:var(--st-no-texto)}

.barra-fila{display:grid;grid-template-columns:110px 1fr 42px;align-items:center;gap:10px;margin-bottom:8px}
.barra-etiqueta{font-family:var(--mono);font-size:11px;color:var(--text-2);text-align:right}
.barra-pista{background:var(--raised);border-radius:4px;height:16px;overflow:hidden}
.barra{display:block;height:100%;border-radius:4px;transition:width .3s;min-width:4px}
.barra-valor{text-align:right;font-weight:600;font-variant-numeric:tabular-nums;font-size:13px;color:var(--text-2)}
/* El embudo: una magnitud, una tinta que se oscurece — no seis colores */
.b-fondo-nuevo{background:var(--emb-1)}
.b-fondo-contactado{background:var(--emb-2)}
.b-fondo-respondio{background:var(--emb-3)}
.b-fondo-reunion{background:var(--emb-4)}
.b-fondo-propuesta{background:var(--emb-5)}
.b-fondo-ganado{background:var(--emb-6)}
.b-fondo-agente{background:var(--emb-3)}

/* ── Timeline de la ficha ──────────────────────────────────────────────────── */
.timeline{border-left:2px solid var(--line);margin-left:8px;padding-left:16px}
.timeline .hito{position:relative;padding:8px 0}
.timeline .hito::before{content:'';position:absolute;left:-21px;top:14px;width:8px;height:8px;
  border-radius:50%;background:var(--line)}
.timeline .hito.nota::before{background:var(--menta)}
.timeline .cuando{font-family:var(--mono);font-size:11px;color:var(--text-3)}

/* ── Propuestas: tres opciones ─────────────────────────────────────────────── */
.precio{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-top:12px}
.precio .opcion{background:var(--raised);border:1px solid var(--line);border-radius:12px;padding:14px}
.precio .opcion.recomendada{border-color:var(--menta)}
.precio .nivel{font-family:var(--mono);font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--menta)}
.precio .importe{font-size:22px;font-weight:750;font-variant-numeric:tabular-nums;margin:6px 0}

.paginacion{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:14px;
  font-family:var(--mono);font-size:12.5px;color:var(--text-2)}

/* ── Calendario de contenidos ──────────────────────────────────────────────── */
.cal{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}
.cal .dia{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:10px;min-height:120px}
.cal .dia.hoy{border-color:var(--menta)}
.cal .dia h4{font-family:var(--mono);font-size:10.5px;color:var(--text-3);text-transform:uppercase;
  letter-spacing:.08em;margin-bottom:8px}
.cal .pieza{display:block;background:var(--raised);border:1px solid var(--line);border-radius:8px;
  padding:7px 8px;margin-bottom:6px;font-size:12.5px;color:var(--text)}
@media(max-width:800px){.cal{grid-template-columns:1fr}}

/* ── El folio: el texto exacto que saldrá, como papel ─────────────────────── */
.body-box{background:var(--paper);color:var(--paper-ink);border-radius:12px;padding:26px 30px;
  white-space:pre-wrap;font-family:var(--mono);font-size:13px;line-height:1.8;margin-top:12px;
  box-shadow:0 1px 0 rgba(242,238,228,.07),0 30px 80px -22px rgba(0,0,0,.85)}
.folio-remite{display:grid;grid-template-columns:58px 1fr;gap:4px 12px;font-family:var(--mono);
  font-size:11.5px;color:var(--paper-soft);background:var(--paper);border-radius:12px 12px 0 0;
  padding:18px 30px 14px;margin-top:12px;border-bottom:1px solid var(--paper-line)}
.folio-remite b{color:var(--paper-ink);font-weight:500;word-break:break-word}
.folio-remite+.body-box{border-radius:0 0 12px 12px;margin-top:0;box-shadow:0 30px 80px -22px rgba(0,0,0,.85)}
.folio-caption{display:flex;gap:8px;align-items:center;font-family:var(--mono);font-size:10.5px;
  color:var(--text-3);margin-top:10px}
.folio-caption svg{color:var(--st-ok);flex:none}
.body-box mark{background:rgba(192,138,32,.25);color:inherit;border-bottom:2px solid var(--st-pend);
  border-radius:2px;padding:0 2px}

/* ── El despacho ───────────────────────────────────────────────────────────── */
.progreso{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.progreso .cual{font-family:var(--mono);font-size:11.5px;color:var(--text-2);white-space:nowrap}
.progreso .pasos{display:flex;gap:4px;flex:1;min-width:80px}
.progreso .paso{height:4px;border-radius:2px;background:var(--raised);flex:1}
.progreso .paso.actual{background:var(--menta)}
.despacho-grid{display:grid;grid-template-columns:340px 1fr;gap:18px;align-items:start}
@media(max-width:900px){.despacho-grid{grid-template-columns:1fr}}
.despacho-grid .card{margin-bottom:14px}
.dato{display:grid;grid-template-columns:86px 1fr;gap:10px;font-size:13px;padding:4px 0}
.dato span:first-child{font-family:var(--mono);font-size:11px;color:var(--text-3);padding-top:2px}
.atajos-nota{font-family:var(--mono);font-size:11px;color:var(--text-3);margin-top:10px}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:16px}

/* ── Login ─────────────────────────────────────────────────────────────────── */
.login-body{min-height:100vh;display:grid;place-items:center;background:var(--ink)}
.login-box{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:36px;width:min(92vw,380px)}
.login-box h1{font-size:26px;font-stretch:122%;font-weight:800;margin-bottom:4px;display:block}
.login-box h1 span{color:var(--menta)}
.login-box>p{color:var(--text-2);font-size:14px;margin-bottom:10px}
.login-box button{width:100%;margin-top:22px;justify-content:center}
.login-box .rem{display:flex;gap:8px;align-items:center;margin-top:14px;font-size:13px;color:var(--text-2)}
.login-box .rem input{width:auto}
.login-box .rem label{margin:0;text-transform:none;letter-spacing:0;font-family:var(--disp);font-size:13px}

/* ── Móvil: pestañas abajo, donde llega el pulgar ─────────────────────────── */
@media(max-width:800px){
  .layout{flex-direction:column}
  .main{padding:16px;padding-bottom:76px}
  .grid2{grid-template-columns:1fr}
  .side{width:100%;flex-direction:row;align-items:center;gap:0;padding:0;
    position:fixed;left:0;right:0;bottom:0;z-index:10;border-right:none;
    border-top:1px solid var(--line);background:var(--surface)}
  .side .logo{display:none}
  .side a{flex:1;flex-direction:column;gap:3px;font-family:var(--mono);font-size:9px;
    padding:8px 2px 9px;border-left:none;border-radius:0;justify-content:center;text-align:center}
  .side a.active{background:transparent;color:var(--menta)}
  .side a .cnt-rail{display:none}
  .side a .aviso-perfil{margin-left:0;position:absolute;top:5px;margin-right:-26px}
  .side a{position:relative}
  .side a .et-nav{max-width:100%;overflow:hidden;text-overflow:ellipsis}
  .side form{display:none}
  .kpis{grid-template-columns:repeat(3,1fr)}
  .kpi{border-bottom:1px solid var(--line-soft)}
  .despacho-grid{grid-template-columns:1fr}
  .top{align-items:flex-start}
  /* v11 — en el móvil, la regleta de pasos empujaba «S saltar» fuera de la pantalla.
     Los puntos son decorativos; el «pieza X de Y» ya dice lo mismo con palabras. */
  .progreso{flex-wrap:wrap;gap:8px 12px}
  .progreso .pasos{display:none}
}

/* v13 — el manual servido en /manual. Es el único sitio de la app donde se lee un
   documento largo seguido, así que necesita ritmo de lectura propio: medida limitada,
   aire entre secciones y las tablas con su marco. */
.manual{max-width:74ch;line-height:1.65}
.manual h1{font-size:26px;margin:0 0 18px}
.manual h2{font-size:20px;margin:34px 0 10px;padding-top:18px;border-top:1px solid var(--line)}
.manual h1+h2{border-top:0;padding-top:0;margin-top:0}
.manual h3{font-size:16px;margin:24px 0 8px;color:var(--accent)}
.manual p{margin:0 0 12px}
.manual ul,.manual ol{margin:0 0 14px;padding-left:22px}
.manual li{margin-bottom:6px}
.manual code{font-family:var(--mono);font-size:.9em;background:var(--raised);padding:1px 5px;border-radius:4px}
.manual blockquote{margin:0 0 14px;padding:10px 14px;border-left:3px solid var(--line-soft);color:var(--text-2)}
.manual table{width:100%;border-collapse:collapse;margin:0 0 16px;display:block;overflow-x:auto}
.manual th,.manual td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.manual th{color:var(--text-2);font-weight:600;white-space:nowrap}
.manual hr{border:0;border-top:1px solid var(--line);margin:28px 0}
.manual a{color:var(--accent)}
@media(max-width:640px){.manual h2{font-size:18px}}

/* ── v14 · El folio cuando el correo lleva formato ─────────────────────────── */
/* El folio de siempre pinta texto plano con `white-space:pre-wrap` y monoespaciada:
   enseña el texto tal cual, que era lo que salía. Un correo con formato hay que pintarlo
   como lo va a ver quien lo reciba, o el folio dejaría de ser una promesa y pasaría a ser
   una aproximación. Por eso este bloque imita al buzón, no a la app. */
.body-box.con-formato{white-space:normal;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.55}
.body-box.con-formato p{margin:0 0 12px}
.body-box.con-formato p:last-child{margin-bottom:0}
.body-box.con-formato h2,.body-box.con-formato h3{font-family:inherit;margin:20px 0 10px;line-height:1.3}
.body-box.con-formato h2{font-size:19px}
.body-box.con-formato h3{font-size:16px}
.body-box.con-formato ul,.body-box.con-formato ol{margin:0 0 12px;padding-left:22px}
.body-box.con-formato li{margin:0 0 4px}
.body-box.con-formato a{color:#12705C;text-decoration:underline}
.body-box.con-formato img{max-width:100%;height:auto;border-radius:4px}
.body-box.con-formato blockquote{margin:0 0 12px;padding-left:14px;border-left:3px solid var(--paper-line);color:var(--paper-soft)}
.body-box.con-formato table{border-collapse:collapse;max-width:100%}
/* La firma y el pie legal se ven, pero se ven como lo que son: algo que la casa pega
   debajo y que el humano tiene que poder distinguir de lo que escribió el agente. */
.body-box .firma-correo{margin-top:22px;padding-top:16px;border-top:1px solid var(--paper-line)}
.body-box .pie-legal{margin-top:18px;padding-top:14px;border-top:1px dashed var(--paper-line);
  font-size:12px;line-height:1.5;color:var(--paper-soft)}
.body-box .pie-legal a{color:var(--paper-soft)}

/* ── v14 · El editor ───────────────────────────────────────────────────────── */
.editor{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:var(--raised)}
.editor-barra{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;
  background:var(--surface);border-bottom:1px solid var(--line)}
.editor-btn{background:none;border:1px solid transparent;border-radius:6px;color:var(--text-2);
  font-family:var(--disp);font-size:12.5px;min-width:30px;height:28px;padding:0 8px;cursor:pointer;line-height:1}
.editor-btn:hover{background:var(--raised);color:var(--text);border-color:var(--line)}
.editor-btn:active{background:var(--line)}
.editor-sep{width:1px;height:18px;background:var(--line);margin:0 5px}
.editor-lienzo{display:none;min-height:320px;padding:18px 20px;background:var(--paper);color:var(--paper-ink);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif;
  font-size:15px;line-height:1.55;outline:none;overflow-wrap:anywhere}
.editor-vivo .editor-lienzo{display:block}
.editor-lienzo:focus{box-shadow:inset 0 0 0 2px var(--menta)}
.editor-lienzo p{margin:0 0 12px}
.editor-lienzo h3{font-size:16px;margin:18px 0 8px}
.editor-lienzo ul,.editor-lienzo ol{margin:0 0 12px;padding-left:22px}
.editor-lienzo a{color:#12705C}
.editor-lienzo img{max-width:100%;height:auto}
.editor textarea{border:0;border-radius:0;margin:0;display:block;width:100%}
.editor textarea.editor-oculto{display:none}
.editor-ayuda{margin-top:6px;font-size:12.5px}
/* El folio de una pieza en texto plano ya no necesita `pre-wrap`: los saltos vienen como
   <br> desde el montaje, que es el mismo que sale por correo. Con las dos cosas a la vez
   cada salto se vería doble. */
.body-box.texto-plano{white-space:normal}