/*
 * Comunicar: «Enviar a los socios» (/gestion/comunicaciones, 18 oct 2026:
 * al móvil, por correo o por los dos, en una sola pantalla).
 *
 * «Enviar», en pasos: a la izquierda a quién, el mensaje y por dónde; a la
 * derecha, siempre a la vista, a cuántos les llega por cada canal, cómo lo
 * verán y el botón. «Enviados», en su pestaña: una fila por envío con lo de
 * cada canal. La carga su plantilla (plantillas/gestion/comunicaciones.php)
 * después de panel.css y gestion.css, de donde toma las tarjetas, las
 * pestañas, las ventanas, las opciones grandes (.elecciones), las casillas
 * en píldora (.casillas-chips), el conmutador y el buscador de personas.
 *
 * Las otras tres pantallas de Comunicar («Fotos», «Negocios»
 * y «Nuestras redes») también la cargan, antes de su propia hoja, para las
 * piezas 9, 12 y 13. Las piezas van en el orden en que salen:
 *
 *   1. Escribir: las dos columnas y los pasos
 *   2. A quién va
 *   3. El mensaje: qué es y el texto en cada idioma
 *   3b. El editor por bloques, las plantillas y la comprobación antes de enviar
 *   4. Por dónde: móvil, correo o los dos
 *   5. A cuántos llega y los botones
 *   6. La vista previa y el correo, como lo abre el socio
 *   7. El aviso, como lo pinta el móvil
 *   8. Enviados
 *   9. Una lista con su título
 *  10. Lo de cada canal en un enviado (leído, entregado)
 *  11. A quién fue un envío (su ventana)
 *  12. Filas ordenables (categorías de las galerías, sectores de los negocios)
 *  13. Contadores en las pestañas
 *
 * Convenciones:
 * - Lo elegido y lo que se puede pulsar, en el color de la asociación
 *   (--marca-acento); el ámbar, solo para lo que pide atención.
 * - El aviso del móvil (7) lleva sus propios colores: imita la pantalla de
 *   un móvil, no el panel, y se ve igual en claro y en oscuro.
 */

/* #region 1. Escribir: las dos columnas y los pasos */
/* A la izquierda se escribe; a la derecha, pegado arriba al bajar, lo que va a pasar al enviar. */
.com-redactor {
    display: grid;
    gap: var(--espacio-4);
    align-items: start;
}

.com-redactor__principal {
    display: grid;
    gap: var(--espacio-4);
    min-width: 0;
    counter-reset: com-paso;
}

@media (min-width: 1100px) {
    .com-redactor {
        grid-template-columns: minmax(0, 1fr) minmax(20rem, 24rem);
        gap: var(--espacio-5);
    }

    .com-redactor__lateral {
        position: sticky;
        top: calc(var(--alto-superior) + var(--espacio-4));
        /* Si no cabe en la pantalla, baja por dentro: nunca queda cortada abajo (3 nov 2026). */
        max-height: calc(100dvh - var(--alto-superior) - var(--espacio-4) * 2);
        overflow-y: auto;
        overscroll-behavior: contain;
        scrollbar-width: thin;
    }
}

/* Cada paso, con su número: se lee en orden y se ve qué falta. */
.com-paso {
    display: grid;
    gap: var(--espacio-3);
}

.com-paso__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    margin: 0;
    font-size: var(--texto-h3);
}

.com-paso__numero {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 1.625rem;
    height: 1.625rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--marca-acento) 12%, transparent);
    color: var(--marca-acento);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

/* El número lo pone el orden: si «Por dónde» no sale (un solo canal), el mensaje es el 2. */
.com-paso:not([hidden]) {
    counter-increment: com-paso;
}

.com-paso__numero::before {
    content: counter(com-paso);
}
/* #endregion */

/* #region 2. A quién va */
/* Opciones cortas en una fila de píldoras con su icono; la elegida, con el color de la asociación. */
.com-para {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.com-para__opcion {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 2.5rem;
    padding: 0 var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-1);
    color: var(--rs-texto-secundario);
    cursor: pointer;
    transition: border-color var(--duracion-hover) var(--curva), background-color var(--duracion-hover) var(--curva), color var(--duracion-hover) var(--curva);
}

.com-para__opcion input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.com-para__opcion .icono {
    width: 16px;
    height: 16px;
}

.com-para__opcion:hover {
    border-color: color-mix(in srgb, var(--marca-acento) 45%, var(--rs-borde));
    color: var(--rs-texto);
}

.com-para__opcion:has(input:checked) {
    border-color: var(--marca-acento);
    background: color-mix(in srgb, var(--marca-acento) 10%, var(--rs-superficie-1));
    box-shadow: 0 0 0 1px var(--marca-acento);
    color: var(--rs-texto);
    font-weight: 600;
}

.com-para__opcion:has(input:checked) .icono {
    color: var(--marca-acento);
}

.com-para__opcion:has(input:focus-visible) {
    box-shadow: var(--anillo-foco);
}

/* Los tipos de socio, el evento o la persona, debajo de su opción y separados por una línea fina. */
.com-subopciones {
    display: grid;
    gap: var(--espacio-2);
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.com-subopciones__titulo,
.com-subopciones > label {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

/* «Nadie con ese nombre», dentro de los resultados del buscador (un aviso a una persona). */
.com-buscador__nadie {
    margin: 0;
    padding: var(--espacio-2) var(--espacio-3);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}
/* #endregion */

/* #region 3. El mensaje: qué es y el texto en cada idioma */
/* «¿Qué es?» (si caben promociones), encima del texto. */
.com-clase {
    display: grid;
    gap: var(--espacio-2);
    padding-bottom: var(--espacio-3);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.com-clase .com-subopciones__titulo {
    margin: 0;
}

/* Una pestaña por idioma con su título y su texto. */
#com-textos {
    display: grid;
    gap: var(--espacio-3);
}

#com-textos .pestanas--internas {
    justify-self: start;
}

.com-idioma {
    display: grid;
    gap: var(--espacio-3);
}

.com-idioma__ayuda {
    margin: 0;
}

.com-idioma .campo {
    margin: 0;
}

.com-idioma textarea {
    min-height: 11rem;
    resize: vertical;
}

/* La marca de «ya está escrito» en la pestaña de cada idioma. */
.com-idioma__hecho {
    display: inline-flex;
    margin-left: var(--espacio-1);
    color: var(--rs-exito);
}

.com-idioma__hecho .icono {
    width: 14px;
    height: 14px;
}

/* El título con cuántas letras lleva cuando sale al móvil, porque en el aviso cabe poco. */
.campo__cabecera {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-2);
}

