/* =========================================================================
   Menú principal (panel lateral): íconos en las opciones principales y la
   flecha de los submenús más visible (Miguel, 11 oct 2026).

   El ícono va a la IZQUIERDA de cada opción de primer nivel. Se elige por la
   dirección del enlace (igual en local y en producción; los ids del menú no).
   Una opción nueva sin ícono propio sale con la huella.
   La flecha del tema era un glifo gris de 13 px: ahora es un círculo turquesa.
   ========================================================================= */

#mobile-nav > li > a {
	display: flex;
	align-items: center;
	min-height: 48px;
	padding-top: 8px;
	padding-bottom: 8px;
	padding-left: 54px;
	color: #1e2e33;
}

/* Ícono: ficha turquesa suave con el dibujo del sitio. */
#mobile-nav > li > a::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 8px;
	width: 34px;
	height: 34px;
	border-radius: 10px;
	background-color: #e8f4f6;
	background-position: center;
	background-repeat: no-repeat;
	background-size: 19px 19px;
	transform: translateY(-50%);
	/* Huella (por defecto) */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5d64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='4' r='2'/%3E%3Ccircle cx='18' cy='8' r='2'/%3E%3Ccircle cx='20' cy='16' r='2'/%3E%3Cpath d='M9 10a5 5 0 0 1 5 5v3.5a3.5 3.5 0 0 1-6.84 1.045Q6.52 17.48 4.46 16.84A3.5 3.5 0 0 1 5.5 10Z'/%3E%3C/svg%3E");
}

/* Tienda: bolsa */
#mobile-nav > li > a[href*="/home-tienda/"]::after,
#mobile-nav > li > a[href*="/tienda/"]::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5d64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/%3E%3Cpath d='M3 6h18'/%3E%3Cpath d='M16 10a4 4 0 0 1-8 0'/%3E%3C/svg%3E");
}

/* Servicios: calendario con visto bueno (reservas) */
#mobile-nav > li > a[href*="servicios"]::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5d64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cpath d='M16 2v4M8 2v4M3 10h18'/%3E%3Cpath d='m9 16 2 2 4-4'/%3E%3C/svg%3E");
}

/* Directorio: pin de ubicación */
#mobile-nav > li > a[href*="/directorio/"]::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5d64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 10c0 6-8 12-8 12s-8-6-8-12a8 8 0 0 1 16 0Z'/%3E%3Ccircle cx='12' cy='10' r='3'/%3E%3C/svg%3E");
}

/* Mascotas perdidas: lupa */
#mobile-nav > li > a[href*="/mascotas-perdidas/"]::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5d64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E");
}

/* Adopción: corazón */
#mobile-nav > li > a[href*="/adopcion/"]::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5d64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 14c1.49-1.46 3-3.21 3-5.5A5.5 5.5 0 0 0 16.5 3c-1.76 0-3 .5-4.5 2-1.5-1.5-2.74-2-4.5-2A5.5 5.5 0 0 0 2 8.5c0 2.3 1.5 4.05 3 5.5l7 7Z'/%3E%3C/svg%3E");
}

/* La Escuela del Parche: birrete */
#mobile-nav > li > a[href*="/escuela-del-parche/"]::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5d64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 10 12 5 2 10l10 5 10-5Z'/%3E%3Cpath d='M6 12v5c3 3 9 3 12 0v-5'/%3E%3C/svg%3E");
}

/* Publicar mi negocio o servicio: local */
#mobile-nav > li > a[href*="/planes-y-suscripciones/"]::after,
#mobile-nav > li > a[href*="publicar"]::after {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231e5d64' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9 4.5 4h15L21 9'/%3E%3Cpath d='M3 9a3 3 0 0 0 6 0 3 3 0 0 0 6 0 3 3 0 0 0 6 0'/%3E%3Cpath d='M5 12v8h14v-8'/%3E%3Cpath d='M10 20v-5h4v5'/%3E%3C/svg%3E");
}

/* Flecha de los submenús: círculo turquesa con el chevrón, bien visible. */
.mobile-navigation-list .menu-item-has-children > a::before {
	content: "";
	top: 50%;
	right: 6px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Ccircle cx='15' cy='15' r='15' fill='%23e8f4f6'/%3E%3Cpath d='m13 10 5 5-5 5' fill='none' stroke='%231e5d64' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 30px 30px no-repeat;
	transform: translateY(-50%);
	transition: transform .15s, filter .15s;
}

.mobile-navigation-list .menu-item-has-children > a {
	padding-right: 46px;
}

.mobile-navigation-list .menu-item-has-children > a:hover::before,
.mobile-navigation-list .menu-item-has-children > a:focus::before {
	filter: brightness(.94);
	transform: translateY(-50%) translateX(2px);
}

#mobile-nav > li > a:hover,
#mobile-nav > li > a:focus {
	color: #1e5d64;
}

/* =========================================================================
   Paneles laterales completos en iPhone y en la app (12 oct 2026).
   Usaban height: 100vh, que en iPhone incluye lo que tapa la barra del
   navegador (y en la app, la barra inferior): la última opción («Cerrar
   sesión» en Mi Cuenta) quedaba escondida. Ahora: alto de la pantalla
   visible (100dvh) y espacio abajo para la barra de la app y el borde.
   ========================================================================= */

/* Mi Cuenta */
#header .user-menu ul {
	height: 100vh !important;
	height: 100dvh !important;
	padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
	overscroll-behavior: contain;
}

html.pp-en-app #header .user-menu ul {
	bottom: var(--pp-barra-h, 0px) !important;
	height: auto !important;
}

/* Panel derecho (Enviar mensaje, horarios, carrito) */
.ppv2-rdrawer {
	height: 100vh !important;
	height: 100dvh !important;
	padding-bottom: env(safe-area-inset-bottom) !important;
}

html.pp-en-app .ppv2-rdrawer {
	bottom: var(--pp-barra-h, 0px) !important;
	height: auto !important;
}

/* Menú principal */
.mobile-navigation-wrapper {
	height: 100vh;
	height: 100dvh;
	padding-bottom: calc(24px + env(safe-area-inset-bottom));
	overflow-y: auto;
	overscroll-behavior: contain;
}

html.pp-en-app .mobile-navigation-wrapper {
	bottom: var(--pp-barra-h, 0px);
	height: auto;
}

/* Menú de la Escuela y del Panel de Control (cajones de la izquierda) */
.pp-esc-app__menu,
html.pp-panel-movil .dashboard-nav {
	padding-bottom: calc(24px + env(safe-area-inset-bottom)) !important;
	overscroll-behavior: contain;
}