/*==========================================================================
  COROS ARCHIVE & TAXONOMIES: ESTILOS PREMIUM REESTILIZADOS
  ========================================================================== */

:root {
  --color-marron: #5e372f;
  --color-marron-rgb: 94, 55, 47;
  --color-crema: #fdfbf7;
  --color-texto: #2c2523;
  --color-gris-suave: #f4f1ea;
  --color-borde: rgba(94, 55, 47, 0.12);
  --radius-lg: 16px;
  --radius-md: 10px;
  --shadow-sm: 0 4px 20px rgba(94, 55, 47, 0.04);
  --shadow-md: 0 10px 30px rgba(94, 55, 47, 0.08);
  --font-main: 'Inter', system-ui, -apple-system, sans-serif;
}

/* Foco de accesibilidad unificado y elegante */
a:focus,
button:focus,
.filtro-select:focus {
  outline: 2px solid var(--color-marron);
  outline-offset: 3px;
}

/* ==========================================================================
   HERO DE LA PÁGINA / TAXONOMÍAS
   ========================================================================== */
.coros-hero {
  color: var(--color-texto);
  padding: 80px 24px;
  margin-bottom: 50px;
  text-align: center;
  border-radius: var(--radius-lg);
  background: var(--color-crema);
  border: 1px solid var(--color-borde);
  position: relative;
  overflow: hidden;
}

