/* =========================================================
   CHESSTRX 8.6G3C2
   PROMOTIONAL BANNERS + TOP MENU V1
   ========================================================= */


/* =========================================================
   MENU SUPERIOR FIJO
   ========================================================= */

@media (max-width:720px){

  #chesstrxSafeMenuButtonV1{
    top:
      calc(
        10px + env(safe-area-inset-top)
      ) !important;

    right:12px !important;
    bottom:auto !important;

    width:48px !important;
    height:48px !important;

    border-radius:15px !important;

    background:
      linear-gradient(
        145deg,
        rgba(5,67,92,.96),
        rgba(0,183,211,.92)
      ) !important;

    border:
      1px solid
      rgba(84,239,255,.78)
      !important;

    box-shadow:
      0 8px 25px rgba(0,0,0,.48),
      0 0 17px rgba(0,234,255,.25)
      !important;

    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);

    z-index:10000050 !important;
  }

}


/* =========================================================
   CONTENEDOR DEL CARRUSEL
   ========================================================= */

#chesstrxPromoRailV1{
  position:relative;

  width:100%;
  min-height:104px;

  margin:
    10px 0
    15px;

  box-sizing:border-box;

  overflow:hidden;

  border-radius:19px;
}


/*
 * Mantiene el espacio del banner aunque
 * la tarjeta desaparezca entre promociones.
 */
#chesstrxPromoStageV1{
  position:relative;

  width:100%;
  height:104px;

  overflow:hidden;

  border-radius:19px;
}


/* =========================================================
   TARJETA
   ========================================================= */

.ctrx-banner-card-v1{
  position:absolute;
  inset:0;

  overflow:hidden;

  border-radius:19px;

  border:
    1px solid
    rgba(0,234,255,.42);

  background:
    radial-gradient(
      circle at 84% 25%,
      rgba(0,202,255,.20),
      transparent 45%
    ),
    linear-gradient(
      135deg,
      #061d2d,
      #03101c 70%
    );

  box-shadow:
    0 9px 28px
      rgba(0,0,0,.40);

  opacity:0;

  transform:
    translateX(42px)
    scale(.985);

  transition:
    opacity .36s ease,
    transform .58s
      cubic-bezier(.2,.84,.25,1),
    filter .34s ease;

  will-change:
    opacity,
    transform;
}


/* IMAGEN */

.ctrx-banner-image-v1{
  position:absolute;
  inset:0;

  width:100%;
  height:100%;

  object-fit:cover;

  opacity:.72;

  transform:scale(1.025);
}


/* CAPA DE CONTRASTE */

.ctrx-banner-shade-v1{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      90deg,
      rgba(2,12,22,.96) 0%,
      rgba(2,13,23,.90) 38%,
      rgba(2,12,22,.48) 72%,
      rgba(2,12,22,.28) 100%
    );
}


/* SIN IMAGEN */

.ctrx-banner-card-v1.no-image
.ctrx-banner-shade-v1{
  background:
    radial-gradient(
      circle at 82% 30%,
      rgba(0,234,255,.18),
      transparent 40%
    ),
    linear-gradient(
      135deg,
      rgba(3,29,45,.98),
      rgba(3,12,23,.98)
    );
}


/* CONTENIDO */

.ctrx-banner-content-v1{
  position:relative;
  z-index:3;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;

  width:72%;
  height:100%;

  padding:
    12px 15px;

  box-sizing:border-box;
}


.ctrx-banner-title-v1{
  max-width:100%;

  overflow:hidden;

  color:#ffffff;

  font-size:17px;
  font-weight:900;

  line-height:1.12;

  white-space:nowrap;
  text-overflow:ellipsis;

  text-shadow:
    0 2px 8px
    rgba(0,0,0,.75);
}


.ctrx-banner-text-v1{
  display:-webkit-box;

  margin-top:5px;

  overflow:hidden;

  color:
    rgba(255,255,255,.82);

  font-size:12.5px;
  line-height:1.28;

  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;

  text-shadow:
    0 2px 7px
    rgba(0,0,0,.75);
}


/* BOTÓN */

.ctrx-banner-action-v1{
  display:inline-flex;

  align-items:center;
  justify-content:center;

  min-height:27px;

  margin-top:7px;
  padding:4px 10px;

  border-radius:9px;

  border:
    1px solid
    rgba(255,225,122,.55);

  background:
    rgba(255,214,82,.13);

  color:#ffe681;

  font-size:11.5px;
  font-weight:800;

  cursor:pointer;
}


/* CONTADOR */

.ctrx-banner-index-v1{
  position:absolute;

  right:10px;
  top:9px;

  z-index:4;

  min-width:29px;

  padding:
    3px 7px;

  box-sizing:border-box;

  border-radius:999px;

  background:
    rgba(0,0,0,.42);

  border:
    1px solid
    rgba(255,255,255,.16);

  color:
    rgba(255,255,255,.74);

  font-size:10px;
  font-weight:700;

  text-align:center;

  backdrop-filter:blur(5px);
  -webkit-backdrop-filter:blur(5px);
}


/* =========================================================
   ANIMACIÓN
   ========================================================= */

.ctrx-banner-card-v1.is-visible{
  opacity:1;

  transform:
    translateX(0)
    scale(1);

  animation:
    ctrxBannerGlowV1
    1.25s ease
    .38s
    1;
}


.ctrx-banner-card-v1.is-exit{
  opacity:0;

  transform:
    translateX(-34px)
    scale(.978);

  filter:
    blur(1.5px);
}