.campo__contador {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    font-variant-numeric: tabular-nums;
}

.campo__contador--cerca {
    color: var(--rs-aviso-texto);
    font-weight: 600;
}
/* #endregion */

/* #region 3b. El editor por bloques, las plantillas y la comprobación antes de enviar (migración 0299) */
/* Plantillas para empezar: en el paso, su botón y con cuál se empezó; las tarjetas, en su ventana. */
.com-plantillas {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
}

.com-plantillas[hidden] {
    display: none;
}

.com-plantillas__usada {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.com-ventana-plantillas {
    width: min(64rem, calc(100vw - 2 * var(--espacio-4)));
}

.com-plantillas__ventana {
    display: grid;
    gap: var(--espacio-3);
}

.com-plantillas__ventana .com-plantillas__lista + .com-plantillas__titulo {
    margin-top: var(--espacio-2);
}

.com-plantillas__titulo {
    margin: 0;
    font-size: var(--texto-pequeno);
    font-weight: 600;
    color: var(--rs-texto-secundario);
}

.com-plantillas__lista {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.com-plantilla-opcion {
    display: inline-flex;
    gap: var(--espacio-2);
    align-items: center;
    min-height: 2.5rem;
    padding: var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: 999px;
    background: var(--rs-superficie-2);
    color: inherit;
    font: inherit;
    font-size: var(--texto-pequeno);
    cursor: pointer;
}

.com-plantilla-opcion:hover,
.com-plantilla-opcion[aria-pressed="true"] {
    border-color: var(--rs-azul);
    background: var(--rs-superficie-3);
}

.com-plantilla-opcion:focus-visible {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}

.com-plantilla-opcion--propia {
    border-style: dashed;
}

/* La galería de las de serie: una tarjeta por plantilla con la miniatura de su correo de ejemplo. */
.com-plantillas__galeria {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: var(--espacio-3);
}

.com-plantilla-tarjeta__boton {
    display: grid;
    gap: var(--espacio-2);
    inline-size: 100%;
    padding: var(--espacio-2) var(--espacio-2) var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    color: inherit;
    font: inherit;
    text-align: start;
    cursor: pointer;
}

.com-plantilla-tarjeta__boton:hover,
.com-plantilla-tarjeta__boton[aria-pressed="true"] {
    border-color: var(--rs-azul);
    background: var(--rs-superficie-3);
}

.com-plantilla-tarjeta__boton:focus-visible {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}

/* El correo de 680 px de ancho, encogido a lo que mide la tarjeta (ajustado por --escala en el JS). */
.com-plantilla-tarjeta__vista {
    position: relative;
    display: grid;
    place-items: center;
    block-size: 15rem;
    overflow: hidden;
    border-radius: var(--radio-sm);
    background: #F1F2F5;
}

.com-plantilla-tarjeta__vista iframe {
    position: absolute;
    inset-block-start: 0;
    inset-inline-start: 50%;
    inline-size: 680px;
    block-size: 1100px;
    border: 0;
    transform: translateX(-50%) scale(0.27);
    transform-origin: top center;
    pointer-events: none;
}

.com-plantilla-tarjeta__nombre {
    display: inline-flex;
    gap: var(--espacio-2);
    align-items: center;
    padding-inline: var(--espacio-1);
    font-weight: 600;
}

.com-plantilla-tarjeta__desc {
    padding-inline: var(--espacio-1);
    font-size: var(--texto-pequeno);
    color: var(--rs-texto-secundario);
    line-height: 1.4;
}

.com-plantillas__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* Los bloques: tarjetas en columna, cada una con su nombre y sus flechas. */
.bloques {
    display: grid;
    gap: var(--espacio-3);
    margin: var(--espacio-4) 0 0;
    padding: 0;
    list-style: none;
}

.bloques__vacio {
    margin: var(--espacio-4) 0 0;
    color: var(--rs-texto-secundario);
}

.bloque {
    border: 1px solid var(--rs-borde);
    border-left: 4px solid var(--rs-azul);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
}

.bloque--separador {
    border-left-color: var(--rs-borde-fuerte);
}

.bloque--error {
    border-color: var(--rs-peligro-solido);
    box-shadow: 0 0 0 2px var(--rs-peligro);
}

.bloque__cabecera {
    display: flex;
    gap: var(--espacio-2);
    align-items: center;
    justify-content: space-between;
    padding: var(--espacio-2) var(--espacio-2) var(--espacio-2) var(--espacio-3);
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.bloque__nombre {
    display: inline-flex;
    gap: var(--espacio-2);
    align-items: center;
    font-weight: 600;
    font-size: var(--texto-pequeno);
}

.bloque__acciones {
    display: inline-flex;
    gap: var(--espacio-1);
}

.bloque__cuerpo {
    display: grid;
    gap: var(--espacio-3);
    padding: var(--espacio-3);
}

.bloque__campo {
    margin: 0;
}

.bloque__fila {
    display: grid;
    gap: var(--espacio-3);
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

@media (max-width: 40rem) {
    .bloque__fila {
        grid-template-columns: minmax(0, 1fr);
    }
}

.bloque__campo--valor input {
    font-size: 1.25rem;
    font-weight: 700;
}

.bloque__separador {
    margin: var(--espacio-2) 0;
    border: 0;
    border-top: 1px solid var(--rs-borde-fuerte);
}

.bloque__archivos {
    display: grid;
    gap: var(--espacio-2);
}

/* El input de fichero vive dentro de su etiqueta-botón: el foco se ve en la etiqueta. */
.bloque__subir {
    position: relative;
    justify-self: start;
    cursor: pointer;
}

.bloque__subir:focus-within {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}

/* Añadir un bloque: todos a la vista, con su icono. */
.bloques__anadir {
    margin-top: var(--espacio-4);
    padding: var(--espacio-3);
    border: 1px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
}

.bloques__anadir-titulo {
    display: flex;
    gap: var(--espacio-2);
    align-items: center;
    margin: 0 0 var(--espacio-2);
    font-weight: 600;
    font-size: var(--texto-pequeno);
}

.bloques__tipos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr));
    gap: var(--espacio-2);
}

/* Con un diseño a medida: lo fijo, con candado; lo editable, marcado; y dónde se puede añadir. */
.bloque--fijo {
    background: var(--rs-superficie-1);
    border-style: dashed;
}

.bloque__zona {
    margin-inline-start: var(--espacio-2);
    padding: 1px var(--espacio-2);
    border-radius: 999px;
    background: var(--rs-superficie-3);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
    font-weight: 500;
}

.bloque__resumen {
    margin: var(--espacio-2) 0 0;
    color: var(--rs-texto-tenue);
    font-size: 0.875rem;
}

.bloques__zona-libre {
    list-style: none;
    padding: var(--espacio-3);
    border: 1px dashed var(--rs-borde-fuerte);
    border-radius: var(--radio-md);
}

.bloque--zona {
    padding: 0;
    border: 0;
    background: transparent;
}

.bloques__mas {
    margin-block-start: var(--espacio-3);
}

.bloques__mas > summary {
    cursor: pointer;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rs-texto-secundario);
    margin-block-end: var(--espacio-2);
}

