/*
 * Estilos de las Secciones Juveniles.
 *
 * Se carga solo en /secciones-juveniles/ (frontend público) y en el
 * panel /admin/secciones-juveniles/ (listado y formulario de edición).
 *
 * Reutiliza variables ya definidas en base.css (--color-primario,
 * --color-acento, --espacio-*, --radio-borde, etc.) para mantener la
 * coherencia con el resto del sitio.
 */


/* ====================================================================
   FRONTEND PÚBLICO
   ==================================================================== */

.seccion-secciones {
    max-width: 75rem;
    margin: var(--espacio-5) auto;
    padding: 0 var(--espacio-3);
}

.seccion-secciones__cabecera {
    text-align: center;
    margin-bottom: var(--espacio-4);
}

.seccion-secciones__cabecera p {
    color: var(--color-texto-claro);
    font-size: 1.05rem;
    max-width: 48rem;
    margin: 0.5rem auto 0;
}


/* ---------- Toggle Mapa / Lista ---------- */

.secciones-toggle-vista {
    display: flex;
    justify-content: center;
    gap: 0.5rem;
    margin-bottom: var(--espacio-3);
    flex-wrap: wrap;
}

.secciones-toggle-vista__boton {
    min-width: 11rem;
}

/* Botón activo: relleno con el color primario para que se sepa cuál
   está seleccionada. Usamos el mismo verde teal del sitio para
   coherencia visual. */
.secciones-toggle-vista__boton--activo {
    background: var(--color-primario);
    color: #fff;
    border-color: var(--color-primario);
}


/* ---------- Mapa SVG (overlay sobre PNG cartográfico) ----------
   El SVG embebe el PNG de fondo (mapa real de España) con <image>.
   Encima, 19 <polygon> dibujan las zonas clicables: son transparentes
   por defecto para no estorbar el mapa, y aparecen con color
   translúcido cuando son activas, inactivas, hover o focus.
   El viewBox del SVG (1000x695) coincide con el tamaño en píxeles
   del PNG, así que las coordenadas de los polígonos van en píxeles
   de la imagen original (1000x695). */
.secciones-mapa-envoltorio {
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-3);
    margin-bottom: var(--espacio-4);
}

.mapa-espana {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1000px;
    margin: 0 auto;
}

/* Por defecto, las regiones son totalmente invisibles (fill y stroke
   transparentes) para que solo se vea el PNG de fondo. El único
   indicador permanente es el cursor "mano", para que la persona note
   al pasar por encima que la zona es clicable. */
.mapa-region {
    fill: rgba(0, 0, 0, 0);
    stroke: rgba(0, 0, 0, 0);
    cursor: pointer;
    transition: fill 0.2s ease, filter 0.2s ease;
    outline: none;
}

/* Activa: mancha azul muy clara y difuminada sobre el PNG.
   El color elegido aporta un tono suave y claro que deja el mapa
   legible y mantiene la región visible sin resultar agresivo. */
.mapa-region--activa {
    fill: rgba(202, 223, 227, 0.75);
    filter: blur(5px);
}

/* Inactivas: SIN capa de color. Razón: si se les pintaba un gris
   claro, el desajuste se notaba en 15-18 polígonos a la vez y el
   mapa quedaba muy ruidoso. Mejor que las inactivas no se vean en
   reposo; la leyenda explica que "sin mancha = todavía no hay
   sección activa". Siguen siendo clicables y el hover de abajo
   las revela al pasar por encima. */
.mapa-region--inactiva {
    fill: rgba(0, 0, 0, 0);
}

/* Hover: halo naranja difuminado. Mismo tratamiento que la activa
   para que el difuminado oculte el desajuste del polígono. */
.mapa-region:hover {
    fill: rgba(248, 149, 42, 0.6);
    filter: blur(4px);
}

/* Focus visible (teclado): blur menor que hover + drop-shadow extra
   para que se vea claramente sobre cualquier color del PNG. WCAG 2.4.7
   pide foco visible; el cambio de color, el cambio de cursor y el
   halo expandido lo cubren con margen. */
.mapa-region:focus-visible {
    fill: rgba(248, 149, 42, 0.7);
    filter: blur(3px) drop-shadow(0 0 8px rgba(248, 149, 42, 0.9));
}

