/**
 *    Nombre:       navegacion-catalogo.css
 *    Descripcion:  Desplegable de los botones Anterior y Siguiente de la ficha del corral y del lote, con la
 *                  lista de los anteriores y los siguientes (WEB-544)
 *    Version:      0.1.1
 *    Creado:       05-10-2026
 *    Modificado:   06-10-2026
 *    Autor:        Sebastian Toyos
 */

/* ancho fijo para que los textos envuelvan sin estirar el menu; en celular no pasa del ancho de la pantalla.
   Con muchos corrales la lista se desplaza adentro del menu */
.navegacion-catalogo
{
	width: 20rem;
	max-width: calc(100vw - 2rem);
	max-height: 60vh;
	overflow-y: auto;
}

/* las portadas vienen con tamaños distintos: cuadradas y recortadas al centro, como en el salto de corral de goplus */
.navegacion-catalogo-foto
{
	width: 3rem;
	height: 3rem;
	object-fit: cover;
	flex-shrink: 0;
}

/* la raza colorada y la negra como en la lista del remate (WEB-548): raza-colorado y raza-negro estan en
   detalle-remate.css, que la ficha del corral no carga */
.navegacion-catalogo .raza-colorado
{
	color: #C62828;
	font-weight: 500;
}

.navegacion-catalogo .raza-negro
{
	color: #000000;
	font-weight: 500;
}

/* con el mouse arriba MDB pinta el renglon de verde con letra blanca: la raza toma ese blanco para leerse */
.navegacion-catalogo .dropdown-item:hover .raza-colorado,
.navegacion-catalogo .dropdown-item:hover .raza-negro,
.navegacion-catalogo .dropdown-item:active .raza-colorado,
.navegacion-catalogo .dropdown-item:active .raza-negro
{
	color: inherit;
}

/* en Siguiente la flechita va a la izquierda y Bootstrap redondea pensando que va a la derecha:
   la flechita queda con la punta de la izquierda y el boton con la de la derecha (10em es el btn-rounded de MDB) */
.btn-group.navegacion-catalogo-izquierda > .dropdown-toggle
{
	border-top-right-radius: 0;
	border-bottom-right-radius: 0;
}

.btn-group.navegacion-catalogo-izquierda > .btn:not(.dropdown-toggle)
{
	border-top-right-radius: 10em;
	border-bottom-right-radius: 10em;
}

/* la flechita se toca con el dedo: 48px de ancho (lleva px-0, el ancho sale de aca; el alto ya lo da el btn de MDB) */
.navegacion-catalogo-flechita
{
	min-width: 3rem;
}

/* con mouse la lista se abre al pararse arriba del boton o de la flechita y se cierra al salir (WEB-547), como los
   submenus de MDB (.dropdown-submenu:hover). En el celular no hay "pararse arriba": sigue abriendo con la flechita.
   La lista sube hasta el borde del boton (.375rem es el margen del .btn de MDB) para bajar a ella sin que se cierre:
   pegada abajo del grupo quedaba una franja de menos de 1px donde el video o la columna de la ficha le ganaban al
   mouse. La flechita no toma el clic: la lista ya esta abierta y el clic le repetia el fundido de MDB y la dejaba
   abierta al salir */
@media (hover: hover)
{
	.btn-group:hover > .navegacion-catalogo
	{
		display: block;
		margin-top: -.375rem;
	}

	.navegacion-catalogo-flechita
	{
		pointer-events: none;
	}
}