/* La consola de correo. El marco, la lista, el estado, la ficha, las pestañas, el recorrido y
   los diálogos son de VanyMarca (`marca/componentes.css` y `marca/consola.css`); aquí va solo
   lo propio: los filtros de la bandeja, el cuerpo del correo, los adjuntos, las tarjetas de
   proveedor del asistente y la clave de un canal. Sin colores propios: todo sale de los tokens. */

/* `hidden` manda siempre (también lo pone la consola común). */
[hidden] { display: none !important; }

.correo-filtros { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  gap: var(--vc-e-3); align-items: end; margin-bottom: var(--vc-e-4); }
.correo-filtros .vc-campo { margin: 0; }
.correo-filtros__acciones { display: flex; gap: var(--vc-e-2); flex-wrap: wrap; align-self: end; }
/* La ficha de la marca pone un recuadro a `.vc-ficha`: los filtros van sin él. */
.correo-filtros.vc-ficha { border: 0; padding: 0; background: none; box-shadow: none; }

.correo-paginas { display: flex; gap: var(--vc-e-2); align-items: center; justify-content: flex-end;
  flex-wrap: wrap; margin-top: var(--vc-e-3); }

/* El cuerpo del correo, aislado: un iframe sin permisos (sandbox) y a lo ancho. */
.correo-cuerpo { width: 100%; min-height: 24rem; border: 1px solid var(--vc-borde);
  border-radius: var(--vc-radio-md); background: white; /* el correo se escribió para fondo blanco */ }

.correo-adjuntos { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--vc-e-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); }
.correo-adjuntos li { border: 1px solid var(--vc-borde); border-radius: var(--vc-radio-md);
  padding: var(--vc-e-3); display: flex; flex-direction: column; gap: var(--vc-e-2); min-width: 0; }
.correo-adjuntos b { overflow-wrap: anywhere; }

/* El visor de un adjunto o de un certificado, dentro del diálogo de la casa. */
.correo-visor { width: min(92vw, 60rem); }
.correo-visor iframe, .correo-visor img { width: 100%; height: min(70vh, 48rem); border: 0;
  object-fit: contain; background: var(--vc-superficie-2); }

/* El asistente de canal: un proveedor por tarjeta (radio de verdad, se elige con el teclado). */
.correo-proveedores { display: grid; gap: var(--vc-e-3); border: 0; padding: 0; margin: 0 0 var(--vc-e-4);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr)); }
.correo-proveedores legend { font-weight: var(--vc-peso-fuerte); margin-bottom: var(--vc-e-2); padding: 0; }
.correo-proveedor { display: flex; gap: var(--vc-e-2); align-items: flex-start; cursor: pointer;
  border: 1px solid var(--vc-borde); border-radius: var(--vc-radio-md); padding: var(--vc-e-3); }
.correo-proveedor:has(input:checked) { border-color: var(--vc-primario); background: var(--vc-primario-suave); }
.correo-proveedor small { display: block; color: var(--vc-tinta-suave); }
.correo-reglas { display: flex; flex-direction: column; gap: var(--vc-e-2); margin-bottom: var(--vc-e-3); }
.correo-regla { display: grid; grid-template-columns: minmax(0, 12rem) minmax(0, 1fr) auto; gap: var(--vc-e-2);
  align-items: center; }
@media (max-width: 40rem) { .correo-regla { grid-template-columns: 1fr; } }

.correo-ficha-acciones { display: flex; gap: var(--vc-e-2); flex-wrap: wrap; margin: var(--vc-e-3) 0; }
.correo-mono { font-family: var(--vc-font-mono); overflow-wrap: anywhere; }

/* Por dónde avisa un sistema: un desplegable dentro de la lista, que en el teléfono no se sale. */
.correo-medios { max-width: 100%; min-width: 0; font: inherit; color: var(--vc-tinta); background: var(--vc-superficie);
  border: 1px solid var(--vc-borde); border-radius: var(--vc-radio-sm); padding: var(--vc-e-1) var(--vc-e-2); }