/* Al pasar por una CCAA activa, su verde cambia a naranja: así la
   persona sabe sin dudar cuál está apuntando, incluso si tiene ceguera
   al color verde-rojo (ambos cambios visibles: posición del halo y
   color). */
.mapa-region--activa:hover {
    fill: rgba(248, 149, 42, 0.7);
}

.mapa-region--activa:focus-visible {
    fill: rgba(248, 149, 42, 0.75);
}

/* Respeto a personas con preferencias de movimiento reducido. */
@media (prefers-reduced-motion: reduce) {
    .mapa-region { transition: none; }
}

/* Atribución de la imagen de fondo (CC BY-SA 3.0 requiere mención
   visible). Va en pequeño debajo del mapa, sin estorbar. */
.mapa-atribucion {
    margin: 0.5rem 0 0;
    text-align: right;
    color: var(--color-texto-claro);
    font-size: 0.75rem;
}

.mapa-atribucion a {
    color: inherit;
    text-decoration: underline;
}


/* ---------- Leyenda de colores ---------- */

.secciones-leyenda {
    list-style: none;
    padding: 0;
    margin: var(--espacio-2) 0 0;
    display: flex;
    justify-content: center;
    gap: var(--espacio-3);
    flex-wrap: wrap;
    color: var(--color-texto-claro);
    font-size: 0.9rem;
}

.secciones-leyenda li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.secciones-leyenda__muestra {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 1px solid var(--color-primario);
    border-radius: 3px;
}

.secciones-leyenda__muestra--activa {
    background: #CADFE3;
}

.secciones-leyenda__muestra--inactiva {
    background: #c8cfd2;
}


/* ---------- Lista alternativa ---------- */

.secciones-lista-envoltorio {
    margin-top: var(--espacio-3);
}

.secciones-lista__titulo {
    margin-top: 0;
}

.secciones-lista {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--espacio-3);
}

.secciones-lista__vacio {
    color: var(--color-texto-claro);
    background: var(--color-fondo-alterno);
    border: 1px dashed var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-3);
    text-align: center;
}


/* ---------- Tarjeta de sección activa ---------- */

.seccion-tarjeta {
    background: var(--color-fondo);
    border: 1px solid var(--color-borde);
    border-left: 4px solid var(--color-primario);
    border-radius: var(--radio-borde);
    padding: var(--espacio-2) var(--espacio-3);
    display: flex;
    flex-direction: column;
    gap: var(--espacio-2);
}

.seccion-tarjeta__cabecera {
    display: flex;
    align-items: center;
    gap: var(--espacio-2);
}

.seccion-tarjeta__logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
    border-radius: var(--radio-borde);
    background: var(--color-fondo-alterno);
    padding: 0.25rem;
    flex-shrink: 0;
}

.seccion-tarjeta__ccaa {
    margin: 0;
    font-size: 1.1rem;
    color: var(--color-primario);
}

.seccion-tarjeta__nombre {
    margin: 0.1rem 0 0;
    color: var(--color-texto);
}

/* Lista de definiciones para los datos de contacto. */
.seccion-tarjeta__datos {
    margin: 0;
    display: grid;
    gap: 0.4rem;
}

.seccion-tarjeta__datos > div {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.seccion-tarjeta__datos dt {
    color: var(--color-primario);
    flex-shrink: 0;
}

.seccion-tarjeta__datos dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.seccion-tarjeta__redes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.seccion-tarjeta__red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-fondo-alterno);
    color: var(--color-primario);
    text-decoration: none;
    font-size: 1rem;
}

.seccion-tarjeta__red:hover,
.seccion-tarjeta__red:focus-visible {
    background: var(--color-primario);
    color: #fff;
}

.seccion-tarjeta__notas {
    margin: 0;
    color: var(--color-texto-claro);
    font-size: 0.9rem;
    font-style: italic;
}


/* ---------- Bloque de inactivas (acordeón) ---------- */

.secciones-inactivas {
    margin-top: var(--espacio-4);
    background: var(--color-fondo-alterno);
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-2) var(--espacio-3);
}

.secciones-inactivas summary {
    cursor: pointer;
    font-weight: 600;
    color: var(--color-primario);
}

.secciones-inactivas__lista {
    list-style: none;
    padding: 0;
    margin: var(--espacio-2) 0 0;
    display: grid;
    gap: 0.5rem;
    color: var(--color-texto-claro);
    font-size: 0.95rem;
}


