/* ChatCitoSkin · Perfil Premium */

#cc-boton-perfil.cc-menu-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 39px !important;
  min-width: 39px !important;
  height: 37px !important;
  padding: 0 !important;
  gap: 0 !important;
  line-height: 1 !important;
  border-radius: 11px !important;
  border: 1px solid rgba(244,145,192,.24) !important;
  background: linear-gradient(145deg,#29374e,#172438) !important;
  color: #f7abc9 !important;
  transition: transform .15s, background .15s, border-color .15s;
}

#cc-boton-perfil svg {
  width: 21px;
  height: 21px;
  flex-shrink: 0;
}

#cc-boton-perfil:hover,
#cc-boton-perfil:focus-visible {
  background: #35465e !important;
  border-color: #f497c4 !important;
  transform: translateY(-1px);
}

#cc-perfil-dialog {
  box-sizing: border-box;
  width: min(465px, calc(100vw - 24px));
  max-height: calc(100dvh - 28px);
  color: #f5f7fc;
  background:
    radial-gradient(ellipse at 95% 0%,
      rgba(226,95,163,.13), transparent 43%),
    linear-gradient(155deg,#1d2c43,#101b2c);
  border: 1px solid rgba(170,187,216,.22);
  border-radius: 17px;
  box-shadow: 0 24px 80px #02050bba;
  overflow-x: hidden;
  overflow-y: auto;
  color-scheme: dark;
}

#cc-perfil-dialog::backdrop {
  background: rgba(3,8,19,.76);
  backdrop-filter: blur(5px);
}

#cc-perfil-dialog .cc-perfil-head {
  position: relative;
  padding: 20px 21px 17px;
  background: linear-gradient(
    115deg,rgba(43,62,88,.9),rgba(52,35,66,.65)
  );
  border-bottom: 1px solid rgba(255,255,255,.10);
}

#cc-perfil-dialog .cc-perfil-head::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 21px;
  width: 70px;
  height: 2px;
  background: linear-gradient(90deg,#f69ac6,#cfb477);
  border-radius: 3px;
}

#cc-perfil-dialog .cc-perfil-head strong {
  display: block;
  font-size: 20px;
  font-weight: 750;
  letter-spacing: -.5px;
  line-height: 1.35;
}

#cc-perfil-dialog .cc-perfil-kicker {
  display: block;
  margin-bottom: 4px;
  color: #e6ba87;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 1.5px;
}

#cc-perfil-dialog .cc-perfil-head small {
  margin-top: 4px;
  color: #aebfd5;
  font-size: 12px;
}

#cc-perfil-dialog .cc-perfil-head button {
  width: 31px;
  height: 31px;
  border-radius: 9px;
  background: rgba(255,255,255,.06);
  color: #dbe5f3;
}

#cc-perfil-dialog .cc-perfil-head button:hover {
  background: rgba(255,255,255,.14);
}

#cc-perfil-dialog .cc-perfil-content {
  padding: 18px 21px 20px;
}

#cc-perfil-dialog .cc-perfil-notice {
  padding: 11px 13px;
  border-radius: 10px;
  border: 1px solid rgba(215,169,105,.22);
  background: rgba(181,135,75,.09);
  color: #e2d0b1;
  line-height: 1.55;
}

#cc-perfil-dialog .cc-perfil-avatarrow {
  display: flex;
  gap: 16px;
  align-items: center;
  padding: 15px;
  margin: 15px 0 17px;
  background: linear-gradient(
    135deg,rgba(60,80,111,.35),rgba(24,35,55,.7)
  );
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 13px;
}

#cc-perfil-dialog .cc-perfil-avatarrow > div:last-child {
  min-width: 0;
  flex: 1;
}

#cc-perfil-dialog .cc-perfil-avatar {
  box-sizing: border-box;
  width: 72px;
  height: 72px;
  flex: 0 0 72px;
  border-radius: 50%;
  border: 2px solid #df91b6;
  box-shadow: 0 0 0 4px rgba(232,125,181,.09);
  background: #27394f;
  color: #e2bfd4;
}

