@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300..700&display=swap');

* { font-family: "Quicksand", sans-serif; }

:root{
  --surface: #ffffff;
  --text: #1f2937;
  --muted: #6b7280;

  --backdrop: rgba(15, 23, 42, 0.55);
  --border: rgba(17, 24, 39, 0.10);

  --shadow: 0 20px 50px rgba(0,0,0,.25);
  --radius: 16px;

  --btn-bg: #111827;
  --btn-text: #ffffff;

  --offline: #ff4500;
  --online:  #16a34a;

  --ease: cubic-bezier(.2, .8, .2, 1);
}

/* Overlay base */
.eventOffline,
.eventOnline{
  position: fixed;
  z-index: 99999;
  visibility: hidden;
  pointer-events: none;
  bottom: -100%;
  left: 0;
  width: 100%;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  display: flex;
  background: #000;
  border-radius: 1rem 1rem 0 0;
}

.eventOnline{
    border-top:2px solid #16a34a;
}

.eventOffline{
    border-top: 2px solid #ff4500;
}

.eventOffline.offline,
.eventOnline.online{
    visibility: visible;
    pointer-events: auto;
    bottom: 0;
}

/* Card */
.eventOffline .container,
.eventOnline  .container{
  border: 1px solid var(--border);
  box-shadow: var(--shadow);
    width: 100%;
  display: flex;
  transition: transform .22s var(--ease);
  align-items: center;
  justify-content: center;
  gap: .5rem;
  padding: .5rem;
}


/* Header */
.eventOffline .heading,
.eventOnline  .heading{
  display: flex;
  align-items: center;
  gap: .5rem;
}


/* Acentos por estado */
.eventOffline .heading i{
  color: #ff4500;
  font-size: clamp(.7rem, 2vw, 2.1rem);
}
.eventOnline .heading i{
    font-size: clamp(.7rem, 2vw, 2.1rem);
    color: #16a34a;

}

.eventOffline .heading p,
.eventOnline  .heading p{
  margin: 0;
  font-weight: 800;
  letter-spacing: .2px;
  color: #fff;
  font-size: clamp(.6rem, 2vw, 1.1rem);
}

/* Texto */
.eventOffline .textForm,
.eventOnline  .textForm{
    color: #fff;
  font-weight: 400;
  font-size: clamp(.6rem, 2vw, 1.1rem);
}

/* Botones (para button real) */
.eventOffline .fakeBtn,
.eventOnline  .fakeBtnTwo{
    display: none;

  cursor: pointer;
  user-select: none;

  transition: transform .12s var(--ease), opacity .12s var(--ease), filter .12s var(--ease);
}

.eventOffline .fakeBtn:hover,
.eventOnline  .fakeBtnTwo:hover{
  filter: brightness(1.05);
}

.eventOffline .fakeBtn:active,
.eventOnline  .fakeBtnTwo:active{
  transform: translateY(1px);
  opacity: .92;
}

.eventOffline .fakeBtn:focus-visible,
.eventOnline  .fakeBtnTwo:focus-visible{
  outline: 3px solid rgba(59,130,246,.45);
  outline-offset: 3px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .eventOffline,
  .eventOnline,
  .eventOffline .container,
  .eventOnline  .container{
    transition: none;
  }
}