/*
 * «Notificaciones» (/socio/notificaciones; rehecha el 6 nov 2026, Sergi: «rediseña esto a algo más premium»): arriba, una
 * frase grande que cuenta lo que hay debajo. Lo por hacer, una nota por cosa, con su color y su acción; lo hecho y los
 * avisos, a dos columnas: el día, grande y fijo, y lo que llegó. «¿De qué te avisamos?», al final y plegado.
 *
 *  1. La pantalla
 *  2. La frase de arriba
 *  3. Lo por hacer: una nota por cosa
 *  4. Lo demás: por días
 *  5. Cada mensaje
 *  6. ¿De qué te avisamos?
 *
 * Convenciones: el color del dibujo de cada mensaje dice de qué va y vive en --color-notificacion; lo ya leído se
 * apaga, y lo nuevo lleva el punto en el color de la asociación.
 */

/* #region 1. La pantalla */
.notificaciones-lista,
.notificaciones-lado {
    display: grid;
    gap: var(--espacio-6);
    min-width: 0;
}

.notificaciones-lado {
    margin-top: var(--espacio-8);
}

.notificaciones-lado:not(:has(> :not([hidden]))) {
    display: none;
}
/* #endregion */

/* #region 2. La frase de arriba */
.notificaciones-resumen {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--espacio-2) var(--espacio-4);
}

.notificaciones-resumen:not(:has(> :not([hidden]))) {
    display: none;
}

.notificaciones-resumen p {
    margin: 0;
    font-family: var(--fuente-display);
    font-size: clamp(1.75rem, 3vw, 2.75rem);
    font-weight: 650;
    letter-spacing: -0.035em;
    line-height: 1.1;
    word-spacing: 0.08em;
}

/* El número al lado de cada pestaña. */
.notificaciones-pestanas__n {
    color: inherit;
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
    opacity: 0.72;
}

.notificaciones-pestanas__n:empty {
    display: none;
}

/* Todo hecho: un visto, sin caja. */
#notificaciones-vacio[data-pestana="por_hacer"]::before {
    width: 44px;
    height: 44px;
    border: 0;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F8A5B' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* #endregion */

/* #region 3. Lo por hacer: una nota por cosa */
.notificaciones-dias[data-pestana="por_hacer"] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 24rem), 1fr));
    gap: var(--espacio-5);
}

.tarea {
    --color-notificacion: var(--color-comunicar);
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
    min-width: 0;
    padding: var(--espacio-5);
    border-top: 3px solid var(--color-notificacion);
    border-radius: 4px 4px var(--radio-lg) var(--radio-lg);
    background: var(--rs-superficie-1);
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 10px 26px rgb(0 0 0 / 0.08);
    transition: transform var(--duracion-hover) var(--curva), box-shadow var(--duracion-hover) var(--curva);
}

:root[data-theme="dark"] .tarea {
    background: var(--rs-superficie-2);
}

.tarea__arriba {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--espacio-3);
    margin-bottom: var(--espacio-1);
}

.tarea .notificacion__icono {
    opacity: 1;
}

.tarea .notificacion__icono .icono {
    width: 26px;
    height: 26px;
}

.tarea h3 {
    margin: 0;
    color: var(--rs-texto);
    font-family: var(--fuente-display);
    font-size: 1.1875rem;
    font-weight: 650;
    letter-spacing: -0.015em;
    line-height: 1.25;
}

.tarea .notificacion__cuerpo {
    color: var(--rs-texto-secundario);
}

/* La acción, siempre abajo; lleva la mano toda la nota. */
.tarea__accion {
    display: flex;
    margin-top: auto;
    padding-top: var(--espacio-3);
}

.tarea__accion:empty {
    display: none;
}

.tarea__accion .boton {
    position: relative;
    z-index: 1;
}

.tarea__hacer {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--marca-acento);
    font-weight: 650;
}

.tarea__hacer .icono {
    width: 18px;
    height: 18px;
    transition: transform var(--duracion-hover) var(--curva);
}

.tarea__hacer::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
}

.tarea__hacer:focus-visible {
    outline: none;
}

.tarea__hacer:focus-visible::after {
    box-shadow: var(--anillo-foco);
}

@media (hover: hover) {
    .tarea:has(.tarea__hacer):hover {
        box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 16px 34px rgb(0 0 0 / 0.14);
        transform: translateY(-2px);
    }

    .tarea:hover .tarea__hacer .icono {
        transform: translateX(3px);
    }
}
/* #endregion */

/* #region 4. Lo demás: por días */
.notificaciones-dias,
.notificaciones-dia__lista {
    margin: 0;
    padding: 0;
    list-style: none;
}

.notificaciones-dia {
    display: grid;
    grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr);
    align-items: start;
    gap: 0 var(--espacio-6);
    padding-block: var(--espacio-5);
}