#cc-perfil-dialog .cc-perfil-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

#cc-perfil-dialog .cc-perfil-content label {
  margin: 13px 0 6px;
  color: #e6edf8;
  font-size: 12px;
  font-weight: 650;
}

#cc-perfil-dialog input:not([type=file]),
#cc-perfil-dialog textarea {
  box-sizing: border-box;
  width: 100%;
  padding: 11px 12px;
  border: 1px solid #40536c;
  border-radius: 9px;
  background: rgba(9,18,34,.72);
  color: #f5f7fb;
  font-size: 13px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}

#cc-perfil-dialog input:focus-visible,
#cc-perfil-dialog textarea:focus-visible {
  border-color: #eb91bc;
  box-shadow: 0 0 0 3px rgba(235,145,188,.12);
}

#cc-perfil-dialog input::placeholder,
#cc-perfil-dialog textarea::placeholder {
  color: #8d9fb7;
}

#cc-perfil-dialog input[type=file] {
  max-width: 100%;
  color: #c6d2e4;
  font-size: 11px;
}

#cc-perfil-dialog input[type=file]::file-selector-button {
  padding: 7px 10px;
  margin-right: 8px;
  border: 1px solid #63728d;
  border-radius: 7px;
  background: #34465f;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

#cc-perfil-dialog .cc-perfil-previewbtn {
  background: linear-gradient(120deg,#364963,#2a3852);
  border: 1px solid #657693;
  border-radius: 9px;
  font-weight: 650;
}

#cc-perfil-dialog .cc-perfil-preview {
  background: rgba(9,18,34,.72);
  border: 1px solid rgba(255,255,255,.10);
  border-radius: 10px;
  color: #dee7f4;
}

#cc-perfil-dialog .cc-perfil-actions {
  padding-top: 14px;
  margin-top: 17px;
  border-top: 1px solid rgba(255,255,255,.10);
}

#cc-perfil-dialog .cc-perfil-actions button {
  border-radius: 9px;
}

#cc-perfil-dialog .cc-perfil-actions button:disabled {
  background: #384254;
  opacity: .58;
  cursor: not-allowed;
}

@media(max-width:480px) {
  #cc-perfil-dialog {
    width: calc(100vw - 14px);
    max-height: calc(100dvh - 14px);
    border-radius: 13px;
  }
  #cc-perfil-dialog .cc-perfil-head {
    padding: 15px 15px 13px;
  }
  #cc-perfil-dialog .cc-perfil-content {
    padding: 13px 15px 16px;
  }
  #cc-perfil-dialog .cc-perfil-avatarrow {
    gap: 11px;
    padding: 12px;
  }
  #cc-perfil-dialog .cc-perfil-avatar {
    width: 60px;
    height: 60px;
    flex-basis: 60px;
  }
}


/* CHATCITO PERFIL COLOR V2 */

#cc-perfil-dialog {
  background: #090d19;
  border: 2px solid #f29bcc;
  box-shadow:
    0 0 0 1px rgba(53,134,255,.3),
    0 25px 80px rgba(0,0,0,.7);
}

#cc-perfil-dialog .cc-perfil-head {
  background:
    linear-gradient(115deg,
      rgba(26,44,91,.95),
      rgba(59,24,69,.94));
  border-bottom: 3px solid #f39dcc;
}

#cc-perfil-dialog .cc-perfil-head strong {
  color: #8cfa48;
  font-size: 22px;
  text-shadow: 0 1px 10px rgba(91,255,67,.15);
}

#cc-perfil-dialog .cc-perfil-kicker {
  color: #ffa3d3;
}

#cc-perfil-dialog .cc-perfil-head small {
  color: #c8dcff;
}

#cc-perfil-dialog .cc-perfil-notice {
  color: #d8ebff;
  background: #183665;
  border: 1px solid #348aff;
  border-left: 4px solid #83f24c;
}

