/* ============================================================
   Hoja de estilos — Bloque de indexación de la revista Ayer
   ----------------------------------------------------------
   Diseñada para incrustarse en OJS (Marcial Pons).
   Todos los selectores están cualificados con .ayer-indexacion
   y se refuerzan con !important en propiedades críticas para
   imponerse al CSS de tema del journal.
============================================================ */

.ayer-indexacion {
  --ayer-text: #1f2937;
  --ayer-muted: #6b7280;
  --ayer-border: #e5e7eb;
  --ayer-bg-soft: #f9fafb;
  --ayer-accent: #ff8d6b;
  --ayer-accent-soft: #fff1ec;
  --ayer-accent-dark: #c45a3d;
  --ayer-radius: 8px;
  --ayer-gap: 1.25rem;
  font-family: Georgia, "Times New Roman", serif !important;
  color: var(--ayer-text) !important;
  line-height: 1.55 !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
.ayer-indexacion *,
.ayer-indexacion *::before,
.ayer-indexacion *::after { box-sizing: border-box !important; }

/* ---------- Encabezados y párrafo introductorio ---------- */
.ayer-indexacion h2.ayer-h2 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.5rem !important;
  font-weight: 700 !important;
  color: var(--ayer-accent-dark) !important;
  margin: 0 0 0.75rem 0 !important;
  padding: 0 !important;
  letter-spacing: -0.01em !important;
  text-transform: none !important;
  text-align: left !important;
  border: 0 !important;
}
.ayer-indexacion h3.ayer-h3 {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1.1rem !important;
  font-weight: 700 !important;
  color: var(--ayer-text) !important;
  margin: 2rem 0 1rem 0 !important;
  padding: 0 0 0.4rem 0 !important;
  border: 0 !important;
  border-bottom: 2px solid var(--ayer-accent) !important;
  letter-spacing: -0.005em !important;
  text-transform: none !important;
  text-align: left !important;
}
.ayer-indexacion .ayer-intro {
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: 1rem !important;
  margin: 0 0 1rem 0 !important;
  padding: 0 !important;
  text-align: justify !important;
  color: var(--ayer-text) !important;
}

/* ---------- Rejilla de tarjetas (flex centrada) ---------- */
.ayer-indexacion .ayer-grid {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: var(--ayer-gap) !important;
  margin: 0 !important;
  padding: 0 !important;
  list-style: none !important;
}
.ayer-indexacion .ayer-card {
  flex: 0 1 200px !important;
  max-width: 240px !important;
  background: #ffffff !important;
  border: 1px solid var(--ayer-border) !important;
  border-radius: var(--ayer-radius) !important;
  padding: 1rem !important;
  min-height: 130px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  list-style: none !important;
  margin: 0 !important;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.ayer-indexacion .ayer-card:hover {
  border-color: var(--ayer-accent) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06);
  transform: translateY(-1px);
}
.ayer-indexacion .ayer-card a {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
  text-decoration: none !important;
  color: inherit !important;
  border: 0 !important;
}

/* ---------- Control de tamaño de logos ---------- */
.ayer-indexacion .ayer-card img {
  max-width: 100% !important;
  max-height: 70px !important;
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  display: inline-block !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  vertical-align: middle !important;
}

/* ---------- Logo tipográfico (Periodicals Index Online) ---------- */
.ayer-indexacion .ayer-logo-typo {
  font-family: Georgia, "Times New Roman", serif !important;
  text-align: center !important;
  line-height: 1.15 !important;
  color: var(--ayer-text) !important;
}
.ayer-indexacion .ayer-logo-typo__name {
  display: block !important;
  font-size: 1.05rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
  color: var(--ayer-text) !important;
}
.ayer-indexacion .ayer-logo-typo__sub {
  display: block !important;
  font-size: 0.72rem !important;
  font-weight: 400 !important;
  color: var(--ayer-muted) !important;
  margin-top: 0.25rem !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
}

/* ---------- Tarjeta JCR (dato estático) ---------- */
.ayer-indexacion .ayer-card--jcr {
  flex-direction: column !important;
  align-items: stretch !important;
  justify-content: space-between !important;
  padding: 0.85rem 1rem !important;
}
.ayer-indexacion .ayer-card--jcr .ayer-jcr__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}
.ayer-indexacion .ayer-card--jcr .ayer-jcr__head img {
  max-height: 36px !important;
}
.ayer-indexacion .ayer-card--jcr .ayer-jcr__year {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.75rem !important;
  color: var(--ayer-muted) !important;
  font-weight: 600 !important;
}
.ayer-indexacion .ayer-card--jcr .ayer-jcr__metric {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.5rem !important;
  font-family: Arial, Helvetica, sans-serif !important;
}
.ayer-indexacion .ayer-card--jcr .ayer-jcr__percentile {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  color: var(--ayer-accent-dark) !important;
  letter-spacing: -0.02em !important;
  line-height: 1 !important;
}
.ayer-indexacion .ayer-card--jcr .ayer-jcr__quartile {
  font-size: 0.95rem !important;
  font-weight: 700 !important;
  color: var(--ayer-text) !important;
  background: var(--ayer-accent-soft) !important;
  padding: 0.15rem 0.45rem !important;
  border-radius: 4px !important;
}
.ayer-indexacion .ayer-card--jcr .ayer-jcr__label {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.7rem !important;
  color: var(--ayer-muted) !important;
  margin-top: 0.15rem !important;
}
.ayer-indexacion .ayer-card--jcr .ayer-jcr__cat {
  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 0.78rem !important;
  color: var(--ayer-text) !important;
  margin-top: 0.4rem !important;
  padding-top: 0.4rem !important;
  border-top: 1px solid var(--ayer-border) !important;
}
.ayer-indexacion .ayer-card--jcr .ayer-jcr__cat strong {
  font-weight: 700 !important;
}
.ayer-indexacion .ayer-card--jcr .ayer-jcr__link {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
}

/* ---------- Tarjetas con widgets de terceros ---------- */
.ayer-indexacion .ayer-card--widget {
  padding: 0.5rem !important;
  overflow: hidden !important;
}
.ayer-indexacion .ayer-card--widget img {
  max-height: none !important;  /* los widgets gestionan sus propios tamaños */
}

/* ---------- Responsive ---------- */
@media (max-width: 480px) {
  .ayer-indexacion .ayer-card {
    flex: 0 1 160px !important;
    min-height: 110px !important;
    padding: 0.75rem !important;
  }
  .ayer-indexacion h2.ayer-h2 { font-size: 1.3rem !important; }
  .ayer-indexacion h3.ayer-h3 { font-size: 1rem !important; }
}