/*
 * «Nuestras redes» (docs/contenidos.md), en sus dos caras:
 * - el panel de la Junta (/gestion/redes): la carga
 *   plantillas/gestion/redes.php después de panel.css, gestion.css y
 *   comunicaciones.css (la lista con su título);
 * - la pestaña «Redes» de Comunidad en el área de socio (/socio/redes): la
 *   carga plantillas/socio/redes.php después de socio.css y
 *   socio-comunidad.css; socio/redes.js pinta las fichas.
 *
 * Las piezas van en el orden en que salen:
 *
 *   1. El color de cada red (las dos caras)
 *   2. Junta: pegar o cambiar un enlace
 *   3. Junta: lo que ven los socios
 *   4. Socio: los grupos y sus listas
 *   5. Socio: Síguenos, cada red en su ficha
 *   6. Socio: los vídeos
 *   7. Socio: los enlaces
 *
 * Convenciones:
 * - Cada red lleva su color de marca (es su identidad, no la de Rasedia);
 *   lo demás, los colores de la asociación (base.css, familia de tonos).
 * - El modo claro y el móvil, junto a cada pieza; reducir movimiento, al
 *   final.
 */

/* #region 1. El color de cada red (las dos caras) */
/*
 * --color-red pinta el fondo (puede ser un degradado). Lo usan el icono del
 * panel (.redes-icono--…) y las fichas y vídeos del socio (.redes-marca--…).
 */
