/* ===================================================================
   Woo POS — Saludo dinámico (avatar de header)
   Mismos tokens visuales que el plugin Woo POS (tema "Tablet") para
   mantener consistencia de marca en toda la tienda.
   Pensado para vivir dentro de un header: ocupa solo el tamaño de un
   avatar y despliega el detalle en un panel flotante al hacer clic.
   =================================================================== */

.wpg-wrap {
	--wpg-ink:        #1c1c1e;
	--wpg-ink-soft:   #6b7280;
	--wpg-primary:    #111213;
	--wpg-primary-2:  #2b2b2e;
	--wpg-bg:         #f5f6f8;
	--wpg-surface:    #ffffff;
	--wpg-border:     #e6e8ec;
	--wpg-good-bg:    #eef8f0;
	--wpg-good:       #1f8a45;
	--wpg-warn-bg:    #fbf1de;
	--wpg-warn:       #9a6400;
	--wpg-radius:     14px;
	--wpg-radius-sm:  10px;
	--wpg-shadow:     0 1px 2px rgba(20,20,25,.04), 0 8px 24px rgba(20,20,25,.05);

	position: relative;
	display: inline-block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	line-height: 1.35;
}

.wpg-wrap * { box-sizing: border-box; }

/* El propio <details> no debe agregar ningún borde/lista por defecto. */
.wpg-wrap { list-style: none; }

/* ---------- Disparador: solo el avatar, sin texto, mínimo espacio ---------- */

.wpg-trigger {
	display: inline-flex;
	cursor: pointer;
	list-style: none;
	border-radius: 50%;
	outline-offset: 2px;
}

.wpg-trigger::-webkit-details-marker { display: none; }
.wpg-trigger::marker { content: ""; }

.wpg-avatar {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wpg-primary);
	border: 2px solid var(--wpg-surface);
	box-shadow: 0 0 0 1.5px var(--wpg-good);
	flex-shrink: 0;
}

.wpg-avatar-guest {
	box-shadow: 0 0 0 1.5px var(--wpg-warn);
}

.wpg-avatar img,
.wpg-avatar .wpg-avatar-img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.wpg-avatar-fallback {
	color: #fff;
	font-weight: 800;
	font-size: 14px;
}

.wpg-avatar-lg {
	width: 46px;
	height: 46px;
}
.wpg-avatar-lg .wpg-avatar-fallback { font-size: 17px; }

/* ---------- Panel desplegable ---------- */

.wpg-panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 99999;
	width: max-content;
	min-width: 240px;
	max-width: min(300px, 92vw);
	background: var(--wpg-surface);
	border: 1px solid var(--wpg-border);
	border-radius: var(--wpg-radius);
	box-shadow: 0 14px 36px rgba(0,0,0,.18);
	padding: 14px;
	color: var(--wpg-ink);
}

.wpg-panel-identity {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-bottom: 12px;
}

.wpg-text {
	min-width: 0;
}

.wpg-greeting {
	margin: 0 0 4px;
	font-size: 13.5px;
	color: var(--wpg-ink);
	overflow-wrap: break-word;
}

.wpg-greeting strong {
	font-weight: 800;
}

.wpg-role {
	margin: 0;
}

.wpg-role-pill {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 10.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .3px;
	background: var(--wpg-bg);
	color: var(--wpg-ink-soft);
}

.wpg-role-pill-active {
	background: var(--wpg-good-bg);
	color: var(--wpg-good);
}

.wpg-role-pill-guest {
	background: var(--wpg-warn-bg);
	color: var(--wpg-warn);
}

/* ---------- Botón de acción ---------- */

.wpg-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 9px 14px;
	font-size: 13px;
	font-weight: 700;
	text-decoration: none;
	border-radius: var(--wpg-radius-sm);
	border: 1px solid var(--wpg-primary);
	background: var(--wpg-surface);
	color: var(--wpg-ink);
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}

.wpg-btn:active { transform: translateY(1px); }

.wpg-btn-primary {
	background: var(--wpg-primary);
	border-color: var(--wpg-primary);
	color: #fff;
}
.wpg-btn-primary:hover,
.wpg-btn-primary:focus {
	background: var(--wpg-primary-2);
	border-color: var(--wpg-primary-2);
	color: #fff;
}

.wpg-btn-ghost {
	background: transparent;
	border-color: var(--wpg-border);
	color: var(--wpg-ink);
}
.wpg-btn-ghost:hover,
.wpg-btn-ghost:focus {
	background: var(--wpg-bg);
	color: var(--wpg-ink);
}

/* ---------- Responsivo ---------- */

/* Posición por defecto (sin JavaScript): debajo del avatar, alineado a
   la derecha. Con JavaScript activo, greeting.js recalcula esta misma
   posición usando "position: fixed" para que el panel quede siempre
   justo debajo del avatar y nunca se salga de la pantalla, sin importar
   en qué lugar del header (izquierda, derecha, móvil o escritorio) esté
   colocado el shortcode. */
@media (max-width: 420px) {
	.wpg-panel {
		max-width: min(300px, calc(100vw - 24px));
	}
}