.canario-bio-disabled {
 opacity: 0.4;
 filter: grayscale(60%);
}

.canario-bio-disabled p {
 color: #aaa;
 font-style: italic;
}

.canario-bio-disabled:hover {
 opacity: 1;
 font-weight: 900;
}


/*  BUTTON UPLOAD IMAGE AVATAR */

/* mantém sua área */
.container-canario-foto {
 height: 250px;
 display: flex;
 align-items: center;
 justify-content: center;
}

/* NÃO altero suas regras existentes de .canario-foto.
   Só garanto que seja contexto pro botão (+) via wrapper interno. */
.avatar-wrap {
 position: relative;
 width: 250px;
 height: 250px;
 margin: 0 auto;
            /* centraliza */;
}

/* círculo perfeito SEM esticar (seu img já tem object-fit: cover lá em cima;
   reforço aqui pra não depender de outra regra) */
.avatar-img {
 width: 100%;
 height: 100%;
 display: block;
 object-fit: cover;
 border-radius: 50% !important;
}

/* botão “+” no canto inferior direito do avatar */
.avatar-plus {
 position: absolute;
 right: 28px;
 bottom: -12px;
 width: 50px;
 height: 50px;
 border: 0;
 border-radius: 50%;
 background: #111;
 color: #fff;
 display: grid;
 place-items: center;
 box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
 cursor: pointer;
}

.avatar-plus::after {
 content: "";
 position: absolute;
 inset: -2px;
 border: 4px solid #fff;
 border-radius: 50%;
 pointer-events: none;
}


/* UPLOAD AVATAR DROPDOWN */
.avatar-wrap {
 position: relative;
 width: 250px;
 height: 250px;
 margin: 0 auto;
 position: relative;
 transform: translateY(-50px );
 z-index: 1000;
 isolation: isolate;
}

.avatar-img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 border-radius: 50%;
 display: block;
}

/* botão + */
.avatar-plus {
 position: absolute;
 right: 26px;
 bottom: 8px;
 width: 40px;
 height: 40px;
 border-radius: 50%;
 display: grid;
 place-items: center;
 background: #111;
 color: #fff;
 border: none;
 padding: 0;
 box-shadow: 0 2px 6px rgba(0,0,0,.3);
 cursor: pointer;
}

.avatar-plus::-webkit-details-marker {
 display: none;
}

.avatar-plus::after {
 content: "";
 position: absolute;
 inset: -2px;
 border: 2px solid #fff;
 border-radius: 50%;
 pointer-events: none;
}

.avatar-dd {
 position: absolute;
 right: 8px;
 bottom: 8px;
 z-index: 20;
}

/* menu */
.avatar-menu {
 position: absolute;
 right: 9px;
 bottom: -105px;
 min-width: 180px;
 background: #fff;
 color: #111;
 border-radius: 10px;
 box-shadow: 0 10px 30px rgba(0,0,0,.15);
 padding: 6px;
 display: none;
 z-index: 2000;
}

/* abre quando <details open> */
/* abre quando .open */
.avatar-wrap.open .avatar-menu {
 display: block;
}


/* itens do menu */
.avatar-item {
 display: flex;
 align-items: center;
 gap: 8px;
 width: 100%;
 padding: 10px 12px;
 background: transparent;
 border: 0;
 text-align: left;
 border-radius: 8px;
 cursor: pointer;
 font: inherit;
 color: inherit;
}

.avatar-item:hover {
 background: #f1f5f9;
}

.avatar-divider {
 height: 1px;
 background: #e5e7eb;
 margin: 4px 6px;
}

/* util */
.visually-hidden {
 position: absolute !important;
 width: 1px;
 height: 1px;
 padding: 0;
 margin: -1px;
 overflow: hidden;
 clip: rect(0,0,0,0);
 white-space: nowrap;
 border: 0;
}

.text-danger {
 color: #d63939;
}