/* Matices sutiles de fondo según la taxonomía (adiós degradados chillones) */
.coros-hero[data-taxonomy="repertorio"] { background: linear-gradient(180deg, #fffbf5 0%, #f7effa 100%); }
.coros-hero[data-taxonomy="provincia"]  { background: linear-gradient(180deg, #fffbf5 0%, #edf7ee 100%); }
.coros-hero[data-taxonomy="tipo-coro"]  { background: linear-gradient(180deg, #fffbf5 0%, #fff5ea 100%); }
.coros-hero[data-taxonomy="comunidad-autonoma"] { background: linear-gradient(180deg, #fffbf5 0%, #ebf5ff 100%); }

.coros-hero-content {
  max-width: 760px;
  margin: 0 auto;
}

.coros-hero-icono {
  font-size: 2.5rem;
  margin-bottom: 20px;
  filter: drop-shadow(0 4px 10px rgba(var(--color-marron-rgb), 0.15));
}

.coros-hero-breadcrumb {
  margin-bottom: 16px;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  color: rgba(var(--color-marron-rgb), 0.6);
}

.coros-hero-breadcrumb a {
  color: var(--color-marron);
  text-decoration: none;
  transition: opacity 0.2s;
}
.coros-hero-breadcrumb a:hover { opacity: 0.7; }
.coros-hero-breadcrumb .separator { margin: 0 8px; color: rgba(var(--color-marron-rgb), 0.3); }

.coros-hero-titulo {
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--color-marron);
  margin: 0 0 24px;
  line-height: 1.15;
  letter-spacing: -0.03em;
}

.coros-hero-stats {
  margin: 24px 0;
}

.hero-stat {
  display: inline-block;
  padding: 10px 24px;
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--color-borde);
  border-radius: 30px;
  font-size: 1rem;
  color: var(--color-texto);
  box-shadow: var(--shadow-sm);
}

.hero-stat strong {
  font-size: 1.3rem;
  color: var(--color-marron);
  margin-right: 4px;
}

.hero-btn {
  display: inline-block;
  background: var(--color-marron);
  color: #fff !important;
  padding: 12px 32px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.95rem;
  box-shadow: 0 10px 25px rgba(var(--color-marron-rgb), 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hero-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 30px rgba(var(--color-marron-rgb), 0.25);
}

/* ==========================================================================
   BARRA DE FILTROS ACTIVO (BUSCADOR RAPIDO)
   ========================================================================== */
.filtros-coros-container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 36px;
  background: var(--color-crema);
  padding: 20px;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-borde);
  align-items: center;
}

.filtros-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  flex: 1;
}

.filtro-wrapper {
  flex: 1;
  min-width: 170px;
}

.filtro-select {
  width: 100%;
  border: 1px solid var(--color-borde);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-texto);
  font-size: 0.9rem;
  font-weight: 500;
  cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%235e372f' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 16px center;
  padding-right: 40px;
  transition: border-color 0.25s, box-shadow 0.25s;
}

.filtro-select:hover {
  border-color: var(--color-marron);
}

.filtros-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

.btn-filtrar {
  background: var(--color-marron);
  color: #fff;
  padding: 12px 28px;
  border: none;
  border-radius: var(--radius-md);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s;
}

.btn-filtrar:hover {
  opacity: 0.9;
}

.btn-limpiar {
  font-size: 0.9rem;
  color: rgba(var(--color-marron-rgb), 0.7);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
}

.btn-limpiar:hover {
  color: var(--color-marron);
  text-decoration: underline;
}

.coros-resultados-info {
  margin-bottom: 24px;
  color: #7a716e;
  font-size: 0.95rem;
  letter-spacing: -0.01em;
}
/* Estilo para el nuevo input de búsqueda de texto */
.filtro-input-text {
  width: 100%;
  border: 1px solid var(--color-borde);
  padding: 12px 16px;
  border-radius: var(--radius-md);
  background: #fff;
  color: var(--color-texto);
  font-size: 0.9rem;
  font-weight: 500;
  transition: border-color 0.25s, box-shadow 0.25s;
  box-sizing: border-box;
}

.filtro-input-text:hover,
.filtro-input-text:focus {
  border-color: var(--color-marron);
  outline: none;
}

/* Damos un poco más de ancho por defecto al campo de texto */
.filtro-search-wrapper {
  flex: 2 !important;
  min-width: 240px;
}
/* ==========================================================================
   GRID Y TARJETAS DE COROS (CARDS)
   ========================================================================== */
.grid-coros {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 24px;
  margin-bottom: 40px;
}

/* Ajustes limpios de columnas por breakpoints */
@media (min-width: 1400px) { .grid-coros { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 981px) and (max-width: 1399px) { .grid-coros { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 640px) and (max-width: 980px) { .grid-coros { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px) { .grid-coros { grid-template-columns: 1fr; } }

.card-coro {
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #fff;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;
}

.card-coro:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-md);
}

.card-img {
  position: relative;
  width: 100%;
  aspect-ratio: 16/10;
  background: var(--color-gris-suave);
  overflow: hidden;
}

.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.card-coro:hover .card-img img {
  transform: scale(1.06);
}

.card-content {
  padding: 20px;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.card-content h3 {
  margin: 0 0 10px;
  font-size: 1.15rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
}

.card-content h3 a {
  text-decoration: none;
  color: var(--color-marron);
  transition: opacity 0.2s;
}

.card-content h3 a:hover {
  opacity: 0.8;
}

.card-content p {
  color: #615551;
  line-height: 1.5;
  margin: 0 0 20px;
  font-size: 0.9rem;
}

/* BADGES CROMÁTICOS (REDISEÑO MÁS FINO) */
.card-taxonomias {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  font-size: 0.72rem;
  border-radius: 30px;
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  border: 1px solid transparent;
}

.badge-comunidad-autonoma { background: #eef7ff; color: #1e6091; border-color: #d2e9fc; }
.badge-provincia { background: #effaf1; color: #2c6e39; border-color: #d1f2d7; }
.badge-repertorio { background: #fbf2fc; color: #6d327a; border-color: #f3daf7; }
.badge-tipo-coro { background: #fff6eb; color: #b25300; border-color: #ffe4c4; }

/* ==========================================================================
   PAGINACIÓN
   ========================================================================== */
.pagination-coros {
  margin-top: 48px;
  text-align: center;
}

.pagination-coros .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding: 0 8px;
  border: 1px solid var(--color-borde);
  margin: 0 4px;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: var(--color-texto);
  font-weight: 600;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.pagination-coros .page-numbers:hover {
  background: var(--color-gris-suave);
  border-color: var(--color-marron);
}

.pagination-coros .current {
  background: var(--color-marron);
  color: #fff;
  border-color: var(--color-marron);
}

.pagination-coros .dots {
  border: none;
  color: rgba(var(--color-marron-rgb), 0.4);
}

/* ==========================================================================
   SIDEBAR: NUBES DE TAXONOMÍAS Y COMPONENTES
   ========================================================================== */
.coros-sidebar-nav {
  background: #fff;
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg);
  padding: 18px;
  margin-bottom: 16px;
  box-shadow: var(--shadow-sm);
}

.nav-titulo {
  margin: 0 0 12px;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--color-marron);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--color-borde);
}

.nav-nube {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.nav-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 30px;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 500;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
  border: 1px solid transparent;
}

.nav-badge:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(var(--color-marron-rgb), 0.08);
}

.badge-count {
  background: rgba(var(--color-marron-rgb), 0.06);
  padding: 0 6px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 700;
  color: inherit;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Variantes refinadas de la nube */
.nav-badge-repertorio { background: #fbf2fc; color: #6d327a; border-color: #f3daf7; }
.nav-badge-repertorio:hover, .nav-badge-repertorio.current { background: #6d327a; color: #fff; border-color: #6d327a; }

.nav-badge-provincia { background: #effaf1; color: #2c6e39; border-color: #d1f2d7; }
.nav-badge-provincia:hover, .nav-badge-provincia.current { background: #2c6e39; color: #fff; border-color: #2c6e39; }

.nav-badge-tipo-coro { background: #fff6eb; color: #b25300; border-color: #ffe4c4; }
.nav-badge-tipo-coro:hover, .nav-badge-tipo-coro.current { background: #b25300; color: #fff; border-color: #b25300; }

.nav-badge-comunidad-autonoma { background: #eef7ff; color: #1e6091; border-color: #d2e9fc; }
.nav-badge-comunidad-autonoma:hover, .nav-badge-comunidad-autonoma.current { background: #1e6091; color: #fff; border-color: #1e6091; }

.nav-badge.current .badge-count {
  background: rgba(255, 255, 255, 0.25);
}

/* WIDGET ESTADÍSTICAS */
.coros-sidebar-stats {
  background: var(--color-marron);
  border-radius: var(--radius-lg);
  padding: 32px 24px;
  margin-bottom: 24px;
  color: #fff;
  text-align: center;
  box-shadow: 0 12px 30px rgba(var(--color-marron-rgb), 0.15);
}

.stat-total .stat-numero {
  font-size: 3.6rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  display: block;
  margin-bottom: 8px;
  color: var(--color-crema);
}

.stat-total .stat-label {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  opacity: 0.8;
}

/* WIDGETS CALL TO ACTION (CTAS) */
.coros-sidebar-cta {
  background: var(--color-crema);
  border: 1px solid var(--color-borde);
  border-radius: var(--radius-lg);
  padding: 30px 24px;
  text-align: center;
  color: var(--color-texto);
  margin-bottom: 24px;
  box-shadow: var(--shadow-sm);
}

.cta-icono {
  font-size: 2rem;
  margin-bottom: 12px;
}

.cta-titulo {
  margin: 0 0 8px;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--color-marron);
}

.cta-texto {
  margin: 0 0 20px;
  font-size: 0.9rem;
  color: #615551;
  line-height: 1.4;
}

.cta-boton {
  display: inline-block;
  background: var(--color-marron);
  color: #fff !important;
  padding: 10px 24px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.88rem;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  box-shadow: 0 4px 15px rgba(var(--color-marron-rgb), 0.12);
}

.cta-boton:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(var(--color-marron-rgb), 0.2);
}

/* Variación sutil para el CTA de añadir */
.cta-anadir {
  background: #fff;
  border-style: dashed;
  border-width: 2px;
}

/* ==========================================================================
   RESPONSIVE ADAPTABILITY
   ========================================================================== */
@media (max-width: 980px) {
  .coros-hero { padding: 50px 20px; margin-bottom: 32px; }
  .coros-hero-titulo { font-size: 2.2rem; }
  .filtros-coros-container { flex-direction: column; align-items: stretch; padding: 16px; }
  .filtros-group { width: 100%; flex-direction: column; }
  .filtro-wrapper { width: 100%; }
  .filtros-actions { width: 100%; justify-content: space-between; }
  .btn-filtrar { flex: 1; text-align: center; }
}

/* ============================================================
   ESTILO REFINADO PARA EL PLACEHOLDER
   ============================================================ */

/* Contenedor de la imagen en la tarjeta: Forzamos proporción 4:3 */
.grid-coros .card-coro .card-img {
    position: relative !important;
    width: 100% !important;
    padding-top: 75% !important; /* Mantiene el aspecto 4:3 */
    overflow: hidden !important;
    background-color: #FDFBF7 !important; /* Fondo crema/blanco roto cálido */
}

/* Forzamos a que el enlace y la imagen ocupen el 100% del contenedor relativo */
.grid-coros .card-coro .card-img a,
.grid-coros .card-coro .card-img img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Estilo exclusivo cuando la imagen cargada es el favicon de la marca */
.grid-coros .card-coro .card-img img[src*="favicon-coros-de-espana.png"] {
    object-fit: contain !important;      /* Evita deformaciones */
    padding: 18% !important;             /* Aire elegante alrededor del logo */
    opacity: 0.55 !important;            /* Integración sutil con el fondo */
    filter: grayscale(10%) contrast(95%) !important;
    transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Efecto Hover: El logo cobra un pelín de fuerza y relieve */
.grid-coros .card-coro:hover .card-img img[src*="favicon-coros-de-espana.png"] {
    opacity: 0.75 !important;
    transform: scale(1.03) !important; /* Zoom ligerísimo de cortesía */
}


/* ============================================================
   ESTILOS PARA LOS BADGES CLICABLES DE LA TARJETA
   ============================================================ */

/* Aseguramos que se comporten como bloques y limpien estilos de texto de enlaces */
.grid-coros .card-taxonomias a.badge {
    display: inline-block;
    text-decoration: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

/* Efecto al pasar el ratón (Hover) sobre el Badge */
.grid-coros .card-taxonomias a.badge:hover {
    transform: translateY(-1px); /* Un sutil levantamiento */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08); /* Sombra suave */
    filter: brightness(95%); /* Oscurece un pelín el fondo para dar feedback de clic */
}

/* Evitamos que el texto cambie de color de forma extraña */
.grid-coros .card-taxonomias a.badge:focus,
.grid-coros .card-taxonomias a.badge:active {
    text-decoration: none !important;
    outline: none;
}

/* ==========================================================================
   CORRECCIÓN RESPONSIVE: RESULTADOS PRIMERO, FILTROS ABAJO
   ========================================================================== */
@media (max-width: 980px) {
    .contenedor-principal-directorio {
        display: flex !important;
        flex-direction: column-reverse !important; 
        gap: 40px !important; 
    }
    .contenedor-principal-directorio .et_pb_column {
        width: 100% !important;
        margin-bottom: 0 !important;
    }
}