/* ===== Base grid de shortcodes ===== */
.cl-events{display:grid;gap:16px}
.cl-layout-one{grid-template-columns:1fr}
.cl-layout-three{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.cl-layout-three{grid-template-columns:repeat(2,1fr)}}
@media (max-width:600px){.cl-layout-three{grid-template-columns:1fr}}

/* ===== Tarjeta =====
   Orden invertido: body a la izquierda, fecha a la derecha y arriba */
.cl-card{
  position:relative;
  border-radius:12px;
  padding:18px;
  display:grid;
  grid-template-columns:1fr 108px;         /* info | date-box */
  grid-template-areas: "body date";
  align-items:start;                        /* Alinea arriba el date-box */
  box-shadow:0 8px 18px rgba(0,0,0,.12);
  gap:16px;
}

/* Colores de fondo según “próximo evento” */
.cl-card--next{background:#333333;color:#ffffff}
.cl-card--normal{background:#ebeae5;color:#111111}

/* ===== Bloque fecha (derecha, arriba) ===== */
.cl-card__date{
  grid-area:date;
  border-radius:10px;
  width:108px;height:108px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  align-self:start;
  border:1px solid rgba(255,255,255,.25);
  background:rgba(0,0,0,.12);
}
.cl-card--normal .cl-card__date{
  /* versión clara cuando no es el próximo */
  background:#e2e0db;border-color:#d0cdc6;
}

/* Día (Instrument Sans, 40px, weight 500) */
.cl-card__day{
  font-family:"Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:500; /* Medium */
  font-size:40px;
  line-height:100%;
  letter-spacing:0;
}

/* Mes (Instrument Sans, 24px, weight 600) */
.cl-card__mon{
  font-family:"Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:600; /* SemiBold */
  font-size:24px;
  line-height:100%;
  letter-spacing:0;
  margin-top:2px;
  text-transform:none; /* usa “May”, “Jun” del navegador */
}

/* ===== Contenido (izquierda) ===== */
.cl-card__body{
  grid-area:body;
  align-self:center;
}

/* Título (Instrument Sans, 24px, weight 500) */
.cl-card__title{
  margin:0 0 10px;
  font-family:"Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:500; /* Medium */
  font-size:24px;
  line-height:100%;
  letter-spacing:0;
}

/* Lugar (Instrument Sans, 14px, weight 700) */
.cl-card__place{
  font-family:"Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:700; /* Bold */
  font-size:14px;
  line-height:100%;
  letter-spacing:0;
  margin-bottom:12px;
}

/* Badge / Botón */
.cl-badge{
  border:0;border-radius:10px;padding:8px 12px;cursor:pointer;
  font-family:"Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  font-weight:600; /* SemiBold */
  font-size:11px;
  line-height:100%;
  letter-spacing:0;
  color:#fff;
  background:#bbb;                 /* valor por defecto (Event) */
}

/* Colores del badge según la tarjeta */
.cl-card--next .cl-badge{ background:#F78D72; }   /* Upcoming Event */
.cl-card--normal .cl-badge{ background:#bbb; color:#222; }

/* Hover sutil en tarjetas */
.cl-card:hover{ transform:translateY(-1px); transition:transform .15s ease }

/* ===== Popup (mantengo estilos del mock para que coincida) ===== */
/* ===== POPUP ===== */
.cl-modal{
  position: fixed; inset: 0; display: none;
  z-index: 2147483647 !important; isolation: isolate; transform: translateZ(0);
}
.cl-modal[aria-hidden="false"]{ display:block; }
.cl-modal__overlay{ position:absolute; inset:0; background:rgba(0,0,0,.55); }
.cl-modal__dialog{
  position:relative; z-index:1;
  background:#F6F4EF; max-width:640px; margin:32px auto; padding:24px 28px 28px;
  border-radius:10px; box-shadow:0 20px 60px rgba(0,0,0,.25);
  font-family:"Instrument Sans",system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:#222;
}
/* Cerrar (cuadro con borde) */
.cl-modal__close{
  position:absolute; top:14px; right:14px;
  width:28px; height:28px; border:1px solid #333; border-radius:4px;
  background:#fff; color:#333; line-height:26px; text-align:center; cursor:pointer;
}

/* --- Título superior del modal (opcional) --- */
.cl-modal__heading{
  margin:0 0 16px; font-weight:700; font-size:24px; line-height:1.1; color:#333;
}

/* Tarjeta interna oscura */
.cl-modal__card{
  background:#333; color:#fff; border-radius:10px;
  padding:18px; display:grid; grid-template-columns:88px 1fr auto; gap:16px; align-items:center;
  margin-bottom:18px;
}
.cl-modal__date{
  border:1px solid rgba(255,255,255,.25); border-radius:10px;
  width:88px; height:88px; display:flex; flex-direction:column; justify-content:center; align-items:center;
  background:rgba(255,255,255,.06);
}
.cl-modal__date .dd{ font-weight:700; font-size:34px; line-height:1; }
.cl-modal__date .mm{ font-weight:600; font-size:18px; line-height:1; margin-top:3px; }
.cl-modal__badge{
  justify-self:end; background:#F78D72; color:#fff; border-radius:10px;
  padding:6px 10px; font-weight:700; font-size:12px; line-height:1;
}
.cl-modal__title{
  margin:0; font-weight:600; font-size:22px; line-height:1.25;
}
.cl-modal__venue{
  margin-top:6px; font-weight:600; font-size:14px; opacity:.95;
}

/* Filas de información (Location / Date) */
.cl-modal__row{
  display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:10px 0 18px;
}
.cl-modal__row > div{ display:flex; align-items:center; justify-content:space-between; gap:16px; }
.cl-modal__row strong{ font-weight:700; color:#333; }
.cl-modal__place, .cl-modal__datefull{ color:#454545; }

/* Campo de email */
.cl-modal__label{ display:block; margin:0 0 6px; font-weight:700; color:#333; }
.cl-modal__input{
  width:100%; padding:12px 14px; border:1px solid #333; border-radius:6px; background:#fff;
  font-size:14px; color:#222;
}
.cl-modal__input::placeholder{ color:#9A9A9A; }
.cl-modal__note{ font-size:12px; color:#777; margin:6px 0 16px; }

/* Mensaje de éxito (oculto por defecto) */
.cl-modal__alert{ display:none; align-items:center; gap:8px;
  background:#b6f3b5; border:1px solid #56c654; border-radius:4px; padding:10px 12px; margin:0 0 16px;
}
.cl-modal__ok{ border:1px solid #333; background:#fff; border-radius:4px; padding:2px 6px; line-height:1; cursor:pointer; }

/* CTA */
.cl-modal__cta{
  width:100%; padding:14px 16px; border-radius:8px; border:0;
  background:#333; color:#fff; font-weight:700; font-size:16px; cursor:pointer;
}
.cl-modal__cta:hover{ background:#111; }

/* Scroll lock cuando modal abierto */
html.cl-modal-open, body.cl-modal-open { overflow:hidden; }

/* Asegurar clics sólo en el modal si hay elementos agresivos debajo */
body.cl-modal-open > *:not(.cl-modal){ pointer-events:none !important; }
body.cl-modal-open .cl-modal, body.cl-modal-open .cl-modal *{ pointer-events:auto !important; }


/* Siempre arriba de todo */
.cl-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2147483647; /* superposición */
}

/* Cuando esté visible */
.cl-modal[aria-hidden='false']{ display:block; }

/* Bloqueo de scroll del documento cuando hay modal */
html.cl-modal-open, body.cl-modal-open { 
  overflow: hidden;
}

/* Compensación opcional: si tu layout “salta” por la barra de scroll,
   el JS añadirá padding-right dinámico al body; aquí no hace falta más CSS */

/* Popup SIEMPRE arriba de todo */
.cl-modal{
  position: fixed;
  inset: 0;
  display: none;
  z-index: 2147483647 !important; /* más alto que cualquier cosa razonable */
  isolation: isolate;             /* crea stacking context propio */
  transform: translateZ(0);       /* fuerza capa de composición (GPU) */
}

.cl-modal[aria-hidden="false"]{ display:block; }

/* Capa oscura y diálogo quedan dentro con z altos relativos */
.cl-modal__overlay{ z-index: 0; }
.cl-modal__dialog { position: relative; z-index: 1; }

/* Bloquea el scroll del documento cuando el modal está abierto */
html.cl-modal-open, body.cl-modal-open { overflow: hidden; }

/* (Opcional) Si algo del sitio usa pointer-events sobrepuestos, 
   desactívalos globalmente cuando el modal esté abierto */
body.cl-modal-open > *:not(.cl-modal){ pointer-events: none !important; }
body.cl-modal-open .cl-modal, 
body.cl-modal-open .cl-modal * { pointer-events: auto !important; }

/* Desactivar modal interno del plugin (usaremos el de Elementor) */
.cl-modal{ display:none !important; }

/* Header del popup según estado */
.elementor-popup-modal.cl-is-next .cl-e-header { background:#333333; color:#fff; }
.elementor-popup-modal.cl-is-normal .cl-e-header { background:#ebeae5; color:#111; }

/* Badge por estado (si quieres reforzarlo) */
.elementor-popup-modal.cl-is-next .cl-e-badge .elementor-button { background:#F78D72; color:#fff; }
.elementor-popup-modal.cl-is-normal .cl-e-badge .elementor-button { background:#bbb; color:#222; }