/* ---------- Toggle de vista: ocultar sin romper accesibilidad ----------
   No usamos display:none porque eso quitaría el contenido del flujo
   accesible (lectores de pantalla). Lo movemos fuera de pantalla con
   la técnica visualmente-oculta-pero-accesible, salvo que el aria-hidden
   del JS lo cierre del lector de pantalla también (decisión consciente:
   cuando el usuario eligió Lista, no queremos que el lector le repita
   el mapa, y viceversa). */
.secciones-vista--oculta {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}


/* ====================================================================
   MODAL DE DETALLE DE UNA SECCIÓN (frontend)
   ==================================================================== */

.modal-seccion {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--espacio-2);
    text-align: center;
}

.modal-seccion__logo {
    max-width: 400px;
    max-height: 240px;
    object-fit: contain;
    align-self: center;
    background: var(--color-fondo-alterno);
    padding: 0.5rem;
    border-radius: var(--radio-borde);
}

.modal-seccion__datos {
    margin: 0;
    display: grid;
    gap: 0.5rem;
    width: 100%;
    justify-items: center;
    text-align: center;
}

.modal-seccion__datos > div {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.6rem;
    width: 100%;
}

.modal-seccion__datos dt {
    color: var(--color-primario);
    flex-shrink: 0;
    font-size: 1.05rem;
}

.modal-seccion__datos dd {
    margin: 0;
    overflow-wrap: anywhere;
}

.modal-seccion__redes {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.modal-seccion__red {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-fondo-alterno);
    color: var(--color-primario);
    text-decoration: none;
    font-size: 1.1rem;
}

.modal-seccion__red:hover,
.modal-seccion__red:focus-visible {
    background: var(--color-primario);
    color: #fff;
}

.modal-seccion__notas {
    margin: 0;
    color: var(--color-texto-claro);
    font-style: italic;
}

.modal-seccion--inactiva p {
    margin: 0 0 0.5rem;
}


/* ====================================================================
   PANEL ADMIN — listado
   ==================================================================== */

.secciones-contador {
    color: var(--color-texto-claro);
    margin: 0 0 var(--espacio-2);
}

.tabla-secciones {
    table-layout: fixed;
}

.tabla-secciones th:nth-child(1) { width: 25%; }   /* CCAA */
.tabla-secciones th:nth-child(2) { width: 32%; }   /* Sección */
.tabla-secciones th:nth-child(3) { width: 14%; }   /* Estado */
.tabla-secciones th:nth-child(4) { width: 10%; }   /* Logo */
.tabla-secciones th:nth-child(5) { width: 19%; }   /* Acciones */

.badge-estado {
    display: inline-block;
    padding: 0.15rem 0.6rem;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
}

.badge-estado--activo {
    background: #d6efe0;
    color: #14622f;
}

.badge-estado--inactivo {
    background: #e4e8ea;
    color: var(--color-texto-claro);
}

.texto-ok {
    color: #14622f;
    font-size: 1.05rem;
}


/* ====================================================================
   PANEL ADMIN — formulario nuevo/editar
   ==================================================================== */

/* Bloques agrupados (fieldset) para que el formulario largo se lea
   como secciones y no como un muro de campos. */
.seccion-bloque {
    border: 1px solid var(--color-borde);
    border-radius: var(--radio-borde);
    padding: var(--espacio-2) var(--espacio-3);
    margin-bottom: var(--espacio-3);
}

.seccion-bloque > .campo-label {
    font-size: 1.05rem;
    margin-bottom: 0.5rem;
}

/* Bloque "Estado" resaltado en amarillo claro para que el admin no
   pase por alto el toggle "Sección activa". Es la decisión más
   importante del formulario. */
.seccion-bloque--estado {
    background: #fff8e0;
    border-color: #f0d57d;
}

.seccion-logo-previo img {
    max-width: 200px;
    max-height: 120px;
    object-fit: contain;
    background: var(--color-fondo-alterno);
    padding: 0.5rem;
    border-radius: var(--radio-borde);
    display: block;
    margin-bottom: 0.5rem;
}

/* Icono al lado del label en los campos de redes sociales. */
.campo-con-icono-red .campo-label {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    margin-bottom: 0.25rem;
}