/* Menú lateral en vista con fotos (includes/menu-fotos.php). Los títulos y la tarjeta son los
   de la vista original (.menu y .titulo-cat en style.css); aquí solo se añade la miniatura. */
.menu-fotos { container-type: inline-size; }
.menu-fotos .menu ul li a,
.menu-fotos .menu ul li a:hover {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 66px;
    padding: 6px 34px 6px 10px;
}
.menu-fotos .menu ul li img {
    flex: none;
    width: 72px;
    height: 54px;
    box-sizing: border-box;
    padding: 3px;
    object-fit: contain;
    /* El color se elige en el panel (admin/menu-lateral.php); lo define includes/layout-head.php */
    background: var(--color-fondo-fotos-menu, #f1f1f2);
    border-radius: 9px;
}
.menu-fotos .menu ul li a.is-activo {
    background: #e6f0fb;
    font-weight: 700;
}
.menu-fotos .menu ul li a:focus-visible {
    outline: 2px solid #0057b4;
    outline-offset: -2px;
}

/* Columna media (tablet y móvil horizontal): foto más pequeña y sin flecha, para que quepan los nombres largos */
@container (max-width: 260px) {
    .menu-fotos .menu ul li a,
    .menu-fotos .menu ul li a:hover {
        gap: 8px;
        padding: 6px 8px;
        font-size: 0.95em !important;
    }
    .menu-fotos .menu ul li img { width: 52px; height: 39px; }
    .menu-fotos .menu ul li a::after { display: none; }
}

/* Columna estrecha (alquiler.php en tablet): la foto va sobre el texto */
@container (max-width: 200px) {
    .menu-fotos .menu ul li a,
    .menu-fotos .menu ul li a:hover {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
        padding: 8px 10px;
        font-size: 0.92em !important;
    }
    .menu-fotos .titulo-cat { font-size: 1.5em; }
}