/* ==========================================================
   TECNOTEXTIL — FAVORITOS() EASTER EGG
   ========================================================== */


.cl42-stats-overlay {
  position:
    fixed;

  inset:
    0;

  z-index:
    500;

  display:
    grid;

  place-items:
    center;

  padding:
    18px;

  background:
    rgba(5, 28, 50, .76);

  backdrop-filter:
    blur(8px);

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


.cl42-stats-overlay[hidden] {
  display:
    none !important;
}


.cl42-stats-modal {
  width:
    min(
      720px,
      100%
    );

  max-height:
    min(
      92dvh,
      920px
    );

  overflow-y:
    auto;

  padding:
    27px;

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

  border-radius:
    20px;

  background:
    #fff;

  box-shadow:
    0 32px 95px
    rgba(0, 22, 43, .36);
}


.cl42-stats-header {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    18px;
}


.cl42-stats-header h2 {
  margin:
    8px 0 0;

  color:
    #083f70;

  font-size:
    22px;

  line-height:
    1.35;
}


.cl42-stats-close {
  display:
    grid;

  place-items:
    center;

  flex:
    0 0 auto;

  width:
    37px;

  height:
    37px;

  padding:
    0;

  border:
    0;

  border-radius:
    10px;

  background:
    #edf3f7;

  color:
    #516b80;

  font-size:
    25px;

  cursor:
    pointer;
}


.cl42-stats-close:hover {
  background:
    #e2ebf2;

  color:
    #083f70;
}


.cl42-stats-intro {
  margin:
    16px 0 18px;

  color:
    #667c8f;

  font-size:
    10px;

  line-height:
    1.7;
}


.cl42-stats-loading {
  padding:
    28px;

  border:
    1px solid #dce7ef;

  border-radius:
    13px;

  background:
    #f8fbfd;

  color:
    #60798d;

  font-size:
    10px;

  text-align:
    center;
}


.cl42-stats-summary {
  display:
    grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap:
    10px;

  margin-bottom:
    19px;
}


.cl42-stats-summary > div {
  padding:
    17px;

  border:
    1px solid #d9e6ef;

  border-radius:
    12px;

  background:
    #f8fbfe;
}


.cl42-stats-summary strong {
  display:
    block;

  color:
    #0063a5;

  font-size:
    24px;

  font-weight:
    800;

  line-height:
    1;
}


.cl42-stats-summary span {
  display:
    block;

  margin-top:
    6px;

  color:
    #6f8496;

  font-size:
    9px;

  font-weight:
    700;
}


.cl42-ranking-title {
  display:
    grid;

  gap:
    3px;

  margin-bottom:
    10px;
}


.cl42-ranking-title span {
  color:
    #8296a7;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    .13em;
}


.cl42-ranking-title strong {
  color:
    #083f70;

  font-size:
    14px;
}


.cl42-ranking-list {
  display:
    grid;

  gap:
    7px;
}


.cl42-ranking-row {
  display:
    grid;

  grid-template-columns:
    39px
    minmax(0, 1fr);

  align-items:
    center;

  gap:
    10px;

  padding:
    11px 12px;

  border:
    1px solid #dfE9f0;

  border-radius:
    10px;

  background:
    #fff;
}


.cl42-ranking-position {
  color:
    #527187;

  font-size:
    15px;

  font-weight:
    800;

  text-align:
    center;
}


.cl42-ranking-main {
  min-width:
    0;
}


.cl42-ranking-head {
  display:
    flex;

  align-items:
    flex-start;

  justify-content:
    space-between;

  gap:
    12px;
}


.cl42-ranking-head strong {
  min-width:
    0;

  color:
    #123f65;

  font-size:
    10px;

  line-height:
    1.45;

  overflow-wrap:
    anywhere;
}


.cl42-ranking-head span {
  flex:
    0 0 auto;

  color:
    #0063a5;

  font-size:
    8px;

  font-weight:
    800;
}


.cl42-ranking-main small {
  display:
    block;

  margin-top:
    3px;

  color:
    #8193a4;

  font-size:
    8px;

  line-height:
    1.5;
}


.cl42-ranking-track {
  height:
    4px;

  margin-top:
    8px;

  overflow:
    hidden;

  border-radius:
    999px;

  background:
    #e5edf3;
}


.cl42-ranking-track span {
  display:
    block;

  height:
    100%;

  border-radius:
    inherit;

  background:
    linear-gradient(
      90deg,
      #0063a5,
      #64b4df
    );
}


.cl42-stats-empty {
  padding:
    24px;

  border:
    1px dashed #c9dce9;

  border-radius:
    12px;

  color:
    #61798c;

  text-align:
    center;
}


.cl42-stats-empty strong {
  color:
    #083f70;

  font-size:
    11px;
}


.cl42-stats-empty p {
  margin:
    8px 0 0;

  font-size:
    9px;

  line-height:
    1.7;
}


.cl42-stats-footnote {
  margin:
    18px 0 0;

  padding-top:
    13px;

  border-top:
    1px solid #e1eaf1;

  color:
    #8a9aaa;

  font-size:
    8px;

  line-height:
    1.6;
}


@media (max-width: 650px) {

  .cl42-stats-overlay {
    padding:
      9px;
  }


  .cl42-stats-modal {
    max-height:
      96dvh;

    padding:
      18px;

    border-radius:
      15px;
  }


  .cl42-stats-summary {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr);
  }


  .cl42-ranking-head {
    display:
      grid;

    gap:
      3px;
  }


  .cl42-ranking-head span {
    justify-self:
      start;
  }

}


@media (max-width: 380px) {

  .cl42-stats-summary {
    grid-template-columns:
      minmax(0, 1fr);
  }

}


@media (prefers-reduced-motion: reduce) {

  .cl42-ranking-track span {
    transition:
      none !important;
  }

}