/* IG LIST PLUGIN — CSS centralizado (v1.0.4e)
   Coloca este archivo en: /wp-content/plugins/ig-list-plugin/assets/ig-list.css
   Notas:
   - Se han eliminado todos los estilos embebidos en plantillas.
   - Este CSS cubre .iglp-* (filtros/paginación/layout) y las tarjetas .evento-* y .revista-*.
*/

/* =========== CONTENEDOR Y LAYOUT GENERAL =========== */
.iglp-wrapper{margin:20px 0}
.iglp-loading{opacity:.6;pointer-events:none;transition:opacity .2s}

/* Filtros */
.iglp-filters{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin:0 0 20px}
.iglp-filter-button{background:#f2f2f2;border:none;color: #000; border-radius:999px;padding:10px 16px;cursor:pointer;font-weight:600;font-size:14px;line-height:1;transition:all .2s}
.iglp-filter-button:hover{transform:translateY(-1px)}
.iglp-filter-button.active{background:#000;color:#fff}

/* Resultados: grid adaptable */
.iglp-results, .ig-contenedor {display: grid; grid-template-columns: repeat(auto-fit, minmax(100%, 1fr)); gap: 20px;margin: 10px 0px;}

/* Paginación */
.iglp-pagination{display:flex;gap:8px;justify-content:center;margin-top:22px}
.iglp-nav a.iglp-page, .iglp-pagination a.iglp-page{display:inline-flex;align-items:center;margin: 0 2px;justify-content:center;min-width:36px;height:36px;padding:0 10px;border-radius:8px;background:#000;text-decoration:none;color:#fff;font-weight:600;transition:transform .15s, box-shadow .15s}
.iglp-nav a.iglp-page:hover, .iglp-pagination a.iglp-page:hover{transform:translateY(-1px);box-shadow:0 4px 12px rgba(0,0,0,.08)}
.iglp-nav .iglp-page.current, .iglp-pagination .iglp-page.current{background:#000;color:#fff}

/* =========== TARJETAS GENERALES =========== */
.iglp-card{display:block;background:#fff;border:1px solid #eee;border-radius:14px;padding:18px;text-decoration:none;color:inherit;box-shadow:0 2px 10px rgba(0,0,0,.04);transition:transform .15s, box-shadow .15s}
.iglp-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px rgba(0,0,0,.06)}
.iglp-item {display: flex;flex-direction: column;border: none;border-radius: 6px;padding: 0px; background: #fff;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.iglp-item:hover {border: 0px solid #ddd;}

/* =========== DEFAULT (.evento-*) =========== */
.default-item {display: flex; padding: 24px;flex-direction: column;border: 0px solid #ddd;border-radius: 6px;background: #fff;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.default-imagen {height: 250px;overflow: hidden;}
.default-imagen img {width: 100%;height: 100%;object-fit: cover;}
.default-content{display:flex;flex-direction:column;gap:2px}
.default-title{font-size:24px;line-height:1.25;margin:0;font-weight:700;color:#000}
.default-fecha{font-size:14px;color:#000;margin:0}
.default-extracto{font-size:14px;color:#000;margin:0}
.default-boton{display: inline-block; width: fit-content; padding: 10px 20px;background-color: #173a53;width:fit-content;color: #fff !important;border-radius: 100px;font-weight: 700;font-size: 14px;text-transform: uppercase;margin-top: 15px;transition: background-color 0.3s ease;}
.default-boton .icono-mas{display:none;line-height:1}
.default-boton:hover{filter:brightness(1.05)}

/* =========== EVENTOS (.evento-*) =========== */
.evento-item {display: flex;flex-direction: column;border: 0px solid #ddd;border-radius: 6px;background: #fff;overflow: hidden;transition: transform 0.3s ease, box-shadow 0.3s ease;}
.evento-item:hover {transform: scale(1.03);box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);border: 1px solid #ddd;}
.evento-imagen {height: 250px;overflow: hidden;}
.evento-imagen img {width: 100%;height: 100%;object-fit: cover;}
.evento-content{display:flex;flex-direction:column;gap:2px; padding: 35px 25px; text-align: center;}
.evento-title{font-size:24px;line-height:1.25;margin:0;font-weight:700;color:#000}
.evento-fecha{font-size:14px;color:#000;margin:0}
.evento-extracto{font-size:14px;color:#000;margin:0}
.evento-boton{display: inline-block; width: fit-content; margin: 0 auto; padding: 10px 20px;background-color: #173a53;color: #fff !important;border-radius: 100px;font-weight: 700;font-size: 14px;text-transform: uppercase;margin-top: 15px;transition: background-color 0.3s ease;}
.evento-boton .icono-mas{display:none;line-height:1}
.evento-boton:hover{filter:brightness(1.05)}

/* Extra: si existen clases dinámicas en $term_classes se pueden apuntalar con chips */
[class*="term-"], .evento-term-chip{display:inline-block;margin-right:6px;margin-bottom:6px}

/* =========== REVISTA (.revista-*) =========== */
.revista-grid{display:flex;flex-wrap:wrap;gap:30px;align-items:stretch}
.revista-item{display:flex;flex-direction:column;background:#fff;border:1px solid #eee;border-radius:14px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.04)}
.revista-imagen{width:100%;display:block;background:#f7f7f7}
.revista-imagen img{width:100%;height:auto;display:block;object-fit:contain}
.revista-content{display:flex;flex-direction:column;gap:12px;padding:16px}
.revista-title{font-size:24px;line-height:1.3;margin:0;color:#000}
.revista-title a{color:inherit;text-decoration:none}
.revista-boton{align-self:flex-start;display:inline-block;margin-top:6px;padding:10px 16px;border-radius:999px;background:#111;color:#fff;text-transform:uppercase;letter-spacing:.02em;font-weight:700;font-size:12px;text-decoration:none}
.revista-boton:hover{filter:brightness(1.05)}

/* === EMPRESA ITEM === */
.empresa-item {display: flex;flex-direction: column;align-items: center;justify-content: center;border: none;padding: 30px;background-color: #fff;border-radius: 6px;text-align: center;transition: transform 0.3s ease, box-shadow 0.3s ease;min-height: 300px;text-decoration: none; /* por si el contenedor es <a> */}
.empresa-item:hover {transform: scale(1.05);box-shadow: 0 6px 15px rgba(0, 0, 0, 0.05);}
.empresa-logo { margin-bottom: 5px; }
.empresa-logo img {max-width: 240px;max-height: 140px;object-fit: contain;margin: 0 auto;display: block;}
.empresa-content {display: flex;flex-direction: column;align-items: center;}
.empresa-content h2 {margin: 15px 0;color: #000; font-size: 18px; font-weight: bold;}
.empresa-info {font-size: 16px;color: #000;margin: 10px 0;}

/* Botón genérico adaptado al bloque EMPRESA */
.empresa-content .leer-mas {display: inline-flex;align-items: center;gap: 8px;padding: 10px 20px;background-color: #173a53;color: #fff !important;border-radius: 30px;font-size: 14px;font-weight: 700;text-transform: uppercase;font-family: 'Inter', sans-serif;line-height: 1;transition: background-color 0.2s ease;}
.empresa-content .leer-mas .texto-boton { display: inline-block; }
.empresa-content .leer-mas .icono-mas { display: inline-block; }
.empresa-content .leer-mas:hover {background-color: #005a8c;}

/* =========== UTILES =========== */
.iglp-hidden{display:none !important}

/* === PLANTILLA CATALOGO (mc-*) ============================================ */

.mc-item {
  display: flex;
  flex-direction: row; /* media a la derecha */
  gap: 2rem;
  align-items: stretch;
  background: var(--iglp-fondo, #fff);
  border-radius: 0px;
  border-bottom: 1px #eaeaea solid;
  padding: 20px 0px 40px 0px;
}

.mc-item:hover {
}

.mc-media {
  order: 0;
  flex: 0 0 36%;
  max-width: 36%;
  display: flex;
  align-items: start;
  justify-content: start;
  overflow: hidden;
}

.mc-media .mc-thumb {
  width: 100%;
  height: auto;
  object-fit: contain;   /* imagen completa sin deformar */
  display: block;
  border-radius: 8px;
}

.mc-content {
  order: 1;
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.mc-title,
.mc-title h2 {
  font-size: 26px;
  line-height: 1.1em;
  margin: 0;
  font-weight: bold;
}

.mc-title-link {
  color: inherit;
  text-decoration: none;
}

.mc-title-link:hover {
  text-decoration: underline;
}

.mc-meta-fecha,
.mc-meta-estreno,
.mc-evento-precio {
  font-size: .92rem;
  color: var(--iglp-muted, #6b7280);
  margin: 0;
}

.mc-meta-fecha,
.mc-meta-estreno,
.mc-evento-precio p {
  padding-bottom: 0em;
}

.mc-excerpt {
  color: #000;
  font-size: 14px;
  line-height: 2em;
}

.mc-extra {
  margin-top: .25rem;
}

/* Bloque info evento (fecha + precio) en línea con separación sutil */
.mc-evento-info {
  display: flex;
  gap: .75rem;
  flex-wrap: wrap;
  font-size: .95rem;
  color: #000;
}

.mc-actions {
  margin-top: .5rem;
  display: flex;
  gap: .5rem;
  flex-wrap: wrap;
}

/* Botones */
.mc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0px;
  padding: 8px 12px;
  font-weight: 600;
  text-decoration: none;
  border: 1px solid transparent;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .1s ease;
  will-change: transform;
}

.mc-btn:active { transform: translateY(1px); }

.mc-btn-primario {
  background: var(--iglp-primario, #000);
  color: #fff;
  border-color: var(--iglp-primario, #000);
}

.mc-btn-primario:hover {
  background: transparent;
  color: var(--iglp-primario, #000);
  border-color: var(--iglp-primario, #000);
}

.mc-btn-secundario {
  background: #e02b20;
  color: #fff;
  border: 1px solid var(--iglp-primario, #e02b20);
}

.mc-btn-secundario:hover {
  background: transparent;
  color: #e02b20;
  border: 1px solid var(--iglp-primario, #e02b20);
}

/* Responsivo: en móvil la media arriba y máx 50% ancho pantalla */
@media (max-width: 768px) {
  .mc-item {
    flex-direction: column;
  }

  .mc-media {
    flex: 0 0 auto;
    max-width: 100%;
    justify-content: center;
  }

  .mc-media .mc-thumb {
    width: auto;
    max-width: 50vw;   /* <= requisito: no más del 50% del ancho de pantalla */
    height: auto;
  }
}

/* === Hover con iconos en media ========================================== */
.mc-media { position: relative; }
.mc-media-wrap {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 8px;
}
.mc-thumb { display: block; width: 100%; height: auto; }

.mc-hover {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center; gap: .5rem;
  background: rgba(0,0,0,.35);
  opacity: 0; pointer-events: none;
  transition: opacity .2s ease;
}
.mc-media-wrap:hover .mc-hover { opacity: 1; pointer-events: auto; }

.mc-icon {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; color: #000;
  border-radius: 999px; border: 1px solid rgba(0,0,0,.1);
  font-size: 20px; text-decoration: none; cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,.12);
  transition: transform .12s ease, background-color .2s ease;
}
.mc-icon:active { transform: translateY(1px) scale(.98); }
.mc-icon:hover  { background: #f3f4f6; }

.mc-link-cover {
  position: absolute; inset: 0;
  display: none; /* se activa solo en móvil */
}

/* Lightbox básico */
#iglp-lightbox {
  position: fixed; inset: 0; z-index: 99999;
  display: none; align-items: center; justify-content: center;
  background: rgba(0,0,0,.85);
}
#iglp-lightbox.open { display: flex; }
#iglp-lightbox img {
  max-width: 90vw; max-height: 90vh; display: block;
  border-radius: 10px; background: #111;
}
#iglp-lightbox .close {
  position: absolute; top: 12px; right: 12px;
  width: 40px; height: 40px; border-radius: 999px;
  background: #fff; color: #000; border: 1px solid rgba(0,0,0,.1);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer;
}

/* Comportamiento móvil: sin overlay, toda la imagen enlaza al contenido */
@media (hover: none), (pointer: coarse) {
  .mc-hover { display: none !important; }
  .mc-link-cover { display: block; }
}
/* === Etiquetas especiales bajo el título ================================== */
.mc-tags{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
  margin:.25rem 0 .35rem;
}

.mc-tag{
  display:inline-flex;
  align-items:center;
  padding:.3rem .6rem;
  font-size:.85rem;
  font-weight:600;
  line-height:1;
  background:#f3f4f6;           /* gris claro */
  color:#000;
  border:1px solid #f3f4f6;
  border-radius:999px;
  text-decoration:none;
  transition:background-color .2s ease, border-color .2s ease, transform .1s ease;
}

.mc-tag:hover{
  background:#000;
  border-color:#000;
  color:#fff;
}

/* Los items ocultados por filtrado */
.ig-grid-peliculas .iglp-item.is-hidden{ display:none !important; }

/* Tarjeta de portada: reutiliza overlay existente (.mc-media, .mc-media-wrap, .mc-hover, .mc-icon, .mc-link-cover) */
.gp-card .mc-media { position: relative; max-width: none; }
.gp-card .mc-media .mc-thumb { width:100%; height:auto; display:block; }
.gp-card .gp-ph{ background:#e5e7eb; width:100%; padding-top:150%; border-radius:8px; }

/* Barra de filtros */
.gp-filters{
  display:block;
  margin: 0 0 12px 0;
  padding: 10px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #f9fafb;
}
.gp-filters .gp-row{
  display:flex; flex-wrap:wrap; gap:10px 12px; align-items:end;
}
.gp-filters label{ display:flex; flex-direction:column; gap:6px; }
.gp-filters label span{ font-size:.8rem; color:#6b7280; }
.gp-filters select{
  min-width: 160px;
  padding: 6px 8px;
  border:1px solid #d1d5db; border-radius:6px; background:#fff;
}
.gp-filters .gp-reset{
  padding: 8px 10px;
  border-radius: 6px; border:1px solid #d1d5db;
  background:#fff; cursor:pointer;
}
.gp-filters .gp-reset:hover{ background:#f3f4f6; }

/* ==== Fix de compatibilidad para la plantilla grid-peliculas ============ */
/* Neutraliza reglas heredadas en .iglp-results y .ig-contenedor SOLO aquí */
.ig-grid-peliculas .iglp-results{
  display: block !important;
  padding: 0;
}

.ig-grid-peliculas .iglp-results .ig-contenedor{
  /* Forzamos Grid, ignorando cualquier flex/columnado previo */
  display: grid !important;
  grid-template-columns: repeat(5, minmax(140px, 1fr));
  gap: 16px;
  margin: 0; /* por si había márgenes heredados */
  justify-content: center;
}

.ig-grid-peliculas .iglp-results .iglp-item{
  /* Evita anchuras forzadas del CSS general (100%, flex-basis, etc.) */
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Responsivo: mantenemos mínimo 140px y reducimos columnas cuando toque */
@media (max-width: 1200px){
  .ig-grid-peliculas .iglp-results .ig-contenedor{
    grid-template-columns: repeat(4, minmax(140px, 1fr));
  }
}
@media (max-width: 900px){
  .ig-grid-peliculas .iglp-results .ig-contenedor{
    grid-template-columns: repeat(3, minmax(140px, 1fr));
  }
}
@media (max-width: 680px){
  .ig-grid-peliculas .iglp-results .ig-contenedor{
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }
}
@media (max-width: 360px){
  .ig-grid-peliculas .iglp-results .ig-contenedor{
    grid-template-columns: repeat(1, minmax(140px, 1fr));
  }
}

/* Por si el CSS base pone display:flex en .iglp-results > * */
.ig-grid-peliculas .iglp-results > *{
  flex: none !important;
}