.bloques__mas > summary:focus-visible {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}

/* Las listas de un bloque (orden del día, desglose, días del programa) y sus líneas. */
.bloque__lista {
    border: 1px solid var(--rs-borde-sutil);
    border-radius: var(--radio-sm);
    padding: var(--espacio-3);
    margin: var(--espacio-3) 0 0;
    min-width: 0;
}

.bloque__lista > legend {
    padding: 0 var(--espacio-2);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rs-texto-secundario);
}

.bloque__lineas {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--espacio-3);
}

.bloque__linea {
    border-block-start: 1px solid var(--rs-borde-sutil);
    padding-block-start: var(--espacio-2);
    min-width: 0;
}

.bloque__linea:first-child {
    border-block-start: 0;
    padding-block-start: 0;
}

.bloque__linea-cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
}

.bloque__linea-numero {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rs-texto-tenue);
}

.bloque__linea-campos {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: 0 var(--espacio-3);
    min-width: 0;
}

.bloque__linea-campos > .bloque__lista {
    grid-column: 1 / -1;
}

.bloque__casilla {
    align-self: end;
    margin-block-end: var(--espacio-3);
}

.bloque__anadir-linea {
    margin-block-start: var(--espacio-2);
}

.bloques__tipo {
    display: inline-flex;
    gap: var(--espacio-2);
    align-items: center;
    min-height: 2.75rem;
    padding: var(--espacio-2);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-sm);
    background: var(--rs-superficie-1);
    color: inherit;
    font: inherit;
    font-size: var(--texto-pequeno);
    text-align: left;
    cursor: pointer;
}

.bloques__tipo:hover:not(:disabled) {
    border-color: var(--rs-azul);
}

.bloques__tipo:focus-visible {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}

.bloques__tipo:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* El tono del aviso: el luto, sobrio. Su explicación, debajo del nombre. */
.com-tono {
    margin: var(--espacio-3) 0 0;
}

.com-tono > span {
    display: grid;
    gap: 2px;
}

.com-tono small {
    color: var(--rs-texto-secundario);
}

/* Comprobar antes de enviar: lo arreglado en verde, lo importante en rojo y los consejos en ámbar. */
.com-comprobacion {
    display: grid;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-3);
    padding: 0;
    list-style: none;
}

.com-comprobacion[hidden] {
    display: none;
}

.com-comprobacion li {
    display: flex;
    gap: var(--espacio-2);
    align-items: flex-start;
    padding: var(--espacio-2) var(--espacio-3);
    border-radius: var(--radio-sm);
    background: var(--rs-superficie-2);
    font-size: var(--texto-pequeno);
}

.com-comprobacion__arreglo .icono {
    color: var(--rs-exito-texto);
}

.com-comprobacion__importante {
    background: var(--rs-peligro) !important;
}

.com-comprobacion__importante .icono {
    color: var(--rs-peligro-texto);
}

.com-comprobacion__consejo .icono {
    color: var(--rs-aviso-texto);
}

.com-comprobacion__bien .icono {
    color: var(--rs-exito-texto);
}

.com-comprobacion button {
    margin-left: auto;
    white-space: nowrap;
}
/* #endregion */

/* #region 11b. El resumen de un envío en llano y sus grupos (migración 0299) */
.com-resumen-envio {
    display: grid;
    gap: var(--espacio-2);
    margin: 0 0 var(--espacio-3);
}

.com-resumen-envio__titular {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 700;
}