.redes-icono--instagram, .redes-marca--instagram { --color-red: linear-gradient(45deg, #F09433, #DC2743 50%, #BC1888); }
.redes-icono--facebook, .redes-marca--facebook { --color-red: #1877F2; }
.redes-icono--youtube, .redes-marca--youtube { --color-red: #E00000; }
.redes-icono--tiktok, .redes-marca--tiktok { --color-red: linear-gradient(135deg, #111, #2A2A2A); }
.redes-icono--x, .redes-marca--x { --color-red: linear-gradient(135deg, #111, #2A2A2A); }
.redes-icono--whatsapp, .redes-marca--whatsapp { --color-red: #1FA855; }
.redes-icono--telegram, .redes-marca--telegram { --color-red: #229ED9; }
.redes-icono--linkedin, .redes-marca--linkedin { --color-red: #0A66C2; }
.redes-icono--twitch, .redes-marca--twitch { --color-red: #9146FF; }
.redes-icono--spotify, .redes-marca--spotify { --color-red: #1DB954; }
.redes-icono--vimeo, .redes-marca--vimeo { --color-red: #1AB7EA; }
/* #endregion */

/* #region 2. Junta: pegar o cambiar un enlace */
/* Añadir (arriba) y cambiar (en su ventana): el mismo formulario. */
.redes-formulario {
    display: grid;
    gap: var(--espacio-3);
}

.redes-formulario > h2,
.redes-formulario .campo,
.redes-formulario .aviso {
    margin: 0;
}

.redes-formulario .fila-campos {
    align-items: start;
}

/* Qué red se ha reconocido en el enlace pegado; si no se reconoce, en gris. */
.redes-detectado {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
    min-height: 1.5rem;
    margin: var(--espacio-1) 0 0;
    color: var(--marca-acento);
    font-weight: 600;
}

.redes-detectado:empty {
    display: none;
}

.redes-detectado--mal {
    color: var(--rs-texto-secundario);
    font-weight: 400;
}

/* El nombre en los otros idiomas, plegado. */
.redes-otros-idiomas summary {
    display: inline-flex;
    align-items: center;
    gap: var(--espacio-2);
    color: var(--marca-acento);
    font-weight: 600;
    cursor: pointer;
}

.redes-otros-idiomas summary .icono {
    width: 15px;
    height: 15px;
}

.redes-otros-idiomas[open] summary {
    margin-bottom: var(--espacio-3);
}
/* #endregion */

/* #region 3. Junta: lo que ven los socios */
.redes-junta {
    display: grid;
    gap: var(--espacio-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Cada enlace: el icono de su red, sus datos y sus botones. */
.redes-junta__fila {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-2) 0;
    border-bottom: 1px solid var(--rs-borde-sutil);
}

.redes-junta__fila:last-child {
    border-bottom: 0;
}

/* El icono, en el color de su red; un enlace normal, en el de la asociación. */
.redes-icono {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: var(--radio-md);
    background: var(--color-red, color-mix(in srgb, var(--marca-acento) 16%, transparent));
    color: var(--marca-acento);
}

.redes-icono[class*="redes-icono--"] {
    color: #FFFFFF;
}

.redes-icono .icono {
    width: 1.4rem;
    height: 1.4rem;
}

.redes-junta__datos {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.redes-junta__datos small {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

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

/* En el móvil, los botones bajan debajo, a lo ancho. */
@media (max-width: 760px) {
    .redes-junta__fila {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .redes-junta__acciones {
        grid-column: 1 / -1;
        justify-content: flex-start;
    }
}
/* #endregion */

/* #region 4. Socio: los grupos y sus listas */
/* Síguenos, Vídeos y Enlaces, cada uno con su título. */
.redes-grupo {
    margin-bottom: var(--espacio-6);
}

.redes-grupo h2 {
    margin: 0 0 var(--espacio-3);
    font-size: var(--texto-grande);
}

.redes-mosaico,
.redes-videos,
.redes-enlaces {
    display: grid;
    gap: var(--espacio-3);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Todas las fichas de una fila, del mismo alto aunque un título ocupe dos líneas. */
.redes-mosaico > li,
.redes-videos > li,
.redes-enlaces > li {
    display: flex;
}

.redes-mosaico > li > a,
.redes-videos > li > a,
.redes-enlaces > li > a {
    flex: 1;
}
/* #endregion */

/* #region 5. Socio: Síguenos, cada red en su ficha */
/* Una ficha compacta en el color de la red: su icono, la cuenta y la flecha de «Seguir». */
.redes-mosaico {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 12.5rem), 1fr));
}

.redes-red {
    position: relative;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--espacio-3);
    padding: var(--espacio-3);
    overflow: hidden;
    border-radius: var(--radio-lg);
    background: var(--color-red, linear-gradient(135deg, var(--marca-boton), var(--marca-acento)));
    color: #FFFFFF;
    text-decoration: none;
    box-shadow: 0 6px 16px rgb(0 0 0 / 0.16);
    transition: transform var(--duracion-hover) var(--curva), box-shadow var(--duracion-hover) var(--curva);
}

/* Un brillo suave arriba: la ficha no es un plano de color. */
.redes-red::before {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(120% 80% at 0% 0%, rgb(255 255 255 / 0.22), transparent 60%);
    pointer-events: none;
}

.redes-red:hover {
    color: #FFFFFF;
    text-decoration: none;
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgb(0 0 0 / 0.3);
}

.redes-red:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.redes-red__icono {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgb(255 255 255 / 0.18);
}

.redes-red__icono .icono {
    width: 22px;
    height: 22px;
}

.redes-red__textos {
    display: grid;
    gap: 2px;
    min-width: 0;
}

.redes-red__textos strong {
    font-family: var(--fuente-display);
    font-size: var(--texto-grande);
}

.redes-red__textos small {
    overflow: hidden;
    color: rgb(255 255 255 / 0.85);
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* «Seguir», un círculo blanco con la flecha (el texto, para lectores de pantalla). */
.redes-red__seguir {
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.95);
    color: #10141A;
    font-size: 0;
}

.redes-red__seguir .icono {
    width: 15px;
    height: 15px;
}

/* En el móvil, dos por fila y sin la flecha: la ficha entera ya es el enlace. */
@media (max-width: 640px) {
    .redes-mosaico {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .redes-red {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .redes-red__seguir {
        display: none;
    }
}
/* #endregion */

/* #region 6. Socio: los vídeos */
/* Todos iguales: tres por fila en el ordenador y dos en el móvil. */
.redes-videos {
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
}

.redes-video {
    display: grid;
    grid-template-rows: auto 1fr;
    color: var(--rs-texto);
    text-decoration: none;
}

.redes-video:hover {
    border-color: color-mix(in srgb, var(--tono-video, var(--marca-acento)) 55%, var(--rs-borde));
    color: var(--rs-texto);
    text-decoration: none;
    transform: translateY(-2px);
}

.redes-video:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

/* Sin la miniatura del vídeo (no se cargan imágenes de fuera, sección 102): una portada en los tonos de la asociación. */
.redes-video__portada {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 9;
    background:
        radial-gradient(80% 90% at 20% 10%, rgb(255 255 255 / 0.2), transparent 60%),
        linear-gradient(135deg, var(--tono-video, var(--marca-acento)), color-mix(in srgb, var(--tono-video, var(--marca-acento)) 45%, #000));
}

.redes-video__play {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: rgb(255 255 255 / 0.95);
    color: #10141A;
    box-shadow: 0 10px 30px rgb(0 0 0 / 0.35);
    transition: transform var(--duracion-hover) var(--curva);
}

.redes-video:hover .redes-video__play {
    transform: scale(1.08);
}

.redes-video__play .icono {
    width: 26px;
    height: 26px;
    margin-left: 3px;
}

/* De qué plataforma es, arriba a la izquierda, en su color. */
.redes-video__plataforma {
    position: absolute;
    top: var(--espacio-3);
    left: var(--espacio-3);
    display: grid;
    place-items: center;
    width: 34px;
    height: 34px;
    border-radius: var(--radio-md);
    background: var(--color-red, rgb(0 0 0 / 0.35));
    color: #FFFFFF;
}

.redes-video__plataforma .icono {
    width: 18px;
    height: 18px;
}

.redes-video__textos {
    display: grid;
    align-content: start;
    gap: 2px;
    min-width: 0;
    padding: var(--espacio-3) var(--espacio-4) var(--espacio-4);
}

.redes-video__textos strong {
    font-family: var(--fuente-display);
}

.redes-video__textos small {
    overflow: hidden;
    color: var(--rs-texto-secundario);
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 640px) {
    .redes-videos {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .redes-video__textos {
        padding: var(--espacio-2) var(--espacio-3) var(--espacio-3);
    }
}
/* #endregion */

/* #region 7. Socio: los enlaces */
/* De dos en dos (en el móvil, uno por fila), cada uno con su icono en un tono de la asociación. */
.redes-enlaces {
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
}

.redes-enlace {
    display: flex;
    align-items: center;
    gap: var(--espacio-3);
    color: var(--rs-texto);
    text-decoration: none;
    padding-block: var(--espacio-3);
    border-top: 1px solid var(--rs-borde-sutil);
}

.redes-enlace:hover {
    border-color: color-mix(in srgb, var(--tono-enlace, var(--marca-acento)) 50%, var(--rs-borde));
    color: var(--rs-texto);
    text-decoration: none;
}

.redes-enlace:focus-visible {
    outline: none;
    box-shadow: var(--anillo-foco);
}

.redes-enlace__icono {
    display: grid;
    flex: none;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--tono-enlace, var(--marca-acento)) 16%, transparent);
    color: var(--tono-enlace, var(--marca-acento));
}

.redes-enlace__textos {
    display: grid;
    flex: 1;
    gap: 2px;
    min-width: 0;
}

.redes-enlace__textos small {
    overflow: hidden;
    color: var(--rs-texto-secundario);
    text-overflow: ellipsis;
    white-space: nowrap;
}

.redes-enlace > .icono {
    flex: none;
    color: var(--rs-texto-tenue);
}
/* #endregion */

/* #region Reducir movimiento */
@media (prefers-reduced-motion: reduce) {
    .redes-red,
    .redes-video,
    .redes-video__play {
        transition: none;
    }
}
/* #endregion */