/**
 * Barra inferior de navegación en móvil.
 *
 * Solo existe por debajo de 768px: en escritorio el menú principal ya
 * está siempre visible y una barra fija robaría altura útil.
 */

/* Oculta por defecto: se declara aquí para que ningún viewport la vea
   antes de que se aplique la media query. */
.lz-barra { display: none; }

@media (max-width: 767px) {

	.lz-barra {
		position: fixed;
		inset-inline: 0;
		bottom: 0;
		/* Por debajo de la cabecera y de las capas superiores: es
		   navegación permanente, no una superposición. */
		z-index: var(--lz-z-dropdown);
		display: flex;
		align-items: stretch;
		background: var(--lz-surface);
		border-top: 1px solid var(--lz-line);
		/* En iPhone la franja del gesto de inicio se come la última
		   franja de pantalla. */
		padding-bottom: env(safe-area-inset-bottom, 0);
		box-shadow: 0 -2px 12px rgba(15, 42, 74, .10);
	}

	/* ---- Modo navegación ---- */

	.lz-barra--nav .lz-barra__item {
		flex: 1 1 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 3px;
		/* Altura de objetivo táctil cómoda. */
		min-height: 58px;
		padding: var(--lz-space-2) 4px;
		font-family: var(--lz-font-display);
		font-size: var(--lz-text-xs);
		color: var(--lz-muted);
		text-decoration: none;
		text-align: center;
	}

	.lz-barra__item .lz-icon {
		color: var(--lz-muted);
		transition: color var(--lz-duration) var(--lz-ease);
	}

	/* La sección en la que está el usuario se marca con el navy de
	   marca; el dorado se reserva para las acciones de afiliado. */
	.lz-barra__item.is-activa,
	.lz-barra__item.is-activa .lz-icon {
		color: var(--lz-heading);
	}

	.lz-barra__item.is-activa {
		font-weight: 600;
		box-shadow: inset 0 2px 0 var(--lz-accent);
	}

	.lz-barra__item:active { background: var(--lz-surface-sunken); }

	.lz-barra__item:focus-visible {
		outline: 2px solid var(--lz-accent);
		outline-offset: -2px;
	}

	/* ---- Modo llamada a la acción (fichas) ---- */

	.lz-barra--cta {
		align-items: center;
		gap: var(--lz-space-3);
		/* Contexto para el enlace de cobertura. */
		position: fixed;
		padding: var(--lz-space-3) var(--lz-gutter);
		padding-bottom: calc(var(--lz-space-3) + env(safe-area-inset-bottom, 0px));
	}

	.lz-barra__info {
		display: flex;
		flex-direction: column;
		min-width: 0;
		flex: 1 1 auto;
	}

	.lz-barra__nombre {
		font-family: var(--lz-font-display);
		font-size: var(--lz-text-sm);
		color: var(--lz-heading);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.lz-barra__detalle {
		font-size: var(--lz-text-xs);
		color: var(--lz-muted);
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.lz-barra__accion {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		gap: 6px;
		min-height: 44px;
		white-space: nowrap;
	}

	/* ---- Espacio reservado ----
	   Sin esto la barra tapa el final del footer y el usuario no puede
	   llegar a los enlaces legales. */
	body.lz-tiene-barra {
		padding-bottom: calc(58px + env(safe-area-inset-bottom, 0px));
	}

	body.lz-barra-cta {
		padding-bottom: calc(70px + env(safe-area-inset-bottom, 0px));
	}

	/* El botón de volver arriba sube por encima de la barra en lugar de
	   quedar oculto tras ella. */
	body.lz-tiene-barra .lz-to-top {
		bottom: calc(58px + var(--lz-gutter) + env(safe-area-inset-bottom, 0px));
	}

	body.lz-barra-cta .lz-to-top {
		bottom: calc(70px + var(--lz-gutter) + env(safe-area-inset-bottom, 0px));
	}
}

/* Con el menú móvil abierto la barra estorba: el panel ocupa toda la
   pantalla y la navegación ya está dentro. */
@media (max-width: 767px) {
	.lz-mobile-panel[data-open="true"] ~ .lz-barra,
	body:has(.lz-mobile-panel[data-open="true"]) .lz-barra {
		display: none;
	}
}