@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 10px 30px rgba(0,0,0,.5);
  --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;
  opacity: 0;
  pointer-events: none;
  top:50%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  border-radius: 1rem;
  padding: 2rem 6%;
  width: 100%;
  height: 100%;
  min-height: 100svh;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(7px);
}

.eventOnline.online .container{
    border:2px solid #16a34a;
}

.eventOffline.offline .container{
    border: 2px solid var(--accentBg);
}

.eventOffline.offline,
.eventOnline.online{
    visibility: visible;
    opacity: 1;
    pointer-events: all;
}

/* Card */
.eventOffline .container,
.eventOnline  .container{
    background:var(--linear0);
    display: flex;
    border-radius: 1rem;
    transition: transform .22s var(--ease);
    align-items: center;
    justify-content: center;
    width: 100%;
    flex-direction: column;
    row-gap: .5rem;
    padding: 1.5rem;
    min-height: 30svh;
    box-shadow: var(--shadow);
}


/* Header */
.eventOffline .heading,
.eventOnline  .heading{
  display: flex;
  align-items: center;
  height: 100%;
  justify-content: center;
  flex-direction: column;
}


/* Acentos por estado */
.eventOffline .heading i{
  color: #ff4500;
  font-size: 3rem;
}
.eventOnline .heading i{
    font-size: 3rem;
    color: #16a34a;

}

.eventOffline .heading p,
.eventOnline  .heading p{
  margin: 0;
  font-weight: 800;
  letter-spacing: .2px;
  color: var(--pureWhite);
  font-size: 1.2rem;
  text-align: center;
}

/* Texto */
.eventOffline .textForm,
.eventOnline  .textForm{
    color: var(--gray2);
  font-weight: 400;
  font-size: 1.5rem;
}

/* 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;
  }
}