/* ===============================
   UNMERCO EVENTOS - PRO UI v3 (Featured + Compact + Clamp)
   - 1 columna tipo feed (max-width centrado)
   - 1er evento FEATURED (más aire)
   - Resto COMPACT (menos alto)
   - Descripción: 3 líneas + "Ver más/Ver menos"
   - Botones en COMPACT: ocultos por defecto (JS los mostrará el día del evento)
=================================*/

:root{
  --unm-brand:#00B4D8;
  --unm-brand2:#48cae4;

  --unm-ink:#0b1220;
  --unm-text:#223046;
  --unm-muted:#64748b;

  --unm-border:rgba(15,23,42,.10);
  --unm-border-2:rgba(15,23,42,.08);

  --unm-bg:#ffffff;
  --unm-soft:#f8fafc;

  --unm-shadow: 0 14px 40px rgba(2, 8, 23, .08);
  --unm-shadow-hover: 0 18px 54px rgba(2, 8, 23, .11);
}

/* ===============================
   Layout tipo feed (no se estira)
=================================*/
.unm-eventos-wrap{
  display:grid !important;
  gap:18px !important;
  grid-template-columns: 1fr !important; /* ✅ 1 columna siempre */
  align-items:stretch !important;

  /* ✅ visual pro: centrado y ancho cómodo */
  max-width: 1080px;
  margin: 0 auto;
  padding: 0 14px;
}

/* ===============================
   Card base
=================================*/
.unm-evento-item{
  background: var(--unm-bg);
  border: 1px solid var(--unm-border);
  border-radius: 22px;
  padding: 18px 18px 16px;
  box-shadow: var(--unm-shadow);
  position:relative;
  overflow:hidden;
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}

/* “Accent line” sutil arriba */
.unm-evento-item::before{
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:3px;
  background: linear-gradient(90deg, var(--unm-brand), var(--unm-brand2));
  opacity:.55;
}

.unm-evento-item:hover{
  transform: translateY(-2px);
  box-shadow: var(--unm-shadow-hover);
  border-color: rgba(15,23,42,.14);
}

/* ===============================
   FEATURED vs COMPACT
=================================*/

/* Featured: un poquito más aire */
.unm-evento-item.unm-featured{
  padding: 20px 20px 18px;
}

/* Compact: más bajito */
.unm-evento-item.unm-compact{
  padding: 14px 16px 14px;
}

/* En compact el hover un poco más “suave” */
.unm-evento-item.unm-compact:hover{
  transform: translateY(-1px);
}

/* ===============================
   Header layout
=================================*/
.unm-header{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:12px;
  margin-bottom:10px;
}

.unm-title-block{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:0;
}

/* Title: premium, menos pesado */
.unm-evento-titulo{
  font-family:'Rubik', system-ui, -apple-system, Segoe UI, Robotooto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size: 26px;
  line-height: 1.18;
  margin:0;
  color: var(--unm-ink);
  font-weight: 800;
  letter-spacing: -0.2px;
  word-break: break-word;
}

/* Compact title un poco más pequeño */
.unm-evento-item.unm-compact .unm-evento-titulo{
  font-size: 21px;
  font-weight: 800;
  line-height: 1.2;
}

/* Chips */
.unm-chip-abierto,
.unm-chip-exclusivo,
.unm-chip-premium{
  display:inline-flex;
  align-items:center;
  gap:6px;
  width:fit-content;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size:12px;
  font-weight:800;
  padding:6px 10px;
  border-radius:999px;
  border: 1px solid var(--unm-border-2);
  background: rgba(248,250,252,.85);
  color: var(--unm-text);
  backdrop-filter: blur(6px);
}