.com-resumen-envio__grupos {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* El buscador de una persona dentro del envío («no me llegó»). */
.com-a-quien__buscar {
    width: 100%;
    margin-top: var(--espacio-3);
}

.com-resumen-envio__grupos button[aria-pressed="true"] {
    border-color: var(--rs-azul);
    background: var(--rs-superficie-3);
}

/* Si su estado es largo («Le llegó el… · lo leyó el…»), baja debajo del nombre en vez de pisarlo. */
.com-a-quien__acciones {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-left: auto;
    gap: var(--espacio-2);
    align-items: center;
}
/* #endregion */

/* #region 4. Por dónde: móvil, correo, el canal de la app */
/* Tarjetas pequeñas que se marcan a la vez: su nombre y a cuántos llega; para qué sirve cada una lo cuenta la Ayuda. */
.com-canal {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    padding-block: var(--espacio-3);
}

.com-canal .eleccion__textos > small {
    display: none;
}

.com-canal__marca {
    display: grid;
    place-items: center;
    width: 1.25rem;
    height: 1.25rem;
    border: 1.5px solid var(--rs-borde);
    border-radius: var(--radio-sm);
    background: var(--rs-superficie-1);
    color: transparent;
    transition: background-color var(--duracion-hover) var(--curva), border-color var(--duracion-hover) var(--curva);
}

.com-canal__marca .icono {
    width: 14px;
    height: 14px;
}

.com-canal:has(input:checked) .com-canal__marca {
    border-color: var(--marca-boton);
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
}

.com-canal__cifra {
    margin-top: var(--espacio-1);
    color: var(--rs-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.com-canal__cifra:empty {
    display: none;
}

/* El canal de la app (28 oct 2026): apagado, se ve por qué en una línea; no se puede marcar. */
.com-canal__porque {
    margin-top: var(--espacio-1);
    color: var(--rs-aviso-texto);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.com-canal__porque:empty {
    display: none;
}

.com-canal:has(input:disabled) {
    cursor: not-allowed;
}

/* La casilla de verdad sigue invisible aunque esté apagada (el estilo general de lo apagado la enseñaría). */
.com-canal input:disabled {
    opacity: 0;
}

.com-canal:has(input:disabled) .eleccion__icono,
.com-canal:has(input:disabled) strong,
.com-canal:has(input:disabled) .com-canal__marca {
    opacity: 0.5;
}

/* Con el móvil y el canal a la vez: un solo aviso, dicho en una línea. */
.com-canales__nota {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
}

.com-canales__nota .icono {
    flex: none;
    width: 15px;
    height: 15px;
    color: var(--marca-acento);
}
/* #endregion */

/* #region 5. A cuántos llega y los botones */
.com-envio {
    display: grid;
    gap: var(--espacio-4);
}

/* Las cifras, grandes: es lo que hay que mirar antes de enviar. Una por canal elegido. */
.com-envio__resumen {
    display: grid;
    gap: var(--espacio-2);
}

.com-envio__etiqueta {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.com-envio__cifras {
    display: grid;
    gap: var(--espacio-1);
    margin: 0;
    padding: 0;
    list-style: none;
}

.com-envio__cifra {
    display: grid;
    grid-template-columns: 1.25rem auto minmax(0, 1fr);
    align-items: baseline;
    column-gap: var(--espacio-2);
}

.com-envio__cifra .icono {
    width: 18px;
    height: 18px;
    color: var(--marca-acento);
    align-self: center;
}

.com-envio__numero {
    font-family: var(--fuente-display);
    font-size: 2.25rem;
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.com-envio__unidad {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-base);
}

/* «También queda en el canal…»: una línea, sin número grande. */
.com-envio__cifra--canal {
    grid-template-columns: 1.25rem minmax(0, 1fr);
    margin-top: var(--espacio-1);
}

.com-envio__cifra--canal .com-envio__unidad {
    color: var(--rs-texto);
    font-size: var(--texto-pequeno);
    font-weight: 600;
}

/* Quién se queda fuera y por qué: discreto, salvo lo que impide enviar o el tope de la licencia. */
.com-envio__fuera {
    display: grid;
    gap: var(--espacio-2);
    margin: calc(var(--espacio-2) * -1) 0 0;
    padding: 0;
    list-style: none;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.com-envio__fuera li {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
}

.com-envio__fuera .icono {
    flex: none;
    width: 15px;
    height: 15px;
    margin-top: 2px;
}

.com-envio__fuera--aviso {
    color: var(--rs-aviso-texto);
    font-weight: 600;
}

.com-envio .aviso {
    margin: 0;
}

.com-envio__acciones {
    display: grid;
    gap: var(--espacio-2);
}

.com-envio__acciones > .boton {
    justify-content: center;
    width: 100%;
}

/* Programar, la prueba y comprobar: a mano, sin competir con «Enviar». */
.com-envio__otras {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--espacio-1);
}
/* #endregion */

/* #region 6. La vista previa y el correo, como lo abre el socio */
/* El bloque de la vista previa, bajo las cifras: el aviso (pieza 7) o el correo; con los dos, se cambia con el conmutador. */
.com-vista {
    display: grid;
    gap: var(--espacio-2);
    padding-top: var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.com-vista__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
}

.com-vista__cabecera .conmutador button {
    min-height: 30px;
    padding: 0 var(--espacio-2);
    font-size: var(--texto-etiqueta);
}

.com-vista__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-weight: 600;
}

.com-vista__titulo .icono {
    width: 15px;
    height: 15px;
}

.com-vista__titulo .etiqueta {
    margin-left: auto;
}

.com-vista__nota {
    margin: 0;
}

/* Un correo como lo abre el socio: asunto, párrafos y, separado, el pie que pone la plataforma. */
.com-correo {
    display: grid;
    gap: var(--espacio-3);
    max-height: 22rem;
    overflow: auto;
    padding: var(--espacio-4);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-1);
    overflow-wrap: anywhere;
}

/* En la ventana de un correo enviado hay más sitio. */
.com-ventana .com-correo {
    max-height: min(26rem, 55vh);
}

.com-correo__asunto {
    margin: 0;
    font-size: var(--texto-base);
    font-weight: 700;
    line-height: 1.35;
}

.com-correo__asunto--vacio {
    color: var(--rs-texto-secundario);
    font-weight: 400;
    font-style: italic;
}

.com-correo__cuerpo {
    font-size: var(--texto-etiqueta);
    line-height: 1.6;
}

.com-correo__cuerpo p {
    margin: 0 0 0.75em;
}

.com-correo__cuerpo p:last-child {
    margin-bottom: 0;
}

.com-correo__pie {
    margin: 0;
    padding-top: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

/* El enlace de baja de las promociones: se ve que está, pero en la vista previa no lleva a ningún sitio. */
.com-correo__enlace {
    color: var(--marca-acento);
    font-weight: 600;
}
/* #endregion */

/* #region 6b. Fotos, documentos y botón; el correo de verdad en su marco */

.com-extras__botones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

/* El input de fichero vive dentro de su etiqueta-botón: el foco se ve en la etiqueta. */
.com-extras__subir {
    position: relative;
    cursor: pointer;
}

.com-extras__subir:focus-within {
    outline: 2px solid var(--rs-azul);
    outline-offset: 2px;
}

.com-adjuntos {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(7.5rem, 1fr));
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.com-adjuntos:empty {
    display: none;
}

.com-adjunto {
    position: relative;
    display: grid;
    gap: var(--espacio-1);
    padding: var(--espacio-2);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    background: var(--rs-superficie-2);
    font-size: var(--texto-pequeno);
}

.com-adjunto__imagen {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    border-radius: var(--radio-sm);
}

/* Un documento: su icono grande donde iría la foto. */
.com-adjunto__documento {
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    border-radius: var(--radio-sm);
    background: var(--rs-superficie-3);
    color: var(--rs-texto-secundario);
}

.com-adjunto__documento .icono {
    width: 2rem;
    height: 2rem;
}

.com-adjunto__nombre {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-adjunto--subiendo {
    opacity: 0.6;
}

.com-adjunto__quitar {
    position: absolute;
    top: var(--espacio-1);
    right: var(--espacio-1);
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgb(0 0 0 / 0.65);
    color: #FFFFFF;
    cursor: pointer;
}

.com-adjunto__quitar .icono {
    width: 0.9rem;
    height: 0.9rem;
}

/* El correo de verdad: el marco con la plantilla, a lo ancho del lateral (se ve como en el móvil). */
#com-vista-correo {
    display: grid;
    max-height: none;
    padding: var(--espacio-3);
    overflow: visible;
}

#com-vista-correo[hidden] {
    display: none;
}

.com-correo__marco {
    width: 100%;
    height: 32rem;
    border: 0;
    border-radius: var(--radio-sm);
    background: #F1F2F5;
}

/* El correo a lo ancho, en su ventana. */
.com-ventana-correo {
    width: min(64rem, calc(100vw - 2 * var(--espacio-4)));
    max-width: none;
}

.com-ventana-correo__marco {
    display: block;
    width: 100%;
    height: min(78vh, 56rem);
    border: 0;
    border-radius: 0 0 var(--radio-lg) var(--radio-lg);
    background: #FFFFFF;
}

.com-correo__grande {
    justify-self: start;
}

/* #endregion */

/* #region 7. El aviso, como lo pinta el móvil */
/* Sobre un fondo de pantalla, con el icono y el nombre de la asociación. */
.aviso-movil {
    padding: var(--espacio-5) var(--espacio-3);
    border-radius: var(--radio-lg);
    background:
        radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--marca-acento) 55%, #0E1726), transparent 70%),
        linear-gradient(160deg, #1D2A3D, #0E1726);
}

.aviso-movil__notificacion {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: var(--espacio-3);
    padding: var(--espacio-3);
    border-radius: 1.125rem;
    background: rgb(255 255 255 / 0.86);
    box-shadow: 0 8px 24px rgb(0 0 0 / 0.25);
    color: #11181F;
    backdrop-filter: blur(12px);
}

.aviso-movil__icono {
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    overflow: hidden;
    border-radius: 0.6rem;
    background: var(--marca-principal);
    color: #FFFFFF;
    font-size: var(--texto-pequeno);
    font-weight: 800;
}

/* El icono de la app ya trae el logo entero dentro: se enseña tal cual, sin recortar. */
.aviso-movil__icono img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.aviso-movil__textos {
    display: grid;
    gap: 1px;
    min-width: 0;
}

.aviso-movil__textos p {
    margin: 0;
}

.aviso-movil__app {
    display: flex;
    align-items: center;
    gap: 5px;
    color: #4A5563;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* La insignia pequeña de Rasedia, como la pone el móvil junto al nombre de la app. */
.aviso-movil__insignia {
    flex: none;
    width: 13px;
    height: 13px;
    border-radius: 3px;
}

.aviso-movil__app span:first-of-type {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.aviso-movil__app span:last-child {
    flex: none;
}

.aviso-movil__titulo {
    overflow: hidden;
    font-size: var(--texto-base);
    font-weight: 700;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.aviso-movil__titulo--vacio {
    color: #6F7B89;
    font-weight: 500;
    font-style: italic;
}

/* El móvil enseña el principio del mensaje: dos líneas. */
.aviso-movil__cuerpo {
    display: -webkit-box;
    overflow: hidden;
    font-size: var(--texto-etiqueta);
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}
/* #endregion */

/* #region 8. Enviados */
/* Mientras carga, dos tarjetas vacías del alto de un enviado. */
.esqueleto-lista {
    display: grid;
    gap: var(--espacio-3);
}

.esqueleto-lista .esqueleto {
    width: 100%;
    height: 5.5rem;
    border-radius: var(--radio-lg);
}

/* Todos los enviados en una tarjeta, una línea cada uno (3 nov 2026: antes, una tarjeta alta por envío). */
.com-enviados {
    display: grid;
    margin: 0;
    padding: 0;
    border: 1px solid var(--rs-borde-tarjeta);
    border-radius: var(--radio-lg);
    background: var(--rs-superficie-1);
    list-style: none;
}

.com-enviados:empty {
    display: none;
}

/* Cada enviado: la casilla o su icono, qué y a quién, cómo ha ido, cuándo y sus botones. */
.com-enviado {
    display: grid;
    /* Anchos fijos (3 nov 2026): cada fila es su propia rejilla, y con «auto» la lectura y la fecha bailaban. */
    grid-template-columns: 2.5rem minmax(0, 1fr) 16rem 11rem 20rem;
    grid-template-areas: "icono datos canales cuando acciones";
    align-items: center;
    gap: var(--espacio-1) var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border-top: 1px solid var(--rs-borde-sutil);
}

.com-enviado:first-child {
    border-top: 0;
}

.com-enviado__icono {
    grid-area: icono;
    display: grid;
    place-items: center;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tono-seccion, var(--marca-acento)) 12%, transparent);
    color: var(--tono-seccion, var(--marca-acento));
}

.com-enviado--comercial .com-enviado__icono {
    background: color-mix(in srgb, var(--rs-aviso) 14%, transparent);
    color: var(--rs-aviso);
}

.com-enviado__icono .icono {
    width: 16px;
    height: 16px;
}

/* Si salió al móvil, la casilla de marcar (para retirarlo) ocupa el sitio del icono. */
.com-enviado__marca {
    grid-area: icono;
    display: grid;
    place-items: center;
}

.com-enviado__datos {
    grid-area: datos;
    display: grid;
    gap: 2px;
    min-width: 0;
}

/* El asunto abre el mensaje: se nota al pasar por encima, sin subrayar; largo, con puntos suspensivos. */
.com-enviado__asunto,
.com-enviado__titulo {
    overflow: hidden;
    max-width: 100%;
    font-size: var(--texto-base);
    font-weight: 650;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.com-enviado__asunto {
    justify-self: start;
    padding: 0;
    border: 0;
    background: none;
    color: var(--rs-texto);
    font-family: inherit;
    text-align: left;
    cursor: pointer;
    transition: color var(--duracion-hover) var(--curva);
}

.com-enviado__asunto:hover {
    color: var(--marca-acento);
}

.com-enviado__asunto:focus-visible {
    border-radius: var(--radio-sm);
    outline: none;
    box-shadow: var(--anillo-foco);
}

/* A quién, de dónde viene y en qué idiomas: una línea tranquila. */
.com-enviado__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px var(--espacio-3);
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.com-enviado__meta > span:not(.etiqueta) {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.com-enviado__meta .icono {
    width: 14px;
    height: 14px;
}

.com-enviado__origen {
    color: var(--rs-texto-tenue);
}

.com-enviado__cuando {
    grid-area: cuando;
    display: grid;
    justify-items: end;
    gap: 2px;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
    text-align: right;
}

/* Quién lo envió, entero: en dos líneas si hace falta. */
.com-enviado__cuando small {
    color: var(--rs-texto-tenue);
    overflow-wrap: anywhere;
}

/* Los botones de una lista de enviados, cada uno en su hueco: alineados de fila a fila, salga o no «Recordar» (4 nov 2026). */
.com-enviado__acciones {
    grid-area: acciones;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacio-1);
    min-width: 0;
}

.com-enviado__acciones .boton {
    white-space: nowrap;
}

@media (min-width: 761px) {
    .com-enviados .com-enviado__acciones {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto 2.25rem;
        justify-items: end;
    }

    .com-enviados .com-enviado__acciones > [data-recordar] {
        grid-column: 1;
    }

    .com-enviados .com-enviado__acciones > [data-a-quien] {
        grid-column: 2;
    }

    .com-enviados .com-enviado__acciones > .com-enviado__mas {
        grid-column: 3;
    }
}

/* «Más» de cada envío: usarlo como base, corregir y quitar (2 nov 2026), abierto hacia la izquierda. */
.com-enviado__mas .menu-desplegable__panel {
    right: 0;
    left: auto;
    min-width: 15rem;
}

/* El que se acaba de enviar, con un destello al llegar a la lista. */
.com-enviado--nuevo {
    animation: punto-justo 2.6s var(--curva);
}

/* Sin ancho para cinco columnas: lo de cada canal y cuándo, debajo del asunto; los botones, a la derecha. */
@media (max-width: 1499px) {
    .com-enviado {
        grid-template-columns: 2.5rem minmax(0, 1fr) auto;
        grid-template-areas:
            "icono datos cuando"
            "icono canales acciones";
    }
}

/* En el móvil, todo en una columna junto a la casilla. */
@media (max-width: 760px) {
    .com-enviado {
        grid-template-columns: 2.5rem minmax(0, 1fr);
        grid-template-areas:
            "icono datos"
            "icono canales"
            "icono cuando"
            "icono acciones";
        align-items: start;
    }

    .com-enviado__cuando {
        justify-items: start;
        text-align: left;
    }

    /* En una sola fila: «⋯», al final. */
    .com-enviado__acciones {
        flex-wrap: nowrap;
        justify-content: flex-start;
    }

    .com-enviado__acciones > .com-enviado__mas {
        margin-left: auto;
    }
}
/* #endregion */

/* #region 8b. Programar y los envíos programados (migración 0302) */
/* Debajo de los botones de enviar: el día, la hora y dos atajos. */
.com-programar {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: var(--espacio-4);
    border: 1px solid color-mix(in srgb, var(--marca-acento) 30%, var(--rs-borde));
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--marca-acento) 5%, var(--rs-superficie-1));
}

.com-programar__titulo {
    padding: 0;
    font-weight: 600;
}

.com-programar__atajos,
.com-programar__acciones {
    display: flex;
    flex-wrap: wrap;
    gap: var(--espacio-2);
}

.com-programar__campos,
.com-programado__hora {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--espacio-3);
}

.com-programar .ayuda-campo {
    margin: 0;
}

/* Cambiando un envío programado: una franja que no deja olvidarlo. */
.com-cambiando {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-3);
    margin-bottom: var(--espacio-4);
    padding: var(--espacio-3) var(--espacio-4);
    border-left: 4px solid var(--marca-acento);
    border-radius: var(--radio-md);
    background: color-mix(in srgb, var(--marca-acento) 8%, var(--rs-superficie-1));
    font-weight: 600;
}

.com-cambiando .boton-enlace {
    margin-left: auto;
    font-weight: 500;
}

/* En «Enviados», arriba: lo que aún no ha salido. */
.com-programados {
    display: grid;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-6);
}