.notificaciones-dia + .notificaciones-dia {
    border-top: 1px solid var(--rs-borde-sutil);
}

/* El día, grande, y se queda a la vista mientras se baja por sus mensajes. */
.notificaciones-dia__titulo {
    position: sticky;
    top: calc(var(--alto-superior, 64px) + var(--espacio-4));
    margin: 0;
    padding-top: var(--espacio-3);
    font-family: var(--fuente-display);
    font-size: clamp(1.25rem, 1.8vw, 1.6rem);
    font-weight: 650;
    letter-spacing: -0.025em;
    line-height: 1.15;
}

@media (max-width: 767px) {
    .notificaciones-dia {
        grid-template-columns: minmax(0, 1fr);
    }

    .notificaciones-dia__titulo {
        position: static;
    }
}
/* #endregion */

/* #region 5. Cada mensaje */
/* El dibujo de qué va, sin caja; el título y el texto; a la derecha, cuándo y lo que se puede hacer. */
.notificacion {
    --color-notificacion: var(--color-comunicar);
    position: relative;
    display: grid;
    grid-template-columns: 1.75rem minmax(0, 1fr) auto;
    align-items: start;
    gap: 0 var(--espacio-3);
    padding: var(--espacio-3);
    margin-inline: calc(-1 * var(--espacio-3));
    border-radius: var(--radio-md);
    transition: background-color var(--duracion-hover) var(--curva);
}

@media (hover: hover) {
    .notificacion:hover {
        background: var(--rs-hover);
    }
}

.notificacion--personas {
    --color-notificacion: var(--color-personas);
}

.notificacion--dinero {
    --color-notificacion: var(--color-dinero);
}

.notificacion--eventos {
    --color-notificacion: var(--color-eventos);
}

.notificacion--tienda {
    --color-notificacion: var(--color-tienda);
}

.notificacion--secretaria {
    --color-notificacion: var(--color-secretaria);
}

.notificacion--aviso {
    --color-notificacion: var(--rs-aviso);
}

.notificacion--cumpleanos {
    --color-notificacion: #D9468F;
}

.notificacion__icono {
    color: var(--color-notificacion);
    opacity: 0.6;
}

.notificacion--nueva .notificacion__icono {
    opacity: 1;
}

.notificacion__icono .icono {
    display: block;
    width: 22px;
    height: 22px;
}

.notificacion__contenido {
    display: grid;
    gap: 3px;
    min-width: 0;
}

.notificacion h3 {
    margin: 0;
    color: var(--rs-texto-secundario);
    font-family: var(--fuente-ui);
    font-size: var(--texto-base);
    font-weight: 500;
    line-height: 1.35;
    word-spacing: 0;
    transition: color var(--duracion-hover) var(--curva);
}

.notificacion--nueva h3 {
    color: var(--rs-texto);
    font-weight: 650;
}

/* El punto de lo nuevo. */
.notificacion__punto {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-inline-end: var(--espacio-2);
    border-radius: 50%;
    background: var(--marca-acento);
    vertical-align: 0.1em;
}

.notificacion__cuerpo {
    max-width: 72ch;
    margin: 0;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    line-height: 1.5;
    white-space: pre-line;
    overflow-wrap: anywhere;
}

.notificacion--nueva .notificacion__cuerpo {
    color: var(--rs-texto-secundario);
}

/* A la derecha: cuándo llegó (con su candado, si es solo para él) y, al lado, la papelera y adónde lleva. */
.notificacion__lado {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin-top: -5px;
}