#cc-perfil-dialog .cc-perfil-avatarrow {
  background: linear-gradient(
    125deg, #1f5395, #492e76 65%, #8b4678
  );
  border: 1px solid #f29bca;
  border-radius: 14px;
}

#cc-perfil-dialog .cc-perfil-avatar {
  background: #141e36;
  border: 3px solid #f8a2d2;
  box-shadow: 0 0 0 4px rgba(108,245,77,.25);
}

#cc-perfil-dialog .cc-perfil-avatarrow label {
  color: #a0ff65;
  background: transparent;
  font-size: 14px;
}

#cc-perfil-dialog .cc-perfil-avatarrow small {
  color: #e3eaff;
}

#cc-perfil-dialog .cc-perfil-content > label {
  display: block;
  margin: 13px 0 0;
  padding: 9px 12px 7px;
  background: #ef9dcc;
  color: #0050a9;
  border-radius: 12px 12px 0 0;
  font-size: 13px;
  font-weight: 800;
}

#cc-perfil-dialog .cc-perfil-content > label + input,
#cc-perfil-dialog .cc-perfil-content > label + textarea {
  display: block;
  margin: 0;
  width: 100%;
  box-sizing: border-box;
  padding: 11px 13px;
  background: #080c16;
  color: #9cfa65;
  border: 3px solid #ef9dcc;
  border-top: 0;
  border-radius: 0 0 12px 12px;
  font-size: 14px;
  box-shadow: none;
}

#cc-perfil-dialog .cc-perfil-content > label + input:focus,
#cc-perfil-dialog .cc-perfil-content > label + textarea:focus {
  border-color: #4995ff;
  outline: 2px solid rgba(127,247,70,.65);
  outline-offset: 1px;
}

#cc-perfil-dialog .cc-perfil-previewbtn {
  min-height: 43px;
  border: 1px solid white;
  border-radius: 12px;
  color: white;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(
    105deg,
    #2476ff 0%,
    #9e39f2 32%,
    #ff5baf 65%,
    #6bdc36 100%
  );
  text-shadow: 0 1px 3px #20304c;
  box-shadow: 0 5px 17px rgba(169,71,191,.25);
}

#cc-perfil-dialog .cc-perfil-preview {
  background: #14294c;
  border: 1px solid #3b92ff;
  border-left: 4px solid #82ee48;
  color: #f4f7ff;
}

#cc-perfil-dialog .cc-perfil-actions {
  border-top: 1px solid rgba(239,157,204,.35);
}

#cc-perfil-dialog .cc-perfil-actions button:not(:disabled) {
  background: #173e79;
  border: 1px solid #4695ff;
  color: white;
}

#cc-perfil-dialog .cc-perfil-actions button:disabled {
  background: #303b50;
  color: #c1cad9;
  border: 1px solid #536077;
}

#cc-boton-perfil.cc-menu-button {
  background: linear-gradient(
    135deg, #f29bca, #528fff
  ) !important;
  border: 1px solid #93fa5c !important;
  color: #10213e !important;
}

#cc-boton-perfil:hover,
#cc-boton-perfil:focus-visible {
  background: linear-gradient(
    135deg, #ffb2df, #8bf15b
  ) !important;
}

@media (max-width:480px) {
  #cc-perfil-dialog .cc-perfil-head strong {
    font-size: 19px;
  }

  #cc-perfil-dialog .cc-perfil-content > label {
    margin-top: 10px;
    padding: 8px 10px 6px;
  }
}


/* CC PERFIL ICONO CIRCULAR V3 */

#cc-boton-perfil.cc-menu-button {
  width: 40px !important;
  min-width: 40px !important;
  height: 40px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  box-shadow: none !important;
  color: #ffa2d5 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#cc-boton-perfil.cc-menu-button svg {
  display: block !important;
  width: 30px !important;
  height: 30px !important;
  stroke: currentColor !important;
}

#cc-boton-perfil.cc-menu-button:hover,
#cc-boton-perfil.cc-menu-button:focus-visible {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #89f65a !important;
}

#cc-boton-perfil.cc-menu-button:active {
  transform: scale(.94);
}