/* From Uiverse.io by NK2552003 — Luminous card
   Adaptado a serial / Estado del servicio: Night950 + oro #D4AF37 #B8953E #C9B07A */

.serial-ticket-wrap .luminous-card-container {
  box-sizing: border-box;
  margin: 0;
  padding: 1.2rem 0.4rem 0.2rem;
  --sz: 15px;
  font-size: var(--sz);
  display: grid;
  place-items: center;
  background: transparent;
  font-family: inherit;
  min-height: 0;
  overflow: visible;
  min-width: 0;
}

.serial-ticket-wrap .luminous-card-container * {
  box-sizing: border-box;
}

.luminous-card {
  position: relative;
  background: radial-gradient(circle at 50% 0%, #2a2a2a 0%, #0c0c0e 64%);
  box-shadow:
    inset 0 1.01rem 0.2rem -1rem #fff0,
    inset 0 -1.01rem 0.2rem -1rem #0000,
    0 -1.02rem 0.2rem -1rem #fff0,
    0 1rem 0.2rem -1rem #0000,
    0 0 0 1px #fff3,
    0 4px 4px 0 #0004,
    0 0 0 1px #333;
  width: 17rem;
  height: 23rem;
  border-radius: 1.8rem;
  color: #fff;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition:
    all 0.4s ease-in-out,
    translate 0.4s ease-out;
}

.luminous-card::before {
  content: "";
  display: block;
  --offset: 1rem;
  width: calc(100% + 2 * var(--offset));
  height: calc(100% + 2 * var(--offset));
  position: absolute;
  left: calc(-1 * var(--offset));
  right: calc(-1 * var(--offset));
  top: calc(-1 * var(--offset));
  bottom: calc(-1 * var(--offset));
  margin: auto;
  box-shadow: inset 0 0 0 0.06rem #fff2;
  border-radius: 2.6rem;
  --ax: 4rem;
  clip-path: polygon(
    var(--ax) 0,
    0 0,
    0 var(--ax),
    var(--ax) var(--ax),
    var(--ax) calc(100% - var(--ax)),
    0 calc(100% - var(--ax)),
    0 100%,
    var(--ax) 100%,
    var(--ax) calc(100% - var(--ax)),
    calc(100% - var(--ax)) calc(100% - var(--ax)),
    calc(100% - var(--ax)) 100%,
    100% 100%,
    100% calc(100% - var(--ax)),
    calc(100% - var(--ax)) calc(100% - var(--ax)),
    calc(100% - var(--ax)) var(--ax),
    100% var(--ax),
    100% 0,
    calc(100% - var(--ax)) 0,
    calc(100% - var(--ax)) var(--ax),
    var(--ax) var(--ax)
  );
  transition: all 0.4s ease-in-out;
  pointer-events: none;
}

.luminous-card:hover {
  translate: 0 -0.2rem;
}

.luminous-card:hover::before {
  --offset: 0.5rem;
  --ax: 8rem;
  border-radius: 2.2rem;
  box-shadow: inset 0 0 0 0.08rem #fff1;
}

.luminous-light-layer {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  transform-style: preserve-3d;
  perspective: 400px;
  pointer-events: none;
}

.luminous-slit {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 64%;
  height: 1.2rem;
  transform: rotateX(-76deg);
  background: #121212;
  box-shadow: 0 0 4px 0 #fff0;
  transition: all 0.4s ease-in-out;
}

.luminous-lumen {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  pointer-events: none;
  perspective: 400px;
  opacity: 0;
  transition: opacity 0.4s ease-in-out;
}

.luminous-lumen .min {
  width: 70%;
  height: 3rem;
  background: linear-gradient(#fff0, #fffa);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 2.5rem;
  margin: auto;
  transform: rotateX(-42deg);
  opacity: 0.4;
}

.luminous-lumen .mid {
  width: 74%;
  height: 13rem;
  background: linear-gradient(#fff0, #fffa);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 10em;
  margin: auto;
  transform: rotateX(-42deg);
  filter: blur(1rem);
  opacity: 0.8;
  border-radius: 100% 100% 0 0;
}

.luminous-lumen .hi {
  width: 50%;
  height: 13rem;
  background: linear-gradient(#fff0, #fffa);
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 12em;
  margin: auto;
  transform: rotateX(22deg);
  filter: blur(1rem);
  opacity: 0.6;
  border-radius: 100% 100% 0 0;
}

.luminous-darken {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 100%;
  height: 100%;
  pointer-events: none;
  perspective: 400px;
  transition: opacity 0.4s ease-in-out;
  opacity: 0.5;
}

.luminous-darken > * {
  transition: opacity 0.4s ease-in-out;
}

.luminous-darken .sl {
  width: 64%;
  height: 10rem;
  background: linear-gradient(#000, #0000);
  position: absolute;
  left: 0;
  right: 0;
  top: 9.6em;
  bottom: 0;
  margin: auto;
  filter: blur(0.2rem);
  opacity: 0.1;
  border-radius: 0 0 100% 100%;
  transform: rotateX(-22deg);
}

.luminous-darken .ll {
  width: 62%;
  height: 10rem;
  background: linear-gradient(#000a, #0000);
  position: absolute;
  left: 0;
  right: 0;
  top: 11em;
  bottom: 0;
  margin: auto;
  filter: blur(0.8rem);
  opacity: 0.4;
  border-radius: 0 0 100% 100%;
  transform: rotateX(22deg);
}

.luminous-darken .slt {
  width: 0.5rem;
  height: 4rem;
  background: linear-gradient(#0005, #0000);
  position: absolute;
  left: 0;
  right: 11.5rem;
  top: 3.9em;
  bottom: 0;
  margin: auto;
  opacity: 0.6;
  border-radius: 0 0 100% 100%;
  transform: skewY(42deg);
}

.luminous-darken .srt {
  width: 0.5rem;
  height: 4rem;
  background: linear-gradient(#0005, #0000);
  position: absolute;
  right: 0;
  left: 11.5rem;
  top: 3.9em;
  bottom: 0;
  margin: auto;
  opacity: 0.6;
  border-radius: 0 0 100% 100%;
  transform: skewY(-42deg);
}

.luminous-content {
  position: relative;
  z-index: 1;
}

.luminous-icon {
  position: absolute;
  top: -11.5rem;
  left: 0;
  right: 0;
  margin: auto;
  width: 7.2rem;
  filter: drop-shadow(0 -1.2rem 1px transparent);
  transition: filter 0.4s ease-in-out;
}

.luminous-icon img {
  width: 100%;
  height: auto;
  display: block;
}

.luminous-bottom {
  position: relative;
}

.luminous-title {
  margin: 0;
  margin-bottom: 0.55rem;
  font-size: 1.15rem;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.luminous-status {
  margin: 0 0 0.45rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}

.luminous-description {
  margin: 0;
  padding-bottom: 0.6rem;
  color: #aaa;
  font-size: 0.62rem;
  font-weight: 400;
  line-height: 1.45;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  max-width: 62%;
}

.luminous-description .mod-vis {
  display: block;
}

.luminous-description .mod-vis b {
  color: #86efac;
  font-weight: 800;
}

.luminous-description .mod-vis-days {
  display: block;
  margin-top: 0.2rem;
  opacity: 0.85;
}

.luminous-toggle {
  position: absolute;
  right: 0;
  bottom: 0;
  height: 2rem;
  width: 4.8rem;
  border-radius: 0.6rem;
  background: #000;
  box-shadow:
    inset 0 -8px 8px 0.3rem #0004,
    inset 0 0 1px 0.3rem #ddd,
    inset 0 -2px 1px 0.3rem #fff,
    inset 0 1px 2px 0.3rem #0006,
    inset 0 0 1px 0.8rem #aaa;
  pointer-events: auto;
  cursor: pointer;
}

.luminous-toggle::before {
  content: "";
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin: auto;
  width: 3.4rem;
  height: 0.68rem;
  border-radius: 0.2rem;
  background: #000;
  transition: all 0.4s ease-in-out;
}

.luminous-handle {
  position: absolute;
  top: 0;
  bottom: 0.04rem;
  margin: auto;
  left: 0.68rem;
  width: 40%;
  height: 30%;
  background: #aaa;
  border-radius: 0.2rem;
  box-shadow:
    inset 0 1px 4px 0 #fff,
    inset 0 -1px 1px 0 #000a,
    0 0 1px 1px #0003,
    1px 3px 6px 1px #000a;
  transition: all 0.4s ease-in-out;
  pointer-events: none;
}

.luminous-toggle-label {
  text-align: center;
  position: absolute;
  left: 0;
  right: 0;
  margin: auto;
  bottom: calc(100% + 0.35rem);
  font-size: 0.55rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #999;
  white-space: nowrap;
}

/* Luz blanca original (Uiverse). Encendida = interruptor Activa. */
.luminous-card.is-lit {
  box-shadow:
    inset 0 1.01rem 0.1rem -1rem #fffa,
    inset 0 -4rem 3rem -3rem #000a,
    0 -1.02rem 0.2rem -1rem #fffa,
    0 1rem 0.2rem -1rem #000,
    0 0 0 1px #fff2,
    0 4px 4px 0 #0004,
    0 0 0 1px #333;
}

.luminous-card.is-lit .luminous-slit {
  background: #fff;
  box-shadow: 0 0 4px 0 #fff;
}

.luminous-card.is-lit .luminous-lumen {
  opacity: 0.5;
}

.luminous-card.is-lit .luminous-darken {
  opacity: 0.8;
}

.luminous-card.is-lit .luminous-darken .sl { opacity: 0.2; }
.luminous-card.is-lit .luminous-darken .ll { opacity: 1; }
.luminous-card.is-lit .luminous-darken .slt { opacity: 1; }
.luminous-card.is-lit .luminous-darken .srt { opacity: 1; }

.luminous-card.is-lit .luminous-icon {
  filter: drop-shadow(0 -1.2rem 2px #0003) brightness(1.64);
}

.luminous-card.is-lit .luminous-toggle::before {
  background: #fffc;
  box-shadow: 0 0 0.3rem 0.2rem #fff7;
}

.luminous-card.is-lit .luminous-handle {
  transform: translateX(1.58rem);
  box-shadow:
    inset 0 1px 12px 0 #fff,
    inset 0 -1px 1px 0 #fffa,
    0 0 2px 1px #4443,
    1px 3px 6px 1px #0004;
}

.luminous-card.is-expired .luminous-status {
  color: #e57373;
}