/* views/mensajes.css · layout propio de la vista; todos los selectores bajo .v-mensajes (SPEC 3)
   Pantalla Mensajes (4.6) y redactor (4.6.3). Solo tokens de styles.css: funciona igual en claro y oscuro.
   El redactor vive en la hoja del núcleo: views/mensajes.js le suma la clase .v-mensajes al <dialog>. */

/* ==========================================================================
   Pantalla
   ========================================================================== */
.v-mensajes .v-mensajes__tabs { margin: 0 0 var(--sp-2); }
.v-mensajes .v-mensajes__cuerpo { min-width: 0; }
.v-mensajes .v-mensajes__grupo:first-child .grupo { margin-top: var(--sp-5); }
.v-mensajes .v-mensajes__lista { list-style: none; margin: 0; padding: 0; }
.v-mensajes .v-mensajes__pie-t { margin: var(--sp-6) 0 0; max-width: var(--read-max); }
.v-mensajes .v-mensajes__sep { color: var(--text-3); }

/* Persona que firma (emblema + nombre de pila) */
.v-mensajes .v-mensajes__firma { display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.v-mensajes .v-mensajes__firma .emb { flex: none; }
.v-mensajes .v-mensajes__firma-n { min-width: 0; font-size: var(--fs-small); font-weight: 600; color: var(--text-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.v-mensajes .v-mensajes__firma.is-sin .v-mensajes__firma-n { color: var(--text-2); font-weight: 500; }
/* "Lo manda" (H36): rótulo chico arriba, la persona (o "nadie todavía · Lo mando yo") abajo */
.v-mensajes .v-mensajes__manda { display: grid; justify-items: start; gap: 2px; min-width: 0; }
.v-mensajes .v-mensajes__manda-l { font-size: var(--fs-caption); color: var(--text-3); }
.v-mensajes .v-mensajes__tomar { position: relative; z-index: 2; font-size: var(--fs-small); }
.v-mensajes .v-mensajes__tomar[aria-disabled="true"] { opacity: var(--disabled-opacity); cursor: not-allowed; }
@media (max-width: 1023.98px) { .v-mensajes .v-mensajes__tomar { min-height: 44px; margin-block: -10px; } }   /* 44 px (H08) */
/* Falta el contacto que corresponde (H37): se dice cuál, en ámbar */
.v-mensajes .v-mensajes__falta { color: var(--warn); font-weight: 500; }
.v-mensajes .v-mensajes__firma.is-nadie .v-mensajes__firma-n { color: var(--text-3); font-weight: 400; }

/* Revisión (ícono + palabra; el color nunca va solo) */
.v-mensajes .v-mensajes__rev { display: inline-flex; align-items: flex-start; gap: 6px; min-width: 0; font-size: var(--fs-small); font-weight: 600; line-height: 1.35; }
.v-mensajes .v-mensajes__rev > .ico { flex: none; margin-top: 1px; }
.v-mensajes .v-mensajes__rev.is-ok { color: var(--ok); }
.v-mensajes .v-mensajes__rev.is-atencion { color: var(--warn); }
.v-mensajes .v-mensajes__rev.is-trabado { color: var(--danger); }

/* ---------- Para enviar: una fila por mensaje, toda la fila se toca (capa-botón "Preparar") ---------- */
.v-mensajes .v-mensajes__sug { position: relative; border-bottom: 1px solid var(--line); }
.v-mensajes .v-mensajes__sug-abrir { appearance: none; position: absolute; inset: 0; z-index: 1; width: 100%; margin: 0; padding: 0; border: 0; border-radius: 0;
  background: transparent; cursor: pointer; }
.v-mensajes .v-mensajes__sug-abrir:focus-visible { outline: 2px solid var(--focus); outline-offset: -2px; }
.v-mensajes .v-mensajes__sug-btn {
  box-sizing: border-box; width: 100%; margin: 0; text-align: left;
  display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; grid-template-areas: "ico main lado";
  align-items: center; gap: 4px 16px; min-height: 76px; padding: 14px 12px 14px 16px;
  box-shadow: inset 3px 0 0 transparent; transition: background-color var(--dur-1) var(--ease);
}
.v-mensajes .v-mensajes__sug:hover .v-mensajes__sug-btn { background: var(--hover); }
.v-mensajes .v-mensajes__sug:active .v-mensajes__sug-btn { background: var(--press); }
.v-mensajes .v-mensajes__sug[data-nivel="trabado"] .v-mensajes__sug-btn { box-shadow: inset 3px 0 0 var(--danger-fill); }
.v-mensajes .v-mensajes__sug[data-nivel="atencion"] .v-mensajes__sug-btn { box-shadow: inset 3px 0 0 var(--warn-fill); }
.v-mensajes .v-mensajes__sug-ico { grid-area: ico; align-self: start; display: grid; place-items: center; height: 22px; color: var(--text-2); }
.v-mensajes .v-mensajes__sug-main { grid-area: main; display: grid; gap: 3px; min-width: 0; }
.v-mensajes .v-mensajes__sug-t { font-size: var(--fs-body); line-height: 1.3; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__sug-d { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-2); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__sug-m { font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--text-3); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__sug-lado { grid-area: lado; display: grid; grid-template-columns: 150px 228px auto; grid-template-areas: "firma rev cta"; align-items: center; gap: 8px 16px; min-width: 0; }
.v-mensajes .v-mensajes__sug-firma { grid-area: firma; display: flex; min-width: 0; }
.v-mensajes .v-mensajes__sug-lado > .v-mensajes__rev { grid-area: rev; }
.v-mensajes .v-mensajes__sug-cta { grid-area: cta; pointer-events: none; }
.v-mensajes .v-mensajes__sug:hover .v-mensajes__sug-cta { background: color-mix(in srgb, var(--bg-sunken), var(--text) 6%); }
@container main (max-width: 1099.98px) {
  .v-mensajes .v-mensajes__sug-btn { grid-template-columns: 24px minmax(0, 1fr); grid-template-areas: "ico main" ". lado"; }
  .v-mensajes .v-mensajes__sug-lado { grid-template-columns: minmax(96px, auto) minmax(0, 1fr) auto; margin-top: 8px; }
}
@container main (max-width: 519.98px) {
  .v-mensajes .v-mensajes__sug-btn { padding: 14px 4px 14px 12px; gap: 4px 12px; }
  .v-mensajes .v-mensajes__sug-lado { grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "rev rev" "firma cta"; }
}

/* ---------- Enviados ---------- */
.v-mensajes .v-mensajes__env-lista { list-style: none; margin: var(--sp-4) 0 0; padding: 0; border-top: 1px solid var(--line); }
.v-mensajes .v-mensajes__env { border-bottom: 1px solid var(--line); }
.v-mensajes .v-mensajes__env-sum {
  display: grid; grid-template-columns: 116px 20px minmax(0, 1fr) 128px auto 16px;
  grid-template-areas: "when ico main quien est chev"; align-items: center; gap: 4px 12px;
  min-height: 64px; padding: 10px 12px; list-style: none; cursor: pointer; transition: background-color var(--dur-1) var(--ease);
}
.v-mensajes .v-mensajes__env-sum::-webkit-details-marker { display: none; }
.v-mensajes .v-mensajes__env-sum::marker { content: ""; }
.v-mensajes .v-mensajes__env-sum:hover { background: var(--hover); }
.v-mensajes .v-mensajes__env-when { grid-area: when; font-size: var(--fs-small); color: var(--text-2); white-space: nowrap; }
.v-mensajes .v-mensajes__env-ico { grid-area: ico; display: grid; place-items: center; color: var(--text-2); }
.v-mensajes .v-mensajes__env-main { grid-area: main; display: grid; gap: 2px; min-width: 0; }
.v-mensajes .v-mensajes__env-t { font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__env-d { font-size: var(--fs-caption); color: var(--text-3); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__env-sum > .v-mensajes__firma { grid-area: quien; }
.v-mensajes .v-mensajes__env-est { grid-area: est; justify-self: start; }
.v-mensajes .v-mensajes__env-chev { grid-area: chev; display: grid; place-items: center; color: var(--text-3); transition: rotate var(--dur-2) var(--ease); }
.v-mensajes .v-mensajes__env details[open] .v-mensajes__env-chev { rotate: 180deg; }
.v-mensajes .v-mensajes__env.is-descartado .v-mensajes__env-t { color: var(--text-2); }
.v-mensajes .v-mensajes__env-copia { display: grid; gap: 10px; padding: 4px 12px 20px 160px; min-width: 0; }
.v-mensajes .v-mensajes__env-copia .mail { max-width: 720px; }
.v-mensajes .v-mensajes__env-copia .mail__actions { margin-top: 0; }
.v-mensajes .v-mensajes__env-trs, .v-mensajes .v-mensajes__env-reg { margin: 0; }
@container main (max-width: 899.98px) {
  .v-mensajes .v-mensajes__env-sum { grid-template-columns: 20px minmax(0, 1fr) auto auto; grid-template-areas: "ico main main chev" ". when quien est"; }
  .v-mensajes .v-mensajes__env-copia { padding-left: 44px; }
}
@container main (max-width: 519.98px) {
  .v-mensajes .v-mensajes__env-sum { grid-template-columns: 20px minmax(0, 1fr) auto; grid-template-areas: "ico main chev" ". when when" ". quien est"; padding-inline: 4px; }
  .v-mensajes .v-mensajes__env-copia { padding: 4px 0 20px; }
}

/* ---------- Plantillas ---------- */
.v-mensajes .v-mensajes__pl { margin-top: var(--sp-4); min-width: 0; }
.v-mensajes .v-mensajes__pl--sel { display: grid; grid-template-columns: minmax(280px, 360px) minmax(0, 1fr); align-items: start; gap: var(--sp-7); }
.v-mensajes .v-mensajes__pl-col { min-width: 0; }
.v-mensajes .v-mensajes__pl-det { min-width: 0; position: sticky; top: calc(var(--toolbar-h) + var(--sp-3) + env(safe-area-inset-top, 0px)); max-height: calc(100dvh - var(--toolbar-h) - var(--sp-6)); overflow-y: auto; overscroll-behavior: contain; padding: 0 4px var(--sp-6) 2px; }
.v-mensajes .v-mensajes__pl-ctl { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); }
.v-mensajes .v-mensajes__pl-ctl .segscroll { margin: 0; padding: 0; max-width: 100%; }
.v-mensajes .v-mensajes__buscar { flex: 1 1 240px; width: auto; min-width: 0; }
.v-mensajes .v-mensajes__pl-n { flex-basis: 100%; margin: 0; }
.v-mensajes .v-mensajes__pl-grupo .grupo { margin: var(--sp-6) 0 0; }
.v-mensajes .v-mensajes__pl-lista { list-style: none; margin: 0; padding: 0; }
.v-mensajes .v-mensajes__pl-item {
  display: grid; grid-template-columns: 20px minmax(0, 1fr) auto 16px; align-items: center; gap: 10px;
  min-height: 52px; padding: 8px 8px 8px 10px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none;
  transition: background-color var(--dur-1) var(--ease);
}
.v-mensajes .v-mensajes__pl-item:hover { background: var(--hover); }
.v-mensajes .v-mensajes__pl-item[aria-current="page"] { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--sel); }
.v-mensajes .v-mensajes__pl-item { grid-template-areas: "ico txt tags chev"; }
.v-mensajes .v-mensajes__pl-ico { grid-area: ico; display: grid; place-items: center; color: var(--text-2); }
.v-mensajes .v-mensajes__pl-txt { grid-area: txt; display: grid; gap: 1px; min-width: 0; }
.v-mensajes .v-mensajes__pl-t { font-size: var(--fs-small); font-weight: 600; line-height: 1.35; color: var(--text-strong); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__pl-id { font: 400 var(--fs-caption)/1.3 var(--font-mono); color: var(--text-3); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__pl-tags { grid-area: tags; display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
.v-mensajes .v-mensajes__pl-tags .tag + .tag { margin-inline-start: 0; }
.v-mensajes .v-mensajes__pl-chev { grid-area: chev; color: var(--text-3); }
@container main (max-width: 519.98px) {
  .v-mensajes .v-mensajes__pl-item { grid-template-columns: 20px minmax(0, 1fr) 16px; grid-template-areas: "ico txt chev" ". tags chev"; row-gap: 4px; }
  .v-mensajes .v-mensajes__pl-tags { justify-content: flex-start; }
}
.v-mensajes .v-mensajes__det { display: grid; gap: var(--sp-2); min-width: 0; }
.v-mensajes .v-mensajes__det > .t-h2 { overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__volver { display: none; justify-self: start; margin-left: -8px; }
.v-mensajes .v-mensajes__det-id { margin: 0 0 var(--sp-2); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__det-sec { display: grid; gap: var(--sp-3); margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); min-width: 0; }
.v-mensajes .v-mensajes__molde { max-width: 720px; }
.v-mensajes .v-mensajes__molde--wa { max-width: 520px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface-2); box-sizing: border-box; }
.v-mensajes .v-mensajes__molde-body { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.55; }
.v-mensajes .v-mensajes__ent { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.v-mensajes .v-mensajes__ent li { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; min-width: 0; }
.v-mensajes .v-mensajes__ent-t { font-weight: 600; color: var(--text-strong); }
.v-mensajes .v-mensajes__ent-d { flex-basis: 100%; overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.v-mensajes .v-mensajes__probar { max-width: 440px; }
.v-mensajes .v-mensajes__det-previa { display: grid; gap: var(--sp-2); min-width: 0; }
.v-mensajes .v-mensajes__det-previa .avisos { border-top: 1px solid var(--line); }
.v-mensajes .v-mensajes__demo-toast { max-width: 520px; animation: none; }
.v-mensajes .v-mensajes__demo-vacio { margin: 0; max-width: 420px; border: 1px dashed var(--line-strong); border-radius: var(--r-lg); }
@container main (max-width: 899.98px) {
  .v-mensajes .v-mensajes__pl--sel { display: block; }
  .v-mensajes .v-mensajes__pl--sel .v-mensajes__pl-col { display: none; }
  .v-mensajes .v-mensajes__pl-det { position: static; max-height: none; overflow: visible; padding: 0; }
  .v-mensajes .v-mensajes__volver { display: inline-flex; }
}

/* Revisión debajo de la burbuja de WhatsApp (en el mail va en su pie) */
.v-mensajes .v-mensajes__checks { display: flex; flex-wrap: wrap; gap: 6px 14px; max-width: 360px; margin: 10px 0 0; font-size: var(--fs-caption); }

/* ==========================================================================
   Redactor (hoja ancha; a pantalla completa en compacto, acción fija abajo)
   ========================================================================== */
.v-mensajes.hoja .hoja__bar { grid-template-columns: 1fr minmax(0, max-content) 1fr; gap: 8px; }
.v-mensajes.hoja .hoja__title { min-width: 0; }   /* el título largo baja de línea (styles.css), sin cortarse */
.v-mensajes.hoja .hoja__body { gap: var(--sp-4); }
@media (min-width: 1024px) { .v-mensajes.hoja { max-height: min(92dvh, 980px); } }
@media (max-width: 1023.98px) {
  .v-mensajes.hoja, .v-mensajes.hoja.hoja--ancha {
    width: 100%; max-width: none; height: 100dvh; max-height: none; margin: 0; border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px); box-sizing: border-box;
  }
  .v-mensajes.hoja .hoja__grabber { display: none; }
}
.v-mensajes .v-mensajes__red { display: grid; gap: var(--sp-4); min-width: 0; }

/* Tanda: "1 de 6 · Hapag-Lloyd" */
.v-mensajes .v-mensajes__tanda { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "t b" "r b"; align-items: center; gap: 2px 12px;
  padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); }
.v-mensajes .v-mensajes__tanda-t { grid-area: t; margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__tanda-r { grid-area: r; margin: 0; }
.v-mensajes .v-mensajes__tanda-b { grid-area: b; display: flex; gap: 8px; }
@media (max-width: 599.98px) {
  .v-mensajes .v-mensajes__tanda { grid-template-columns: minmax(0, 1fr); grid-template-areas: "t" "r" "b"; }
  .v-mensajes .v-mensajes__tanda-b { margin-top: 6px; }
  .v-mensajes .v-mensajes__tanda-b > .btn { flex: 1; }
}

/* Canal, idioma y "Ver variables" */
.v-mensajes .v-mensajes__red-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.v-mensajes .v-mensajes__red-segs { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; max-width: 100%; }
.v-mensajes .v-mensajes__red-segs .segscroll { margin: 0; padding: 0; max-width: 100%; }
.v-mensajes .v-mensajes__vervar { min-height: 32px; color: var(--text-2); }
.v-mensajes .v-mensajes__red-meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 16px; margin: -6px 0 0; }
.v-mensajes .v-mensajes__mono { font-family: var(--font-mono); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__red-firma { display: inline-flex; align-items: center; gap: 6px; }
.v-mensajes .v-mensajes__red-firma b { font-weight: 600; color: var(--text-strong); }

/* Datos que faltan (entradas) y contacto */
.v-mensajes .v-mensajes__datos { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-radius: var(--r-lg); background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); min-width: 0; }
.v-mensajes .v-mensajes__campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: var(--sp-4); min-width: 0; }
.v-mensajes .v-mensajes__campo { min-width: 0; }
.v-mensajes .v-mensajes__campo--ancho { grid-column: 1 / -1; }
.v-mensajes .v-mensajes__subcampo { margin-top: var(--sp-3); }
.v-mensajes .v-mensajes__datos .campo__input, .v-mensajes .v-mensajes__datos select, .v-mensajes .v-mensajes__datos textarea { background: var(--surface); }
.v-mensajes .v-mensajes__datos .seg { background: var(--bg-sunken); }
.v-mensajes .v-mensajes__contacto { display: grid; gap: var(--sp-3); padding-top: var(--sp-4); border-top: 1px solid var(--line); min-width: 0; }
.v-mensajes .v-mensajes__datos > .t-h3 + .v-mensajes__contacto { padding-top: 0; border-top: 0; }
.v-mensajes .v-mensajes__contacto-t { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 600; color: var(--danger); overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__contacto-t > .ico { flex: none; }
.v-mensajes .v-mensajes__contacto-l { margin: -6px 0 0; }
.v-mensajes .v-mensajes__contacto-a { margin: 0; }

/* Vista previa, edición y herramientas */
.v-mensajes .v-mensajes__red-estado:empty, .v-mensajes .v-mensajes__red-extra:empty, .v-mensajes .v-mensajes__red-aviso:empty { display: none; }
.v-mensajes .v-mensajes__red-previa { min-width: 0; }
.v-mensajes .v-mensajes__red-previa:focus { outline: none; }
.v-mensajes .v-mensajes__red-previa .mail { max-width: none; }
.v-mensajes .v-mensajes__editor {
  display: block; width: 100%; box-sizing: border-box; min-height: 280px; margin: 0; padding: 10px 12px;
  border: 1px solid var(--control-border); border-radius: var(--r-md); background: var(--surface); color: var(--text);
  font: inherit; line-height: 1.55; white-space: pre-wrap; resize: vertical;
}
.v-mensajes .v-mensajes__editor:focus { border-color: var(--focus); box-shadow: 0 0 0 3px var(--accent-soft); outline: none; }
.v-mensajes .wa__bubble .v-mensajes__editor { min-height: 150px; }
.v-mensajes .v-mensajes__herr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: calc(var(--sp-2) * -1); }
.v-mensajes .v-mensajes__herr > .btn--tertiary:first-child { margin-inline-start: -8px; }
.v-mensajes .v-mensajes__herr-sep { flex: 1 1 auto; }
.v-mensajes .v-mensajes__editado { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; color: var(--warn); }
.v-mensajes .v-mensajes__red-extra { display: grid; gap: var(--sp-3); min-width: 0; }

/* Notas del redactor: "¿Lo enviaste?", "¿Cómo mandás los mails?", "¿No se abrió tu correo?" */
.v-mensajes .v-mensajes__nota { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px;
  padding: 12px 14px; border-radius: var(--r-md); background: var(--surface-2); box-shadow: inset 3px 0 0 var(--seg-done); }
.v-mensajes .v-mensajes__nota--volviste { background: var(--ok-bg); box-shadow: inset 3px 0 0 var(--ok-fill); }
.v-mensajes .v-mensajes__nota-txt { flex: 1 1 240px; min-width: 0; }
.v-mensajes .v-mensajes__nota-t { margin: 0; font-weight: 600; color: var(--text-strong); }
.v-mensajes .v-mensajes__nota-l { margin: 2px 0 0; font-size: var(--fs-small); color: var(--text-2); }
.v-mensajes .v-mensajes__nota-a { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; min-width: 0; }
.v-mensajes .v-mensajes__nota-a > .btn { white-space: normal; text-align: left; height: auto; padding-block: 6px; }
.v-mensajes .v-mensajes__copia { display: grid; gap: var(--sp-2); min-width: 0; }
.v-mensajes .v-mensajes__copia .copiamail { margin-top: 0; max-width: none; }
.v-mensajes .v-mensajes__modo { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; margin: 0; }
@media (max-width: 599.98px) {
  .v-mensajes .v-mensajes__nota-a { flex-basis: 100%; }
  .v-mensajes .v-mensajes__nota-a > .btn { flex: 1 1 100%; justify-content: flex-start; }
}

/* Botones del pie: la principal a la derecha (abajo y a todo el ancho en el celular) */
.v-mensajes .v-mensajes__pie { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.v-mensajes .v-mensajes__pie-sec { display: flex; flex-wrap: wrap; gap: 8px; }
@media (max-width: 599.98px) {
  .v-mensajes .v-mensajes__pie { display: grid; grid-template-columns: minmax(0, 1fr); }
  .v-mensajes .v-mensajes__pie-sec { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); }
  .v-mensajes .v-mensajes__pie-sec > .btn { min-width: 0; padding-inline: 10px; white-space: normal; text-align: center; line-height: 1.2; }
  .v-mensajes .v-mensajes__pie > .btn--primary { width: 100%; min-height: 50px; border-radius: var(--r-pill); font-size: var(--fs-body); }
}

/* Elegir plantilla, registrar envío y fin de la tanda */
.v-mensajes .v-mensajes__elegir .lista__label { overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__elegir .chip { flex: none; }
.v-mensajes .v-mensajes__reg-resumen { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 0; padding: 10px 12px; border-radius: var(--r-md); background: var(--surface-2); min-width: 0; overflow-wrap: anywhere; }
.v-mensajes .v-mensajes__reg-resumen > .ico { flex: none; color: var(--text-2); }
.v-mensajes .v-mensajes__reg-resumen b { color: var(--text-strong); }
.v-mensajes .v-mensajes__fin { padding: var(--sp-6) var(--sp-4) var(--sp-2); }
.v-mensajes .v-mensajes__fin-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.v-mensajes .v-mensajes__fin-lista li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.v-mensajes .v-mensajes__fin-t { min-width: 0; font-size: var(--fs-small); font-weight: 600; color: var(--text-strong); overflow-wrap: anywhere; }

@media (prefers-reduced-motion: reduce) {
  .v-mensajes .v-mensajes__env-chev { transition: none; }
}

/* Upgrade 20/10/26: sin barras de color (el nivel lo dice la línea de revisión); logo del cliente con insignia del canal */
.v-mensajes .v-mensajes__sug[data-nivel] .v-mensajes__sug-btn { box-shadow: none; }
.v-mensajes .v-mensajes__sug-logo { position: relative; flex: none; display: inline-grid; align-self: start; margin-top: 2px; }
.v-mensajes .v-mensajes__sug-canal { position: absolute; right: -5px; bottom: -4px; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%;
  background: var(--surface); color: var(--text-2); box-shadow: 0 0 0 1px var(--line), 0 1px 2px rgb(0 0 0 / .08); }
.v-mensajes .v-mensajes__pl-item[aria-current="page"] { box-shadow: none; background: var(--side-active); }
.v-mensajes .v-mensajes__nota, .v-mensajes .v-mensajes__nota--volviste { box-shadow: none; }

/* ==========================================================================
   v20 · El cuadro del mail en la vista previa (facturas del reclamo, datos de la confirmación…)
   La copia con formato lleva sus propios estilos en línea (IMC.mail.tabla); acá, tokens: igual de día y de noche.
   .mtabla es de este archivo y la usa también la hoja del estado de cuenta (views/pdf.js).
   ========================================================================== */
.v-mensajes .mail__body:has(.mtabla) { max-width: none; }
:is(.v-mensajes, .v-pdf) .mtabla-caja { display: block; max-width: 100%; overflow-x: auto; margin: 10px 0 14px; white-space: normal; }
:is(.v-mensajes, .v-pdf) .mtabla { border-collapse: collapse; font: 400 14px/1.35 var(--font-ui); color: var(--text); }
:is(.v-mensajes, .v-pdf) .mtabla :is(th, td) { padding: 5px 9px; border: 1px solid var(--line-strong); text-align: left; vertical-align: top; white-space: nowrap; overflow-wrap: normal; }
:is(.v-mensajes, .v-pdf) .mtabla:not(.mtabla--kv) tbody td:first-child { white-space: normal; min-width: 6ch; }
:is(.v-mensajes, .v-pdf) .mtabla--kv tbody td { white-space: normal; overflow-wrap: anywhere; min-width: 16ch; }
:is(.v-mensajes, .v-pdf) .mtabla thead th { background: var(--surface-2); font-weight: 700; color: var(--text-strong); white-space: nowrap; }
:is(.v-mensajes, .v-pdf) .mtabla .is-der { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
:is(.v-mensajes, .v-pdf) .mtabla tfoot td { background: var(--surface-2); font-weight: 700; color: var(--text-strong); }
:is(.v-mensajes, .v-pdf) .mtabla--kv tbody th { background: var(--surface-2); font-weight: 600; color: var(--text-strong); white-space: nowrap; }
.v-mensajes .v-mensajes__tabla-nota { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--text-2); }
.v-mensajes .v-mensajes__tabla-nota > .ico { flex: none; margin-top: 2px; }
/* El cuadro en la hoja del estado de cuenta (views/pdf.js) */
.v-pdf .v-pdf__cuadro { display: grid; gap: 6px; min-width: 0; }
.v-pdf .v-pdf__cuadro-t { margin: 0; font: 600 var(--fs-small)/1.3 var(--font-ui); color: var(--text-strong); }
.v-pdf .v-pdf__cuadro .mtabla-caja { margin: 8px 0 0; max-height: 320px; overflow: auto; }
.v-pdf .v-pdf__cuadro-ver > summary { font-size: var(--fs-small); }
.v-pdf .v-pdf__cuadro-a { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 2px 0 0; }