.notificacion__cuando {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    margin: 0;
    color: var(--rs-texto-tenue);
    font-size: var(--texto-etiqueta);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.notificacion__personal {
    display: inline-flex;
}

.notificacion__personal .icono {
    width: 13px;
    height: 13px;
}

.notificacion__estado {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-weight: 600;
}

.notificacion__estado--hecha {
    color: var(--rs-exito-texto);
}

.notificacion__estado .icono {
    width: 14px;
    height: 14px;
}

.notificacion__acciones {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.notificacion__acciones:empty {
    display: none;
}

/* Si lleva a algún sitio, se pulsa toda la fila. */
.notificacion__abrir::after {
    content: "";
    position: absolute;
    inset: 0;
}

.notificacion__acciones:has(.notificacion__abrir) {
    position: static;
}

.notificacion__acciones :is(.boton:not(.notificacion__abrir), .notificacion__borrar) {
    position: relative;
    z-index: 1;
}

.notificacion__abrir.boton {
    position: static;
}

.notificacion__abrir--flecha {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    color: var(--rs-texto-tenue);
    transition: color var(--duracion-hover) var(--curva);
}

/* Se mueve el dibujo, nunca el enlace: con un transform, su zona pulsable dejaría de ser toda la fila. */
.notificacion__abrir--flecha .icono {
    width: 18px;
    height: 18px;
    transition: transform var(--duracion-hover) var(--curva);
}

.notificacion__abrir:focus-visible {
    outline: none;
}

.notificacion__abrir:focus-visible::after {
    border-radius: var(--radio-sm);
    box-shadow: var(--anillo-foco);
}

@media (hover: hover) {
    .notificacion:has(.notificacion__abrir--flecha):hover h3 {
        color: var(--marca-acento);
    }

    .notificacion:hover .notificacion__abrir--flecha {
        color: var(--marca-acento);
    }

    .notificacion:hover .notificacion__abrir--flecha .icono {
        transform: translateX(3px);
    }

    /* La papelera, al pasar por la fila: que no se repita en todas. */
    .notificacion__borrar {
        opacity: 0;
        transition: opacity var(--duracion-hover) var(--curva);
    }

    .notificacion:hover .notificacion__borrar,
    .notificacion__borrar:focus-visible {
        opacity: 1;
    }
}

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

@media (max-width: 767px) {
    /* Todo el ancho para leer: la flecha a la derecha y, debajo del texto, cuándo y la papelera. */
    .notificacion__lado,
    .notificacion__acciones {
        display: contents;
    }

    .notificacion__cuando {
        grid-column: 2;
        grid-row: 2;
        margin-top: var(--espacio-2);
    }

    .notificacion__borrar {
        grid-column: 2;
        grid-row: 2;
        justify-self: end;
        margin-top: var(--espacio-1);
        margin-inline-end: -6px;
    }

    .notificacion__abrir--flecha {
        grid-column: 3;
        grid-row: 1;
        align-self: center;
    }

    .notificacion__acciones > .boton:not(.notificacion__borrar) {
        grid-column: 2 / -1;
        grid-row: 3;
        justify-self: start;
        margin-top: var(--espacio-3);
    }
}
/* #endregion */

/* #region 6. ¿De qué te avisamos? */
.notificaciones-que[hidden] {
    display: none;
}

.notificaciones-que > summary {
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
    font-weight: 650;
    letter-spacing: -0.01em;
}

.notificaciones-que__intro {
    margin: 0 0 var(--espacio-3);
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.5;
}

.notificaciones-que__lista {
    columns: 3 18rem;
    column-gap: var(--espacio-8);
    margin: 0 0 var(--espacio-4);
    padding: 0;
    color: var(--rs-texto-secundario);
    font-size: var(--texto-etiqueta);
    line-height: 1.45;
    list-style: none;
}

.notificaciones-que__lista li {
    padding-block: var(--espacio-2);
    border-top: 1px solid var(--rs-borde-sutil);
    break-inside: avoid;
}
/* #endregion */

/* #region Un aviso entero (/socio/aviso) */
/* Adonde lleva el botón del correo: el texto, las fotos, el botón y los documentos (docs/motor-envios.md). */
.aviso-correo__tarjeta[hidden],
.aviso-correo__fotos[hidden],
.aviso-correo__documentos[hidden],
#aviso-boton[hidden] {
    display: none;
}

.aviso-correo__tarjeta {
    max-width: 44rem;
    margin: 0 auto;
    padding: var(--espacio-5);
    border-top: 4px solid var(--marca-principal, var(--rs-azul));
}

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

.aviso-correo__titulo {
    margin: 0 0 var(--espacio-4);
    font-size: 1.5rem;
    line-height: 1.3;
}

.aviso-correo__texto p {
    margin: 0 0 var(--espacio-3);
    line-height: 1.6;
    overflow-wrap: anywhere;
}

/* La primera foto a lo ancho y las demás de dos en dos, como en el correo. */
.aviso-correo__fotos {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--espacio-2);
    margin: var(--espacio-4) 0;
}

.aviso-correo__fotos a:first-child {
    grid-column: 1 / -1;
}

.aviso-correo__fotos img {
    display: block;
    width: 100%;
    height: 100%;
    max-height: 28rem;
    object-fit: cover;
    border-radius: var(--radio-md);
}

.aviso-correo__documentos h2 {
    margin: var(--espacio-4) 0 var(--espacio-2);
    font-size: 1rem;
}

.aviso-correo__documentos ul {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

.aviso-correo__documento {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3);
    border: 1px solid var(--rs-borde);
    border-radius: var(--radio-md);
    color: inherit;
    text-decoration: none;
}

.aviso-correo__documento:hover,
.aviso-correo__documento:focus-visible {
    border-color: var(--rs-azul);
}

.aviso-correo__documento span {
    display: grid;
    flex: 1;
    min-width: 0;
}

.aviso-correo__documento strong {
    overflow-wrap: anywhere;
}

.aviso-correo__documento small {
    color: var(--rs-texto-tenue);
}
/* #endregion */