/* LAS CUENTAS DE CORREO CONECTADAS (fase 1 de docs/central/plan-correo-oauth2-2026-10-14.md; diseño
   docs/central/correo-oauth2-2026-10-14.md §4): el selector «Cómo envía», la línea de estado de la conexión, sus acciones y la
   vuelta de Microsoft/Google. Densidad compacta de la central; solo fichas --limpia-* (el claro y el oscuro salen de
   hoja-limpia.css). Aparte por lo mismo que las demás hojas de pantalla: solo la usan la ficha de la cuenta y la vuelta. */

/* El selector: tres segmentos del alto de un campo. */
.correo-tipo { margin: 2px 0 12px; }
.correo-tipo .mud-toggle-item { min-height: 36px; padding: 0 14px; text-transform: none; white-space: nowrap; }

.correo-conexion { display: flex; flex-direction: column; gap: 10px; }
.correo-nota { margin: 0; color: var(--limpia-tinta-2); font-size: .875rem; line-height: 1.45; max-width: 72ch; }
.correo-motivo { color: var(--limpia-error-tinta); overflow-wrap: anywhere; }

/* «● Conectada como pedidos@bar.es · Microsoft 365 · desde 14/10/2026 · último envío hoy 12:03» */
.correo-estado { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: .875rem; color: var(--limpia-tinta); }
.correo-estado b { font-weight: 600; overflow-wrap: anywhere; }

.correo-prueba { max-width: 28rem; }
.correo-acciones { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* EL CORREO SALIENTE (fase 2, 2026-10-16): la cola de la central con todo el correo de las tiendas. El filtro por estado es el
   mismo segmentado (nada que filtre es un óvalo), el motivo de un fallo en la tinta de error y partiéndose por donde haga falta
   (una dirección larga no saca la tabla por la derecha). */
.saliente-barra { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.saliente-filtro .mud-toggle-item { min-height: 32px; padding: 0 12px; text-transform: none; white-space: nowrap; }
.saliente-tipo { color: var(--limpia-tinta-2); }
.saliente-texto { overflow-wrap: anywhere; }
.saliente-estado { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.saliente-motivo { color: var(--limpia-error-tinta); font-size: .8125rem; line-height: 1.4; overflow-wrap: anywhere; max-width: 48ch; }
.saliente-motivo-suave { color: var(--limpia-tinta-2); font-size: .8125rem; }
.saliente-acciones { display: flex; gap: 4px; justify-content: flex-end; flex-wrap: wrap; }

/* EL TELÉFONO (360–430 px y horizontal): el segmentado en tres filas de 44 px, la línea de estado se parte y los botones en
   columna a todo el ancho, con su objetivo táctil de 44 px. */
@media (max-width: 599.98px) {
    .correo-tipo { display: flex; flex-direction: column; width: 100%; }
    .correo-tipo .mud-toggle-item { min-height: 44px; width: 100%; justify-content: flex-start; }
    .correo-estado { align-items: flex-start; }
    .correo-prueba { max-width: none; }
    .correo-acciones { flex-direction: column; align-items: stretch; }
    .correo-acciones .mud-button-root { min-height: 44px; width: 100%; }
    /* El correo saliente: el filtro en dos columnas de 44 px, «Reintentar» y «Descartar» a todo el ancho. */
    .saliente-barra { flex-direction: column; align-items: stretch; width: 100%; }
    .saliente-filtro { display: grid; grid-template-columns: 1fr 1fr; width: 100%; }
    .saliente-filtro .mud-toggle-item { min-height: 44px; }
    .saliente-barra .mud-button-root, .saliente-acciones .mud-button-root { min-height: 44px; width: 100%; }
    .saliente-acciones { flex-direction: column; align-items: stretch; width: 100%; }
    .saliente-motivo { max-width: none; }
}