/* /assets/css/calendar.css
   Movistar Arena — Programación (Grid)
   Solo estilos específicos de la página (sin shell)
   Requiere: config.css + shell.css + icons.css
*/

/* =========================================================
   Toolbar (layout + search)
   ========================================================= */
.toolbar{
  margin-top: 14px;
  padding: 12px;
  border-radius: var(--r-lg);
  border: 1px solid var(--border);
}

.toolbar__row{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
}

/* Search */
.search{
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  background: rgba(var(--ma-cream-rgb), 0.08);
  border: 1px solid var(--border);
  border-radius: var(--r-md);
  padding: 8px 8px 8px 12px;
}

.search input{
  width: 100%;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-element-body);
  line-height: var(--lh-element-body);
  font-weight: var(--fw-element-body);
  padding: 8px 2px;
}

.search input::placeholder{
  color: rgba(var(--ma-cream-rgb), 0.55);
}



/*
@media (prefers-color-scheme: light){
  .search input::placeholder{
    color: rgba(var(--ma-ink-rgb), 0.45);
  }
}
*/

.toolbar__actions{
  display: flex;
  gap: 10px;
}

/* =========================================================
   Months nav + applied
   ========================================================= */
.months{
  margin-top: 10px;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 5px 5px 6px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.months::-webkit-scrollbar{ display: none; }

.months .chip.is-active{
  outline: 2px solid rgba(var(--ma-cream-rgb), 0.35);
  transform: translateY(-1px);
}

.applied{
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--fs-element-badge);
  line-height: var(--lh-element-badge);
  font-weight: var(--fw-element-badge);
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.applied__label{
  color: var(--text);
  opacity: 0.85;
}

/* =========================================================
   Mes + grid
   ========================================================= */
.month-head{
  margin-top: 22px;
  padding: 6px 2px 8px;
}
.month-head h2{
  margin: 0;
  font-size: var(--fs-section-subtitle);
  line-height: var(--lh-section-subtitle);
  font-weight: var(--fw-section-subtitle);
  letter-spacing: -0.2px;
}

.event-grid{
  margin-top: 10px;
  display: grid;
  gap: 14px;
  grid-auto-flow: row;
  align-items: stretch;
}

@media (min-width: 900px){
  .event-grid{
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }
}

/* =========================================================
   Event card
   ========================================================= */
.event-card{
  border-radius: var(--r-md);
  overflow: hidden;
  border: 1px solid var(--border);
  transform: translateZ(0);
  transition: transform var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease);

  display: flex;
  flex-direction: column;
  min-width: 0;
  height: 100%;
}

@media (min-width: 900px){
  .event-card:hover{
    transform: translateY(-3px);
    box-shadow: var(--shadow-2);
  }
}

/* Media (ratio fijo + cover) */
.event-card__media{
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1.42;
  overflow: hidden;
  line-height: 0;
  flex: 0 0 auto;
}

.event-card__media > img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/* Overlay si hay soldout */
.event-card__media:has(.badge--soldout)::after{
  content:"";
  position:absolute;
  inset:0;
  background: rgba(var(--ma-ink-rgb), 0.5);
  pointer-events:none;
  z-index:1;
}
.event-card__media .badge{
  position:absolute;
  z-index:2;
}

/* Head */
.event-card__head{
  margin-bottom: 10px;
  text-align: center;
}

.event-card__body{
  padding: 14px 14px 12px;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.event-card__title{
  margin: 0;
  font-size: var(--fs-element-title);
  line-height: var(--lh-element-title);
  font-weight: var(--fw-element-title);
  letter-spacing: -0.2px;
}
.event-card__title a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-overflow: ellipsis;
}

.event-card__subtitle{
  margin: 4px 0 0;
  font-size: var(--fs-element-body);
  line-height: var(--lh-element-body);
  font-weight: var(--fw-element-body);
  color: var(--muted);
}
.event-card__subtitle a{
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* =========================================================
   Badges (si aparecen)
   ========================================================= 
.badge{
  left: 12px;
  top: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  font-size: var(--fs-element-badge);
  line-height: var(--lh-element-badge);
  font-weight: var(--fw-element-badge);
  border: 1px solid var(--border);
  background: rgba(var(--ma-ink-rgb), 0.35);
  -webkit-backdrop-filter: blur(12px) saturate(1.1);
  backdrop-filter: blur(12px) saturate(1.1);
  text-transform: uppercase;
}

.badge--soldout,
.badge--cancelled{
  left: 50%;
  top: 50%;
  transform: translateX(-50%) rotate(-15deg);
  width: max-content;
  border-color: var(--warning);
  background: var(--ma-danger);
  font-size: var(--fs-section-title);
  font-weight: var(--font-weight-extrabold);
}
*/

/* =========================================================
   Footer “when + CTAs” (anti-overflow)
   ========================================================= */
.event-card__footer{
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-top: auto;
}

.event-card__ctas{
  display: flex;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  gap: .75rem;
  justify-content: space-between;
  align-items: flex-end;

  flex-wrap: wrap;
}

/* When */
.event-card__when{
  margin: 0;
  padding: 0;
  min-width: 0;
  flex: 1 1 320px;
}
.event-card__when dd{ margin: 0; }

.when.when--box{
  width: 100%;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;

  display: block;
  border: 1px solid var(--border);
  background: rgba(var(--ma-cream-rgb), 0.06);
  border-radius: var(--r-md);
  padding: 10px 14px;

  text-align: center;
}

.when--box dd{
  display: flex;
  flex-direction: column;
  gap: .25rem;
  min-width: 0;
}

.when__row{
  display: flex;
  align-items: center;
  gap: .45rem;
  min-width: 0;
  width: 100%;
}

.when__row--loc{
  opacity: .9;
  justify-content: center;
}

.when__row--loc span{
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-element-badge);
}