.com-programados__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    font-size: var(--texto-grande);
}

.com-programados__lista {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

.com-programado {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-2) var(--espacio-4);
    border-left: 4px solid var(--marca-acento);
}

/* Sus botones van en su columna (no en la zona «acciones» de los enviados, que aquí no existe). */
.com-programado .com-enviado__acciones {
    grid-area: auto;
}

.com-programado__icono {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    background: color-mix(in srgb, var(--tono-seccion, var(--marca-acento)) 12%, transparent);
    color: var(--tono-seccion, var(--marca-acento));
}

.com-programado__datos {
    display: grid;
    gap: var(--espacio-1);
    min-width: 0;
}

.com-programado__cuando {
    margin: 0;
    color: var(--marca-acento);
    font-weight: 600;
}

.com-programado__asunto {
    overflow-wrap: anywhere;
}

.com-programado__fallo {
    margin: 0;
    color: var(--rs-peligro-texto);
}

.com-programado__hora {
    align-items: end;
    margin-top: var(--espacio-2);
    grid-template-columns: repeat(2, minmax(0, 1fr)) auto;
}

/* Uno que no salió: en rojo, para que se vea antes que nada. */
.com-programado--fallido {
    border-left-color: var(--rs-peligro-texto);
}

.com-programado--fallido .com-programado__icono {
    background: color-mix(in srgb, var(--rs-peligro) 12%, transparent);
    color: var(--rs-peligro-texto);
}

