/* area_cliente.css - zona privada de socios (11/11/2026). Lo usan clientes_acceso.asp y clientes_rutas.asp. */

/* Hueco entre la foto de cabecera y los botones. Antes era de 5rem (80 px) arriba y abajo, escrito en
   cada pagina; en el movil dejaba media pantalla en blanco antes de los iconos. */
.zona-privada { padding: 2.5rem 0 4rem !important; }

/* Los tres botones: Tus datos, Tus rutas, Desconectar. Siempre los tres en una linea. */
.menu-cliente {
	display: flex; justify-content: center; gap: 28px;
	margin: 0 auto 10px; padding: 0; max-width: 520px;
}
.menu-cliente a {
	flex: 1 1 0; min-width: 0; max-width: 140px;
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	padding: 10px 4px 8px; border-radius: 16px;
	text-decoration: none; color: #333; font-weight: 700; font-size: 15px; line-height: 1.2;
	transition: background-color .2s;
}
.menu-cliente a:hover, .menu-cliente a:focus-visible { background-color: #f3f3f3; color: #333; }
.mc-circulo {
	width: 84px; height: 84px; border-radius: 50%;
	display: flex; align-items: center; justify-content: center;
	box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
	transition: transform .2s;
}
.menu-cliente a:hover .mc-circulo { transform: translateY(-3px); }
.mc-circulo svg {
	width: 44px; height: 44px; fill: none; stroke: #fff;
	stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
}
/* Los mismos colores que tenian las imagenes de antes. */
.mc-datos .mc-circulo { background: linear-gradient(145deg, #8bc34a, #5a9e1e); }
.mc-rutas .mc-circulo { background: linear-gradient(145deg, #ffb64d, #f17945); }
.mc-salir .mc-circulo { background: linear-gradient(145deg, #ef4b62, #c4142e); }
.mc-texto { white-space: nowrap; }

/* La pagina en la que se esta: fondo suave y el nombre subrayado con el color de la web. */
.menu-cliente a.activo { background-color: #f3f3f3; }
.menu-cliente a.activo .mc-texto { box-shadow: inset 0 -3px 0 #f17945; }

/* Botones del acceso (Acceder, Recordar acceso, No soy Usuario) en clientes_acceso.asp y detalle_ruta.asp.
   Antes solo los separaban dos espacios: en el movil quedaban uno encima de otro, pegados. Ahora el
   hueco es siempre de 10 px, entre los de la misma linea y entre lineas. */
.botones-acceso { display: flex; flex-wrap: wrap; gap: 10px; padding-bottom: 10px; }
.botones-acceso .btn { white-space: normal; margin: 0; }

/* Movil: los tres repartidos a todo el ancho, mas pequenos para que quepan siempre en una linea. */
@media (max-width: 575px) {
	.botones-acceso .btn { flex: 1 1 100%; }
	.zona-privada { padding: 14px 0 2rem !important; }
	/* El recuadro de datos o de acceso lleva 30 px arriba escritos en la pagina (style): en el movil, 12. */
	.zona-privada > .container > .row[style*="padding-top"] { padding-top: 12px !important; }
	.menu-cliente { gap: 6px; }
	.menu-cliente a { padding: 8px 2px 6px; font-size: 14px; gap: 6px; }
	.mc-circulo { width: 64px; height: 64px; }
	.mc-circulo svg { width: 34px; height: 34px; }
}