/* ==========================================================
   TECNOTEXTIL — CENTRAL DE LINKS
   favorites.css
   Favoritos e estrelas dos cards
   ========================================================== */


/* ==========================================================
   PAINEL FAMÍLIAS / FAVORITOS
   ========================================================== */

#app .cl33-family-bar.cl35-split {
  display: grid;

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

  align-items: stretch;

  gap: 0;

  padding: 0;

  overflow: hidden;
}


#app .cl35-family-half,
#app .cl35-favorites-half {
  min-width: 0;

  padding:
    clamp(
      16px,
      2vw,
      24px
    );
}


#app .cl35-family-half {
  border-right:
    1px solid #d9e6f0;
}


#app .cl35-favorites-half {
  background:
    radial-gradient(
      ellipse at 100% 0%,
      rgba(0, 99, 165, .055),
      transparent 65%
    ),
    rgba(248, 251, 254, .72);
}


/* ==========================================================
   CABEÇALHO FAVORITOS
   ========================================================== */

#app .cl35-favorites-heading {
  display: flex;

  align-items: center;

  justify-content:
    space-between;

  flex-wrap: wrap;

  gap: 8px;

  margin-bottom: 15px;
}


#app .cl35-favorites-title {
  display:
    inline-flex;

  align-items:
    center;

  gap: 9px;

  margin: 0;

  color:
    #083f70;

  font:
    800
    18px/1.4
    Montserrat,
    Arial,
    sans-serif;

  letter-spacing:
    -.025em;
}


#app .cl35-favorites-title
.material-symbols-rounded {
  color:
    #0063a5;

  font-size:
    20px;
}


#app .cl35-favorites-title svg {
  width: 20px;
  height: 20px;

  color:
    #0063a5;

  fill:
    rgba(0, 99, 165, .13);
}


#app .cl35-favorites-count {
  color:
    #8295a7;

  font:
    800
    10px
    Montserrat,
    Arial,
    sans-serif;

  letter-spacing:
    .05em;
}


/* ==========================================================
   LISTA DE FAVORITOS
   ========================================================== */

#app .cl35-favorites-list {
  display: flex;

  flex-wrap: wrap;

  align-content:
    flex-start;

  align-items:
    flex-start;

  gap: 9px;

  min-width: 0;

  max-height:
    173px;

  overflow-x:
    hidden;

  overflow-y:
    auto;

  scrollbar-width:
    thin;

  padding:
    1px 3px 4px 1px;
}


#app .cl35-favorite-item {
  display:
    inline-flex;

  align-items:
    stretch;

  min-width: 0;

  max-width: 100%;

  border:
    1px solid #c9dfef;

  border-radius:
    999px;

  background:
    #fff;

  color:
    #285477;

  box-shadow:
    0 3px 10px
    rgba(8, 52, 92, .035);

  overflow:
    hidden;

  transition:
    border-color 220ms ease,
    box-shadow 220ms ease,
    transform 220ms ease;
}


@media (hover: hover) and (pointer: fine) {

  #app .cl35-favorite-item:hover {
    transform:
      translateY(-2px);

    border-color:
      #0063a5;

    box-shadow:
      0 6px 15px
      rgba(0, 99, 165, .09);
  }

}


/* ==========================================================
   LINK FAVORITO
   ========================================================== */

#app .cl35-favorite-link {
  display:
    inline-flex;

  align-items:
    center;

  gap: 6px;

  min-width: 0;

  max-width:
    min(260px, 100%);

  padding:
    9px 8px 9px 12px;

  border:
    none;

  background:
    transparent;

  color:
    #285477;

  font:
    750
    10px/1.4
    Montserrat,
    Arial,
    sans-serif;

  text-decoration:
    none;

  cursor:
    pointer;
}


#app .cl35-favorite-link:focus-visible,
#app .cl35-favorite-remove:focus-visible,
#app .cl35-star:focus-visible {
  outline:
    2px solid #0063a5;

  outline-offset:
    2px;
}


#app .cl35-favorite-link svg {
  flex:
    0 0 12px;

  width: 12px;
  height: 12px;

  fill:
    #0063a5;

  color:
    #0063a5;
}


#app .cl35-favorite-name {
  min-width: 0;

  overflow:
    hidden;

  text-overflow:
    ellipsis;

  white-space:
    nowrap;
}


/* ==========================================================
   REMOVER FAVORITO
   ========================================================== */

