/* ============================================================
   MexiCasas — avatar.css
   Componente del uploader de foto/logo del publicador
   (.mxc-avatar-uploader*). Compartido por las superficies que lo
   rinden: /publicar/ y /mi-cuenta/. Se encola junto a assets/avatar.js.
   Consume SOLO variables de tokens.css (el preview reutiliza .mxc-avatar).
   Antes vivía en publicar.css; se extrajo para no duplicarlo.
   ============================================================ */

.mxc-avatar-uploader__titulo {
	display: block;
	margin-bottom: 10px;
	font-family: var(--mxc-font-text);
	font-weight: 600;
	font-size: var(--mxc-text-sm);
	color: var(--mxc-ink);
}

.mxc-avatar-uploader__fila {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
}

/* El preview reutiliza .mxc-avatar (tokens.css): círculo persona / tile empresa,
   la misma imagen procesada rellena la forma. Tamaño por custom property inline. */
.mxc-avatar-uploader .mxc-avatar { --mxc-av: 88px; }

/* .mxc-avatar__img fija display:block (tokens.css) y eso gana al UA [hidden];
   en el preview alternamos img/iniciales con el atributo hidden, así que hay que
   restaurar el ocultamiento explícitamente. */
.mxc-avatar-uploader .mxc-avatar__img[hidden] { display: none; }

.mxc-avatar-uploader__acciones {
	display: flex;
	align-items: center;
	gap: 10px 14px;
	flex-wrap: wrap;
}

.mxc-avatar-uploader__subir[aria-disabled="true"] {
	opacity: 0.6;
	pointer-events: none;
}

.mxc-avatar-uploader__quitar {
	appearance: none;
	background: none;
	border: 0;
	padding: 6px 4px;
	font-family: var(--mxc-font-text);
	font-size: var(--mxc-text-sm);
	font-weight: 600;
	color: var(--mxc-ink-2);
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}
.mxc-avatar-uploader__quitar:hover { color: var(--mxc-ink); }
.mxc-avatar-uploader__quitar:focus-visible {
	outline: 2px solid var(--mxc-indigo);
	outline-offset: 2px;
	border-radius: var(--mxc-radius-sm);
}
.mxc-avatar-uploader__quitar svg { width: 15px; height: 15px; flex: none; }
.mxc-avatar-uploader__quitar[disabled] { opacity: 0.5; cursor: default; }

.mxc-avatar-uploader__estado {
	flex-basis: 100%;
	margin: 2px 0 0;
	font-size: var(--mxc-text-xs);
	color: var(--mxc-ink-3);
}
/* La región aria-live vive SIEMPRE en el DOM (para que los lectores anuncien);
   vacía no debe reservar espacio ni margen. */
.mxc-avatar-uploader__estado:empty { margin: 0; }
.mxc-avatar-uploader__estado.is-error {
	color: var(--mxc-ink);
	font-weight: 600;
}

/* Foco del input file oculto (.mxc-sr-solo) reflejado en el botón-label. */
.mxc-avatar-uploader:has(#mxc-avatar-input:focus-visible) .mxc-avatar-uploader__subir {
	outline: 2px solid var(--mxc-indigo);
	outline-offset: 2px;
}