@keyframes ctrxBannerGlowV1{

  0%{
    border-color:
      rgba(0,234,255,.42);

    box-shadow:
      0 9px 28px
        rgba(0,0,0,.40);
  }

  42%{
    border-color:
      rgba(105,245,255,.98);

    box-shadow:
      0 9px 28px
        rgba(0,0,0,.40),
      0 0 23px
        rgba(0,234,255,.42);
  }

  100%{
    border-color:
      rgba(0,234,255,.42);

    box-shadow:
      0 9px 28px
        rgba(0,0,0,.40);
  }
}


/* =========================================================
   ADMIN
   ========================================================= */

#chesstrxBannerAdminOverlayV1{
  position:fixed;
  inset:0;

  z-index:10000300;

  display:none;

  overflow-y:auto;

  padding:
    calc(
      18px +
      env(safe-area-inset-top)
    )
    14px
    calc(
      28px +
      env(safe-area-inset-bottom)
    );

  box-sizing:border-box;

  background:
    radial-gradient(
      circle at top,
      #07354d,
      #020914 70%
    );

  color:#fff;

  -webkit-overflow-scrolling:touch;
}


#chesstrxBannerAdminOverlayV1.open{
  display:block;
}


.ctrx-banner-admin-shell-v1{
  width:min(
    100%,
    620px
  );

  margin:auto;
}


.ctrx-banner-admin-head-v1{
  display:flex;

  align-items:center;
  justify-content:space-between;

  gap:12px;

  margin-bottom:14px;
}


.ctrx-banner-admin-head-v1 h2{
  margin:0;

  font-size:21px;
  color:#71efff;
}


#chesstrxBannerAdminCloseV1{
  width:42px;
  height:42px;

  border-radius:12px;

  border:
    1px solid
    rgba(255,255,255,.18);

  background:
    rgba(255,255,255,.08);

  color:#fff;

  font-size:23px;
}


.ctrx-banner-admin-card-v1{
  padding:15px;

  border-radius:18px;

  border:
    1px solid
    rgba(0,234,255,.28);

  background:
    rgba(2,20,34,.88);

  box-shadow:
    0 12px 32px
    rgba(0,0,0,.28);
}


.ctrx-banner-admin-grid-v1{
  display:grid;

  grid-template-columns:
    1fr 1fr;

  gap:10px;
}


.ctrx-banner-admin-field-v1{
  display:flex;
  flex-direction:column;

  gap:5px;

  margin-bottom:10px;
}


.ctrx-banner-admin-field-v1.full{
  grid-column:
    1 / -1;
}


.ctrx-banner-admin-field-v1 span{
  color:
    rgba(255,255,255,.72);

  font-size:12px;
  font-weight:700;
}


.ctrx-banner-admin-field-v1 input,
.ctrx-banner-admin-field-v1 textarea,
.ctrx-banner-admin-field-v1 select{
  width:100%;

  box-sizing:border-box;

  padding:
    11px 12px;

  border-radius:11px;

  border:
    1px solid
    rgba(0,234,255,.25);

  outline:none;

  background:#061725;

  color:#fff;

  font-size:14px;
}


.ctrx-banner-admin-field-v1 textarea{
  min-height:72px;

  resize:vertical;
}


.ctrx-banner-admin-actions-v1{
  display:flex;

  flex-wrap:wrap;

  gap:8px;

  margin-top:5px;
}


.ctrx-banner-admin-actions-v1 button{
  flex:
    1 1
    120px;

  min-height:42px;

  border-radius:11px;

  border:
    1px solid
    rgba(0,234,255,.34);

  background:
    linear-gradient(
      135deg,
      #08677c,
      #00afc7
    );

  color:#fff;

  font-weight:800;
}


.ctrx-banner-admin-actions-v1
button.secondary{
  background:
    rgba(255,255,255,.08);
}


.ctrx-banner-admin-message-v1{
  min-height:20px;

  margin:
    10px 0;

  font-size:13px;

  color:#8df3ff;
}


.ctrx-banner-admin-list-v1{
  margin-top:15px;
}


.ctrx-banner-admin-item-v1{
  margin:
    10px 0;

  padding:12px;

  border-radius:14px;

  border:
    1px solid
    rgba(255,255,255,.12);

  background:
    rgba(255,255,255,.045);
}


.ctrx-banner-admin-item-v1
strong{
  display:block;

  margin-bottom:4px;
}


.ctrx-banner-admin-item-v1
small{
  display:block;

  opacity:.68;

  margin-bottom:8px;
}


.ctrx-banner-admin-item-actions-v1{
  display:flex;

  gap:7px;
}


.ctrx-banner-admin-item-actions-v1
button{
  min-height:35px;

  padding:
    6px 11px;

  border-radius:9px;

  border:
    1px solid
    rgba(255,255,255,.18);

  background:
    rgba(255,255,255,.08);

  color:#fff;

  font-weight:700;
}


.ctrx-banner-admin-item-actions-v1
button.danger{
  border-color:
    rgba(255,88,88,.35);

  color:#ff9292;
}


/* BOTÓN ADMIN DENTRO DEL MENÚ */

#chesstrxBannerAdminEntryV1{
  border-color:
    rgba(255,216,90,.27);

  background:
    rgba(255,216,90,.08);
}


/* =========================================================
   MOBILE
   ========================================================= */

@media(max-width:520px){

  #chesstrxPromoRailV1,
  #chesstrxPromoStageV1{
    min-height:96px;
    height:96px;
  }

  .ctrx-banner-content-v1{
    width:78%;

    padding:
      11px 13px;
  }

  .ctrx-banner-title-v1{
    font-size:16px;
  }

  .ctrx-banner-text-v1{
    font-size:11.5px;
  }

  .ctrx-banner-action-v1{
    font-size:11px;
  }

  .ctrx-banner-admin-grid-v1{
    grid-template-columns:
      1fr;
  }

  .ctrx-banner-admin-field-v1.full{
    grid-column:auto;
  }

}