.com-programado--fallido .com-programado__cuando {
    color: var(--rs-peligro-texto);
}

@media (max-width: 760px) {
    .com-programado {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .com-programado .com-enviado__acciones {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }

    .com-programado__hora {
        grid-template-columns: minmax(0, 1fr);
    }
}
/* #endregion */

/* #region 9. Una lista con su título */
/* El título de la lista (o el filtro de Enviados) y, a su lado, «Marcar todos» o el botón de añadir. */
.com-lista {
    display: grid;
    gap: var(--espacio-3);
}

.com-lista__cabecera {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2);
}

.com-lista__cabecera h2:has(> .icono) {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.com-lista__cabecera h2 {
    margin: 0;
}

.com-lista__todas {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}
/* #endregion */

/* #region 10. Lo de cada canal en un enviado (leído, entregado) */
/* Una línea por canal: su nombre con su icono y cómo ha ido (leído por, correos que llegaron). */
.com-enviado__canales {
    grid-area: canales;
    display: grid;
    gap: 2px;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    /* Con la columna ancha (debajo del asunto), la barra y el enlace no se alejan de su frase. */
    max-width: 22rem;
}

/* Cada canal: su icono, lo que dice y, al final de la columna, su barra o su enlace; igual en todas las filas. */
.com-enviado__canal {
    display: grid;
    grid-template-columns: 1rem minmax(0, 1fr) auto;
    align-items: center;
    gap: 2px var(--espacio-2);
}

.com-enviado__canal > .com-lectura {
    min-width: 0;
}

.com-enviado__canal-nombre {
    display: inline-flex;
    align-items: center;
    color: var(--rs-texto-tenue);
}

.com-enviado__canal .icono {
    width: 14px;
    height: 14px;
}

/* Quién lo ha leído: la frase y, si fue a varios o a todos, una barra fina. */
.com-lectura {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
}

.com-lectura--hecha {
    color: var(--rs-exito);
}

/* Correos que no llegaron: para revisar su dirección. */
.com-lectura--aviso {
    color: var(--rs-aviso-texto);
    font-weight: 600;
}

.com-lectura__barra {
    display: inline-block;
    overflow: hidden;
    width: 5rem;
    height: 6px;
    border-radius: var(--radio-pildora);
    background: var(--rs-superficie-3);
}

.com-lectura__barra > span {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: var(--marca-acento);
}
/* #endregion */

/* #region 11. A quién fue un envío (su ventana) */
/* Cada persona en su fila: su cara, su nombre y si ya lo ha leído. */
.com-a-quien {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.com-a-quien__persona {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.com-a-quien__persona:first-child {
    border-top: 0;
}

.com-a-quien__nombre {
    display: grid;
    flex: 1 1 10rem;
    min-width: 0;
}

/* Si cada uno recibió el suyo, debajo de su nombre: lo que le llegó. */
.com-a-quien__nombre small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.com-a-quien__persona .com-lectura {
    flex-shrink: 1;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.com-a-quien__persona .com-lectura--hecha {
    color: var(--rs-exito);
}

.com-a-quien__persona .com-lectura--aviso {
    color: var(--rs-aviso-texto);
}

/* Con los dos canales, cuál se mira: encima de la lista. */
#a-quien-canal {
    justify-self: start;
}
/* #endregion */

/* #region 12. Filas ordenables (categorías de las galerías, sectores de los negocios) */
/* Una fila ordenable: su puesto, su nombre con lo que agrupa y sus botones. */
.com-filas {
    display: grid;
    margin: 0;
    padding: 0;
    list-style: none;
}

.com-fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3) 0;
    border-top: 1px solid var(--rs-borde-sutil);
}

.com-fila:first-child {
    border-top: 0;
}

.com-fila__puesto {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--rs-superficie-3);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
}

