/*
 * ARCHIVO: assets/css/wha.css  —  Estilos del reproductor "Escuchar esta noticia".
 * ------------------------------------------------------------------
 * Da aspecto al botón de reproducir y a los controles (pausa, parar, velocidad).
 */

.wha-player {
	--wha-button: #0f766e;
	--wha-button-hover: #115e59;
	--wha-button-text: #fff;
	--wha-panel: #f7f7f6;
	--wha-border: #cfd4d9;
	--wha-text: #24313a;
	position: relative;
	margin: 24px 0;
	padding: 16px;
	border: 1px solid var(--wha-border);
	border-radius: 14px;
	background: var(--wha-panel);
	box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
	color: var(--wha-text);
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Botón principal (reproducir) */
.wha-btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 9px 16px;
	border: 0;
	border-radius: 6px;
	min-height: 44px;
	background: var(--wha-button);
	color: var(--wha-button-text);
	font-size: 0.95rem;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 4px 12px color-mix(in srgb, var(--wha-button) 24%, transparent);
	transition: transform .15s ease, background .15s ease, box-shadow .15s ease;
}
.wha-btn:hover { background: var(--wha-button-hover); transform: translateY(-1px); }
.wha-btn:focus-visible, .wha-ctl:focus-visible, .wha-speed__sel:focus-visible { outline: 3px solid color-mix(in srgb, var(--wha-button) 45%, #fff); outline-offset: 3px; }
.wha-btn__icon, .wha-btn__icon svg { width: 18px; height: 18px; fill: currentColor; }

/* Controles (pausa / parar / velocidad) */
.wha-controls {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px 14px;
	margin-top: 12px;
}
.wha-ctl {
	width: 38px;
	height: 38px;
	border: 1px solid var(--wha-border);
	border-radius: 50%;
	background: #fff;
	color: var(--wha-button);
	font-size: 1rem;
	cursor: pointer;
	line-height: 1;
}
.wha-ctl:hover { border-color: var(--wha-button); background: color-mix(in srgb, var(--wha-button) 8%, #fff); }
.wha-ctl svg { width: 17px; height: 17px; fill: currentColor; pointer-events: none; }

.wha-speed { font-size: 0.85rem; color: var(--wha-text); display: inline-flex; align-items: center; gap: 6px; }
.wha-speed__sel { min-height: 36px; padding: 4px 8px; border: 1px solid var(--wha-border); border-radius: 7px; font: inherit; }

.wha-status { font-size: 0.85rem; color: var(--wha-text); }

/* Las variantes flotantes se mantienen visibles sin tapar el ancho completo. */
.wha-player--floating_left,
.wha-player--floating_right { position: fixed; z-index: 9998; bottom: 24px; width: min(360px, calc(100vw - 32px)); margin: 0; }
.wha-player--floating_left { left: 16px; }
.wha-player--floating_right { right: 16px; }

/* Modo oscuro */
@media (prefers-color-scheme: dark) {
	.wha-player:not([style]) { --wha-panel:#1b1f24; --wha-border:#46515c; --wha-text:#e6e8ea; }
	.wha-ctl { background: color-mix(in srgb, var(--wha-panel) 88%, #fff); }
}

/* Responsive */
@media (max-width: 480px) {
	.wha-player { padding: 13px; border-radius: 11px; }
	.wha-btn { width: 100%; justify-content: center; }
	.wha-player--floating_left, .wha-player--floating_right { right: 12px; bottom: 12px; left: 12px; width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	.wha-btn { transition: none; }
}