.when__row--dt{
  justify-content: center;
  gap: .4rem;
  flex-wrap: wrap;
}

.when__item{
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  min-width: 0;
}

.when__sep{
  opacity: .55;
}

.event-card__when time{
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
  font-size: var(--fs-element-subtitle);
  line-height: 1;
  font-weight: var(--font-weight-bold);
}

/* Buttons row */
.event-card__btns{
  display: flex;
  align-items: center;
  gap: .5rem;

  width: 100%;
  min-width: 0;
  /*flex: 1 1 260px;*/
  flex: 1 1 1;
	
  justify-content:space-between;
  flex-wrap: wrap;       /* ✅ CLAVE: 3 CTAs sin overflow */
}

.event-card__btns > *{
  flex: 0 0 auto;        /* evita “estiramientos” raros */
}

@media (max-width: 640px){
  .event-card__ctas{
    flex-direction: column;
    align-items: stretch;
  }

  .event-card__when{
    flex: 1 1 auto;
    width: 100%;
  }

  .event-card__btns{
    justify-content: space-between;
  }

  .event-card__btns .btn{
    width: auto !important;
  }
}

/* =========================================================
   Promo (si aparece)
   ========================================================= */
.event-card--promo{
  opacity: 0.92;
}
.event-card--promo .badge{
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.event-card--promo .event-card__media > img{
  filter: saturate(0.9) contrast(1.05);
}


/* =========================================================
   FILTROS 
   ========================================================= */
.filters { padding: 12px 14px 16px; }

.filters__group {
  border: 0;
  margin: 0;
  padding: 0 0 14px;
}
.filters__group legend {
  font-weight: var(--font-weight-bold);
  margin-bottom: 8px;
  font-size: var(--fs-element-body);
  line-height: var(--lh-element-body);
}

.radio {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 10px 0;
  font-size: var(--fs-element-body);
  line-height: var(--lh-element-body);
}
.radio input { width: 18px; height: 18px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; }

.chip-check {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(var(--ma-cream),0.06);
}
.chip-check input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.chip-check span {
  font-size: var(--fs-element-body);
  line-height: var(--lh-element-body);
  font-weight: var(--fw-element-body);
  color: var(--text);
}


.chip-check:has(input:checked) {
  border-color: color-mix(in srgb, var(--brand) 55%, transparent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent) inset;
}

.chip-check--arena:has(input:checked) { border-color: color-mix(in srgb, var(--arena) 55%, transparent); }
.chip-check--sala:has(input:checked)  { border-color: color-mix(in srgb, var(--sala) 55%, transparent); }
.chip-check--truss:has(input:checked) { border-color: color-mix(in srgb, var(--truss) 55%, transparent); }

.date-range {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
  align-items: center;
}
.date-range input {
  width: 100%;
  min-height: 44px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
  background: rgba(var(--ma-cream),0.06);
  color: var(--text);
  padding: 0 12px;
  font-size: var(--fs-element-body);
  line-height: var(--lh-element-body);
  font-weight: var(--fw-element-body);
}
.date-range__sep {
  color: var(--ma-ink-50);
  text-align: center;
  font-size: var(--fs-element-badge);
  line-height: var(--lh-element-badge);
}

.filters__actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 8px;
}
.filters__hint {
  margin: 10px 0 0;
  color: var(--ma-ink-50);
  font-size: var(--fs-element-badge);
  line-height: var(--lh-element-badge);
  font-weight: var(--fw-element-badge);
}



/* ===============================
Skeleton
=============================== */
.skeleton-card{pointer-events:none;opacity:.6;animation:pulse 1.2s infinite ease-in-out}
@keyframes pulse{0%{opacity:.6}50%{opacity:.3}100%{opacity:.6}}


 /* ===============================
	FAB filtros 
=============================== */

    .fab-filters{
      position:fixed;right:16px;bottom:16px;width:52px;height:52px;border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;
      background:#0B5CFF;color:#fff;box-shadow:0 10px 24px rgba(0,0,0,.18);
      text-decoration:none;z-index:9999;
      opacity:0;transform:translateY(10px);pointer-events:none;
      transition:opacity .2s ease,transform .2s ease;
    }
    .fab-filters svg{width:22px;height:22px}
    .fab-filters.is-visible{opacity:1;transform:translateY(0);pointer-events:auto}



/* RESPONSIVE CAJA FILTROS*/
@media (max-width: 820px) {
  .toolbar__row {
    grid-template-columns: 1fr;
    align-items: stretch;
  }

  .search {
    width: 100%;
    min-width: 0;
  }

  .search input,
  .search input[type="search"] {
    min-width: 0;
    width: 100%;
  }

  .toolbar__actions {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto auto;
    gap: 10px;
  }

  .toolbar__actions .btn {
    justify-content: center;
  }

  .toolbar__actions .btn:first-child {
    width: 100%;
  }
}