#app .cl35-favorite-remove {
  display:
    inline-grid;

  place-items:
    center;

  flex:
    0 0 25px;

  width:
    25px;

  min-height:
    34px;

  padding:
    0 5px;

  border:
    0;

  border-left:
    1px solid #e1ecf4;

  background:
    transparent;

  color:
    #7f9aaa;

  font:
    800
    15px/1
    Arial,
    sans-serif;

  cursor:
    pointer;
}


#app .cl35-favorite-remove:hover {
  background:
    #eef5fb;

  color:
    #0063a5;
}


/* ==========================================================
   ESTADO VAZIO / NOTA
   ========================================================== */

#app .cl35-favorites-empty {
  margin: 0;

  padding:
    6px 0;

  color:
    #8094a7;

  font:
    500
    11px/1.8
    Montserrat,
    Arial,
    sans-serif;
}


#app .cl35-favorites-note {
  margin:
    10px 0 0;

  color:
    #8b9dac;

  font:
    500
    9px/1.6
    Montserrat,
    Arial,
    sans-serif;
}


/* ==========================================================
   ESTRELAS DOS CARDS
   ========================================================== */

#cards .resource-card.cl35-has-star {
  position:
    relative;
}


#cards
.resource-card.cl35-has-star
.card-labels {
  padding-right:
    35px;
}


#cards .cl35-star {
  position:
    absolute;

  top:
    12px;

  right:
    12px;

  z-index:
    5;

  display:
    grid;

  place-items:
    center;

  width:
    34px;

  height:
    34px;

  padding:
    6px;

  border:
    1px solid #d3e3ee;

  border-radius:
    10px;

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

  color:
    #8baac0;

  cursor:
    pointer;

  box-shadow:
    0 2px 8px
    rgba(8, 52, 92, .045);

  transition:
    color 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}


#cards .cl35-star svg {
  display:
    block;

  width:
    18px;

  height:
    18px;

  fill:
    none;

  stroke:
    currentColor;

  stroke-width:
    1.7;

  stroke-linecap:
    round;

  stroke-linejoin:
    round;
}


#cards
.cl35-star[aria-pressed="true"] {
  color:
    #0063a5;

  background:
    #eaf5fc;

  border-color:
    #a9cfe9;
}


#cards
.cl35-star[aria-pressed="true"]
svg {
  fill:
    rgba(0, 99, 165, .88);

  stroke:
    #0063a5;
}


@media (hover: hover) and (pointer: fine) {

  #cards .cl35-star:hover {
    color:
      #0063a5;

    transform:
      scale(1.08);

    border-color:
      #0063a5;
  }

}


#cards .cl35-star.cl35-pulse {
  animation:
    cl35StarPulse
    380ms
    cubic-bezier(.22, 1, .36, 1);
}


@keyframes cl35StarPulse {

  0% {
    transform:
      scale(.82);
  }

  55% {
    transform:
      scale(1.16);
  }

  100% {
    transform:
      scale(1);
  }

}


/* ==========================================================
   EDITOR — DUPLO CLIQUE / DUPLO TOQUE
   ========================================================== */

#cards .cl34-card-edit {
  cursor:
    default;
}


#cards .cl34-card-edit:focus-visible {
  outline:
    2px solid #0063a5;

  outline-offset:
    3px;
}


/* ==========================================================
   TELAS MENORES
   ========================================================== */

@media (max-width: 800px) {

  #app .cl33-family-bar.cl35-split {
    grid-template-columns:
      minmax(0, 1fr);
  }


  #app .cl35-family-half {
    border-right:
      0;

    border-bottom:
      1px solid #d9e6f0;
  }


  #app .cl35-favorites-list {
    max-height:
      140px;
  }

}


@media (max-width: 520px) {

  #app .cl35-family-half,
  #app .cl35-favorites-half {
    padding:
      15px;
  }


  #app .cl35-favorites-title {
    font-size:
      16px;
  }


  #cards .cl35-star {
    top:
      10px;

    right:
      10px;

    width:
      32px;

    height:
      32px;
  }

}


/* ==========================================================
   ACESSIBILIDADE
   ========================================================== */

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

  #app .cl35-favorite-item,
  #cards .cl35-star {
    animation:
      none !important;

    transition:
      none !important;
  }

}


/* ==========================================================
   IMPRESSÃO
   ========================================================== */

@media print {

  #app .cl35-star,
  #app .cl35-favorite-remove {
    display:
      none !important;
  }

}