.unm-chip-abierto{ background: rgba(236,254,255,.8); color:#0e7490; }
.unm-chip-exclusivo{ background: rgba(255,247,237,.85); color:#9a3412; }
.unm-chip-premium{ background: rgba(245,243,255,.9); color:#5b21b6; }

/* ===============================
   Fecha / badges
=================================*/
.unm-evento-fecha{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:10px;
  margin: 0 0 10px 0;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size: 15px;
  color: var(--unm-muted);
  font-weight: 700;
}

.unm-evento-item.unm-compact .unm-evento-fecha{
  margin-bottom: 8px;
  font-size: 14px;
}

.unm-fecha-legible{
  color: var(--unm-ink);
  font-weight: 800;
}

.unm-badge{
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size:11px;
  font-weight:900;
  padding:5px 10px;
  border-radius:999px;
  background: rgba(255,237,213,.85);
  color:#9a3412;
  text-transform:uppercase;
  letter-spacing:.4px;
  border:1px solid rgba(154,52,18,.12);
}

/* Countdown / Live */
.unm-countdown,
.unm-live-badge,
.unm-live-elapsed,
.unm-ended-label{
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size:12px;
  font-weight:900;
  padding:5px 10px;
  border-radius:999px;
  border:1px solid var(--unm-border-2);
}

.unm-countdown{ background: rgba(241,245,249,.9); color: var(--unm-ink); }
.unm-live-badge{
  background: rgba(254,226,226,.9);
  color:#b91c1c;
  text-transform:uppercase;
  letter-spacing:.35px;
  border-color: rgba(185,28,28,.14);
}
.unm-live-elapsed{
  background: rgba(240,249,255,.95);
  color:#0c4a6e;
  border-color: rgba(12,74,110,.12);
}
.unm-ended-label{
  background: rgba(241,245,249,.95);
  color:#334155;
}

/* ===============================
   Descripción + toggle (nuevo markup)
=================================*/
.unm-desc{
  margin: 10px 0 14px;
}

.unm-desc-content{
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size: 16px;
  color:#334155;
  line-height:1.65;
}

/* Featured: colapsado = 3 líneas */
.unm-desc[data-collapsed="1"] .unm-desc-content{
  display:-webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow:hidden;
}

/* Compact: por defecto NO muestra texto (solo botón Ver más) */
.unm-evento-item.unm-compact .unm-desc[data-collapsed="1"] .unm-desc-content{
  display:none !important;
}

/* Compact cuando expandes: sí muestra contenido completo */
.unm-evento-item.unm-compact .unm-desc[data-collapsed="0"] .unm-desc-content{
  display:block !important;
}

/* Botón Ver más/menos */
.unm-desc-toggle{
  background: transparent;
  border: none;
  padding: 0;
  margin-top: 6px;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size: 13px;
  font-weight: 900;
  color: var(--unm-brand);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.unm-desc-toggle:hover{ filter: brightness(0.92); }


/* En featured se puede dejar el texto sin clamp (si quieres).
   Por ahora: featured también tiene clamp, y el usuario decide expandir. */

/* ===============================
   Acciones
=================================*/
.unm-actions{
  margin-top: 2px;
}

/* ✅ En compact: por defecto NO mostramos acciones.
   Luego el JS las mostrará solo el día del evento. */
.unm-evento-item.unm-compact .unm-actions{
  display:none;
}

/* Botones */
.unm-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size:16px;
  font-weight:900;
  padding:12px 16px;
  border-radius:14px;
  text-decoration:none;
  border:none;
  cursor:pointer;
  transition:transform .10s ease, filter .16s ease, opacity .16s ease, box-shadow .16s ease;
  width:100%;
  box-sizing:border-box;
}

.unm-btn-primario{
  background: linear-gradient(135deg, var(--unm-brand), var(--unm-brand2));
  color:#ffffff;
  box-shadow: 0 14px 22px rgba(0,180,216,.18);
}

.unm-btn:hover:not(:disabled){
  transform: translateY(-1px);
  filter: brightness(0.98);
  box-shadow: 0 18px 28px rgba(0,180,216,.22);
}

.unm-btn:disabled{
  opacity:.55;
  cursor:not-allowed;
  box-shadow:none;
}

/* Aviso login */
.unm-aviso-login{
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  color: var(--unm-muted);
  background: rgba(248,250,252,.95);
  border:1px dashed rgba(100,116,139,.45);
  padding:12px;
  border-radius:14px;
}

/* ===============================
   ❤️ Reacciones (más pro y discreto)
=================================*/
.unm-reacciones{
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-family:'Nunito', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, 'Helvetica Neue', Arial, sans-serif;
  font-size:12px;
  font-weight:800;
  color: var(--unm-muted);
  background: rgba(255,255,255,.80);
  border:1px solid rgba(15,23,42,.10);
  padding:6px 10px;
  border-radius:999px;
  box-shadow: 0 10px 20px rgba(2,8,23,.06);

  /* ✅ más estable en 1 columna */
  max-width: 52%;
}

.unm-like-btn{
  background:none;
  border:none;
  font-size:18px;
  line-height:1;
  cursor:pointer;
  transition: transform .15s ease, color .15s ease, filter .15s ease;
  color:#cbd5e1;
  padding:0;
  position:relative;
}

.unm-like-btn:hover:not([disabled]){
  transform: scale(1.12);
  color:#e11d48;
}

.unm-reacciones.liked .unm-like-btn{
  color:#e11d48;
  animation: unm-heart-bounce .4s ease;
}

@keyframes unm-heart-bounce{
  0%{ transform: scale(1); }
  25%{ transform: scale(1.30); }
  50%{ transform: scale(.92); }
  75%{ transform: scale(1.10); }
  100%{ transform: scale(1); }
}

.unm-like-count{
  font-size:13px;
  font-weight:900;
  color: var(--unm-ink);
}

.unm-like-users{
  font-size:12px;
  font-weight:800;
  color: #334155;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Corazón deshabilitado */
.unm-like-btn[disabled]{
  cursor:not-allowed;
  color:#cbd5e1;
  opacity:.75;
  transform:none;
}

/* Tooltip general por data-tooltip */
.unm-btn[data-tooltip],
.unm-like-btn{
  position:relative;
}

.unm-btn[data-tooltip]::after{
  content: attr(data-tooltip);
  position:absolute;
  bottom: 120%;
  left:50%;
  transform:translateX(-50%);
  background: rgba(11,18,32,.96);
  color:#fff;
  font-family:'Nunito', sans-serif;
  font-size:11px;
  font-weight:800;
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
  box-shadow: 0 14px 22px rgba(2,8,23,.18);
}
.unm-btn:hover::after{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(-4px);
}

/* Tooltip del corazón */
.unm-like-btn::after{
  content:"Reaccionar al evento ❤️";
  position:absolute;
  bottom: 140%;
  left:50%;
  transform:translateX(-50%);
  background: rgba(11,18,32,.96);
  color:#fff;
  font-family:'Nunito', sans-serif;
  font-size:11px;
  font-weight:800;
  padding:6px 10px;
  border-radius:10px;
  white-space:nowrap;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity .15s ease, transform .15s ease;
  z-index: 30;
  box-shadow: 0 14px 22px rgba(2,8,23,.18);
}
.unm-like-btn:hover::after{
  opacity:1;
  visibility:visible;
  transform:translateX(-50%) translateY(-4px);
}
.unm-like-btn[disabled]::after{
  content:"Solo para miembros activos 💎";
}

/* ===============================
   Responsive
=================================*/
@media (max-width:480px){
  .unm-eventos-wrap{
    max-width: 100%;
    padding: 0 10px;
  }
  .unm-evento-titulo{ font-size:23px; }
  .unm-evento-item.unm-compact .unm-evento-titulo{ font-size:20px; }
  .unm-evento-desc{ font-size:15px; }
  .unm-evento-fecha{ font-size:14px; }
  .unm-reacciones{ max-width: 68%; }
}