.footer-left { display:flex; align-items:center; gap:10px }
.footer-right { display:flex; align-items:center; gap:10px }

/* Brand label shown in footer left */
.footer-brand {
	font-weight: 200;
	color: var(--text-tertiary);
	font-size: 13px;
	white-space: nowrap;
    padding-left: 15px; 
}

@media (max-width: 480px) {
	.footer-brand { font-size: 12px; }
}

/* Ensure footer content is vertically centered */
footer { height: 44px; display: flex; align-items: center; justify-content: space-between; padding: 0px; background: var(--footer-bg); border-top: 1px solid var(--border-secondary); color: var(--text-muted); box-sizing: border-box; font-size: 13px; }
.footer-left { display:flex; align-items:center; gap:10px }
.footer-right { display:flex; align-items:center; gap:10px }

/* WS status tweaks: remove dark-theme background, set fixed width and reduce latency font-size */
html[data-theme='dark'] #ws-status {
	background: transparent; /* remove background */
	color: var(--text-accent);
}

.fuso-horario {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 768px) {
    .fuso-horario {
        display: none;
    }
}


/* ensure the ws-status container (or its child) uses a fixed width so layout doesn't jump */
#ws-status {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 56px; /* fixed width to accommodate icon + ms text */
	height: 100%;
	text-align: center;
}

/* smaller font for the latency value to make it visually subordinate to the icon */
#ws-status #ws-latency {
	font-size: 10px; /* slightly smaller than previous 11px */
	color: var(--text-tertiary);
	margin-top: 2px;
	white-space: nowrap;
	line-height: 1;
}