/* =====================================================================
   BLOQUE 22 — Factura por email: botón redondo «Enviar por email»,
   ventana de envío (Para, CC, asunto, mensaje, adjunto) y marca
   «Enviada el …». Tokens de bloque4/bloque8: Noche y Día sin colores
   sueltos. Estilos del Bloque 22 de app.js.
   ===================================================================== */

/* Ventana: algo más estrecha que las anchas (formulario de una columna) */
.b9-dlg.b22-dlg{width:min(640px, 100%);}
.b22-dlg .b9-dlg-cuerpo{display:flex; flex-direction:column; gap:12px;}
.b22-form{display:flex; flex-direction:column; gap:12px; min-width:0;}
.b22-form .b7-campo{margin:0;}
.b22-form .b7-campo textarea{min-height:170px; line-height:1.5;}
.b22-pista{margin-top:-6px;}

/* CC: «Copia para mí» + otros */
.b22-cc{display:flex; flex-direction:column; gap:10px; padding:12px; border-radius:var(--r-card); border:1px solid var(--line); background:var(--bg);}
.b22-cc .b4-switch-fila{margin:0; padding:10px 12px;}
.b22-cc-yo{font-size:.8rem; font-weight:600; color:var(--ink-soft); overflow-wrap:anywhere;}

/* Adjunto */
.b22-adj{display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:var(--r-card);
  background:var(--b4-az-bg); border:1px solid var(--line); min-width:0;}
.b22-adj-ico{width:42px; height:42px; flex:none; border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--b4-ro-ink);}
.b22-adj-ico .ico-set{width:20px; height:20px;}
.b22-adj-tx{display:flex; flex-direction:column; min-width:0; flex:1 1 auto;}
.b22-adj-nom{font-size:.95rem; font-weight:800; color:var(--b4-az-ink); overflow-wrap:anywhere;}
.b22-adj-tam{font-size:.8rem; font-weight:600; color:var(--ink-soft);}
.b22-adj-chip{flex:none; background:var(--surface); color:var(--b4-az-ink);}
.b22-adj-grande, .b22-adj-error{background:var(--b4-ro-bg);}
.b22-adj-grande .b22-adj-tam, .b22-adj-error .b22-adj-tam{color:var(--b4-ro-ink); font-weight:800;}

/* Sin Gmail: conectar o enviarlo desde tu correo */
.b22-sin-gmail{display:grid; grid-template-columns:auto minmax(0,1fr); gap:10px 12px; align-items:start; padding:14px;
  border-radius:var(--r-card); background:var(--b4-am-bg); border:1px solid var(--line);}
.b22-sin-gmail[hidden]{display:none;}
.b22-sg-ico{width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:var(--surface); color:var(--b4-am-ink);}
.b22-sg-ico .ico-set{width:18px; height:18px;}
.b22-sg-tx{display:flex; flex-direction:column; gap:3px; min-width:0;}
.b22-sg-tx strong{font-size:.92rem; color:var(--b4-am-ink);}
.b22-sg-tx span{font-size:.8rem; color:var(--ink-soft);}
.b22-sg-acc{grid-column:1 / -1; display:flex; gap:8px; flex-wrap:wrap;}
.b22-sg-acc .btn{display:inline-flex; align-items:center; gap:8px; min-height:44px; padding:0 18px; font-weight:800;}
.b22-sg-acc .ico-set{width:18px; height:18px;}

/* Pie: Cancelar + Enviar */
.b22-dlg .b9-dlg-pie{justify-content:flex-end;}
.b22-enviar{display:inline-flex; align-items:center; gap:8px;}
.b22-enviar .ico-set{width:18px; height:18px;}
.b22-enviar:disabled{opacity:.55; cursor:default;}

/* Botón redondo en la tarjeta y en la factura abierta */
.b22-acc-mail{color:var(--b4-az-ink);}
.b22-mail-grande{display:inline-flex; align-items:center; gap:8px;}
.b22-mail-grande .ico-set{width:18px; height:18px;}

/* Marca «Enviada el 2 oct a …» */
.b22-enviada{display:inline-flex; align-items:center; gap:6px; max-width:100%; align-self:flex-start; padding:4px 10px; border-radius:var(--r-pill);
  background:var(--b4-ok-bg); color:var(--b4-ok-ink); font-size:.74rem; font-weight:800; min-width:0;}
.b22-enviada .ico-set{width:14px; height:14px; flex:none;}
.b22-enviada-tx{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
.b22-enviada-ed{margin-top:4px;}

@media (max-width:560px){
  .b22-dlg .b9-dlg-pie > *{flex:1 1 0; justify-content:center;}
  .b22-sg-acc .btn{flex:1 1 100%; justify-content:center;}
  .b22-adj-chip{display:none;}
  .b22-form .b7-campo textarea{min-height:150px;}
}