.com-fila__textos {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.com-fila__textos small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
}

.com-fila__acciones {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: var(--espacio-2);
}

/* En el móvil, los botones bajan debajo del nombre. */
@media (max-width: 640px) {
    .com-fila {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .com-fila__acciones {
        grid-column: 2;
        justify-content: flex-start;
    }
}
/* #endregion */

/* #region 13. Contadores en las pestañas */
/* El número de enviados en su pestaña. */
.pestanas__contador {
    display: inline-grid;
    place-items: center;
    min-width: 1.375rem;
    height: 1.375rem;
    margin-left: var(--espacio-1);
    padding: 0 6px;
    border-radius: var(--radio-pildora);
    background: var(--rs-cian-suave);
    color: var(--rs-cian-texto);
    font-size: var(--texto-pequeno);
    font-variant-numeric: tabular-nums;
}

/* Lo que espera a alguien (fotos o negocios por revisar): en el tono de aviso. */
.pestanas__contador--aviso {
    background: color-mix(in srgb, var(--rs-aviso) 18%, transparent);
    color: var(--rs-aviso-texto);
    font-weight: 700;
}
/* #endregion */

/* #region Automáticos: lo que se avisa solo a los socios */
.com-automaticos {
    display: grid;
    gap: var(--espacio-4);
}

.com-auto {
    display: grid;
    gap: var(--espacio-3);
}

.com-auto__titulo {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    font-size: var(--texto-grande);
}

.com-auto__lista,
.com-auto__siempre {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.com-auto__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
    padding-block: var(--espacio-2);
    border-top: 1px solid var(--rs-borde-sutil);
}

.com-auto__fila:first-child {
    border-top: 0;
}

.com-auto__opcion {
    align-items: flex-start;
}

.com-auto__opcion span {
    display: grid;
    gap: 2px;
}

.com-auto__opcion small {
    color: var(--rs-texto-secundario);
    font-size: var(--texto-pequeno);
}

.com-auto__dias {
    margin-left: calc(1.25rem + var(--espacio-2));
}

.com-auto__dias select {
    min-width: 11rem;
}

.com-auto__siempre li {
    display: flex;
    align-items: flex-start;
    gap: var(--espacio-2);
}

.com-auto__siempre .icono {
    flex: none;
    margin-top: 2px;
    color: var(--rs-exito);
}
/* #endregion */

/* #region Cómo se ven vuestros correos (la plantilla de la asociación) */
/* A la izquierda se elige; a la derecha, el correo de muestra con lo guardado (debajo en pantallas estrechas). */
.com-plantilla__cuerpo {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    gap: var(--espacio-5);
    align-items: start;
}

.com-plantilla__ajustes {
    display: grid;
    gap: var(--espacio-4);
}

.com-plantilla__grupo {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    border: 0;
}

.com-plantilla__grupo legend {
    margin-bottom: var(--espacio-2);
    font-weight: 700;
}

/* Cada casilla del pie: su nombre y, debajo, lo que saldrá (o dónde ponerlo). */
.com-plantilla .campo-checkbox span {
    display: grid;
    gap: 2px;
}

.com-plantilla .campo-checkbox small {
    color: var(--rs-texto-secundario);
}

.com-plantilla__color {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
}

.com-plantilla__color input[type="color"] {
    inline-size: 3rem;
    block-size: 2.25rem;
    padding: 0;
    border: 1px solid var(--rs-borde-control);
    border-radius: var(--radio-sm);
    background: transparent;
    cursor: pointer;
}

.com-plantilla__imagen {
    width: 100%;
    max-width: 24rem;
    border-radius: var(--radio-md);
}

.com-plantilla__imagen[hidden] {
    display: none;
}

.com-plantilla__vista {
    position: sticky;
    /* Debajo de la barra de arriba del panel, que también se queda fija. */
    top: calc(var(--alto-superior) + var(--espacio-4));
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
}

/* Depende del ancho de su tarjeta, no de la pantalla: a media pantalla, el correo de muestra se montaba encima de las opciones. */
.com-plantilla {
    container-type: inline-size;
}

@container (max-width: 46rem) {
    .com-plantilla__cuerpo {
        grid-template-columns: minmax(0, 1fr);
    }

    .com-plantilla__vista {
        position: static;
    }
}
/* #endregion */

/* #region Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    .com-enviado--nuevo {
        animation: none;
    }
}
/* #endregion */

/* #region Avisos importantes con «Enterado» (migración 0260) */
.com-importante[hidden] {
    display: none;
}

/* Como un canal: su icono, lo que es y la marca a la derecha (no debajo). */
.com-importante {
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    margin-top: var(--espacio-1);
}

.com-importante:has(input:checked) .com-canal__marca {
    border-color: var(--marca-boton);
    background: var(--marca-boton);
    color: var(--marca-sobre-boton);
}

.com-enviado__canal--importante .boton-enlace {
    margin-left: var(--espacio-2);
}

.com-importante__cifras {
    margin: 0;
    font-weight: 600;
}

.com-importante__lista {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: var(--espacio-2);
    max-height: 55vh;
    overflow-y: auto;
}

.com-importante__persona {
    padding: var(--espacio-2) 0;
    border-top: 1px solid var(--rs-borde);
}

.com-importante__fila {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--espacio-2);
}

.com-importante__fila strong {
    flex: 1;
    min-width: 10rem;
}

.com-importante__linea {
    margin: var(--espacio-1) 0 0;
    padding-left: 1.25rem;
    font-size: 0.875rem;
}
/* #endregion */

/* #region Vuestro dominio (motor de envíos, fase 3) */
.com-dominio__campos {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: var(--espacio-2);
}

.com-dominio__campos .campo {
    flex: 1 1 12rem;
    margin: 0;
}

.com-dominio__campos .campo:first-child {
    flex: 0 1 10rem;
}

.com-dominio__arroba {
    padding-bottom: var(--espacio-2);
    font-weight: 600;
    color: var(--rs-texto-tenue);
}

.com-dominio__lineas {
    margin-top: var(--espacio-4);
    overflow-x: auto;
}

.com-dominio__lineas code {
    word-break: break-all;
    font-size: 0.85em;
}

.com-dominio__lineas td .icono {
    vertical-align: middle;
    margin-right: var(--espacio-1);
}
/* #endregion */